Ryan Perez · Icon system

Icons that save time.

An icon exists to reduce the time it takes to recognise meaning. If the visitor has to decode it first, it has failed and it goes. {{ total }} icons are loaded here — two families, one colour rule, and a set of layouts that say exactly where each one belongs.

The formula Purpose + Container + Position + Scale + Alignment + Label + State
Family
{{ packLabel }}
Library · {{ familyLabel }}

{{ libCount }} icons, one colour rule

Every icon is masked, not embedded, so it takes the semantic colour of whatever it sits in. Nothing is hard-coded black.
{{ i.name }}
Scale

Seven sizes, seven jobs

{{ s.token }} {{ s.px }}px {{ s.use }}
Anatomy

The glyph is not the target

A 20px icon inside a 44px target. The visible mark and the tappable area are two different decisions.
44px interaction target — the minimum 20px bounding box — the optical area The glyph itself
Colour hierarchy — never all white
{{ c.t }}
Icon & text

Five relationships to text

Leading identifies the action. Trailing says where it goes. Beside beats above once descriptions get long.
Inline Booked out to Q3 2027 — sized to the text, not to the box. Icon + text on one reading line · gap 4–6px
Leading
Download the report Score a process
The icon identifies the action before the label is read · gap 8px
Trailing
Read the Northline case study ryanperez.ca
Direction, disclosure, external destination
Above
Fit, not fixing Three or four features, short descriptions, spacious page.
Gap 16–24px · centred or left
Beside
{{ b.t }} {{ b.d }}
Four or more items, longer copy, faster to scan than above
Connected
Workflows, timelines, process — only if the items really are sequential
Containers

Four containers, and none

If the container communicates category or interaction, keep it. If it only fills space, delete it.
{{ c.t }} {{ c.d }}
In place

Where they actually live

Sidebar navigation
{{ n.t }} {{ n.badge }}
Leading icon + label + trailing badge · one grid, three columns
Inputs
Search 240,720 nodes ⌘K
dana@northline.ca ✓
Leading identifies the data. Trailing carries action or state — never both in one slot.
Icon buttons & badges
{{ b.badge }}
{{ s.t }}
44px target, 22px glyph. The badge never covers the icon's meaning.
Status
{{ s.t }} {{ s.d }}
Shape and word carry the meaning, so colour is never doing it alone.
Spacing

Gap says whether they belong together

{{ g.a }} {{ g.b }}
Roles

Eight roles an icon can have

If it has no identifiable role, remove it. If it performs an action, treat it as a control, not a picture.
{{ r.t }} {{ r.d }} {{ r.ex }}
{{ g.n }}{{ g.t }}
{{ g.role }}
{{ r.a }} {{ r.b }}
Never
{{ n.t }}
Transformations

An icon, run through LAKA

{{ r.a }}{{ r.b }}
Final decision engine
{{ e.t }}
Agent-readable

leading_action_icon

{{ l.t }}