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.
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.
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
Reducing the number of icons that you load in your project can have a big positive impact on your performance. That's where creating a subset comes in. We've got a number of ways to create a subset - or smaller set - of icons using our tools.
Kit Icon Selection
When you use a Kit, you can create a subset of Font Awesome with any of your Pro Kits. Look for "Icon Selection" in your Kit's Settings and select the option that works for you:
- By Style: Select "By Style" under Icon Selection, then check off the styles you want to include in the section that appears below. Save your changes and your Kit will now only load the styles you selected.
- By Icon: Select "By Icon" under Icon Selection, then add the specific icons you want from the Icon Search or 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
If you've used Font Awesome for a while and have an older version loading alongside v7, 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 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