# The stroke width that keeps an SVG icon legible at 16px > A 24px icon drawn with a 2 unit stroke stays readable down to 16px. Here is why that ratio works, and the four geometry rules that matter more than the number. URL: https://semanticicons.com/blog/svg-icon-stroke-width-legible-at-16px Published: 2026-08-26 Updated: 2026-08-26 Draw an icon at 24 by 24 with a 2 unit stroke. Render it at 16 by 16. The stroke is now 1.33 device pixels. On a normal screen that lands across two pixel rows, so it renders as a soft grey line instead of a crisp black one. It is still legible, because the *shape* survives. Now draw the same icon with a 1 unit stroke. At 16px it is 0.67 pixels. It renders as a pale smudge, and the shape goes with it. ## Why one twelfth is the ratio The number that matters is not the stroke width. It is the ratio of stroke to box. | Box | Stroke | Ratio | At 16px | | --- | --- | --- | --- | | 24 | 1 | 1:24 | 0.67px, too thin | | 24 | 1.5 | 1:16 | 1.0px, thin but crisp | | 24 | 2 | 1:12 | 1.33px, solid | | 24 | 3 | 1:8 | 2.0px, heavy, gaps close | At 1:12 the stroke is heavy enough to hold its colour when the renderer spreads it over two pixels, and light enough that two parallel strokes still read as two. That last part is the constraint most sets get wrong. ## Gaps close before strokes thin A 2 unit stroke centred on a path eats 1 unit on each side. So two parallel paths 2 units apart have **no gap at all**: the strokes touch exactly. This is the rule that decides whether an icon survives a scale down: > Every gap between two strokes must be at least as wide as the stroke itself. On a 24 grid with a 2 unit stroke, that means no two paths closer than 4 units, centre to centre. Break it and the icon looks fine at 48px and turns into a blob at 16px. Most detail loss at small sizes is not thin strokes. It is closed gaps. ## The four rules that matter more than the number Stroke width is one decision. These four decide more. 1. **Fill the box.** An icon whose drawing spans only 10 of the 24 units renders at 60 percent of the size of its neighbours, and the row looks uneven. Aim for a span of 13 units or more on the longer axis. 2. **Stay off the edge.** Keep every coordinate between 1.5 and 22.5. A path at 23.5 has half its stroke outside the viewBox, so it is clipped. 3. **Round the caps and joins.** `stroke-linecap="round"` and `stroke-linejoin="round"` add half a stroke of length to every open end. That reads as intent at small sizes, where a square cap reads as a broken edge. 4. **Count the elements.** An icon that needs more than about twelve elements is drawing detail nobody will see. Cut it. ## The contract, in code Ship the geometry, not the wrapper. The renderer sets the stroke, so one change fixes every icon in the set. ```html ``` Two things are worth noting. `fill="none"` prevents a closed path from filling itself, which is the most common accident in a stroke set. `stroke="currentColor"` makes the icon take the colour of the text around it, so it needs no dark mode variant. ## How to check it Do not judge an icon at the size you drew it. Render the whole set at 16px, in a grid, in one page. Faults that are invisible at 48px are obvious in a grid at 16px: one icon reads grey, one reads black, one has turned into a smear. Our [icon set](/) checks the geometry rules in the build. An icon with a coordinate outside 1.5 to 22.5, a span under 13 units, or more than twelve elements does not enter the library. ## Questions people ask ### Should I use a 24px grid or a 16px grid? Use 24. It divides cleanly by 2, 3, 4, 6, 8 and 12, so a 2 unit stroke, a 4 unit gap and a 12 unit half all land on whole numbers. A 16 grid forces half units for the same shapes. ### Does a 2 unit stroke work at 12px? Not reliably. At 12px the stroke is 1 pixel, with no room for the shape inside it. If you need 12px, draw a separate set at a heavier ratio, near 1:8, with fewer elements. ### What about non-scaling strokes? `vector-effect="non-scaling-stroke"` keeps the stroke at a fixed device width whatever the scale. It sounds like a fix, and it makes the problem worse: the stroke stays heavy while the gaps shrink, so the icon closes up faster. ### Do I need a separate dark mode icon? No. Use `stroke="currentColor"` and the icon follows the text colour in both themes. A separate dark variant is only needed when the icon carries a fixed brand colour.