Good icon design is judged not by a single symbol but by a set of icons that belong together. An icon that looks great on its own can wreck an interface if its stroke is heavier, its corners are sharper, or its size feels off next to its neighbours. The secret to a consistent set is less about talent and more about deciding the rules up front: a shared grid, a fixed stroke width, the same corner radius, and optical balance. This article walks through building an icon set from scratch in a sustainable way.
Grid and canvas: where everything starts
Before you draw anything, define a shared workspace. The industry-standard canvas is 24×24 pixels; smaller interfaces often use 20×20 or 16×16. What matters is drawing every icon on the same canvas. Inside it, place a live area (safe zone): on a 24px canvas you typically leave a 2px margin and work inside a 20×20 area. The visual weight of each icon should stay within that zone.
Don't think of the grid only as a square. In practice four keystone shapes help: a square, a vertical rectangle, a horizontal rectangle, and a circle. A pencil sits in the vertical keystone, an envelope in the horizontal, a clock in the circle. This way icons of different shapes are still perceived as the same size.
Stroke width: the DNA of the set
In a line (outline) set, the most visible measure of consistency is the stroke width. For a 24px grid the classic choice is a 2px stroke; for a finer feel 1.5px also works. Pick the rule once and never break it across the set.
- Use the same ending on all open paths:
stroke-linecap: roundfor rounded ends,buttfor flat ones. - Fix the corner joins too:
stroke-linejoin: roundormiter— don't mix them. - Align strokes to the pixel grid. If a 2px stroke's centre lands exactly on a pixel boundary its edges blur; shift by half a pixel to sharpen it.
Keep the design vector-based but always preview at real size (for example at 16 and 24 pixels). A stroke that looks elegant at 24 can clog up like dough at 16.
Corner radius and visual language
Corner radius defines the personality of the set. Sharp corners read as technical and serious, soft corners as friendly and modern. Pick a radius value (say 2px) and apply it consistently to outer corners. Reducing the radius slightly on inner corners often looks more correct optically, because concave angles already soften to the eye.
The same logic applies to every repeating detail: how ends are cut, the angle of arrows (usually 45°), the slope of caps. Make a decision, document it, apply it to every icon. The consistency of a set is the sum of these micro-decisions.
Optical balance: your eye, not the maths
The most overlooked part of icon design is optical correction. What is geometrically correct does not always look correct. A few classic examples:
- A circle next to a square of equal dimensions looks smaller; you have to scale the circle slightly past the grid to match.
- A triangle (such as a "play" icon) placed at the geometric centre looks shifted left; you nudge it right to align its centre of mass.
- Horizontal lines look thicker than vertical lines of the same width; some sets thin the horizontals slightly.
Rule: trust your eye, not the ruler. Put an icon next to the others, squint, and fix whichever one jumps forward or falls back.
Systematising the production process
Rather than holding consistency in your head, bake it into your tools. If you use Figma, set up this structure:
- Build icons as components and keep them all at the same frame size (24×24).
- Put the grid and live area in a template frame and copy it to every new icon.
- Save stroke width, colour and cap style as a stroke style so you can change them from one place.
- Keep naming systematic: slash-separated names like
arrow/left,arrow/right,user/filledauto-group into folders in Figma.
A quick per-icon checklist helps: right canvas, right stroke, strokes pixel-aligned, legible at 16px, named correctly.
Exporting as clean SVG
When the design is done, icons ship to code as SVG. For clean output, watch a few things:
- Where possible, leave lines as a
strokerather than converting them to outlines; that way colour and width stay controllable from CSS. - Set the colour to
currentColorso the icon inherits the text colour. - Strip out unnecessary groups, empty
<g>tags and editor metadata (SVGO does this automatically).
A typical clean icon looks like this:
<svg viewBox="0 0 24 24" width="24" height="24"
fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/>
<path d="M13 6l6 6-6 6"/>
</svg>
With this structure an icon inside a button takes its size and colour from color and font-size, with no separate image file needed.
Frequently Asked Questions
What pixel grid should I use for an icon set?
For most web and mobile interfaces, 24×24 pixels is a solid starting point. For very dense interfaces you can drop to 20×20 or 16×16; the key is keeping the whole set on one grid and deriving different sizes from the same source.
Should I use outline or filled icons?
Both are valid; the choice depends on context. Outline icons feel light and neutral, filled icons draw attention. Many sets offer both: outline in the resting state, filled when active or selected. Just make sure both follow the same grid and visual language.
Can I change the stroke width later?
If you left the lines as a stroke in the SVG, you can change the weight in one line with stroke-width. But once you convert lines to outlines (paths), reversing it is hard — so always keep the master source stroked.
Need a consistent icon set for your own brand? I can help you build one end to end, from grid to clean SVG export. Get in touch and tell me about your project.