5 best SVG icon resources

Features
By published

Here are some top resources you can go to for help with creating SVG icons.

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

Best SVG icons

Discover how to use gulp as a build tool with this walkthrough from Luke Whitehouse

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

SVG icons

Check out Shane Osborne's handy guide to handling multiple vector graphics

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

03. SVG on the web: A practical guide

SVG Icons

This detailed guide is useful for many aspects of SVG icons

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

SVG icons

This is the place to look for help with modifying font icons to improve accessibility

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

SVG icons

This tool from Filament Group is also really handy for ensuring your icon fonts load reliably

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.

Shehzad Azram