Your site uses perhaps eight icons: a phone, an envelope, a map pin, a tick, and a few social logos. Yet the speed report lists a Font Awesome stylesheet as render-blocking, two or three font files with names like fa-solid-900, and a warning about text staying invisible while fonts load. Eight small pictures should not cost that much.
This is the classic case for comparing SVG icons vs icon fonts. Icon fonts were the convenient answer for years, and many themes and plugins still use them. But the way they load means a handful of icons can bring a surprisingly large set of files with them. The swap to SVG is usually worth making. The real risk is not speed at all but the forgotten icon that vanishes from a mobile menu, so much of the work below is about finding every place one is used.
What an icon font is
An icon font is a font file where the characters are pictures instead of letters. The site loads the font, and a stylesheet maps class names, such as one for a phone icon, to particular characters in it. Font Awesome is the best known, but themes, page builders and plugins often ship their own, and WordPress itself has Dashicons for the admin area.
The appeal was obvious: one file, hundreds of icons, recolour and resize them with CSS like text. The catch is in that “one file, hundreds of icons”.
What loading an icon font really costs
The whole set, to show a few
The font file contains every icon in the set, whether your page uses five or five hundred. The stylesheet that goes with it contains a rule for every icon too. Unless someone has built a custom subset, every visitor downloads the full collection.
One file per style
Font Awesome splits its icons into styles such as solid, regular and brands, each in its own font file. If your site uses one solid icon, one regular icon and one social logo, that is three font files plus the stylesheet.
Several copies of the same library
This is where it really adds up. The theme loads Font Awesome. The page builder loads its own copy, sometimes a different version. A social sharing plugin loads another, and a forms plugin brings its own icon font. None of them knows about the others, so the browser fetches all of them.
Render-blocking and invisible icons
The icon stylesheet is usually loaded in the page head, which blocks the page from displaying until it arrives. Then the font itself has to download before icons appear. Until it does, icons show as blank spaces, or as odd characters if the browser falls back to another font. Text fonts raise the same loading questions; our post on Google Fonts slowing a website deals with those separately.
How to see what your site loads
- Open a typical page, press Ctrl+U (Cmd+Option+U on a Mac) to view the source and search for “awesome”, “icons” and “fa-“. Note every stylesheet that looks like an icon library.
- In Chrome’s developer tools, open the Network panel, choose the Font filter and reload with the cache off. Each font file listed is a separate download. Look for names that point to icon sets.
- Count the icons you can actually see on the page. Compare that number with the number of icon files loaded.
- Repeat on another kind of page, such as a blog post or contact page. Icon libraries often load everywhere, even on pages with no icons.
- Check while logged out. Logged-in users also see the admin bar, which loads Dashicons on the front end; visitors do not.
SVG icons vs icon fonts compared
SVG is an image format made of shapes rather than pixels. A single icon as SVG is usually a few lines of code, sharp at any size. There are three common ways to use SVG icons.
| Approach | How it loads | Good for | Drawbacks |
|---|---|---|---|
| Icon font | A stylesheet plus one or more font files with the whole set | Sites that use many icons from one library and cannot change templates easily | Downloads the whole set, can block rendering, icons blank until the font loads |
| Inline SVG | The icon’s code sits directly in the page HTML | A handful of icons; no extra requests at all | The same icon repeated many times adds to the page size, and it is not cached separately |
| SVG sprite | One small file containing only the icons you use, each referenced by name | Sites with many icons used across many pages | Needs a developer to set up; the sprite file must be on your own domain |
| SVG as an image | Each icon is its own file, like any image | Logos and one-off graphics | Cannot be recoloured with CSS; one request per icon |
For most small business sites, inline SVG for the handful of interface icons is the simplest and lightest choice. Inline SVG icons can still take their colour from the surrounding text, so a footer icon turns white on a dark background without extra work.
Accessibility is easier with SVG too
Screen readers can stumble over icon font characters, which are really invisible letters. Each icon has to be marked so it is ignored or labelled. Some visitors also set their browser to block websites’ own fonts for readability, and then every icon-font icon turns into an empty box. SVG icons are not affected by font settings, and can carry a proper title or be hidden from screen readers cleanly.
The missing icons risk when switching
The danger in removing an icon font is not the font itself. It is the places you forgot used it. A widget in the footer, a plugin’s form, a star rating, a mobile menu toggle. Turn off the library and those quietly become empty spaces or squares. Visitors may not notice a missing decorative icon, but a hamburger menu that vanishes on phones is a serious problem.
If icons are already missing or showing as squares before you change anything, that is a loading fault rather than a speed decision, covered in our post on WordPress fonts and icons missing.
Switching in WordPress, step by step
- Work on a staging copy. You will be removing styles that several plugins may depend on.
- Make an inventory. Go through the main templates: header, footer, menus, home page sections, forms, shop pages, blog. List every visible icon and where it comes from.
- Look for built-in options first. Some themes have a setting to stop loading Font Awesome. Some page builders can output their icons as inline SVG instead of loading the icon font; Elementor, for example, has a performance feature for this. Our post on speeding up an Elementor site covers its other settings.
- Replace the icons you control. For icons in your menus, headers and custom sections, swap the icon font class for an SVG icon. Many icon libraries, Font Awesome included, publish their icons as individual SVG files too.
- Stop the font loading. Once nothing visible depends on it, prevent the library from loading, through the theme setting, the builder setting, or a script manager plugin that can disable a stylesheet per page or site-wide.
- Check every template and both screen sizes. Look specifically at the mobile menu, forms, ratings and social links.
- Clear caches and compare. Retest the same pages and compare the Font filter in the Network panel with your earlier notes.
You will not always be able to remove every copy. A plugin may hard-code its own icon font. In that case, at least make sure it loads only on the pages where that plugin is used.
When an icon font is still reasonable
- The site genuinely uses many icons from one library across most pages, and only one copy loads.
- The theme depends on it so deeply that replacing it would mean rebuilding templates, and the rest of the site is already fast.
- A rebuild is planned soon, and the change can wait for it.
Icon fonts are rarely the single biggest speed problem on a page, but they are often an easy one to remove. For the other things that make a page heavy, see our overview of what images and graphics do to speed and the wider page speed guide.
Frequently asked questions
Can I upload SVG icons through the WordPress media library?
Not by default. WordPress blocks SVG uploads because an SVG file can contain code, so you need a plugin that cleans uploaded SVG files, or a developer who adds icons directly to the theme. For a handful of interface icons, adding them to the theme or using a builder’s inline SVG option avoids uploads altogether.
Is Font Awesome bad for SEO?
Not directly. Search engines do not penalise a site for using an icon font. The effect is indirect: extra files and render-blocking styles can slow the page, which matters for visitors and for page experience. Icons that carry meaning, such as a phone icon used as a link, should also have a text label search engines and screen readers can read.
Why do my icons show as squares on some phones?
That usually means the icon font failed to load or the browser is set to block website fonts, so it falls back to a normal font that has no matching character. A slow connection, a blocked font file or a caching or CDN problem can cause it. Switching to SVG icons removes that dependency.
Do SVG icons make the page heavier if I use the same icon many times?
With inline SVG, each repeat adds the icon’s code to the page again. For a few icons this is tiny. For dozens of repeats, such as an icon on every row of a long list, an SVG sprite is better, because the shapes are defined once and each use just refers to them.
When three icon libraries are loading and nobody knows which plugin needs which, the inventory is the slow part. That kind of clean-up, along with fonts and other third-party files, is covered in our speed optimisation work, and nothing is switched off without your approval.
Next in this series: WooCommerce Product Images Slow? Fix the Grid and Gallery
