Foundation
Grid Systems: The Foundation
A grid system provides the invisible structure that makes icons scalable, consistent, and crisp at all sizes. The grid divides your canvas into equal squares, and all design elements snap to these intersections and lines.
Small Icons (16×16px)
UI elements, toolbar icons, navigation badges
Canvas: 16×16px
Grid: 4×4 (4px per unit)
Safe Zone: 1–2px padding
Stroke: 1px
Min Feature: 2px
Standard Icons (24×24px)
Most common size, used in most applications
Canvas: 24×24px
Grid: 8×8 (3px per unit)
Safe Zone: 2–3px padding
Stroke: 1.5–2px
Min Feature: 3px
Large Icons (32×32px)
App icons, detailed illustrations, desktop UI
Canvas: 32×32px
Grid: 8×8 (4px per unit)
Safe Zone: 2–4px padding
Stroke: 2px
Min Feature: 4px
Grid Mathematics
For 24×24px: 24 ÷ 8 = 3px per unit
For 32×32px: 32 ÷ 8 = 4px per unit
For 48×48px: 48 ÷ 8 = 6px per unit
This scaling relationship maintains proportional harmony across all sizes.
Step-by-Step
Icon Construction: Building a Home Icon
See how professional icons are built layer by layer using geometric primitives snapped to grid.
Step 1: Roof Shape
Start with the main triangle anchored to grid points (12,4), (21,11), (3,11). Stroke: 1.5px
Step 2: House Body
Add rectangle from (3,11) to (21,20). Connected to the roof base.
Step 3: Add Door
Small rectangle at (9,14) sized 6×6px. Centered for visual focus.
Step 4: Final Icon
Unified 1.5px stroke, all elements combined into clean final icon.
Consistency
Stroke Weights: Visual Harmony
Stroke weight dramatically impacts icon personality. Thin strokes feel elegant and minimal; thick strokes feel bold and friendly.
Delicate, technical
Balanced, versatile
Bold, friendly
Heavy, impactful
💡 Pro Tip: Choose ONE stroke weight for your entire icon set and stick with it. Mixing weights creates visual chaos and breaks consistency.
Avoid These
Common Mistakes to Avoid
Learn from the pitfalls that derail icon designs.
❌ Inconsistent Stroke Weight
Mixed 1px and 2.5px strokes look disjointed
✓ Consistent Stroke Weight
Unified 1.5px stroke creates visual harmony
❌ Elements Outside Safe Zone
Content touches canvas edge, looks cramped
✓ Safe Zone Respected
2px padding keeps icon balanced and clean
Examples
Sample Icon Set
All icons below use the same 24×24 grid, 1.5px stroke weight, and 2px safe zone padding.
💡 Building Your Icon Set: Start with 10-12 core icons. Ensure each uses the same grid, stroke weight, and corner radius. Document all measurements. Test at multiple sizes (16px, 24px, 32px). Export as SVG for maximum flexibility.
Checklist
12 Design Principles
Everything you need to know to create professional icons.
All icons use the same canvas size and grid divisions. A 24×24 icon set should have all icons on 24×24 with 8×8 grids.
Every line and stroke has the same weight (e.g., 1.5px). Mix of 1px and 2px lines creates visual chaos.
All anchor points snap to grid intersections. No floating pixels. This ensures crisp rendering at all sizes.
Leave 2-3px margin around icon edges. Icons should never touch the canvas edge.
Use basic shapes (circles, squares, lines). Avoid organic curves that distort when scaled down.
Define a corner radius rule (0px, 1px, or 2px) and apply consistently across all icons.
Mathematical center ≠ visual center. Adjust slightly for shapes like circles and triangles to feel balanced.
Design the empty space as carefully as the lines. Negative space creates clarity and prevents visual clutter.
Each icon should be recognizable at the smallest size (16px). No details that disappear when scaled down.
All icons use the same color(s). Monochrome is standard, but duochrome requires consistent color distribution.
Use round or butt line caps (never sharp). Round caps create friendlier, softer icon appearance.
Document grid size, stroke weight, safe zone, corner radius, and any special rules. Share with team.
Scalability
Testing Icon Scaling
A well-designed icon maintains clarity and balance at all sizes. Test your icons across the full range.