If you're thinking of creating an SVG icon system but not sure where to start or need a helping hand, these top resources will point you in the right direction.
01. Creating an SVG icon workflow (opens in new tab)
Luke Whitehouse walks though how to use gulp as a build tool (GitHub repo here (opens in new tab)). Towards the end you'll also find code that will help you turn your SVGs into PNGs for browsers that do not support SVGs.
02. SVG icon sprites: An optimised workflow (opens in new tab)
This guide to handling multiple vector graphics by Shane Osborne is also worth checking out.
03. SVG on the web: A practical guide (opens in new tab)
This site accompanies Jake Giltsoff's talk at Breaking Borders. It's a really detailed guide that is useful for many aspects of SVG icons.
04. Bulletproof accessible icon fonts (opens in new tab)
From Filament Group, this is the place to look for help with modifying font icons to improve accessibility, as well as other issues.
05. a-font-garde (opens in new tab)
This tool from Filament Group is also really handy for ensuring your icon fonts load reliably. The repo gives a detailed guide on how to provide fallback in case of no @font-face support.
This article originally appeared in net magazine (opens in new tab), issue 279. Buy it here (opens in new tab).
