Icon systems: the quietest, hardest-working brand asset

Your logo appears on the homepage and the invoice. Your icons appear forty times per screen, in the product your customers use every day, at the exact moments they're trying to do something. And yet the logo gets the workshop, the strategy deck and the CEO's opinion, while the icons get downloaded from an open-source set in week twelve.

This is backwards. Icons are the most-touched, least-discussed brand asset most companies own. A well-built icon system carries brand character into the densest, highest-stakes real estate you have — and a poorly governed one quietly dissolves your identity into the same goo as everyone else's product.

The goo problem

Open five SaaS dashboards and squint at their nav icons. Identical. The same featherweight strokes, the same slightly-rounded 24px squares, the same generic "gear, bell, person." Nothing is wrong with any of them individually, and everything is wrong with them collectively: they carry no brand information at all.

We've written before that the identity system matters more than the logo. Icons are the proof. When we rebuilt the product surface for Northwind Ledger, the custom icon set — slightly squared terminals, a distinctive corner treatment borrowed from the wordmark's ampersand — did more to make the product feel theirs than anything above the fold on their marketing site.

Grid decisions are brand decisions

Every icon system lives on a grid, and the grid is where brand character is actually encoded. The decisions that matter:

Canvas and keylines. 24px is the modern default because it divides cleanly across densities, but the shape grammar on top of it (circles, squares, horizontal and vertical rectangles) determines how consistent mixed icons feel. Publish the keyline shapes. Without them, every new icon is a negotiation.
Stroke weight. This is your icon typeface's weight axis. 1.5px vs 2px reads completely differently at 16px and 20px — pick per-size, not one size scaled. A stroke that's elegant at 48px is a spiderweb at 16px.
Corner radius. Sharp, 2px, or fully rounded is a personality choice that should rhyme with the wordmark and the UI's border-radius tokens. Mismatched radii are how icon sets feel "off" without anyone knowing why.
Fill vs stroke. Stroke icons are fashionable; filled icons read faster at small sizes and in low contrast. Many strong systems are hybrid — stroke for the app chrome, filled for tiny inline usage — but the hybrid rule must be written down or it decays into chaos.
Terminal treatment. Round caps feel friendly, square caps feel machined, butt caps feel technical. This is typography for pictograms; choose it like you'd choose a typeface's details.

Metaphor consistency: the invisible rule that breaks first

Icons aren't pictures of things; they're a grammar of metaphors, and mixed metaphors are as jarring in icons as in prose. The classic failure: a set where "edit" is a pencil (an object), "share" is an arrow leaving a box (an action), and "export" is an abstract glyph (a concept). Three icon-design philosophies in one toolbar.

Decide your metaphor register early, and document it with examples:

Object register — icons depict things (a folder, a lock, a calendar).
Action register — icons depict motions (arrows, flows).
Abstract register — icons are learned symbols (the hamburger, the gear).

Strong sets pick a primary register and state exactly when each exception is allowed ("the gear is grandfathered; do not invent new abstracts"). For Pylon Health's telehealth flow, we stayed ruthlessly in object register — a stethoscope, a calendar page, an envelope — because an anxious patient shouldn't have to learn a symbol language to book a doctor.

Custom vs library: an honest accounting

You don't always need bespoke icons. The honest decision framework:

Situation	Verdict
Early-stage product, small surface, no budget	Use a disciplined open set (one family, never three)
Product with dense UI and a real brand to protect	Custom core set (40–80 icons); library for the long tail
Iconic consumer brand, icons are part of the signature	Fully custom, designed alongside the wordmark
Marketing site only	Library, restyled to your stroke and radius rules

The failure mode to avoid is the worst of both: a library set with three rogue custom icons that match nothing. If you customise, customise the rules (stroke, radius, terminals) so library additions can be redrawn into compliance — most good open sets are designed to be redrawn, and a designer can convert one in fifteen minutes.

Budget reality: expect a designer to produce 3–5 finished icons per day including review, not per hour. The 40-icon core set is a two-to-three-week job with the grid work included.

Motion: the layer nobody specifies

Icons increasingly move — hover wiggles, success ticks drawing themselves, nav icons animating on state change. Unspecified, this becomes a mess of inconsistent durations and physics. Specify three things and you've covered 95% of it: a duration (160–240ms, matching your motion identity), an easing curve, and a rule about when motion is allowed (feedback yes, decoration no). Then respect prefers-reduced-motion as a design requirement, not an afterthought — the swap is usually simply "opacity fade instead of draw."

Style rules that survive new designers

The system you hand over will be maintained by people who weren't in the workshop. The documentation that actually survives:

A visual do/don't page. One page, real mistakes, red crosses. It's the only page everyone reads.
Red-line specs for one exemplar icon — the one that shows stroke, radius, terminals and optical corrections all at once.
Optical correction rules. Circles overshoot the keyline; pointed shapes nudge; visual weight beats mathematical alignment. Write down your corrections or every contributor will invent their own.
A naming convention. arrow-right, not final-arrow-v3. Naming is governance: if new icons can be named consistently without asking anyone, the system is healthy.
A contribution path. Who approves new icons, what's the review checklist, where do requests go. Systems without a door become systems everyone climbs through a window into.

We deliver icon systems inside the broader visual identity engagement for exactly this reason — an icon set divorced from the tokens, motion spec and type system it lives among will drift from all three within a year.

Key takeaways

Icons touch users more than any logo; treat them as brand assets, not purchase-list items.
Encode character in the grid: stroke weight, corner radius, terminals, fill/stroke policy.
Pick a metaphor register and document the exceptions, or the set will blend three philosophies by year two.
Customise rules, not just icons — a compliant library beats three rogue bespoke glyphs.
Specify motion (duration, easing, when-allowed) and the reduced-motion swap in the same document.
Document do/don'ts, optical corrections, naming and the contribution path — that's what survives staff turnover.

FAQ

How many icons does a system need to launch? A focused core of 40–80 covers most products' chrome and common actions. Launch with the rule book, not a wall of glyphs — the set will grow by request, and growth is healthy if the contribution path exists.

Stroke or filled icons? Decide per context: stroke for app chrome at 20–24px, filled for small inline sizes and low-contrast surfaces. If you go hybrid, write the boundary rule down explicitly; "designer's feel" doesn't scale.

Should marketing and product share one icon set? Yes — one grammar, different weights if needed. Two icon languages inside one brand reads as two companies. The grid and terminal rules should be identical even if marketing uses a display-weight variant.

When do we know the library set has to go? When the product's density means icons are the most-seen brand element, or when you've started "roughly redrawing" library icons — that's the itch that tells you the rules have outgrown the source.

How do icons relate to illustration? Icons are interface; illustration is narrative. Keep them stylistically related but structurally different — see illustration systems that don't go stale for where the other half lives.