Internal · Central v1.17 · team-only
Icons
Icons visually represent moments and actions. Every icon comes from one library, Central, and enters a component through an instance-swap slot, never redrawn. Swap the instance and the whole system updates. One source, always: no Material Icons, no ad-hoc SVGs, no hand-drawn glyphs mixed in.
Licensed set. Internal only. Central is a purchased library from iconists.co. Showing it here is fine for the team, but the source SVGs are not published on any public site or committed to a public repo. This page (and the icon files) stay behind the team wall.
Default style
Section titled “Default style”Central’s configuration, applied as the general rule (Decision Log · D-012):
| Property | Value |
|---|---|
| Style | Line / outline, never filled |
| Stroke weight | 1.5 |
| Corner radius | 2 |
| Stroke join | Round |
| Base size | 24 px |
Stroke, radius, join and fill are properties on the Central component. Change them from the Figma property panel, never by detaching.
- Line-art, stroke 1.5, rounded corners by default. Filled is allowed only in extreme cases, for legibility at very small sizes; justify it and log the exception.
- One library. No Material Icons, no ad-hoc SVGs, no hand-drawn glyphs mixed in.
- Instance-swap, never redraw. Icons enter a component through an instance-swap slot, so swapping the library updates everything.
Stroke weight: the default is 1.5; the panel also offers 1 and 2. Pick by density, not taste.
Size: the base is 24. Scale to 20 in dense rows or 32/48 for feature moments; keep it on the grid, don’t type arbitrary sizes.
How icons are used. Two roles
Section titled “How icons are used. Two roles”Not every icon does the same job. There are two typologies, and they behave differently.
Signage icons. Functional. They carry meaning and help the user act: a bell for notifications, a chevron to go deeper, a trash to delete. They’re load-bearing. Instantly legible, from Central at the standard 24 / 1.5, and they must meet the 3:1 contrast rule below, so they take a text-role token, not brand green. They give sense and guide an action; they’re not there to decorate. This is the majority of icons in the UI. Nav, list rows, buttons.
Illustrative icons. Expressive. Larger and warmer. They set tone and accompany a moment: empty states, onboarding, a feature highlight. They reinforce the message emotionally. Supporting, not the actionable signal. So brand colour and bigger sizes are fine here (decorative, exempt from the 3:1 rule). They aren’t UI iconography and don’t live here: they belong to Brand → Illustrations.
Rule of thumb. If tapping it does something, it’s signage. Keep it standard, legible, on a text token. If it’s there to set a mood, it’s illustrative. It can be bigger and on-brand, but it never replaces the functional signal.
Do / Don’t
Section titled “Do / Don’t”Corners. Always round. Never square/mitre corners. Enlarged on the keyline grid so the join reads:
Stroke. 1.5, uniform. Not heavier, and never mixed weights in one screen.
Colour & ratio. Recolour by role, keep 24×24.
- Add an icon only when it carries meaning the label can’t. Decoration is noise.
- Keep the 24 base, the round join and stroke 1.5; don’t detach to restyle a single instance.
- Recolour only through a role token, never a raw hex. Which green depends on where the icon sits and how thick it is: the two cases are worked out under contrast, below.
Sizing & accessibility
Section titled “Sizing & accessibility”Reviewed in a UI accessibility pass. [AA] = WCAG requirement · [REC] = recommendation.
Size scale: 16 · 20 · 24 · 32 · 48. 24 is the UI default; don’t invent in-between sizes.
16 inline/chips · 20 dense lists · 24 buttons/nav/app bar · 32 empty states & features · 48 onboarding.
Line-art at 1.5 stays legible down to 20; at 16, raise the stroke to 2 (keeping the ~0.125
ratio) or use the fill variant. This is the legibility exception to the outline rule.
Touch targets [REC]: an actionable icon gets a 48 × 48 dp hit area. That is Material’s number, comfortably above the 24 × 24 that WCAG 2.5.8 requires at AA, and above the 44 × 44 of 2.5.5, which is AAA. The visible 24 icon centres in it → 12 dp padding a side; the icon doesn’t grow, the invisible area does. Keep 48 even for a 20/16 glyph, and leave ≥ 8 dp between adjacent targets.
Contrast [AA]: an icon that carries information is non-text content → ≥ 3:1 against its
background. brand/emphasis green reaches 3.24:1 on surface but drops to 2.97:1 on
scheme/background, so it fails on the ground the app actually sits on. Meaningful icons take a
text-role token instead, and the green one is text/accent: 4.83:1 on surface, 4.43:1 on
cream, comfortable on both. That is the green for an icon that has to survive the cream ground.
Check all three modes, and never let colour be the only carrier of meaning. A state is
shape + label, not just colour.
Thin strokes lose their colour [REC]: a 1.5 stroke has almost no area, and the eye needs area
to register hue. text/accent Green/600 is the right green for a word, but on a 24px line icon
it reads as near black. This is a real limitation of the contrast formula too: it scores by
lightness, and it cannot tell you that the green stopped looking green.
So the rule splits in two, and this is the resolution of the tension above. On the cream
ground, a meaningful icon takes text/accent. On a surface, an actionable line icon takes
brand/emphasis Green/500. It stays visibly green at 1.5, and at 3.24:1 on
scheme/surface it clears the 3:1 bar on its own. That last part matters:
because it passes, the rule does not have to ask whether the icon has a label beside it. It works
for a trailing chevron next to a row label and for an icon standing alone.
On scheme/background (cream) the same green falls to 2.97:1. Actionable icons belong on cards, on scheme/surface, exactly like buttons.
Semantics [AA]: a decorative icon (the text already says it) is hidden from the screen reader
(excludeSemantics). A meaningful icon needs an accessible name. An icon-only button always needs a
label/tooltip, even with a 48 target.
Spacing [REC]: icon-to-label gap 8 px (spacing/8), 4 px in dense rows. Centre the icon to
the text’s optical line, not its bounding box. Directional icons (chevron/arrow) sit on the right;
everything else on the left.
Gallery
Section titled “Gallery”The set as it ships today. Line style, stroke 1.5, in a text-role ink token (the meaningful default that passes contrast). Each icon takes whatever colour token its context sets; flip the theme (top right) and the whole grid moves with it.
46 icons · Central v1.17