Using SVG Icons

theme-coding:

“Unless properly scoped, [icon fonts] can result in a large file size for only using a small subset of the icons available.”

— Google Developers

Using icon fonts come with several disadvantages such as limited CSS styling, imprecise positioning, and blurring, but the biggest of them all may be the bloat of loading an entire library when only a few icons are needed. To address this issue you may consider using inline SVG.

Inline SVG and <use> 

Read this introduction to SVG Icons by Codrops. Note that the use of inline SVG is not supported in IE8. Browse this list for fallbacks.

Icon services that support SVG include SVG Icons, Iconmelon, Geomicon and IcoMoon, among others. Also check out this free icon set (available in SVG, PNG and PSD) by Nick Frost and Greg Lapin:

Readings & References:

1. Use SVG for icons
2. Ten reasons we switched from an icon font to SVG
3. Tips for Creating Accessible SVG
4. MDN: The SVG use element
5. SVG ‘use’ with External Source
   
6. A Compendium of SVG Information