Skip to content
Design System
Contact

Icons

A curated lucide set at 16px and 1.75–2 stroke. Search and copy the import.

Foundationslucide-react

Browse

194 lucide icons the product uses, in 13 categories. Size and stroke update the whole grid; clicking an icon copies its import and shows its usage below.

Search by name, keyword or category
Size
Stroke
194 icons
Selected
16px
20px
24px

Sparkles

AI and dev

Found by: ai, magic, generate

Sparkles.tsxtsx
1import { Sparkles } from "lucide-react"
2
3// Next to text: decorative, lucide adds aria-hidden for you
4<Sparkles className="size-5" strokeWidth={1.75} />
5
6// Icon-only button: the label goes on the button
7<Button variant="ghost" size="icon" aria-label="Describe the action">
8  <Sparkles strokeWidth={1.75} />
9</Button>

Size and stroke

Lucide draws on a 24px grid, so every size scales cleanly. Stroke is where the weight comes from.

Size and stroke
Icons rendered at each size and stroke width
SizestrokeWidth 1.5strokeWidth 1.75strokeWidth 2
14pxsize-3.5Badges, dense rows
16pxsize-4Default UI
20pxsize-5Section and empty states
24pxsize-6Hero and illustrations

Highlighted: the default. At 16px a 1.5 stroke turns faint next to 13–14px text; larger icons can drop to 1.5 to keep optical weight even.

Usage rules

  • size-4 in UI

    Buttons already size child icons to 16px. Reach for size-3.5 in badges and dense rows, size-5 only for section and empty-state icons.

    <Button><Plus /> Add row</Button>

  • Stroke 1.75 to 2

    Match the weight of the text beside the icon. 1.75 next to regular text, 2 inside buttons and on brand fills.

    <FileText className="size-4" strokeWidth={1.75} />

  • Icon-only buttons need a name

    Put aria-label on the button, not the svg, and repeat it in a tooltip for pointer users.

    <Button size="icon" aria-label="Delete row"><Trash2 /></Button>

  • Decorative icons stay silent

    lucide 1.x adds aria-hidden to any icon without an aria prop, so an icon next to its label is skipped by screen readers. Keep it that way.

    <span><Check /> Saved</span>
Do
Saved
Don't

Unlabelled, oversized and hairline: no accessible name, and it outweighs the text around it.

Accessibility

Keyboard

Move into the icon grid (one stop)
Tab
Move between icons
←or→or↑or↓
First or last icon
HomeorEnd
Copy the import
EnterorSpace

Semantics and ARIA

  • Each tile is a <button> named after the icon, with aria-pressed marking the one shown in the detail strip.
  • The grid uses a roving tabIndex, so the 190-odd tiles are a single tab stop; arrow keys follow the visual columns at any width.
  • The result count is an aria-live region, so filtering announces how many icons match.
  • Copy confirmation arrives as a toast, which sonner announces politely without moving focus.
  • Imports are named, never import * as Icons, so only the icons a page renders are bundled.