Icon

Icon(props): Element | null

Defined in: packages/react/src/ui/Icon.tsx:59

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. After vex generate, IconName is exact, so that only happens via an unchecked cast, any, or a project that has not generated types; 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

IconName for the full set of valid icon names