Icons

The set

DayTwo uses Phosphor as its single icon family — across the design system, the docs, and the app — at a consistent size, so icons read as one system rather than a grab-bag. On the web (@phosphor-icons/react) and on device (phosphor-react-native), the same names render the same glyphs. Phosphor ships matched weights (regular, bold, fill, …) from one family, so where a control needs an "active" state — like the nav bar — we use the solid fill weight instead of swapping in a second icon set.

How to use them

• Always pair an icon with a label for anything a user acts on.
• One size, one stroke within a context — don't mix bold and hairline icons side by side.
• Use familiar metaphors (a camera for "photo", a receipt for "receipt"). If a concept has no obvious icon, use a word instead of a clever symbol.
• Match the icon to the text size so the two sit on the same visual line.

When NOT to

• ❌ Don't ship an icon-only button for an important action — the user shouldn't have to decode it.
• ❌ Don't use an icon whose meaning isn't obvious to a first-time, non-technical user.
• ❌ Don't decorate every label with an icon; too many icons is as noisy as none.

What user problem this solves

Comprehension and confidence. Many DayTwo users read slowly or are new to apps. A label removes the guesswork; the icon then makes that label faster to find next time. Together they're quicker than either alone — and safe, which matters when the action involves money.