Usage
<Icon> renders a single Lucide icon inline with text. Use it for inline UI references and shortcut hints.
Click the <Icon name="settings" /> icon to open settings.
Press <Icon name="search" /> to focus the search bar.Click the icon to open settings. Press to focus the search bar.
Sizing
Default size is 16px, matching the surrounding body text. Override with the size prop:
<Icon name="rocket" size={12} />
<Icon name="rocket" size={16} />
<Icon name="rocket" size={24} />
<Icon name="rocket" size={32} />Custom color
By default the icon inherits the surrounding text color (currentColor). Override with the color prop:
<Icon name="check-circle" color="var(--docs-success)" />
<Icon name="alert-triangle" color="var(--docs-warning)" />
<Icon name="x-circle" color="var(--docs-danger)" />Success state
Warning state
Error state
Available icons
The icon registry includes ~80 curated Lucide glyphs covering navigation, actions, content, UI, status, dev tools, communications, brand, infrastructure, and design. Common names: rocket, book, code, terminal, search, settings, check, x, info, warning, lightbulb, sparkles, lock, key, user, mail, globe, database, palette.
The full registry lives in src/components/docs/lucide-icon.tsx.
If a name isn't in the registry, <Icon> falls back to rendering it as plain text — so you can pass an emoji as a graceful fallback (<Icon name="🚀" />).
When to use vs component icon prop
<Icon> standalone | Component icon prop | |
| Use case | Inline-with-text references | Decorative icons inside Card, Callout, Step |
| Example | "Click " | <Card icon="rocket" title="..." /> |
| Sizing | Inline with text | Component-defined |
Props
| Prop | Type | Default | Description |
name | string | required | Lucide icon name (kebab-case or camelCase) |
size | number | 16 | Pixel size |
color | string | currentColor | Color override (CSS color or CSS variable) |