Icons
Spec
A small set, drawn in code. Shown in both themes at 24px.
Rules
- Line icons on a 24px grid, 1.75 stroke, round caps and joins, drawn in currentColor so they take the text color.
- Decorative: hidden from screen readers. The words or accessible name next to them carry the meaning.
- Sizes: 18px by default (
--icon-size); 16px before a button label and in the segmented control. - Symbols that are text, not icons: ▲ for a warning, ⋯ and ⋮ in Help.
Where they live
src/components/icons.tsx(the 24px set),src/assets/icon-plus.svgandicon-minus.svg(from Figma),ErrorIcon.tsx.
Gaps and open questions
- Two drawing standards: the 24px set uses a 1.75 stroke, while Figma's plus and minus are a 16px grid with a 2px stroke. Pick one?
- There are two plus icons (the tab bar's and the segmented control's).
- No icons yet for things the app may need soon: a check (cleared), a warning, info, back, transfer, account.
- Is Figma the source for icons, as it is for components?
Changes
- 1.0.0, Oct 10 2026: First record of what is built: 11 line icons, plus and minus from Figma, the error icon.