5 best SVG icon resources

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

Luke Whitehouse walks though how to use gulp as a build tool (GitHub repo here). 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

This guide to handling multiple vector graphics by Shane Osborne is also worth checking out.

03. SVG on the web: A practical guide

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

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

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, issue 279. Buy it here.