Icons.

Two families sit side by side. Icons are geometric and crisp — for UI chrome, data, and navigation. Doodles are hand-drawn and warm — for empty states, celebrations, illustrated marketing, and anywhere the product needs to feel human.

16 20 24 32

Using icons

Design principles

• Geometric clarity. Every icon fits a 22×22 optical box inside the 24×24 viewBox, with 1px of optical padding.
• One weight. 1.6 stroke, round caps and joins. The set reads as a family at 16px and at 48px.
• No fills except glyphs. Solid circles (record, ping), solid play/pause, solid dots — everything else is outline-only.
• currentColor inheritance. Never hard-code color. The icon should match its surrounding text.
• Named, never numbered. Always <Icon name="calendar" /> — never an icon font's unicode point.