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
An individually imported icon component, e.g. `icon={Check}` from lucide-react, or any compatible SVG component.
Optional background container behind the glyph.
Extra classes merged onto the glyph, or onto its container when `background` is set.
Accessible label. When provided the icon is exposed to assistive tech with this name; when omitted the icon is decorative and hidden from it.
Glyph size, and the container size when `background` is set.
Glyph color, resolved through Fuji tokens.
Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent