Primary usage
A single icon in a soft, colour-tinted rounded container — the default light theme, brand colour, medium size.
Featured Icon
The Untitled-UI-style icon-in-a-decorative-container, used atop empty states and alerts. Six themes, five colours, four sizes.
$
Registry itembunx shadcn@latest add @nx-ui/featured-iconInstalls withutils
Six themes
light (soft tint), gradient (glowing pill), dark (embossed chip), modern (neutral card), modern-neue (soft emboss) and outline (target reticle) — all token-driven so they flip in dark mode.
light
gradient
dark
modern
modern-neue
outline
Themes × colours
The full matrix: six themes down, five semantic colours across, shown at the large size.
brandgrayerrorwarningsuccesslightgradientdarkmodernmodern-neueoutline
Sizes
Four sizes — sm, md, lg, xl — shown here in the gradient theme.
Semantic colours in context
Pick the colour that matches the message: warning for a moisture alert, error for a failed collection, success for a completed batch.
In an empty state
The canonical placement: centred atop a card's title and description, drawing the eye before any copy.
No collections scheduled
Riverside Waste Movement has no pickups booked this week. Schedule one to keep bins moving off site.
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
icon | React.ComponentType<{ className?: string }> | React.ReactNode | — | — |
color | Color | "brand" | — |
size | Size | "md" | — |
theme | Theme | "light" | — |
…extends React.ComponentProps<"div">