What it does
Bytesize Icons is a small SVG icon set drawn on a 32-pixel grid. You can adjust its weight, color, line caps and line joins, using inline markup or an external SVG file.
Bytesize puts much of the style in standard SVG stroke properties. The README’s Grab-n-Go section includes complete markup for individual symbols, including search, playback controls and arrows. Copy a symbol into the page, or reference an external SVG with a use element.
Set stroke-width for weight, stroke-linecap for the line endings, and stroke-linejoin for corners. The recommended pairings are round joins with round caps, bevel joins with butt caps, or miter joins with butt caps. Color follows the surrounding text through currentcolor.
The drawings leave a two-pixel margin inside the view box. The author recommends keeping strokes at or below four pixels on the 32-pixel grid; heavier miter joins can extend past the boundary. For a deliberately heavier version, the documented overflow: visible setting prevents those edges from being clipped. The collection is free under MIT, with the licence notices preserved when sharing its files.
Strengths
- Standard SVG properties control the visual style.
- Individual markup is included directly in the README.
Watch out for
- Heavy strokes and miter joins can extend beyond the view box.
Best for
- Small interfaces needing a compact SVG set.
- Designers tuning line caps and joins.
Sources
- Bytesize Icons (Oct 27, 2026)
- Bytesize Icons: The MIT License (Oct 27, 2026)