Icon Fonts vs SVG Icons: What Works Best for You?

It’s hard to imagine modern web pages without these tiny but helpful elements – icons. You are sure to find them in navigation menus, contact details, product descriptions, etc. As an integral part of UI design, icons can also represent a challenge for developers.

An intense debate about icon fonts vs SVG fonts has been taking place for a while. Now, we’ll explore what icon fonts and SVG icons are, how you can use them, and which method you should prefer in particular situations.

What Are Icon Fonts?

Icon fonts, as the name suggests, represent fonts that contain icons instead of letters and numbers. Such icons include symbols and glyphs. As a rule, a set of icon fonts is stored in a font file.

Icon fonts were the de facto method of adding vector-based icons to websites until early 2020 when the real SVG support in different browsers became stable.

Why Have Icon Fonts Been Popular?

First, each character in icon fonts is scalable. Mainly, you can adjust icons with the help of CSS, modifying their size, color, and shape. You only have to create relevant classes in your CSS.

Second, the possibility to point to the font file lets designers use any font they wish without worrying if it is web-safe. Browsers request the indicated file and show the icon.

Third, icon fonts are small in size, and thus they can load quite fast.

While icon fonts have several considerable advantages, we should not disregard their disadvantages.

Reasons to Avoid Using Icon Fonts

First, we mentioned the icon fonts scalability. Indeed, it’s possible to change the font color and add a shadow to it, if necessary. Yet, remember that you can apply only one color to such icons. Being monochromous and having style limitations is one of the cons that font icons may present for designers/developers.

As for the size, icon fonts design suggests a specific grid, such as 16×16, 32×32, 48×48, etc. Changing the grid can result in losing the quality of the icon.

Although you can adjust icon fonts for different viewport sizes, you should also remember to put them in aria classes to make them accessible for browsers.

Another problem that may arise with font icons is a flash of unstyled content (FOUC). To use icon fonts, you have to apply the @font-face rule, which instructs browsers to make an HTTP request for the font file.

While processing the HTML and the files linked to it, the browser builds the Document Object Model (DOM) in real time. Depending on the font file size, network conditions, and user’s hardware, it can take time to retrieve the font.

Until the browser is able to reach the font asset, it can display the textual HTML content before fully receiving it, which results in FOUC. Thus, there is a chance that random glyphs or characters will be shown instead of icons before the font is fully loaded. Such flashes can be irritating and impact user experience negatively.

What’s more, icon font files usually contain numerous elements, many of which you’ll probably not use. Yet, the file will take up the space.

What Are SVG Icons?

An SVG (scalable vector format) file, as the name implies, is an image format for vector graphics that features scalability. SVG files use XML-based markup language for describing vector graphics. In other words, SVG images are text-based and can function with CSS, JavaScript, DOM, etc.

Implementing SVG Icons

There are different ways of adding SVGs to websites. You can implement SVG icons either externally, as an image with the <img /> tag, or inlined in HTML.

External SVG Icons

To display an SVG icon, you should use the <img /> HTML element, similar to loading PNG, JPG, or GIF files:

<img src="path/your-image.svg"/>

Inline SVG Icons

Inline SVG will look like this:

<svg xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 500 500">
    <!-- SVG code here  -->
</svg>

This particular type of adding SVGs does not increase server requests and thus doesn’t affect the website’s performance negatively. 

Benefits of Using SVG Icons

Let’s explore the main advantages of using SVGs on web pages.

Scalability

Unlike PNG or JPEG images, SVG icons are scalable, so your webpage will not suffer from a loss in quality when visitors use various devices to browse it.

Moreover, as browsers treat SVGs as images, there are no anti-aliasing rules for SVGs. Icon fonts, on the contrary, are vulnerable to these techniques and can look blurry. You can be sure that the visual quality of SVGs will be perfect in all resolutions.

Customization Options

SVGs are more flexible than icon fonts. First, you can add more colors with SVGs. Unlike single-color icon fonts, SVG icons allow for gradients. Furthermore, you can animate individual strokes in SVG icons.

Icon Positioning

Positioning an SVG vs icon font is simpler with SVG. To place an icon font, you might need to adjust various properties, such as word and letter spacing, alignment, line height, or font size. With SVGs, it’s enough to specify the size.

