SVG Symbols

 from Red Blob Games
24 Jun 2021

I wanted to learn how SVG <symbol> works. Test of fill, outline, and gradient fill:


  1. Download all the svg icons from[1]
  2. Combine the individual files from using <svg … viewBox=…>…</svg> to <symbol viewBox=…>…</symbol>, making them reusable icons. (
  3. Reference the symbols by using <use href="#centaur" x=… y=… width=… height=… />, and then apply styling using fill=…, stroke=…, etc.

This means I can use any icon from game-icons with a single SVG <use>.

Minor glitch: I was planning to use the icon filename as the id= but occasionally multiple icons use the same filename, like lorc/hand[2] and sbed/hand[3]. I’ll deal with this later.

Minor issue: the stroke width seems to be in viewbox coordinates, not in the output size coordinates, so that I have to look beyond this abstraction to be able to apply strokes. However … all of game-icons seems to be 512x512 so it’s not so bad in this particular case.

./ centaur baby-face moebius-triangle \
  justice-star moebius-star maze-saw maze-cornea orbital \
  pentagram-rose triorb triple-corn triple-beak zigzag-cage \
  ubisoft-sun triple-yin triple-plier divided-spiral \
  concentric-crescents barbed-sun yin-yang trinacria anarchy \

Related: C header-only library[4] can render these icons to a raster image. However I’m using these on the web so I will use the browser’s SVG renderer for now.

Related: the icons are available as a TTF font[5]

Email me , or tweet @redblobgames, or comment: