Component

Icons

One reusable Icon primitive. Pass an individually imported Lucide icon component; it never accepts string names and never imports the whole icon set. Add a semantic tone, a size, and an optional background container.

Plain

With no background the glyph takes the tone color directly.

Sizes

Decorative tones

tone accepts default | muted | subtle | ComponentTone - a purely visual choice, not a status signal.

On a background

A subtle or solid container turns an icon into a compact badge.

Decorative vs labeled

Omit label for decorative icons (hidden from assistive tech); pass label to expose an accessible name.

API reference

Prop	Type	Default	Description
icon	LucideIcon	None	An individually imported Lucide icon component.
size	"sm" \| "md" \| "lg"	"md"	Glyph and container size.
tone	"default" \| "muted" \| "subtle" \| ComponentTone	"default"	Decorative color of the glyph.
background	"none" \| "subtle" \| "solid"	"none"	Optional container behind the glyph.
label	string	None	Accessible name. Omit to mark the icon decorative (aria-hidden).
className	string	None	Additional classes applied to the component root.

iconNone

LucideIcon

An individually imported Lucide icon component.

size"md"

"sm" | "md" | "lg"

Glyph and container size.

tone"default"

"default" | "muted" | "subtle" | ComponentTone

Decorative color of the glyph.

background"none"

"none" | "subtle" | "solid"

Optional container behind the glyph.

labelNone

string

Accessible name. Omit to mark the icon decorative (aria-hidden).

classNameNone

string

Additional classes applied to the component root.