Subsetting
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.
What is a Subset?
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 Subset Options
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”.
Subsetting by Style in Your Kit’s Settings
Custom Subsetting: Subset By Icon
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:
- When you first enable Custom Subsetting, your Kit will only include your uploaded icons until you pick some icons from the Font Awesome styles.
- We don’t recommend switching to Custom Subsetting when using a hosted Kit on a production site because it will stop serving icons until you pick some. For a seamless transition, create a new Kit, select the icons for your subset, and then swap the Kit embed code on your production site.
- Custom subsetting is only available on Kits set to Pro Icons AND Version 6.4+.
Set Your Kit to Custom Subsetting
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.
Custom Subsetting by Icon in Your Kit’s Settings
Pick Some Icons
Go to the Icons tab for your Kit and click on the Style you want to select icons from.
A Kit Ready to Subset
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.
Select icons from the Classic Regular style for your subset
Viewing the icons in your subset for the Classic Regular style
Using a Subsetted Kit
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.
Use in Web-based Projects
- Embed Code: Use the JS (or CSS) Kit embed code that you’ll find on your Kit’s Set Up tab just like a regular Kit.
- Download: Download your subsetted Kit from the Set Up tab and use it to self-host as Host Font Awesome Yourself with Web Fonts + CSS or Host Font Awesome Yourself with SVGs + JS.
- View what’s in a custom subsetted Kit download for Web.
Use in Desktop Apps
- Download: Download your subsetted Kit from the Set Up tab and use just like regular Font Awesome in your desktop apps
- View what’s in a custom subsetted Kit download for Desktop
Desktop Subsetter
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.
Switch from the Desktop Subsetter to Kit Custom Subsetting
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:
- Instant Updates to Icons and Features: As soon as a new version of Font Awesome is released, you can upgrade your subset - no waiting for the app to be updated.
- Add Your Own Custom Icons: With a Kit, you can upload your own custom icons and we’ll bundle them into your subset to be used just like regular Font Awesome icons.
- Let Us Do the Hosting: You can still download your subset to host yourself, but you also have the option to let us host it for you.
With a Kit-based Custom Subset, you can use it in any of these ways:
- Download for the Web and Host Yourself as Web Fonts+CSS, SVG+JS, SCSS, Less, and more
- Embed using one line of Javascript in your project’s HTML
- Embed using one line of CSS in your project’s HTML
- Download for Desktop and use at OTFs or SVGs in Desktop apps
How to Import Your Desktop Subsetter YAML to Create a Kit Custom Subset
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.)
Saving your subset .yaml file in the Desktop Subsetter on a Mac
Once you have your subset’s .yaml file…
- Log into your Font Awesome account and scroll down to the “Pro Subsetter App” section.
- Under “Upgrade to a Kit-based Custom Subset”, click the link to “Import your subset .yaml file” and select the file you saved from the Desktop Subsetter.
- Click the “Import + Create Kit” button and we’ll import the icons, create the Kit Custom Subset for you, and bring you to your new Kit. (Note that your Kit will be set to the current version of Font Awesome.)
- From your new Kit, you’ll be able manage your subset: Upload custom icons, add or remove icons from your subset, and download your subset to host yourself.
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.