Version 6 Alpha Docs 1.0 Learn

Performance & Font Awesome

How can your project get the best performance when using Font Awesome? That's a good, but complex question. Let's dive into it together.

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

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

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

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 assitance 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