Icon
A wrapper component for Lucide icons that provides consistent sizing and styling across the design system.
Overview
- color
- primary · secondary · disabled · error · warning · success · info · accent · inherit
All options
Size and color
Sizes are 32px (large), 24px (medium, the default), 16px (small) and 12px (tiny). inherit takes the color of the surrounding text.
| size \ color | primary | secondary | disabled | error | warning | success | info | accent | inherit |
|---|---|---|---|---|---|---|---|---|---|
| large | |||||||||
| medium | |||||||||
| small | |||||||||
| tiny |
Examples
Common icons
The Icon component supports all Lucide icons. Here are some commonly used icons:
House
Settings
User
Search
X
Check
Plus
Minus
ChevronLeft
ChevronRight
ArrowLeft
ArrowRight
Star
Heart
Bell
Pencil
Copy
Download
Upload
Share
Info
CircleAlert
CircleCheck
Usage
Pass the Lucide icon name as a string to the name prop. Browse all available icons at lucide.dev/icons.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| name | IconName | Yes | — |
| size | 'tiny' | 'small' | 'medium' | 'large' | number | No | — |
| color | 'primary' | 'secondary' | 'disabled' | 'error' | 'warning' | 'success' | 'info' | 'accent' | 'inherit' | No | — |
| strokeWidth | number | No | — |
| className | string | No | — |