Iconslucide
Lucide, the set shadcn/ui ships with: one-stroke outline icons that sit with Geist. Five sizes and two colours, and a house set of the icons JSP products reach for first.
Foundation- Package
- lucide-react
- Sizes
- 12px · 16px · 20px · 24px · 32px
- One set
Lucide only, so stroke and corner style match across products.
- Tokens
size-icon-xs … xl, and text-icon-default or text-icon-subtle for colour.
- Labelled
Decorative icons are aria-hidden; an icon on its own gets a name on its button.
House set
Search, then select an icon to copy its component name.
83 of 83 – select one to copy its name
Sizes
Next to the text style each one sits with.
size-icon-xs12pxNotifications
size-icon-sm16pxNotifications
size-icon-md20pxNotifications
size-icon-lg24pxNotifications
size-icon-xl32pxNotifications
Usage
Inside shadcn components, leave sizing to the component. Elsewhere, use a size token and an icon colour.
- Beside words, an icon is decoration: aria-hidden.
- On its own, the button carries the name: aria-label.
- Status always pairs an icon with words, never colour alone.
- Keep lucide’s default stroke; don’t mix in filled icons.
icons.tsx
import { Trash2 } from "lucide-react"
// Beside a label: decorative, so hidden from assistive tech. shadcn sizes it.
<Button variant="outline">
<Trash2 data-icon="inline-start" aria-hidden /> Delete
</Button>
// On its own: the button needs a name.
<Button variant="ghost" size="icon" aria-label="Delete draft">
<Trash2 aria-hidden />
</Button>
// Outside a component: a size token and an icon colour.
<Bell aria-hidden className="size-icon-md text-icon-subtle" />