This is a basic comparison between an Inline SVG fonts and Font Icons based on Chris Coyier's article Inline SVG vs Icon Fonts and the comments within. Icons are from the Font Awesome icon set.
These tests are not a perfect 1:1 comparison (styles, colors, icon selection), but meant to demonstrate the differences in the two methods. Run your own network and performance tests to draw your own conclusions on each technique.
Feel free to fork and share your findings in the Issues.
<svg viewBox="0 0 34 32" class="fa fa-glass"><use xlink:href="#fa-glass"></use></svg>
) versus Icon Font (<i class="fa fa-glass"></i>
).viewBox
attribute to display at the right size. Setting a general viewBox
means the icon may have extra spacing around it since some icons will be larger than others. Font icons are sized to fit the glyph.stroke
, outline versions of icons can share the same path as the original icon, though it may not look as good as a real outlined path.