-
currentColor only — Never hardcode colours. SVGs inherit colour from CSS. No fill="#000" or stroke="blue". If a shape needs fill, use fill="currentColor".
-
Identical viewBox — Every icon uses the same viewBox. No exceptions.
-
Identical root stroke attributes — stroke-width, stroke-linecap, stroke-linejoin on the <svg> element must match across all icons. Override on individual elements only when truly necessary.
-
No transforms on root — No translate, rotate, scale. Bake positioning into coordinates.
-
No IDs or classes — Keep SVGs clean for external styling.
-
Coordinate precision — Max 2 decimal places. Snap to half-pixel grid (e.g. 12, 12.5, not 12.333).
-
Consistent padding — Maintain configured padding from viewBox edge. For 24px grid with 2px padding, draw within 2–22 coordinate range.
-
Minimal elements — Fewest <path>, <circle>, <rect>, <line> elements practical. Simpler = smaller + faster rendering.
-
Visual centring — Appear visually centred, not just mathematically centred. A leftward arrow shifts slightly right. A house with a chimney adjusts for asymmetry.