Icon

Icon(props): Element | null

Defined in: packages/react/src/components/Icon.tsx:58

Renders a Lucide icon by name.

Looks up the icon from the lucide-react icon map at runtime, so tree-shaking applies at the bundler level. Accepts the full Lucide props surface — strokeWidth, absoluteStrokeWidth, all SVG attributes, and ref forwarding. className is extracted and merged through cn() before being passed to the underlying icon component.

Returns null if name does not match a known icon, so a bad string from untyped data cannot throw at runtime. Because LucideIconName is exact, that can only happen via an unchecked cast or any, so outside production the miss is reported once per name with console.warn.

Parameters

props

IconProps

Icon props. See IconProps for all fields.

Returns

Element | null

The rendered SVG icon, or null if the name is unrecognised.

Example

// Basic usage
<Icon name="FileText" />

// With sizing and color
<Icon name="Users" className="size-4 text-muted-foreground" />

// With custom stroke width
<Icon name="Settings" strokeWidth={1.5} className="size-5" />

// Dynamically from a collection's admin.icon string
<Icon name={collection.admin.icon} className="size-4" />

See

LucideIconName for the full set of valid icon names