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.

Name	Usage
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 using registerIcons(). This lets you swap the entire icon set (e.g. heroicons → lucide) without touching component code.

Registering theme icons

tsx
import { registerIcons } from '@astryxdesign/core/Icon';
import { XMarkIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
registerIcons({
  close: <XMarkIcon />,
  chevronDown: <ChevronDownIcon />,
  // ... override as many as needed
});

Adding New Icons

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

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