Iconography Map · WCN Brand Portal

WCNICONOGRAPHY MAP

Iconography · D

How WCN points.

Six topics — from a single stroke weight to the proof glyphs only WCN draws. One line family on a 24 grid: warm, geometric, precise. Tap any card to open the source.

VERIFIED

NETWORK

LEDGER

SECURE

PROOF

100%

SYSTEM DEFINED

Icon system shipped

6 topics mapped

Dedicated pages — next

03D01 Style & principles PLANNED

Every WCN icon looks drawn by the same hand — a single stroke weight, rounded joinery, and a geometric core. Consistency is the whole point: an icon set is a typeface for objects.

STROKE1.7 px · 24 grid CAPSRound JOINSRound FILLNone · line only

D01.1 · STROKE

1.7, everywhere.

A single stroke weight unifies the set. At the 24 px grid it reads crisp; it scales by the same ratio as the type. Never mix line weights inside one icon.

WEIGHT1.7 px @ 24

SCALEProportional

MIXNever two weights

ENDSRound caps

D01.2 · GEOMETRY

Built from circles & lines.

Forms derive from the circle, the square and the 45° diagonal — the same geometry as the W³ mark. Curves share one corner radius so the family feels cut from one tool.

BASECircle · square

ANGLE45° diagonals

RADIUSOne corner radius

ROOTShared with mark

D01.3 · METAPHOR

Plain before clever.

Choose the obvious metaphor over the witty one. An icon earns its place by being understood in a glance, not admired on inspection — clarity is the brand value.

CHOICEObvious > clever

TESTRead in a glance

CULTUREGlobally legible

ONEOne idea per icon

D01.4 · CONSISTENCY

A typeface for objects.

The set behaves like type: shared rhythm, shared weight, shared optical size. A new icon must sit beside the others as if it always belonged.

RHYTHMShared

OPTICALEqual weight

NEWMust match set

REVIEWAgainst the family

DON'T

Don't mix stroke weights — 1.7 px across the whole set.

Don't fill the line icons — Line only — no solid glyphs.

Don't chase clever metaphors — Obvious reads faster.

Don't add detail — Detail dies at small sizes.

“An icon set is a typeface for objects — every glyph drawn by one hand.”

03D02 Grid & construction PLANNED

Icons are built on a 24-pixel grid with fixed keylines and a live area. The grid is what lets a dozen people draw icons that still look like one set.

GRID24 × 24 px PADDING2 px trim LIVE20 px area KEYLINESCircle · square · rect

D02.1 · THE GRID

Twenty-four.

Every icon is drawn in a 24 px box with a 2 px padding, leaving a 20 px live area. Working at one size keeps stroke and detail consistent across the set.

BOX24 px

PADDING2 px

LIVE20 px

EXPORTMultiples of 24

D02.2 · KEYLINES

Shapes share a footprint.

Circle, square and rectangle keylines give each shape family a consistent visual size. A circle slightly overshoots the square so both read as equal weight.

CIRCLEØ 20

SQUARE18 × 18

RECT20 × 16

OVERSHOOTOptical balance

D02.3 · PIXEL FITTING

Snapped, then softened.

Strokes align to the pixel grid so icons stay crisp at 24 px, then are checked at 2× and 3×. Half-pixel strokes are corrected, not left to blur.

SNAPWhole pixels

CHECK1× · 2× · 3×

HALF-PXCorrected

CENTREOn grid axis

D02.4 · CORNERS & ANGLES

One radius, set angles.

Outer corners use a single radius; diagonals snap to 45° or 30°. These constraints are what make independently-drawn icons feel cut from one block.

RADIUS1 value

ANGLES45° · 30°

JOINSRound

RULEConstrain to unify

DON'T

Don't draw off-grid — Everything in the 24 box.

Don't blur strokes — Snap to whole pixels.

Don't vary the radius — One corner radius across the set.

Don't freehand angles — 45° and 30° only.

“The grid is what lets many hands draw one set.”

03D03 The core set PLANNED

A focused core set covers ninety percent of the product — navigation, actions, status and objects. Ship the few that earn their keep, not a library nobody can find their way around.

SIZE~ 40 core GROUPSNav · action · status FORMATSVG · optimised NAMINGVerb or noun

D03.1 · COVERAGE

Ninety percent, forty icons.

The core set is deliberately small — navigation arrows, common actions, status marks and the key objects of the network. Breadth comes later, only when a real need appears.

NAVArrows · menu · close

ACTIONAdd · edit · share

STATUSCheck · alert · info

OBJECTWallet · node · doc

D03.2 · NAMING

Find it by name.

Each icon is named for what it is or does — verb for actions, noun for objects — with synonyms aliased so search finds it. A good name is half the usefulness.

ACTIONVerb · "share"

OBJECTNoun · "wallet"

ALIASSynonyms mapped

CASEkebab-case

D03.3 · DELIVERY

Optimised SVG.

Icons ship as cleaned SVG — no editor cruft, currentColor strokes, consistent viewBox. The same file drops into web, product and slides without edits.

FORMATSVG

COLOURcurrentColor

VIEWBOX0 0 24 24

CLEANNo metadata

D03.4 · ADDING ICONS

Earned, not added.

A new icon needs a real, repeated need and a review against the set. The bar is high on purpose — an unfindable library is worse than a missing icon.

BARRepeated need

REVIEWAgainst family

OWNERDesign system

REJECTDefault answer

DON'T

Don't ship a mega-library — Forty findable beats four hundred lost.

Don't name by shape — Name by meaning, not "three-lines".

Don't hardcode colour — Use currentColor.

Don't add on a whim — Earn each new glyph.

“Forty icons people can find beat four hundred they can’t.”

