Components

Icon

Use icons from Lucide icon library

Display icons from the Lucide icon library with customizable size and color.

Basic Usage

<Icon name="home" />
<Icon name="settings" />
<Icon name="user" />
<Icon name="search" />
<Icon name="menu" />

Sizes

<Icon name="star" size="sm" />   // 16px
<Icon name="star" size="md" />   // 20px
<Icon name="star" size="lg" />   // 24px
<Icon name="star" size="xl" />   // 32px
<Icon name="star" size={48} />   // 48px

Colors

<Icon name="heart" color="#ef4444" />
<Icon name="heart" color="#22c55e" />

Pre-built Icons

Common status icons are available as named components:

Check Error Info Warning

<CheckIcon />
<XIcon />
<InfoIcon />
<WarningIcon />

Props

namestringrequired

Lucide icon name in kebab-case (e.g., “chevron-right”, “home”)

size'sm' | 'md' | 'lg' | 'xl' | numberdefault: 'md'

Icon size (sm=16px, md=20px, lg=24px, xl=32px, or custom number)

colorstring

CSS color value (e.g., “#ef4444”, “red”)

classNamestring

Additional CSS classes

Browse all available icons at lucide.dev/icons.