The Grid Icons · 24px grid, one stroke weight, CSS-controlled color and size, no filter
Foundations
Every one of these is drawn once, then dropped in anywhere with <svg class="icon"><use href="#i-search"/></svg>. No icon carries its own color or size — both come from CSS, exactly like a letter of text does. This page replaces two things that were faking icons until today: the single-character .tick badges on every index card, and the raw emoji in the states styleguide's empty-state demo.
Two rules make every instance below possible. Color comes from currentColor — the icon reads whatever CSS color is active on it. Size comes from leaving width/height out of the icon itself — the default CSS sizes it to 1em, so it tracks the surrounding text, and any instance can override with a fixed pixel value instead.
same symbol, sized and colored by the wrapping CSS only
Mechanism
currentColor + no baked-in size
Nothing inside the symbol ever needs to change again.
Every symbol: fill="none" stroke="currentColor". Never a hex value.
Every symbol: viewBox only, no width/height. CSS decides render size.
Same icon, same <use> reference, five different font-size values. Nothing distorts at either end because a curve is a formula, not a grid of pixels — the browser re-solves it at whatever size CSS asks for.
14px
20px
28px
40px
64px
Scale
14px to 64px, one source
A ~4.5x size range with zero redrawing.
Stroke width scales proportionally with the icon — a bigger icon gets a proportionally bolder line, which keeps visual weight consistent instead of going thin and fragile at large sizes.
Why 14px still reads clean: the construction rules in job 05 — generous padding, no fine interior detail — are what keep the smallest size legible, not the CSS.
02
Color, live
Same gear, six CSS colors, no edits to the source. The icon doesn't know whether the color it's wearing is a decorative accent or a signal color — that distinction lives entirely in which CSS variable gets handed to it.
teal
violet
magenta
charcoal
pass
fail
Recolor
One symbol, any token
Works identically for decorative accents and signal colors.
If it ever looks wrong recolored, the bug is a stray hex left in the symbol — not the CSS.
03
The ten icons — drag to resize
Chosen to replace what this codebase was already faking with text — mail for the empty-state emoji, check/close/alert to pair with the pass/fail/warn signal colors — plus the small set of actions almost every app screen needs eventually. Each one has its own slider (12-120px) so the scaling claim from job 01 isn't just five fixed screenshots — drag any icon yourself and watch the same source stay clean at every size.
search
28px
gear
28px
check
28px
close
28px
alert
28px
mail
28px
chevron
28px
plus
28px
minus
28px
inbox
28px
04
In buttons, pills, badges — or alone
Every icon below is the same symbol used in job 03. Only the surrounding element changed — never the SVG source.
FilterConnectedFailedNeeds review
05
Construction rules — for the next icon
The rules that keep this set legible at 14px and consistent as it grows. Follow them before adding icon eleven.
01
24x24 viewBox, always.Every icon shares one coordinate grid so they align when placed side by side at any size.
02
2px stroke, round caps and joins, no exceptions.A mixed set of stroke weights is the fastest way an icon set starts looking assembled rather than designed.
03
Pad in ~2.5-3 units from every edge.A line that reaches the frame edge is the most common reason a shrunk icon looks clipped or cramped.
04
Fill stays almost never used.Only the alert icon's exclamation dot is filled, and that's deliberate — a single filled dot reads at any size where a thin outline circle would disappear.
05
No SVG filters, ever, in this set.The hand-drawn wobble belongs to the lead-page pencil set, which hand-authors its jitter into the path data instead — see that page for why a live filter can't do this job.
Where this set stops: this is a foundation, not a final 40-icon library. Add the eleventh icon only when a real screen needs it — a set built ahead of need drifts from the rest of the system's "earned complexity" rule.
06
Social & brand marks — the earned eleventh
Three additions past the original ten, and each one exists because of a specific need, not a hunch: every playbook footer needed a real link to LinkedIn, X, and the Signal Thinking newsletter. Two keep the outline mechanism. The third — i-x — is the one documented fill exception in this set, because a thin outline X is invisible next to i-close at footer size.
Social & brand marks — the earned eleventh
i-x— is the one documented fill exception in this set, because a thin outline X is invisible next toi-closeat footer size.Earned, not anticipated
Added when the footer across every playbook page turned out to need them, not before.
.footdemo/.socials/.social— is copied verbatim into every playbook page's own footer.