Foundations

Iconography

Line icons on a 24px grid. Decorative, always paired with text, and never emoji.

#The set

A small set, each drawn as a single path. They are inline SVG, currentColor, 1.75px stroke, round caps and joins. The list below is read from the app’s Icon.tsx.

grid

sliders

logout

plus

chevron

check

lock

back

bolt

sales

traffic

box

store

Anatomy

Code

<svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/></svg>

<Icon name="bolt" />

#Rules

Always aria-hidden. The text beside an icon carries the meaning. An icon alone is not a label.
Size. 18px in buttons and nav (.icon), 14px in chevrons, 22px in modal headers, 24px in confirmation circles.
Color. Inherits text color. Teal in panel titles, white on filled accent, amber on the action band.
No emoji anywhere in the UI.
Adding one. Draw it on the 24px grid with the same stroke, then add a single path to the paths map in Icon.tsx. Re-run npm run sync here to list it.

Do

Connect store

An icon that reinforces a visible label.

Don’t

An icon-only button with no accessible name, or an icon used only to decorate.