Foundations
Iconography
Outline glyphs on a 24px grid — 2px stroke, round caps and joins, rendered at 16–26px. Icons inherit text color, so the warm ramp does the theming.
Domain set
calendarToday tab, cycle, dates
activityInsights tab
folder-plusTreatments tab
heart-pulseLog Symptoms
dropletLog Period, flow levels
moonLog Sleep, sleep inputs
plusFAB, add actions
eyePrivacy mode
searchTag search bars
bellNotifications (Figma intent — not shipped)
The icon-in-tile pattern
Icons that act as wayfinding (log drawer rows, onboarding step markers) sit in a 48px tile with 10–14px radius on the accent tint. The orange glyph + cream tile pairing is one of the most recognisable Peri moments.
Rules
| Property | Spec |
|---|---|
| Grid | 24px viewBox, rendered 16–26px |
| Stroke | 2px (2.5px for the FAB plus) · round caps and joins |
| Color | inherits text color — --text2 inactive · #C2581D active · white on gradient |
| Fills | none — outline only |
| Emoji | content only (🔍 search, ⚡ Peak tag) — never UI chrome |
Source
Shipped icons are inline Feather-style SVGs; the Figma Icons section (node 20:2976) is the visual reference. New icons should be drawn on the same grid before being added here.
Accessibility
- —Icons never appear without a visible text label in navigation; standalone icons (privacy eye, bell) carry
aria-label. - —Active state is encoded by both color (#C2581D) and label weight — never color alone.