Foundations

Iconography

Lucide is the system. 2px stroke, rounded caps and joins. UI lives at 16/20/24px; xs/sm and 2xl/3xl/4xl exist for tight chips, empty states, and hero illustrations.

Size tokens

Eight canonical sizes. Pick by intent — --icon-md is the default for inline-with-text usage. Anything larger than --icon-xl is for empty states, hero illustrations, or section markers, not standard UI.

TokenValueUsage

--icon-xs

12px

Tight chips, inline meta

--icon-sm

14px

Compact buttons, dense tables

--icon-md

16px

Default UI · inline with text

--icon-lg

20px

Cards, list rows

--icon-xl

24px

Section markers, empty states

--icon-2xl

32px

Feature cards, onboarding

--icon-3xl

40px

Hero illustrations

--icon-4xl

48px

Empty-state marquees

UI sizes (canonical 3)

Most product UI uses just these three. Anything else lives in the broader size-tokens table above.

16px

UI · default · alongside text

20px

Cards, list rows

24px

Section markers, empty states

Library sample

A starter set. Full Lucide library available.

home

settings

bell

user

check

plus

minus

arrow-right

chevron-down

calendar

file

map

camera

cloud

umbrella

shield

zap

clipboard

Usage

Pair icons with labels in primary navigation. Use 16px alongside body text, 20px in lists, 24px for section markers.

Don't

Use icons alone for destructive actions or unfamiliar concepts — always include a tooltip or label.