Icon Systems for Brand Identity

Icons are often treated as a functional afterthought in brand identity work — grabbed from a stock library, styled to roughly match the brand colors, and shipped. The result is icons that do their functional job but add nothing to the brand and sometimes undermine the visual coherence of the system.

A well-designed icon system is a brand extension. Every icon in the system looks like it came from the same hand that designed the logo.

The Design Language of Icons

Before designing any individual icon, I establish the design language of the system: the overall style (line, filled, outlined-filled hybrid), the stroke weight, the corner radius, the level of detail, and the optical weight target.

These parameters should be derived from the brand's existing visual language. A brand built on geometric, high-contrast forms gets a geometric, high-contrast icon system. A brand with humanist, organic forms gets an icon system with more natural curves and irregular geometry.

The Optical Weight Target

Optical weight consistency is the hardest technical challenge in icon system design. A circle icon and a square icon of the same dimensions have different visual weights — the square appears heavier because of its larger area. An arrow icon with fine points appears lighter than a rounded icon.

I establish an optical weight target — a reference icon — and calibrate all others against it. Using a filled circle as the reference, every other icon is adjusted until it reads as the same visual weight at the reference size. This requires individual adjustments to stroke width, fill area, and overall scale.

Grid Structure

Icon systems are built on a grid that enforces consistent proportioning. A standard grid for a 24px icon system uses a 24×24 canvas with a central 20×20 "live area" for most content, leaving 2px of padding on each side. Circular icons use an 18px circle. Square icons use a 17×17 square. These differences compensate for the optical weight differences between shapes.

Naming and Organization

An icon system with fifty icons and no naming convention is a liability. I name icons by function and concept, not by visual description. "search" not "magnifying-glass." "settings" not "gear." Naming by function makes the library usable by developers and non-designers who need to call icons by name.

I organize icons by category in the delivery package: navigation icons, action icons, status icons, content type icons. Categories should match how the consuming team thinks about using them.

Maintenance

Icon systems grow. New features, new content types, and new contexts create demands for icons that weren't in the initial set. I document the design language thoroughly enough that new icons can be added by anyone who understands the system — not just the original designer.