Icons

Semantic icon names available in the design system. These adapt to the active theme's icon registry.

Available Names

Components that accept an icon prop use IconType: either a semantic name string or a direct SVG component. The semantic names below are resolved through the global icon registry.

NameUsage
close
Dismiss, close dialogs/panels
chevronDown
Dropdown triggers, expand/collapse
chevronLeft
Navigate back, previous
chevronRight
Navigate forward, next
check
Checkbox checked, confirm
success
Success status indicator
error
Error status indicator
warning
Warning status indicator
info
Info status indicator, tooltips
calendar
Date pickers, scheduling
clock
Time pickers, timestamps
externalLink
Links opening in new tab
menu
Hamburger menu, navigation toggle
moreHorizontal
Overflow menu, additional actions
search
Search inputs, find
arrowUp
Sort ascending, move up
arrowDown
Sort descending, move down
arrowsUpDown
Sortable column indicator
funnel
Filter controls
eyeSlash
Hidden/visibility toggle
viewColumns
Column visibility settings
copy
Copy to clipboard
checkDouble
Copied confirmation
wrench
Settings, configuration
stop
Stop/cancel action
microphone
Voice input, audio recording

Custom Icons

For icons not in the semantic list, pass an SVG component directly. Any ComponentType<SVGProps<SVGSVGElement>> works; Icon applies size and color styling automatically.

Using custom SVG components
tsx
import { PhotoIcon } from '@heroicons/react/24/outline';
import { HeartIcon } from 'lucide-react';
​
<Icon icon={PhotoIcon} size="lg" />
<Icon icon={HeartIcon} color="negative" />

Theme Overrides

Themes can replace the default SVGs for any semantic name with the icons field in defineTheme(). This lets you swap the icon set (e.g. heroicons → lucide) without touching component code, and keeps lookup scoped to the active theme instead of mutating global defaults.

Theme-scoped icons
tsx
import {defineTheme} from '@astryxdesign/core/theme';
import {XMarkIcon, ChevronDownIcon} from '@heroicons/react/24/outline';
​
export const brandTheme = defineTheme({
  name: 'brand',
  icons: {
    close: <XMarkIcon />,
    chevronDown: <ChevronDownIcon />,
  },
});

Adding New Icons

To add a new semantic icon name to the design system:

  1. Add the name to IconName type in packages/core/src/Icon/globalIconRegistry.tsx
  2. Add the default SVG to packages/core/src/Icon/defaultIcons.tsx
  3. Add a row to the Available Names table in packages/cli/docs/icons.doc.mjs