Font Awesome and Icon Fonts: Lighter Ways to Show Icons

Quick answer: Icon fonts such as Font Awesome are convenient, but loading the full set to display a few icons adds a CSS file and a font file of several hundred icons to every page. They can also show blank squares when the font fails to load, look slightly blurry, and cause accessibility problems. To lighten the load, build a custom subset containing only the icons you use, load it efficiently, or switch to SVG icons, either as an SVG sprite or inline SVG, which are sharper, more flexible and usually smaller for typical sites.

Icons are everywhere on business websites: phone and email symbols in the header, social media links in the footer, ticks on feature lists, arrows on buttons. For the last few years, the default way to add them has been an icon font, and Font Awesome in particular. It is easy, free and comes bundled with many WordPress themes. But convenience has a cost that is easy to overlook.

How icon fonts work

An icon font is a web font where each character is a symbol rather than a letter. A stylesheet defines classes, so writing <i class="fa fa-phone"></i> shows a phone icon. Because it is text, the icon scales with font size and takes its colour from CSS, which made icon fonts a big improvement over the image sprites that came before.

Font Awesome 4.6, the current version, includes several hundred icons. The library loads as one stylesheet plus a font file in several formats, and browsers download whichever format they support.

The performance cost

You load every icon to use a few

Most sites use perhaps ten to twenty icons. The font file contains every icon in the set, and the stylesheet contains a class for each one. That is extra data downloaded on the first visit, and extra CSS for the browser to process on every page.

Another render blocking request

Icon font stylesheets are usually loaded in the head, so the browser waits for them before showing the page. If the font loads from a third party CDN, that also adds a DNS lookup and a new connection. Our guide to WordPress speed optimisation explains why every blocking request counts, especially on mobile connections.

Duplicate libraries

It is common to find a WordPress site loading Font Awesome two or three times: once from the theme, once from a page builder, once from a plugin, sometimes different versions. Each one adds weight, and conflicting versions can show the wrong icons.

Other problems with icon fonts

Invisible or broken icons

If the font fails to load, because of a slow connection, a blocked CDN, a browser setting, or a cross origin rule on your server, visitors see empty squares or nothing at all. Icons that carry meaning, such as a phone icon used without a text label, simply vanish.

Rendering quality

Browsers treat icons as text and apply text smoothing, which can make them look slightly blurry or misaligned at some sizes. Positioning relative to text is also fiddly, because icons inherit line height and baseline rules.

Accessibility

Screen readers may try to read the character an icon font uses, or announce nothing useful. Decorative icons should be hidden with aria-hidden="true", and icons that carry meaning need a text alternative. Many sites do neither.

Single colour only

Each icon font glyph is one colour. Multi colour icons need layered tricks or a different approach.

Option 1: Keep the font, but trim it

If your theme or site relies heavily on icon font classes, the easiest improvement is to make the font smaller.

• Build a custom subset. Tools such as Fontello and IcoMoon let you choose only the icons you need and generate a small font file and stylesheet. A subset of twenty icons is a fraction of the full library.
• Remove duplicates. Check your page source for multiple copies of Font Awesome. Dequeue the extras in your theme’s functions.php so only one loads.
• Host it yourself or use a reliable CDN. Self hosting avoids the extra connection; a popular CDN may already be cached in visitors’ browsers. Either way, set long cache expiry headers.
• Serve WOFF first. Most modern browsers support the compact WOFF format. Order your @font-face sources so browsers pick the smallest format they support, and drop old formats you do not need.
• Add fallbacks. Pair important icons with visible text, so the meaning survives if the font fails.

Option 2: Switch to SVG icons

SVG (Scalable Vector Graphics) is an image format made of shapes described in code. All current browsers support it, including Internet Explorer 9 and later.

Why SVG is often better

• Sharp at any size, without text smoothing issues.
• Only what you use. You include the icons you need and nothing else.
• Multi colour support, and individual parts can be styled with CSS.
• Better accessibility, using title elements and ARIA attributes.
• No failed font loads. SVG either appears inline in the page or loads like any image.

SVG sprites

An SVG sprite combines all your icons into one file, with each icon defined as a symbol with an ID. You then display an icon with:

<svg class="icon"><use xlink:href="#icon-phone"></use></svg>

The sprite can be included at the top of the page body, so there is no extra request, or loaded as an external file that browsers cache. External sprites need a small polyfill script for older versions of Internet Explorer. Build tools such as grunt-svgstore or gulp-svg-sprite can generate the sprite automatically from a folder of icons. If you still need to cover very old browsers, our article on Internet Explorer support explains how to decide.

Inline SVG

For a handful of icons, you can paste the SVG code directly into your templates. This is the simplest approach, with no extra requests, though repeated icons add to the size of each page.

SVG as images or backgrounds

SVG files can also be used in img tags or as CSS backgrounds. These are easy, but you cannot change the colour with CSS, so you may need separate files for hover states.

Option 3: Use fewer icons

Before choosing a technique, ask whether every icon earns its place. Decorative icons beside every heading and list item add visual noise as well as weight. Icons work best where they speed up recognition: navigation, contact details, status indicators and social links.

How to switch on a WordPress site

1. Audit what you use. Search your theme, widgets and content for icon classes.
2. Choose your approach. A trimmed font for minimal change, or SVG for the best result.
3. Update templates in a child theme or your custom WordPress theme, replacing font markup with SVG where you can.
4. Dequeue unused libraries from plugins and the parent theme.
5. Test thoroughly across browsers and devices, including how icons look on high resolution screens.
6. Measure before and after with a speed test tool, comparing page weight and number of requests.

FAQ

Is Font Awesome bad for performance?

Not dramatically on its own, but loading the full set for a few icons is wasteful, and duplicate copies add up. A subset or SVG is lighter.

Do SVG icons work in all browsers?

All current browsers support SVG. Internet Explorer 8 and older do not, so very old browsers need a fallback.

Will changing icons affect SEO?

Not directly, but faster pages and clearer labels help visitors, and speed is one of many factors search engines consider.

Lighter pages, sharper icons

Small changes like trimming icon libraries add up to faster pages. We audit and tune WordPress sites so they load quickly without losing their design. See how we help businesses turn visitors into customers.