Icons: Use SVG Instead of a Whole Icon Font

Look at the icons on a typical small business website: a phone, an envelope, a map pin, three social media logos, perhaps a menu button. Seven or eight small symbols. On many sites they come from an icon font, a font file in which each “letter” is a picture. It's a convenient way to add icons, and a theme or page builder may have added one for you. The catch is that you may be downloading hundreds of icons to show a handful. This article explains why, how to check, and what to use instead.

Why a few icons can cost a whole font

Browsers download fonts as whole files. MDN's page on the unicode-range descriptor puts it plainly: if a page uses at least one character from a font's range, “the whole font is downloaded”. For an icon font, every icon in the set is a character in that file. Use one icon and you receive the lot.

An icon font also comes with a stylesheet that tells the browser which character to show for each icon, and some libraries split their icons across separate files for different styles (solid, outline, brands). Libraries know the full set is heavy: Font Awesome's documentation, for example, describes its full library as the “largest” option and loading only chosen icons as the “smallest”. We mention it only as an example of what to look for in your own library's documentation.

There's a speed point as well. Google's web.dev guide to web fonts notes that by default the browser blocks text that uses a web font until the font has downloaded. With an icon font, the icons are that text, so they can appear late on a slow connection.

Check what your icons add

1. Open your page in Chrome, open DevTools (F12) and the Network panel, tick “Disable cache” and reload.
2. Click the “Font” filter. Look for file names that mention icons, the library name, or “brands”. Note the size of each.
3. Switch to the “CSS” filter and look for the library's stylesheet. Then open the Coverage panel and reload: it shows how many bytes of each CSS and JavaScript file went unused. An icon stylesheet with most of its bytes unused is a strong hint.
4. Count the icons actually visible on the page. Compare that with what you downloaded for them.

If you load fonts for text as well, our guide to web fonts covers those; this article is just about icons.

The SVG alternative

SVG is an image format made of shapes rather than pixels, so a simple icon is a short piece of text that stays sharp at any size. There are two common ways to use it:

• Inline SVG. The icon's code is placed directly in the page. Each icon you use is included; icons you don't use aren't, and there is no separate file to wait for.
• An SVG sprite. Several icons live in one file, and each place on the page refers to the one it needs with the <use> element. Useful when the same icons repeat on many pages. MDN notes that browsers may refuse to load a sprite from another domain, so keep it on your own.

Either way, the principle is the same: you ship the icons you use, not a whole catalogue. If an icon appears dozens of times on one page, a sprite avoids repeating its code each time.

Icons that everyone can understand

Icon fonts have an accessibility weakness. The W3C's technique ARIA24 explains that some people with low vision use their own stylesheets or extensions to replace a site's fonts with one they can read, and that when they do, icon-font icons “typically disappear” unless they are marked up so the override can skip them. If your only “Call us” signal is a phone icon, that matters.

SVG avoids the font problem, but it still needs the right markup. Ask your web person to:

• Give meaningful icons a name. MDN's guidance on the img role is to set role="img" on an inline SVG and give it a label, for example “Email”, so screen readers announce it as one image.
• Hide purely decorative icons that sit beside visible text, using aria-hidden="true", so the text isn't read twice. ARIA24 shows the same approach for icon fonts.

Making the switch

• Check your theme or page builder first. Look for a setting to stop loading a built-in icon library, or to load icons as SVG instead.
• If you must keep the font, see whether your library offers a subset with only your icons. Its documentation will say how.
• Replace, then remove. Swap each icon for an SVG version, then remove the font and its stylesheet. Leaving the old library loaded “just in case” keeps the weight.
• Measure again. Repeat the Network check, then run a GreenTracer check to see the new page total.

Icons are rarely the heaviest thing on a page; photos usually are. But unlike photos, an icon library can be added once and forgotten. Under the Sustainable Web Design Model v4, every megabyte removed lowers the estimate by about 0.148 g CO₂e per page view (about 0.121 g on a host listed as green), and every kilobyte you don't send is one less for every visitor. See how grades map to page weight.

Sources

• MDN: unicode-range
• web.dev: optimise web fonts
• W3C WAI: ARIA24, semantically identifying a font icon with role="img"
• MDN: ARIA img role
• MDN: the SVG <use> element
• Chrome DevTools: Network features reference
• Chrome DevTools: Coverage panel
• Font Awesome docs: subsetting (example of library documentation)
• Sustainable Web Design: estimating digital emissions (SWDM v4)