Icons · Subconscious

Icons 32 marks · 24×24 · 1.5px ink stroke · no fill

A mark, not a picture.

Icons are marks: 1.5px ink stroke, 24×24 grid, no fill. The sprite icons.svg holds all 32. Each mark is a <symbol> with an icon-NAME id; open the file to read the ids.

§A · Drawing rules

VIEWBOX0 0 24 24 · always · padding lives inside the path, not in the box

STROKEcurrentColor · width 1.5 · linecap square · linejoin miter

FILLnone — the only fills permitted are inside icon-circle-dot and icon-spinner

SIZES14 inline · 16 buttons · 20 alerts & nav · 24 default · 32+ empty states

COLORalways currentColor — the icon inherits text color, never declares its own

IDS32 <symbol> ids in icons.svg · the examples below draw a few of them

USAGE<svg class="ic"><use href="icons.svg#icon-run"/></svg>

PAIRINGleading the verb · 8px gap · baseline-aligned (never centered with the cap-height)

A11Ydecorative when redundant with text → aria-hidden="true" · meaningful → role="img" + <title>

§B · Size ramp · the icon scales by context, not by drawing

14px · inline

Inline ↗ in body text · external links

16px · button

Button leading the verb · 8px gap

20px · alert

Alert channel marker · banners

32px · empty

Empty state ledger headers · zero state · charts

A 24px icon scaled to 14px is the same drawing — we never thicken the stroke for small sizes. If a 14px mark looks fragile, that's the right behavior; it's whispering.

§C · In context · how marks live next to type

PRIMARY BUTTON

ALERT

Stale priors — last refreshed 26.02

CHIPS

3 filters 2,047 agents live

SIDEBAR

Library

Simulations · 38

Decisions · 7

Audiences · 21

§ Composition rules

One stroke. Every mark is drawn at 1.5px. We never have a 2px outline with a 1px detail.

One tone. No two-tone duotone marks. They become illustrations, and we have illustrations elsewhere.

Square caps · miter joins. The marks share the geometry of the type — Inter Tight caps and IBM Plex Mono ends are not rounded, and neither are these.

Inherit color. An icon is the color of its surrounding text, always. The only exception is the red signal channel.

§ Banned

Filled icons (Material-style)

Two-tone or duotone marks

Rounded corners or rounded caps

Hand-drawn / sketchy variants

Emoji as system iconography

Color icons that don't inherit currentColor

An icon used without (or as a substitute for) a label, except close · search · live

32 marks one sprite · Source icons.svg#icon-NAME · Color currentColor · A11y aria-hidden when beside text