Icons look simple but require a surprising amount of system thinking. A well-designed icon set feels effortless and supports the UI; a poorly designed one undermines every screen it appears on. This guide covers the rules that make an icon set cohesive.
The System
| Decision | Common value | Notes |
|---|---|---|
| Canvas size | 24×24 | Standard; 16/20/32 for variants |
| Safe area / padding | 2px each side | Keep shapes within 20×20 inside 24×24 |
| Stroke width | 1.5px or 2px | One width across the set |
| Corner radius | 2px (small), 4px (medium) | Consistent across set |
| Line caps / joins | Round or square — pick one | Mixing looks accidental |
| Style | Outline, filled, or duotone | One primary; second as state variant |
Rules That Make Sets Cohesive
- Same canvas, same safe area — all icons live in identical bounding boxes so they align visually in lines and grids.
- Same stroke width — a single decision applied everywhere.
- Same corner treatment — round corners or square corners, not both.
- Same visual weight — even when icons differ in subject, perceived "darkness" should be similar.
- Optical adjustments — center shapes optically, not geometrically.
Common Mistakes
- Inconsistent stroke widths across the set.
- Some icons filled to the edge, others with generous padding — they read as different sizes.
- Detail levels that vary — a phone icon with 10 details next to a simple speech bubble.
- Pixel-aligned vs sub-pixel — shapes that don't sit on the pixel grid render fuzzy.
- Using line icons in small sizes without thicker variants — strokes disappear at 16px.
Production Output
- Export as SVG with cleaned-up paths (no transform attributes, single fill/stroke per path).
- Strip unused attributes and metadata.
- Name consistently:
category-name-state(e.g.,nav-home-filled). - Provide both light and dark variants if your stroke/fill colors need to invert.
Keeping Icons Crisp at Small Sizes
Most icon blur comes from geometry that ignores the pixel grid. At 16–24px every half-pixel matters:
- Snap key strokes to whole pixels. A 2px vertical line on a whole-pixel boundary renders sharp; the same line at x = 10.5 renders as two grey half-pixels.
- Use even stroke widths on even canvases. A 2px stroke centres cleanly on a 24px grid; odd widths drift off-grid when scaled.
- Design at the size you ship. An icon drawn at 24px and squashed to 16px loses detail — draw a dedicated 16px version with fewer, heavier elements.
- Avoid tiny interior detail. Anything thinner than the stroke width vanishes or turns to mush at small sizes.
- Preview on a real low-DPI screen, not just a Retina display, where everything looks deceptively sharp.
Try It Yourself
Convert SVG icons to PNG variants for export with DesignKit's converter.
SVG to PNG →