Icon Fonts vs SVGs - Which One Should You Use?
If you are building a website or application and wondering whether to use icon fonts or SVGs, you have come to the right place. In this article, we will explore the pros and cons of each option and help you decide which one is the best fit for your project.
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
Web icons have come a long way since the early days of the internet. 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.
In the early 2000s, icons were often simple, pixelated graphics that were used primarily for navigation and to indicate links. As web design evolved, so did the use and design of icons.
One of the first major changes in the evolution of web icons was the introduction of icon fonts. Icon fonts were first introduced in 2010 and quickly gained popularity as a way to easily incorporate icons into web design. They offered a lightweight and scalable alternative to using images for icons.
As web design continued to evolve, the use of SVGs (Scalable Vector Graphics) became more prevalent. SVGs allowed for more design flexibility and could be easily scaled without losing quality. This made them a popular choice for creating custom icons and graphics.
The introduction of flat design in the mid-2010s also had a significant impact on the evolution of web icons. The flat design emphasized simplicity and minimalism, with a focus on using simple shapes and bold colors. This led to the widespread use of simple, minimalist icons that were easy to recognize and visually appealing.
More recently, the trend towards using animated icons has become more prevalent. Animated icons can add an element of interactivity and engagement to web design, making them a popular choice for websites and applications. Another recent development in the evolution of web icons is the use of 3D graphics and isometric design. These styles add depth and dimension to icons, making them more visually interesting and engaging.
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.
Advantages of icon fonts
Icon fonts have been around for a while and have been a popular choice for displaying icons on websites and applications. Here are some of their advantages:
Easy to use: Icon fonts are easy to use and require minimal setup. All you need to do is include the font files in your project and use CSS to display the icons. You can even customize the icons using CSS, such as changing the color, size, and other properties.
Lightweight: Icon fonts are lightweight and do not add much to your website's page load time. Since the icons are encoded as font glyphs, they are essentially text and do not require separate image files to be loaded.
Widely supported: Icon fonts are widely supported by browsers and can be used on virtually any device or platform. They are also compatible with screen readers and other assistive technologies, making them accessible to users with disabilities.
Disadvantages of icon fonts
However, there are some drawbacks to using icon fonts:
Limited customization: While icon fonts can be customized using CSS, they are limited in terms of design flexibility. You are limited to the predefined set of icons included in the font, and you cannot create your own custom icons.
Quality issues: Some icon fonts may suffer from quality issues, such as jagged edges or pixelation, particularly at smaller sizes. This can be especially noticeable on high-resolution screens.
Accessibility concerns: While icon fonts are generally accessible, there are some concerns around their use. Since they are encoded as font glyphs, screen readers may have difficulty identifying them as images, and users may not be able to access alternative text descriptions.
Advantages of SVGs
SVGs have become increasingly popular in recent years and are now a common choice for displaying icons on websites and applications. Here are some of their advantages:
Design flexibility: SVGs offer more design flexibility than icon fonts, allowing you to create your own custom icons and graphics. You can also apply advanced effects and animations to SVGs using CSS or JavaScript.
Scalability: SVGs are scalable and can be resized without losing quality. This makes them ideal for use on high-resolution screens or in responsive designs, where icons need to be resized depending on the device or screen size.
Accessibility: SVGs are more accessible than icon fonts, as they can be easily identified by screen readers and other assistive technologies. You can also provide alternative text descriptions for SVGs, making them accessible to users with disabilities.
Disadvantages of SVGs
However, there are also some drawbacks to using SVGs:
Complex setup: Setting up SVGs can be more complex than icon fonts, particularly if you are creating your own custom icons. You may need to use specialized software or tools to create and optimize your SVGs.
Larger file sizes: SVGs can have larger file sizes than icon fonts, particularly if they include complex graphics or animations. This can impact your website's page load time and performance.
Browser support: While SVGs are supported by most modern browsers, some older browsers may not support them fully. This can result in inconsistent rendering or display issues for some users.
Which one should you use?
So, which option should you choose? It ultimately depends on your project's specific requirements and constraints. Here are some key factors to consider when deciding between icon fonts and SVGs:
1. Size
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.
2. Performance
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.
3. Flexibility
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, as most users have moved away from legacy browser 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 IE, which doesn't properly scale SVG files (height and width attributes are recommended).
5. Scalability
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.
6. Positioning
Because icon fonts must be inserted via a pseudo element, positioning font icons can be tricky. You may have to consider the line-height, vertical-align, and 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.
7. Accessibility
If accessibility is a top priority for your project, SVGs may be the better choice. 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.
Summary
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.
Let us know your thoughts in the comments below. Are you using icon fonts, SVG icons, or a combination of both?