Iconography is the small, repeated visual language a brand uses to label, navigate and decorate — the pictograms in an app, the feature icons on a website, the wayfinding on a wall. Done well, iconography is one of the cheapest ways to make a brand feel coherent, because a user meets dozens of icons in a single session. Done badly, it is the fastest way to make a polished brand look stitched together from three different stock packs. This guide covers how we actually build an icon system that holds together.
The goal is not pretty icons in isolation. It is a set where any new icon, drawn six months later by a different designer, slots in without anyone noticing the join.
Start with a grid and keyline shapes
Every consistent icon set sits on a shared grid. Pick a base canvas — 24px is the common UI default, with 16px and 48px as scaled siblings — and define a live area with padding so icons never touch the edges. Inside that, draw keyline shapes: a square, a circle, a portrait and a landscape rectangle, all tuned so they feel the same visual weight even though their actual areas differ.
These keylines are the secret to a calm set. A circular icon (a clock) drawn to the literal grid square will look bigger than a square icon (a folder) because the eye reads area, not edges. By snapping each icon to its matching keyline, a clock, a folder and a heart all read as the same size when sat side by side in a toolbar.
Lock the stroke weight and corner radius
Two settings do most of the work in making icons look like family:
- Stroke weight — pick one value for the base size (commonly 1.5px or 2px on a 24px grid) and hold it everywhere. Mixed stroke weights are the single most common reason a set looks inconsistent.
- Corner radius — decide whether your brand’s icons are sharp, slightly softened or fully rounded, then apply the same radius to every corner and every terminal. A 2px radius on one icon and a sharp corner on the next breaks the spell instantly.
Write these down as numbers, not vibes. “Soft and friendly” means nothing to the next designer; “2px stroke, 2px outer radius, rounded line caps” reproduces.
Optical alignment beats mathematical alignment
Centring an icon by its bounding box is rarely correct. A play triangle centred mathematically looks shoved to the left, because its visual mass sits right of centre. Nudge it until it looks centred. The same applies to optical sizing: at small sizes, fine detail clogs up, so you simplify — fewer lines, thicker relative strokes, bigger gaps. A good icon system is really three or four optically tuned versions of each idea, not one drawing scaled blindly.
Choosing a style: line, solid or duotone
Most brands settle on one primary style and use a second sparingly for state changes:
- Line (outline) — light, modern, neutral. Great for dense interfaces and reads well at body-text sizes. The default for most software brands.
- Solid (filled) — heavier and more confident, useful for active or selected states, small sizes and high-contrast wayfinding.
- Duotone — a line or solid base with one tint fill, adds warmth and a branded colour without going full illustration. Harder to keep consistent, so commit to clear rules.
A common, robust pattern: line icons as the default, the solid version of the same icon to show the selected tab or active toggle. That gives you a built-in state system instead of inventing new shapes. Iconography like this is part of a wider visual identity, which is why we treat it inside the same system as logo, type and colour in our branding and design work.
Pixel snapping and metaphor clarity
For anything that lives in a UI, pixel snapping matters. Align strokes to the pixel grid so a 1.5px line doesn’t render as a muddy 2px blur straddling two pixels. Keep vertical and horizontal strokes on whole or half-pixel boundaries at your base size. This is the difference between crisp icons and slightly fuzzy ones that no one can quite explain.
Then test the metaphor. An icon has one job: communicate fast, ideally before the label is read. Avoid clever metaphors that need a caption — a floppy disk for “save” survives only because users learned it. When in doubt, test three candidates with people who aren’t on the team and keep the one that lands without explanation. For a Singapore audience, watch for metaphors that don’t translate across cultures: a mailbox flag, certain hand gestures, or seasonal references can read as foreign or unclear.
SVG delivery, accessibility and naming
How icons are built and shipped is as important as how they look. A few practitioner rules:
- Inline SVG for most cases — it is sharp at every size, recolourable with CSS, and accessible. Add
role="img"and anaria-labelfor meaningful icons, oraria-hidden="true"when the icon is purely decorative next to visible text. - Icon fonts only when you must — they are convenient for legacy systems but ship the whole set as one blob, are awkward for screen readers, and limit you to a single colour. Reach for them rarely.
- Optimise the SVG — strip editor metadata, flatten transforms, set a clean
viewBox, and convert strokes to outlines only if you don’t need to recolour live. - Name consistently — pick a convention like
icon-arrow-left,icon-arrow-left-solidand never deviate. Predictable names let developers find icons without asking, and stop duplicates creeping in.
You can see how a tidy icon system supports the rest of a brand across different projects in our work portfolio.
How iconography reinforces a brand
Icons carry brand personality in miniature. Sharp corners and thin strokes read precise and technical; rounded, chunky icons read friendly and approachable. Because users see so many icons so often, that personality compounds quietly in the background. A consistent set also signals competence — the same instinct that makes a tidy shopfront feel trustworthy. Tie the stroke weight to your type’s weight, the corner radius to your logo’s geometry, and the icons stop feeling bolted on and start feeling inevitable.
Frequently asked questions
How many icons does a brand actually need?
Start with what you use, not a giant library. Most websites and apps launch fine with 20 to 50 well-made icons covering navigation, actions and key features. Build more on demand using your grid and style rules, so the set grows consistently instead of arriving bloated and half-used.
Should we draw custom icons or use an open-source set?
For an early-stage product, a quality open set (with a permissive licence) is a sensible starting point and saves real money. Move to custom when iconography becomes a recognisable brand asset, when you need metaphors specific to your product, or when an off-the-shelf set no longer matches your refined style.
What size should icons be designed at?
Design on the grid where the icons will mostly live — 24px for typical UI — then create optically adjusted versions for the other sizes you need rather than scaling one drawing. Always test at the smallest real size, because that is where weak icons fall apart.
Want an icon system that makes your brand feel like one thing? Tell us what you’re building and we’ll help you design a set that scales.
