Icon Fonts vs SVGs - Which One Should You Use in 2018?
Graphical icons are a crucial component of almost every website or app. Although icons are typically small in size by nature, selecting a format for your web icons is not a trivial decision. Aside from the standard image formats, web developers have two main options: SVGs or icon fonts. Which one should you use? Let's see how the two formats compare in terms of performance, flexibility, and accessibility.
The evolution of web icons
In the time before CSS, web icons had to be images. Because image files are large, web developers have always tried to find alternative methods to display small icons. For example, CSS sprites allowed developers to keep all of their icons on a single image file, but accessibility issues have caused them to fall out of favor since icon fonts arrived on the scene around 2012. However, more recently, developers are switching to using scalable vector graphics, or SVGs, for their web icons.
What are icon fonts?
Icon fonts are text files that can be modified using CSS. Consequently, they scale much better than raster images, so changing the size of an icon font doesn't degrade its visual quality. Changing the color or adding a shadow is just as simple as editing text. You can easily find free icon fonts to use on your website, or you can design your own. One downside of using icon fonts is that most font sets contain icons that you probably won't use, so they will just be taking up space.
Like CSS sprites before them, icon fonts are starting to fall out of favor with developers. Properly displaying icon fonts often requires the browser to make additional requests to the server, which can lead to FOIT, or flash of invisible text, on icons while the font libraries are still loading. If the browser cannot interpret the fonts, then the user will just see empty characters. Since such scenarios are unacceptable for professional websites, more developers are now turning to SVGs.
What are SVGs?
SVGs (Scalable Vector Graphics) allow vector graphics to be displayed in the browser. SVGs are quickly becoming the new standard for web icons and animations. They not only offer superior scaling, but they often render more quickly and reliably than icon fonts. Since vector graphics are composed entirely of code, they don't have to be imported from large external files. They are also much smaller in size than your typical JPG or PNG as well as most icon font libraries.
Making the most of your SVGs may necessitate overcoming a bit of a learning curve, but the rewards are well worth the effort.
How SVGs work
It's possible to use SVGs like within a regular
<img> element in your HTML utilizing the width and height attributes to adjust the dimensions. However, this method somewhat limits your ability to customize your SVGs.
If you want the ability to further customize your SVG icons directly from within the HTML, you'll need to inline your SVG by simply pasting the code directly into your HTML document. Then, you can change the color or apply filters by targeting it with CSS. Here is what an example SVG icon looks like:
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="#3686be" /> <circle cx="150" cy="100" r="80" fill="white" /> <text x="150" y="115" font-size="35" text-anchor="middle" fill="#3a3a3a">KeyCDN</text> </svg>
The code above, inspired by Mozilla, displays a graphic like this in a browser:
Although SVG code can seem intimidating at first glance, designing and controlling SVG icons is deceptively easy. In fact, you can just use a program like Adobe Illustrator to create your own vector graphics to use as icons. Just save them as SVG files, or you can generate the code within the Illustrator interface. You can also export drawings from Google Docs as SVG files.
Are icon fonts still useful?
Icon fonts are far from obsolete. While they are not always the most efficient nor the most reliable option, icon fonts are still relatively simple and easy to implement therefore many developers continue to use them. Depending on the number of icons used, It may not be worth the effort to switch out icon fonts for SVGs on your older projects; however, SVGs are the definitive way of the future, so you might as well get comfortable using them going forward.
Comparing SVGs vs icon fonts
To help you decide which icon format to choose, let's see how the two options compare in various departments.
If you choose to inline your SVGs in order to add styles, they can quickly increase in size, and the code can become quite cumbersome. It's also worth noting that inline SVG code doesn't get cached by the user's browser. External SVG files, on the other hand, can be cached. If you have a lot of icons on a single page, then icon fonts may provide a smoother user experience than inline SVGs. Of course, if you're using a premade icon font set, then you will probably be wasting resources on unused icons.
The thing that's worth noting here is that 10 optimized SVG icons will likely be much smaller than an entire icon library. However, if you create your own custom icon library with only the icons you need, the icon library font will end up being smaller.
Icon fonts can be cached therefore making them load faster directly from the browser. However, the downside to this is that they create an additional HTTP request. On the other hand, if you're inlining SVG icons there are no additional HTTP requests needed, however these cannot be cached by the browser.
You can however include your SVG files in an external file thus making them cacheable by the browser. Again, performance-wise the difference in speed will depend on how large your icon font/SVGs are. Try running performance tests with both to determine which one loads faster.
Both formats can be styled using CSS, but inline SVGs give you far more options such as glyphs strokes and multicolored icons. You can even have animated web icons.
4. Browser support
Whichever format you choose for icons, you may have to perform some extra steps to make them compatible with older browsers. Since they've been around longer, icon fonts are more widely supported. Anyone using IE 6 or higher, which likely includes everyone, should be able to see your icon fonts. If you use SVGs, then you might want to include a JS polyfill to support those using IE 8 or lower.
However, in 2018, as most users have moved away from legacy browsers versions, this shouldn't be much of a concern regardless of whether you choose icon fonts or SVGs. The only lack of support in terms of SVG icons and modern browsers comes from both IE and Edge which don't properly scale SVG files (height and width attributes are recommended).
Although both SVGs and icon fonts are vector-based, browsers interpret icon fonts as text, which means they are subject to anti-aliasing. Therefore, SVGs tend to look a little sharper than icon fonts.
Because icon fonts must be inserted via a pseudo element, positioning font icons can be tricky. You may have to consider the
letter-spacing among other factors to get the pseudo element and the actual glyph to match up perfectly. For SVGs, you just have to set the size.
Unlike icon fonts, SVGs have built-in semantically-sensible elements, so you don't have to include any workarounds to make your fonts accessible to screen readers.
SVG icon tools and resources
Mozilla's Developer Network has a very thorough SVG tutorial that explains how to stylize your icons with inline CSS. In addition to Adobe Illustrator, there are several tools to help you implement SVG icons. IcoMoon is an excellent resource for premade SVGs and font icons, and the IcoMoon app allows you to create your own. If you're looking for something open source, Inkscape is a free vector drawing program that exports SVG files. Tools like Convertio allow you to convert other image formats to SVG files.
It's important to note that programs like Illustrator and Inkscape often embed extra information into exported SVG files that you don't need. Therefore, you should run your SVG icons through an optimization tool like SVGO or the SVG Minifier to trim them down before adding them to your website.
Apart from the resources mentioned above, there are also a variety of icon websites out there which provide high quality vectors as either a paid or free service. Check out our complete icon library resources guide as well as our post on improving the speed of your glyphicons through using a glyphicon CDN.
There is still some debate in the community regarding whether or not icon fonts are better than SVGs or vice-versa. The truth is, what makes one or the other "better", in some cases, depends on the circumstance in which it is being used.
However, more often than not, SVGs are the preferred method. They're much more scalable, offer a better user experience, and are supported by all major browsers. Even a few of the top web performance experts say that moving away from icon fonts in favor of SVGs is essential in 2018.
Let us know your thoughts in the comments below. Are you using icon fonts, SVG icons, or a combination of both?