How to svg viewbox icon consistency for design system standards
- Step 1Choose a base grid — Pick a viewBox size that matches your design grid. 24×24 aligns with 8px grid at 1.5× scale; 20×20 aligns with 4px grid at 0.8× scale. Match the viewBox to your most common rendered size for the sharpest rendering.
- Step 2Apply consistent padding — Optical sizing adds 1–2 units of padding around the icon within the viewBox. A 20-unit glyph in a 24×24 viewBox gives 2-unit breathing room on each side, preventing edge-clipping.
- Step 3Validate with the fixer — Run all new icons through the ViewBox Fixer to confirm they use the target viewBox. Flag any that differ and rescale the path data to match before merging to main.
Frequently asked questions
Should I use 0 0 24 24 or 0 0 20 20 for my icon system?+
If your UI uses 24px icons as the default size, use 24×24. If you use 20px (common in Tailwind UI and Heroicons), use 20×20. The key is consistency — mixing viewBox sizes breaks alignment in flex/grid containers.
How do optical sizing variants use different viewBoxes?+
Google Material Symbols uses viewBox='0 96 960 960' for its optical sizing system, where the coordinate space is intentionally large to encode path data at high precision. This is an advanced technique — most icon systems don't need it.
Can I use a viewBox that isn't square?+
Yes, for non-square icons like logo marks or banners. Set viewBox to match the natural proportions (e.g., 0 0 120 40 for a 3:1 logo). Avoid forcing non-square icons into square viewBoxes, which either crops them or adds whitespace.
How do I audit an existing icon library for viewBox consistency?+
Run the batch normalization script in audit mode (dryRun: true). It returns a report of all non-conforming files without writing changes. Fix outliers before adding them to your design system.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.