Icon

Renders a named icon from one of three bundled collections — Heroicons, Lucide, and aurora's custom SVGs. Sizes auto-select the right icon variant (micro / mini / outline / solid) based on pixel size.

Basic

<Icon name="check" />
<Icon name="trash" />
<Icon name="arrow-right" />

Sizes

size is a number in pixels (default 24). Values drive the auto-selected variant:

• ≤ 16 → micro
• ≤ 20 → mini
• > 20 → outline (or solid if variant="solid")

<Icon name="check" :size="16" />
<Icon name="check" :size="24" />
<Icon name="check" :size="32" />

Variants

Force outline or solid for icons larger than 20px. Sizes ≤ 20 always use micro/mini regardless.

<Icon name="check-circle" :size="32" variant="outline" />
<Icon name="check-circle" :size="32" variant="solid" />

Coloring

Icons inherit currentColor. Apply a Tailwind text-* class to color them.

<Icon name="check-circle" class="text-success-core" />
<Icon name="exclamation-circle" class="text-error-core" />

Adding custom icons

See packages/aurora/src/components/agents.md for SVG requirements (no width/height, currentColor for stroke and fill, keep viewBox). Drop the SVG in src/icons/, register in collections/customIcons.ts.

Props

Prop	Type	Default	Description
name	IconName	required	Icon identifier — autocomplete narrows to all registered names from Heroicons, Lucide, and aurora's customs.
size	number	24	Square size in pixels. Drives the auto-selected variant.
variant	'outline' | 'solid'	auto	Force a specific variant (only honored for size > 20).

Behavior

• Missing icon name logs [Icon] Icon "<name>" not found to the console; the component renders nothing.
• Variant unavailable for the requested icon (custom SVGs may not have all four variants) logs [Icon] Icon variant "<variant>" not available for "<name>" and renders nothing.
• The component sets explicit width/height styles to the requested size, so SVG viewBoxs are scaled correctly regardless of source dimensions.