Web

Performance

We've paid a heck of a lot of attention to making Font Awesome load fast and light, and we've got options for you to get things right for your project.

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

Every site and app is 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.

Create a Subset

Kit Custom Subsetting

You can create a custom subset of Font Awesome with any of your Pro Kits.

Subset by Icon

From your Kit's Settings tab, select which styles you want to include in the Styles section. We'll only load the styles you choose.

Subset by Style

From your Kit's Settings tab, select Custom Subsetting and then pick the icons from each style you want from your Kit's Icons tab.

Best part is, you can let us host your subsetted Kit or download it and host it yourself.

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:

Load Only One Version of Font Awesome

Advertisement

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.

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

Advertisement

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