Speed up your site by creating a super-lean, super-fast subset of Font Awesome! Choose just the icons you need then serve them up as a subset on your site or app to make it faster than ever.
A Font Awesome subset is a bundle that includes all of the utility, styling, and ability to easily add icons into your project that comes with Font Awesome, but only has some of the icons.
Since Font Awesome has a LOT of icons - and we're adding more all the time - you're probably not using all of the icons in a project. Slimming down to just the ones you're using in your project can keep your team aligned on the desktop and improve performance on the web.
Font Awesome has a few options for subsetting:
| Subset Type | Description | Level |
|---|---|---|
| Auto-Subsetting | Our classic subsetting method does a good job at automatically loading as little as possible without you having to customize anything. | The easy option that still gives you decent performance. |
| Subset By Style | Narrow down the number of styles included in your Kit when you're only using some of our styles. | A nice medium option to slim down but still have the flexibility to try out a variety of icons. |
| Custom Subset By Icon | Select the exact icons you want to include in your Kit. | The most nitty-gritty option. |
| Host Yourself - Select Styles (Web Fonts or SVGs+JS) | Download the all of Font Awesome and pick the styles to include in your self-hosted environment. | A manual option where you do all the subsetting work. |
| Desktop Subsetter | Download the Pro Subsetter app and build a subset for self-hosting. | A GUI-based option for creating self-hosted subset. |
If you're using the Kit embed code to get your Kit into your web project, Auto-Subsetting is already built in. Auto-Subsetting slims down the number of icons and serves the ones you're using in your project, site, or app. It's pretty good at slimming things down but is a little more weight and a bit more magic than custom subsetting.
Auto-Subsetting is a great choice overall - especially when you want things to be easy or you'll be adding new icons and don't want to have to remember to add them to your custom subset in advance.
Here's where Auto-Subsetting is available:
| Implementation Method | Available? |
|---|---|
| Hosted Kit using SVG + JS | |
| Self-hosted SVG + JS | |
| Hosted Kit using Web Fonts (loaded via JS) | |
| Hosted Kit using Web Fonts (loaded via CSS) | |
| Self-hosted Web Fonts (loaded via JS) | |
| Self-hosted Web Fonts (loaded via CSS) | |
| Vue.js Component | * |
| React Component | * |
| Ember Component | * |
| Angular Component | * |
| SVG Sprites | |
| SVG Unicodes | |
| Bare SVGs |
* This JS component doesn't support Auto-Subsetting but does support tree-shaking through the use of build tools. It's similar to Auto-Subsetting.
With Subsetting by Style, you can pick which styles you want included in your Kit and you'll have easy access to all the icons for that style but none of the weight of the styles you aren't using.
To subset by style, go to your Kit's Settings tab and select "Auto-Subsetting" under Subset and then pick your styles under "Styles".
If you know exactly which icons you want to include, you can create a Kit using Custom Subsetting by Icon. Custom subsetting is great if you want full control to slim things down as much as possible and don't mind coming back to edit your subset when you want to add icons.
Before custom subsetting a Kit, there are a few things to know:
If custom subsetting is right for your project, head to the Settings page for your Kit and select "Custom Subsetting" under Subset. You also have the option to turn off some of the styles under "Styles" but you don't need to do that.
Go to the Icons tab for your Kit and click on the Style you want to select icons from.
When you click on a Style, a modal window will open to search or browse for the icons you want to include. When you find one, click to add it to your subset. You can see the icons you have selected in the "Selected Icons" tab. Don't forget to save when you're done!
Repeat for each style you want to select icons to include.
Once you have picked the styles or icons you want to include in your Kit, you can use it in any of the ways you usually would use a regular Kit to get icons into your project.
Grab the Font Awesome 6 Subsetter from the Download page and install it on your Mac or Windows machine. Open up the app and sign in to your Font Awesome account.
When you open the Subsetter, it lists all the available icons grouped by style. (The Subsetter only contains the icons for the version of the Subsetter that you are using. You can find your version number in the lower right corner of the app.)
Search the icons by name, filter by style, or scroll to browse. Once you find an icon you want, click to add it to your subset. Change your mind? Click the icon again to remove it, or you can click to remove it in the subset sidebar.
Once you have the set of icons you want included in your subset, click the "Build Subset" button on the bottom right. The Subsetter will connect to the Font Awesome API to build and package up all the icons and other files you'll need to use your subset. After a few seconds, you will be prompted to name the subset and select where to save the Zip file of packaged assets.
Once you’ve built and downloaded your subset, it's just like a mini-version of Font Awesome. You can follow the directions on Host Font Awesome Yourself with Web Fonts + CSS or Host Font Awesome Yourself with SVGs + JS.
If you've been in the subsetting game for more than a minute, you've probably been building your Font Awesome subsets with the Desktop Subsetter. But there's a lot of reasons to switch to using a Kit-based Custom Subset instead, like:
With a Kit-based Custom Subset, you can use it in any of these ways:
To start importing your existing subset from the Desktop Subsetter to a Kit, open your subset in the Desktop Subsetter and save the subset. (It will be saved as a .yaml or yml file.)
.yaml file in the Desktop Subsetter on a MacOnce you have your subset's .yaml file...
If any icons have been renamed, the old names will still work (through the magic of aliases!), but you'll see the new name in your subset. And if any icons were removed from Font Awesome (it's pretty rare), we'll let you know.