This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.
Tools you might need next
Calculate typographic modular scale ratios and font sizes. Build harmonious type hierarchies with musical ratios for headings, body text, and captions.
Calculate fluid clamp() font sizes that scale with viewport width. Generate CSS clamp formulas for accessible, responsive typography across breakpoints.
Calculate golden ratio proportions and phi-based dimensions. Apply 1.618 spacing, layout segments, and typography sizes for balanced visual composition.
An icon grid provides consistent proportions and alignment across an icon set. It typically uses a square canvas (24×24, 32×32) with padding, key shapes (circle, square, vertical/horizontal rectangle), and pixel-aligned strokes.
Canvas: N×N; Padding: N/12; Stroke: 1-2px at 1x; Key shapes fill (N - 2×padding) areaDifferent shapes appear different sizes even at the same dimensions. Circles and triangles need to extend slightly beyond the grid boundary to appear the same size as squares (optical overshoot of ~3-5%).
Updated: July 2026
Generate a standard 24×24 icon grid with 2px padding and 2px stroke width.
→ Live area: 20×20px; Corner radius: 4px; Circle diameter: 20px
Create a larger grid for app icons with more detail allowance.
→ Live area: 26×26px; Supports fine detail and filled style
A circle inscribed in the same square as a filled square will look smaller. Extend circular icons 1-2px beyond the grid padding to achieve optical balance.
On non-retina displays, 1.5px strokes render as blurry 2px. Use whole-pixel stroke widths (1px, 2px) and design on a pixel grid to keep icons sharp at all scales.
Generate icon grid and alignment guides for pixel-perfect icon design. Preview square, circle, and keyline grids for consistent app and UI icon systems. It applies the icon grid system (Canvas: N×N; Padding: N/12; Stroke: 1-2px at 1x; Key shapes fill (N - 2×padding) area). For example: 24px icon grid for ui kit — Generate a standard 24×24 icon grid with 2px padding and 2px stroke width.