Tools — 15
An icon set without a grid is a set without a system.
Stroke width, viewBox, optical padding — the things that make twenty icons read as one family are exactly the things nobody checks until the set ships inconsistent. Drop your SVGs here and see which ones break the grid. Every check runs in the browser.
Grid settings
Icons
Drop SVG files here
or select files from your machine
Reference
An icon grid (or keyline grid) is a fixed viewBox — usually 24×24 — with a padding zone and alignment guides. Consistent icons share a viewBox size, a stroke width, and optical alignment within the padding zone.
What makes an icon set consistent?
Three properties must be identical across every icon: the viewBox dimensions, the stroke width, and the padding zone. If any of these differ, the icons will appear to be different sizes even when they are rendered at the same CSS width.
Optical alignment is the harder requirement. A circle that fills the grid to the edge looks larger than a triangle at the same size, because the triangle has less visual mass. The keyline grid — a circle and a square overlaid inside the padding zone — guides the designer to compensate.
Why is the viewBox more important than width and height?
The viewBox defines the internal coordinate system; width and height define how large it renders. An icon with viewBox="0 0 24 24" and one with viewBox="0 0 512 512" both render at 24px if the CSS says so, but a stroke-width of 2 in the first is 0.09 in the second.
Normalising the viewBox is therefore the first step. Inconsistent coordinate systems make stroke-width comparisons meaningless.
What does this tool check?
Three things per icon: whether the viewBox matches the expected grid size, whether any explicit stroke-width values match the expected standard, and whether the content sits within the padding zone. Each check produces a pass or fail, and the summary table shows the result per icon.
Common questions
- What viewBox size should icons use?
- 24×24 is the most common standard, used by Material, Feather and Heroicons. Some sets use 20×20 or 16×16 for smaller contexts. The important thing is that every icon in the set uses the same viewBox.
- Does this tool modify my SVGs?
- No. It reads the SVG source, runs the checks, and displays the results. Nothing is written back to the file. Optimisation tools like SVGO are for a separate step.
- Can I check icons from different icon libraries at once?
- Yes, but icons from different libraries will almost certainly fail because they use different viewBox sizes and stroke widths. That is information worth having.