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' | 'success' | 'warning' | 'destructive' | 'muted' | — | |
iconProps | Omit<LucideProps, 'size'> | — |
Usage
// Use icon names (recommended)
<Icon name="home" />
<Icon name="search" size="lg" variant="default" />
// Or pass custom icon
<Icon icon={CustomIcon} size={24} />Variants
Style Variants
default
success
warning
destructive
muted
Disabled State
default disabled
success disabled
warning disabled
Sizes
sm
md
lg
xl