Foundations

IconsIcon

The Phosphor set: weight, sizes and what not to do

npx shadcn@latest add @umbra/icon

<Icon as={Microphone} /> draws a Phosphor icon with the right weight. Passing weight is unnecessary and not allowed: the weight is chosen by icon name

When to use

For every icon in the interface: in buttons, list rows, chips, the sidebar

When not to use

  • Logo and mascot: these are product SVGs
  • Waiting indicator: only an arc spinner with no backing (Spinner)

Meetings

7 recordings this week

Team standupTue, 10:00 · 32 min
Designer interviewMon, 16:30 · 48 min
Call with contractorFri, 12:00 · 21 min
Mockup reviewThu, 11:00 · 54 min
Sprint retroWed, 17:00 · 40 min
Meeting with lawyerWed, 12:30 · 25 min
Metrics reviewTue, 15:00 · 36 min

Do

  • label="Записать" when the icon is the only content and its meaning isn’t labeled nearby
  • Icon color comes from the parent’s text color: text-primary-ink, text-indigo-ink, text-muted. The -ink colors for icons pass Lc 45 in all themes

Don’t

  • *Circle and *Square variants, Subtitles, QuestionMark: filled, they turn into a solid plate
  • Icons with a backing, a second icon set (lucide etc.), a spinner made from an icon
  • Arrow* arrows (and CloudArrowUp, ArrowsClockwise): show direction only with a bold Caret* chevron. Caught by umbra/no-arrow-icons