Frontend developer James Williamson pits icon fonts against SVG for use in responsive designs and high-density displays.
If you're building an icon system for a site, what are your options? Two of the most popular vector options are SVG and icon fonts.
Icon fonts are mapped to individual Unicode characters, enabling you to store multiple icons within a single file. Fonts are vectors, so icons scale to any size. And Scalable Vector Graphics (SVG) is an XML-based vector graphics format that can scale to any size without losing clarity.
Each has its pros, cons and usage scenarios. Here's how to make the right choice for your project.
Deployment
Icon fonts: Fonts can be served locally via an @font-face rule or through a hosting service. There are multiple techniques that can be used to display icons, and many are based on how the font is encoded. The most semantic involve using CSS-generated content to display icons without requiring extraneous content.
SVG: SVG can be displayed through the use of CSS Backgrounds, object tags, img tags, or inlined directly into your HTML. Using inline SVG is becoming more popular for icon systems, as it allows for multiple icons in a single file without the need for additional HTTP requests.
Rendering
Icon fonts: These are treated as text by browsers, so you’ll need to normalise them to avoid text anti-aliasing issues.
SVG: SVG is rendered as vector artwork by browsers, so no additional anti-aliasing rules are applied.
Versatility
Icon fonts: Icon fonts are monochromatic, and best suited to simple shapes. Multicoloured icon fonts are possible but typically require icons to be stacked on top of one another. Icons can be styled through any CSS property that is normally used to style text, including animation and transforms.
SVG: SVG files support multiple colours and gradients, can be styled through a wide range of CSS properties and SVG filter effects, and can be animated and controlled through scripting. You can even control individual parts of SVG files, enabling you to do things like animate clock hands or dynamically style indicators.
Support Icon Fonts
Icon fonts: Icon fonts are well supported, even as far back as IE6. Not supported in Opera Mini.
SVG: Supported in modern browsers. Lacks support in IE8 and below and Android 2.3 and below.
Performance
Icon fonts: File sizes are small, which is good. Fonts cache, giving you an added performance boost. Font loading issues can slow performance and even cause occasional failures.
SVG: These are typically larger than icon fonts, even when compressed. Unless SVG is inlined, icons will generate additional HTTP requests.
Verdict
Icon fonts work well when using a large number of icons with basic styling requirements. SVG allows for more versatility, but typically adds more overhead and requires fallbacks for older browsers.
