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 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.
If subsetting is right for your project and situation, you have a few options to choose from:
| Method | Description |
|---|---|
| Auto-Subsetting | Auto-magically subsets on all hosted Kits |
| Kit Custom Subsetting | Subset your Kit to use on the web with one line of code or download for desktop or self-hosting |
| Host Yourself - Select Styles (Web Fonts or SVGs+JS) | Download the full Font Awesome and pick the styles to include |
| Desktop Subsetter | Download the Pro Subsetter app and build a subset for self-hosting |
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 to serve just 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.
Kits have always been the easiest - and most performant - way to use Font Awesome, but now you can create a Kit that is tuned to just the icons you need AND you can use it on the web with just one line of code for great performance, or download for self-hosting or even using in your desktop design apps or projects.
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.
If custom subsetting is right for your project, here's how to get started:
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, you'll see a window open where you can 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 icons from all the styles you want to include in your subset, it's like your own tiny bundle of Font Awesome and you can use it in any of the ways you usually get icons into your project.
Your custom subsetted Kit will be set to the latest version available when you created the subset, so you'll likely want to come update your Kit's version occasionally to get new and updated icons and features.
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 Custom Subset instead, like:
With a Kit 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.
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.