Fewer Server Requests

As we have already stated, specifying an icon font in CSS with the @font-face rule, you must indicate the URL where the font can be found. So, using the @font-face rule means instructing the browser to request the font file.

With SVGs, the crawler doesn’t have to send server requests to display the icon.

SEO Enhancement

Search engines can crawl and index SVG files. Built-in semantic elements, such as <title> and <desc>, make these files more accessible than icon fonts. It means that crawlers will understand better what your page is about.

Additionally, <alt> elements will be useful if some screen scanners cannot process icons properly. So, accessibility issues will be solved by displaying the alt name to visitors.

Creating and Adjusting SVG Codes

The latest versions of drawing programs, like Inkscape, Illustrator, and Sketch, produce pretty clean SVGs. Then, you can use any text editor to adjust an SVG code. Additionally, numerous online resources can help you.

Here is a list of icon services that have SVG options:

• IcoMoon App 
• Material Design Icons
• Icons | Font Awesome
• Free Icons
• Icon Packs

Using these services, you can search for a necessary icon. 

In some cases, you can also customize the size and color free of charge. Having made the necessary adjustments, you should copy the code or download the SVG.

Customizing the Code

After copying the code, we highly recommend checking it, keeping the compulsory elements, and removing any superfluous items. This will lead to a clean code and smaller file size. Let’s look at some examples.

With the Material Design Icons, you’ll get such a code:

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" />
</svg>

As shown in the screenshot, you can download the SVG file or simply copy the code.

The FontAwesome code looks different:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 128C0 92.65 28.65 64 64 64H448C483.3 64 512 92.65 512 128V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V128zM48 128V150.1L220.5 291.7C241.1 308.7 270.9 308.7 291.5 291.7L464 150.1V127.1C464 119.2 456.8 111.1 448 111.1H64C55.16 111.1 48 119.2 48 127.1L48 128zM48 212.2V384C48 392.8 55.16 400 64 400H448C456.8 400 464 392.8 464 384V212.2L322 328.8C283.6 360.3 228.4 360.3 189.1 328.8L48 212.2z"/></svg>

As you can see, this code contains credentials — a link to the FontAwesome website. There are other elements that you can find in SVG codes.

ID Attribute

Some software, like Illustrator, adds the ID attribute. If you use CSS and JavaScript, this attribute is helpful. Otherwise, it’s possible to remove it safely.

The x and y Attributes

In Illustrator codes, you can also find x=”0px” y=”0px” piece of coding. You can remove these attributes, too.

Enable Background and xml:space=”preserve” Attributes

As browsers don’t support these attributes, you can leave them out.

Several online tools can assist in removing the unnecessary coding:

• SVGOMG – SVGO’s Missing GUI  is the service to optimize icons one by one;
• svgoptimizer is an instrument that helps to optimize multiple icons at once.

Summing Up

Icon font vs SVG comparison shows that SVGs are more reliable, scalable, and rendered faster. That is why SVGs are becoming the new standard of web icons and a W3C Recommendation.

Here are some tips on what icons to choose.

1. If you need many icons without much style modification, icon fonts can work well for you. For customization and animation, it’s better to use SVGs. This is especially true if you require full control over colors, smooth transitions, and animation of various icon parts.
2. You can use inline SVGs if there is not a multitude of icons that should be rendered on a single page.
3. Inline SVGs add some coding to your files, so if you don’t mind this, feel free to use them.
4. SVG icons will look perfect both on regular and retina displays. If this factor is important, you should prefer inline SVGs to font icons.
5. Accessibility support is better with SVG icons. So, if accessibility is a must for you, choose inline SVGs.

---

Superb Web Development Services from GetDevDone

GetDevDone has been at the forefront of the web development industry for almost 17 years.

We provide CMS-based development (HubSpot, Drupal, WordPress), frontend development with cutting-edge JavaScript frameworks/libraries (Vue, React, Angular), and pixel-perfect, responsive design to HTML/CSS conversion. We also craft email templates and stunning HTML5 banners, build online stores based on popular eCommerce platforms (WooCommerce, Shopify, Magento), and offer other top-quality services.

Reach out to us to discuss your business needs!