SVG For Ever – SVG icons

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

flaticon

Flaticon

Grab a whole load of SVG (and other formats) social icons from the flaticon website at: http://www.flaticon.com/

IcoMoon

IcoMoon

Download 491 IcoMoon SVG icons from the IcoMoon website. There’s also a really neat icon generator app here: https://icomoon.io/

linearicons

Linearicons

A set of really neat minimal linear SVG icons that are free to download and use: https://linearicons.com/

openiconic

Open Iconic

An open source icon set with 223 marks in SVG, webfont and raster formats, download from: https://useiconic.com/open

smarticons

SmartIcons

Download hundreds of SVG icons from various different sets at: https://smarticons.co/

evilicon

Evil icons

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

icons8

Icons8

Just a few icons to download, just 32,100! Available in all formats and sizes.

 


svgFile

Articles and Advice

Ten reasons we switched from an icon font to SVG

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.

 

Inline SVG vs Icon Fonts

by Chris Coyier at CSS-TRICKS

Essential article comparing Inline SVG to icon fonts. Essential reading.

 

Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG

by Sara Soueidan

A how-to on converting to SVG from icon fonts.

Similar Posts:

Leave a Reply