Brand · Iconography

One line weight, one grid, one accent.

The functional icon system already implicit in Navbar, Footer, Checkbox and Select — written down.

System rules

Codified from the icons already shipping in this system (Navbar's arrow, NavigationMenu's chevron, Checkbox's check, Footer's pin and envelope) — nothing new invented here.

Grid

24×24 unit square. (The separate gold schematic illustrations — PCB traces, device frames — live on their own 200×200 canvas; that's a different family, covered on the Components pages.)

Stroke

2px at the 24×24 grid (2.2–2.4px on the smallest chevrons/arrows, where a hair more weight keeps them from vanishing at 10–14px). Never thinner than 1.5px, never a bold 3px+ glyph outside the Checkbox tick.

Caps & joins

Round caps, round joins — always. No sharp miters; this is what keeps the glyphs feeling machined rather than drafted.

Corners

Any rectangular glyph gets a modest rx (≈2, matching --radius-sm) — never a fully rounded/pill icon container, and never a hard 90° box.

Filled vs. outline

Outline only, fill:none — every icon in this system today (arrow, chevron, check, pin, envelope) is a stroke glyph. No solid/filled icon variant exists or should be introduced.

Color

currentColor by default, inheriting ink-foreground or foreground from its section. The one accent an icon is allowed to pick up is desert gold — exactly as Footer's location pin and mail glyph already hardcode stroke="var(--brand-gold)". Brand green never touches an icon; it's reserved for buttons and links.

Default size

20px is the documented reference size below. In real UI, icons run smaller still in context — 10–16px inside nav chevrons, footer glyphs and the Checkbox tick.

Icon set — reference sizes

Eight icons this business actually needs, drawn to the rules above, shown at their real 20px size on both backgrounds.

On ink

Sensor
Circuit board
Signal
Database
Mobile app
AI / chip
Shield / HSE
Maintenance

On sand

Sensor
Circuit board
Signal
Database
Mobile app
AI / chip
Shield / HSE
Maintenance

Incorrect usage

Mixed stroke weights in the same row — the single most common way an icon set stops reading as one instrument panel.

1px
2px
4px

Reason: every icon in this system is drawn at one weight (2px). Sitting a 1px hairline and a 4px bold glyph next to a correct 2px icon makes the row look like three different icon libraries, not one brand.