IconfolkLine icons have one setting that changes everything about how they look: the stroke weight, meaning the thickness of the line. Get it right and a set of icons looks calm and professional. Get it wrong and the same icons look faint, or heavy and crowded.
This guide explains why stroke weight depends on size, and how to choose it with the stroke slider on our site.
Why the same icon looks different at different sizes
An SVG icon is drawn on a grid. Ours use a 200-unit square. When you display the icon at 24 px, the whole grid, lines included, shrinks to 24 px. So the line gets thinner as the icon gets smaller.
Try it: drag the stroke slider above and watch these icons change.
At large sizes a thin line looks elegant. At small sizes the same line can drop below one screen pixel and turn grey and blurry.
The formula
For icons from our site, the on-screen line thickness is:
line thickness in pixels = stroke × icon size ÷ 214
The 214 is our 200-unit grid plus the padding around each icon. Some examples:
| Icon size | Stroke | Line on screen |
|---|---|---|
| 16 px | 11 | 0.8 px |
| 24 px | 11 | 1.2 px |
| 32 px | 10 | 1.5 px |
| 48 px | 8 | 1.8 px |
| 64 px | 7 | 2.1 px |
| 128 px | 5 | 3.0 px |
| 256 px | 4 | 4.8 px |
Most interface icon sets aim for a line between 1.5 and 2 px at their main size. That's a good target for app and website icons.
Our recommendations
- 16–24 px (inline with text, small buttons): use the heaviest stroke, 10–11. Choose simpler icons here; our drawings have fine details that read best from 32 px up.
- 32–48 px (navigation, list items, feature cards): stroke 8–10. This is where our icons look their best.
- 64–128 px (feature sections, empty states, print): stroke 5–8. A lighter line keeps large icons from looking heavy.
- 256 px and up (posters, hero images): stroke 3–5, or keep a heavier line if you want a bold, illustrative look.
Keep one weight across a screen
The most common mistake is mixing weights: a bold icon in the navigation, a thin one in the content below. Even if each choice made sense on its own, the page looks inconsistent.
Pick one visual line thickness for each screen, then work out the stroke for each icon size with the formula above. For example, to get roughly 1.8 px everywhere:
- 32 px icons → stroke 12 would be needed, so use the maximum (11) and accept 1.6 px
- 48 px icons → stroke 8
- 64 px icons → stroke 6
Stroke and colour work together
A darker colour looks heavier than a light one at the same stroke. If you colour icons in a light brand colour (pale green, light grey), raise the stroke by 1–2 steps so they stay readable. For dark mode, white lines look thicker on black than black lines on white, so lower the stroke by about one step.
How to set it on our site
- Open any icon page, for example the rocket.
- Move the Stroke slider until the preview looks right at the size you'll use.
- Pick a colour and a PNG size, or download the SVG.
The stroke you choose is remembered as you browse, so every icon you open afterwards starts at the same weight. That makes it easy to download a consistent set for one project.