Icons, don’t graphic designers just love them? I had been a real fan of icon fonts until I recently discovered the joys of SVG icons. SVG or “Scalable Vector Graphics” are XML-based vector images with support for interactivity and animation. It’s also reasonably straightforward to re-colour them. SVG images and their behaviors are defined in XML text files. Coding SVG is a bit of a learning curve, but there are plenty of tutorials out there.
Take a look at these SVG icon resources
Free SVG icons
Grab a whole load of SVG (and other formats) social icons from the flaticon website at: http://www.flaticon.com/
Download 491 IcoMoon SVG icons from the IcoMoon website. There’s also a really neat icon generator app here: https://icomoon.io/
A set of really neat minimal linear SVG icons that are free to download and use: https://linearicons.com/
An open source icon set with 223 marks in SVG, webfont and raster formats, download from: https://useiconic.com/open
Download hundreds of SVG icons from various different sets at: https://smarticons.co/
Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN. Download at: http://evil-icons.io
Just a few icons to download, just 32,100! Available in all formats and sizes.
Articles and Advice
by Ian Feather, Senior Software Engineer at Schibsted Media
An article contributed by lonelyplanet.com, all about how they switched to SVG icons and how they got around the disadvantages of SVG’s.
by Chris Coyier at CSS-TRICKS
Essential article comparing Inline SVG to icon fonts. Essential reading.
by Sara Soueidan
A how-to on converting to SVG from icon fonts.