Icon
Icon component for rendering icons with consistent styling
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
name | IconName | — | — |
icon | LucideIcon | ComponentType<{ size?: number | — | — |
size | number | 'sm' | 'md' | 'lg' | 'xl' | — | |
variant | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'muted' | — | |
iconProps | Omit<LucideProps, 'size'> | — |
Usage
// Use icon names (recommended)
<Icon name="home" />
<Icon name="search" size="lg" variant="primary" />
// Or pass custom icon
<Icon icon={CustomIcon} size={24} />Variants
Style Variants
default
primary
success
warning
danger
muted
Disabled State
default disabled
primary disabled
success disabled
Sizes
sm
md
lg
xl