Icons are the smallest things in a brand and the first to fall apart. One designer draws a 24px outline cart, someone else drops in a filled bag from a stock pack, a third grabs an emoji because the deadline is tonight. Three weeks later the product looks like it was assembled from four different brands, because at the level of icons, it was.
A real iconography system fixes this before it starts. It is a set of construction rules that lets anyone draw a new icon next year and have it sit beside the originals as if the same hand made it. That consistency is the whole point, and it is harder to fake than people expect.
What a brand iconography system actually is
An iconography system is not a folder of SVGs. It is the grid, the geometry, the stroke logic, and the metaphor language that produce those SVGs, written down clearly enough that a new icon is a decision instead of an argument.
Think of it the way you think of typography. A typeface is not a pile of letters; it is a consistent set of decisions about weight, contrast, terminals, and proportion applied across every glyph. Icons work the same way. They are a visual alphabet, and the system is the design DNA that keeps the alphabet coherent as it grows. This is one layer of the larger structure described in what is a brand system, and it tends to be the layer teams skip until it breaks.
Icons are a language. A system is the grammar that keeps every new word sounding like the same speaker.
The test is simple. Hand the rules to a competent designer who has never seen your set and ask for three new icons. If they come back matching, you have a system. If they come back close-but-off, you have a pile of files and a style nobody can reproduce.
Start with the grid and the keylines
Every icon in a family should be built on the same canvas. Pick one base size for design, usually a 24px artboard, and define a live area inside it so icons never touch the edges. A 2px padding on a 24px grid is a common starting point, leaving a 20px working space.
Inside that canvas, set keyline shapes. These are the underlying square, circle, and rectangle that icons snap to so a circular icon and a square icon read as the same visual weight. Without keylines, a perfect circle drawn to the full width looks larger and heavier than a square drawn to the same width, because the eye weighs area, not bounding box. The keyline grid is the quiet trick that makes a mixed set feel calm.
Decide your alignment to the pixel grid early. Icons that render at small sizes need their strokes and edges to land on whole pixels, or they blur. If you design on a 24px grid but ship at 16px and 20px, test at those sizes during design, not after. An icon that is crisp at 24 and mush at 16 has failed at the size people actually use it.
The decisions that make icons feel like one family
A handful of choices, made once and applied everywhere, do most of the work. Get these consistent and even a junior can extend the set.
- Stroke weight. One weight across the set, expressed as an absolute value at your base size (for example 1.5px on a 24px grid). Resist the urge to thicken strokes on “busy” icons; instead simplify the icon.
- Corner radius. Pick a corner treatment, sharp, slightly rounded, or fully rounded, and hold it. Corners are personality. A 2px radius and a 0px radius produce two different brands.
- Terminals and caps. Round caps versus butt caps change the entire mood. Choose one and never mix them in the same set.
- Fill versus outline. Decide whether your system is outline, filled, or a duotone of both, and define when each is used. Outline for default states, filled for active states is a workable rule, but it has to be a rule, not a vibe.
- Optical correction. Build in deliberate overshoot. A diagonal stroke often needs to be slightly heavier than a vertical one to read as equal. Trust the eye over the math.
- Metaphor consistency. Settle on one object for one concept. If “settings” is a gear, it is always a gear, never sometimes sliders. Maintain a small dictionary of approved metaphors so the same idea never gets two pictures.
These rules are tokens in everything but name. Stroke weight, radius, and grid size are values you define once and reference everywhere, exactly the discipline covered in design tokens explained. Treating them as named constants rather than per-icon guesses is what lets the set scale past the first thirty icons without drifting.
A build sequence that works
Order matters. Most failed icon sets failed because they were drawn before the rules existed.
- Audit the real need. List the icons the product and brand actually use today. Most teams need fewer than they think at launch and will request specific ones later. Build for the real list, not an imagined one.
- Draw the hardest icons first. Pick the three or four most awkward concepts and the densest icon you can think of. If your grid and stroke survive a complex icon, the easy ones follow. If you start with a checkmark, you learn nothing.
- Lock the construction rules from those drafts. The first hard icons reveal your real grid tolerances, your padding, your minimum gap between strokes. Write them down now.
- Extend the set against the rules. Draw the rest, checking each against the keylines and the metaphor dictionary. Review them as a grid on one screen, not one at a time. Inconsistency only shows up in company.
- Test at target sizes and in context. Place icons in real buttons, menus, and dense tables. An icon that is elegant in isolation can be illegible next to text. Color and contrast matter here too, which ties straight into how the palette assigns roles in color theory for brands.
- Ship with rules attached. Deliver the SVGs and the construction document together. The files without the rules will rot within a quarter.
The trade-offs worth naming
Custom versus library is the first real decision. A well-made open icon set gives you breadth on day one, and for an early product that is often the right call. The cost is that your icons look like everyone else’s, because they are. A custom set is a brand asset that competitors cannot copy by installing the same package, but it needs a real budget and ongoing maintenance. A reasonable middle path is to adopt a library, then commission custom versions of the ten icons users see most. The hero icons carry the brand; the long tail can stay generic for now.
The second trade-off is breadth versus depth. A set of twelve perfect icons beats a set of three hundred inconsistent ones. Scope tightly. You can always add an icon; you cannot easily un-ship an incoherent library.
My strong opinion: do not let icons be the last thing designed, squeezed in after the logo and the type. They are used more often than the logo and at the sizes where craft is hardest to fake. An icon system designed late always shows.
How Strynal approaches brand iconography
We treat iconography as part of the brand system from the start, not a deliverable bolted on at the end. The grid, stroke logic, and metaphor language get defined alongside type and color, so the icons inherit the same decisions rather than fighting them. Because the team that scopes the work also builds it, the person setting the stroke weight is the person drawing the awkward icons that prove it, and the rules that ship are rules we have actually stress-tested.
Every system we build starts on a blank page, which means the iconography fits the brand’s specific job instead of a generic style we reuse. If you are building or rebuilding a visual identity and want an icon system that still holds together two years and two hundred icons from now, our branding practice is where that work lives. Tell us what you are building and we will tell you what the system needs.