How can your project get the best performance when using Font Awesome? That's a complex question, but one worth exploring.

Advertisement

Below are the details around different ways of using Font Awesome and where making some adjustments or implementation decisions can really help improve performance for your site or app.

Each Project is Different

We know that each site or app can be its own fa-snowflake. So, it's important that you test and decide which implementation of Font Awesome and the recommendations below work best for you.

Limit Styles When You Host Yourself

Are you just using one or two styles? Or one style plus brands? You can cut down on the amount of icons you load by just adding those files to your project:

Use the Desktop Subsetter

If you only have a small set of icons that you use in your project, you can use the Font Awesome Desktop Subsetter to create a subset of just the icons you need, using all the same build process that we use for the full official Font Awesome release. The Desktop Subsetter doesn't support v6 yet, but will soon!

Load Only One Version of Font Awesome

If you've used Font Awesome for a while and have an older version loading alongside Version 6, or are using it in an ecosystem where other versions of Font Awesome may be loading through a plugin or theme, we recommend that you remove those older versions when possible to get the best performance so you're not loading all the icons and assets twice.

Advertisement

Performance with SVG with JavaScript

When you use Font Awesome via the SVG with JavaScript method, the Font Awesome javascript looks in the page content for the <i> tags with the Font Awesome classes, and then swaps those elements out for SVGs that the browser then executes the SVG code to make the icon appear on the page. (Nerd Alert! We use batched mutations to make this as performant as possible.)

SVG with JavaScript is a good choice when:

  • you don't have a very large number of icons to display
  • you can use JavaScript subsetting to reduce file size
  • the user agent (browser) is less resource-restricted (has a faster CPU and enough memory)

Performance with Web Fonts with CSS

When you use Font Awesome via the Web Fonts with CSS method, the browser gets the icons from the Font Awesome font families defined in the CSS, just like it would for any other custom font. It is the original method that Font Awesome was built on, way back in the day, and has stood the test of time.

Web fonts with CSS is a good choice when:

  • you would prefer the battle-tested and mature web fonts technology
  • you have a very large number of icons to display
  • the user agent (browser) is resource restricted (slower CPU)

Performance with SVG Sprites

When you use Font Awesome as SVG Sprites, all the icons are laid out in a single sprite file and the CSS brings up the icon as a symbol on your site.

SVG Sprites are better for when:

  • you have a smaller number of icons
  • you can't or don't want to rely on JavaScript
  • you are willing to style with CSS the icons yourself
  • the user agent (browser) is resource restricted (slower CPU)

Performance with Individual SVG icons

Using bare SVG files is a very low level way to just add the raw SVG to your site, without any assistance with styling.

Bare SVGs are better for when:

  • individual small file (requests) are efficient for you or you are embedding SVG directly in your page
  • you can't or don't want to rely on JavaScript
  • you are willing to style with CSS the icons yourself

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!