03D04 Sizing & alignment PLANNED

An icon is only as good as its placement. WCN fixes a small set of sizes and aligns every icon to the text it sits beside — optically, not just mechanically.

SIZES16 · 20 · 24 · 32 ALIGNOptical to cap-height SPACING8 px from text TARGET44 px tap

D04.1 · SIZES

Four, not forty.

Icons render at 16, 20, 24 and 32 px — matched to the type scale. Below 16 px detail is dropped to a simplified glyph; never scale a 24 px icon to 12.

INLINE16 px

UI20 / 24 px

FEATURE32 px

MIN16 px · simplified

D04.2 · OPTICAL ALIGNMENT

Aligned to the eye.

Icons centre on the cap-height of adjacent text, nudged so circles and triangles look aligned rather than measuring aligned. The eye, not the bounding box, is the judge.

BASELINECap-height centre

NUDGEOptical, per shape

CIRCLESlight overshoot

JUDGEEye over maths

D04.3 · SPACING

Air between icon & label.

A fixed 8 px sits between an icon and its label, scaling with size. Icons never touch text; the gap is part of the component, not an afterthought.

GAP8 px @ 16

SCALEWith icon size

TOUCHNever

TOKENSpacing scale

D04.4 · TAP TARGETS

Small glyph, big target.

A 20 px icon still gets a 44 px hit area. The drawn size and the touchable size are separate decisions — accessibility is never sacrificed for tidiness.

MIN TAP44 × 44 px

GLYPHIndependent

PADInvisible hit area

A11YAlways met

DON'T

Don't scale arbitrarily — Use 16 / 20 / 24 / 32.

Don't box-align only — Trust the optical centre.

Don't crowd the label — Keep the 8 px gap.

Don't shrink tap targets — 44 px minimum, always.

“The icon is the easy part — the placement is the craft.”

03D05 States & motion PLANNED

In product, an icon is rarely still. WCN defines how icons shift across default, hover, active and disabled — and the small, purposeful motions that confirm a tap.

STATESDefault · hover · active · off COLOURInk → vermilion MOTION120–160 ms EASEStandard out

D05.1 · STATES

Four, defined.

Default is ink; hover lifts to a darker ink or vermilion; active fills or inverts; disabled drops to stone at reduced opacity. Every interactive icon ships all four.

DEFAULTInk

HOVERVermilion / darker

ACTIVEFill / invert

DISABLEDStone · 40%

D05.2 · COLOUR SHIFT

Vermilion means active.

Colour change carries the state, not a wobble. Vermilion is reserved for the active or selected icon so it always means "this one" in a row.

ACTIVEVermilion

RESTInk / stone

MEANINGVermilion = selected

ONEOne active per group

D05.3 · MOTION

A confirming tick.

Tap feedback is a 120–160 ms transition — a colour fade, a small scale, or a glyph morph (plus→close). Motion confirms the action; it never loops or decorates.

DURATION120–160 ms

EASEStandard out

MORPHPlus ↔ close

LOOPNever

D05.4 · REDUCED MOTION

Motion is optional.

Under prefers-reduced-motion the state still changes — colour and fill — but the tween is dropped. The icon never relies on movement alone to signal state.

RMHonoured

FALLBACKInstant state

SIGNALColour + fill

NEVERMotion-only state

DON'T

Don't loop idle icons — Motion confirms, then stops.

Don't spend vermilion — Reserve it for active.

Don't animate slowly — 120–160 ms or it feels laggy.

Don't rely on motion — Colour + fill carry the state too.

“An icon’s motion has one job: confirm the tap, then get out of the way.”

03D06 Domain glyphs PLANNED

A Web3 network needs objects no generic set covers — wallets, nodes, chains, proofs. The domain glyphs extend the core set into WCN’s own territory, drawn to the same rules.

SUBJECTSWallet · node · chain RULESSame grid & stroke ACCENTVermilion · sparingly SETExtends core

D06.1 · SUBJECTS

The network’s objects.

Wallet, node, validator, block, chain, token, proof, bridge — the nouns of the protocol. Each gets one clear glyph so the product can name its own concepts visually.

ACCOUNTSWallet · key

NETWORKNode · validator

LEDGERBlock · chain

VALUEToken · proof

D06.2 · SAME RULES

Drawn to the grid.

Domain glyphs follow the exact construction of the core set — 24 grid, 1.7 stroke, round joins. They must sit in a toolbar beside a plain arrow and look like siblings.

GRID24 px

STROKE1.7 px

TESTBeside core icons

FEELSiblings

D06.3 · ABSTRACTION

Concept, not hardware.

A node is a connected point, not a server photo; a wallet is a held value, not a leather fold. Glyphs picture the concept so they survive as the technology changes.

NODEConnected point

WALLETHeld value

AVOIDLiteral hardware

LASTSConcept-level

D06.4 · ACCENT USE

Vermilion, with meaning.

On dark surfaces domain glyphs may carry a vermilion accent to mark the active or verified state — the same rule as everywhere: the colour means something, never decoration.

ACCENTVermilion

ONDark surfaces

MEANSActive / verified

RULENever decorative

DON'T

Don't draw hardware — Picture the concept, not the box.

Don't change the stroke — Same 1.7 px as the core.

Don't over-accent — Vermilion means a state.

Don't overload meaning — One concept per glyph.

“The domain glyphs let the product name its own world — in the brand’s hand.”

One hand drew them all

A single line, on a single grid.

One stroke weight, one grid, one set of terminals — so every glyph, from a chevron to a proof seal, looks cut by the same hand. Next: a dedicated page per topic, the way B1–B6 break down colour.

WCN Iconography Map · 6 topics · D1–D6

03 · VISUAL · D · v1.0