The Icon component renders the Lucide icon set with Aidos sizing and semantic colors. IconType is generated from Lucide, so every supported name is available through TypeScript autocomplete.
| Prop | Type | Required | Description |
|---|---|---|---|
| icon | IconType | Yes | The icon identifier (e.g., "check", "github") |
| size | Size | Yes | Icon size: "xsmall" (8px), "small" (12px), "medium" (18px), "large" (24px), "xlarge" (32px), "xxlarge" (48px), "xxxlarge" (64px) |
| color | TextColor | Yes | Icon color, including "inherit" for contextual foreground color |
| ariaLabel | string | No | Accessible label for screen readers |
Icons come in seven predefined sizes to maintain consistency across your application.
<Icon icon="star" color="primary" size="xsmall" /> // 8px
<Icon icon="star" color="primary" size="small" /> // 12px
<Icon icon="star" color="primary" size="medium" /> // 18px
<Icon icon="star" color="primary" size="large" /> // 24px
<Icon icon="star" color="primary" size="xlarge" /> // 32px
<Icon icon="star" color="primary" size="xxlarge" /> // 48px
<Icon icon="star" color="primary" size="xxxlarge" /> // 64px
Icons inherit semantic colors from the theme system, ensuring they adapt correctly to light and dark modes.
<Icon icon="heart" color="primary" size="large" /> // Main content color
<Icon icon="heart" color="secondary" size="large" /> // Secondary content
<Icon icon="heart" color="highlight" size="large" /> // Accent/brand color
<Icon icon="heart" color="negative" size="large" /> // Error/destructive
<Icon icon="heart" color="subtle" size="large" /> // Muted/disabled
<Icon icon="heart" color="light" size="large" /> // Light/inverted
A selection of commonly used icons:
// Action icons
<Icon icon="check" color="primary" size="medium" />
<Icon icon="x" color="negative" size="medium" />
<Icon icon="search" color="secondary" size="medium" />
// Social icons
<Icon icon="github" color="primary" size="medium" />
<Icon icon="twitter" color="primary" size="medium" />
Always provide an ariaLabel when the icon conveys meaning that isn't available through surrounding text.
// Decorative icon (no label needed if text explains it)
<Button>
<Icon icon="download" color="light" size="small" />
Download
</Button>
// Meaningful icon (needs label for screen readers)
<Icon
icon="triangle-alert"
color="negative"
size="medium"
ariaLabel="Warning"
/>
By default, Iconify loads icons asynchronously from a CDN. To prevent flickering on initial render, you can preload icons by bundling them with your application.
Option 1: Preload an entire icon set
npm install @iconify-json/lucide
import { addCollection } from "@iconify/react";
import lucideIcons from "@iconify-json/lucide/icons.json";
// Call once at app initialization (e.g., in _app.tsx)
addCollection(lucideIcons);
Option 2: Preload individual icons
npm install @iconify-icons/lucide
import { addIcon } from "@iconify/react";
import lucideCheck from "@iconify-icons/lucide/check";
import lucideClose from "@iconify-icons/lucide/x";
addIcon("lucide:check", lucideCheck);
addIcon("lucide:x", lucideClose);
Browse the Lucide icon directory and pass its kebab-case name directly, such as search, circle-alert, or panel-left. Aidos intentionally does not support alternate icon sets, provider overrides, or arbitrary Iconify names.