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 subset is just a smaller set of something. So, a Font Awesome subset has only some of the icons but still includes all the awesome utilities, styling, and ability to easily add icons into your project.
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 can keep your team aligned on the desktop and improve performance on the web.
You can create a subset easily by adjusting your Kit settings, or selecting just some styles when hosting yourself.
Subset Options
Font Awesome offers a number of options for subsetting:
| Icon Selection Mode | Description | Level |
|---|---|---|
| Full Library - Pro (Kits) | No subsetting - Includes all icons in all styles. No configuration needed. | The easy option. All icons available, largest Kit size. |
| By Style (Kits) | Includes all icons in only your chosen styles. | A nice medium option to slim down but still have the flexibility to try out a variety of icons. |
| By Icon (Kits) | Hand-pick exactly the icons your project needs. Smallest Kit, fastest load. | The most nitty-gritty option for full control. |
| Select Styles (Host Yourself) (Web Fonts or SVGs+JS) |
Download 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. |
Full Library (Kits)
Full Library includes all icons in all Pro (and Pro+) styles — no configuration needed. This is an easy option when you want access to everything without worrying about managing a subset, and don't mind loading everything.
To use the full library, go to your Kit's Settings tab and select "Full Library" under Icon Selection.
By Style (Kits)
With By Style, you can pick which styles you want included in your Kit. You'll have access to all the icons for the styles you choose, but none of the extra load for styles you aren't using. This is a nice middle ground — smaller Kit, faster load.
To subset by style, go to your Kit's Settings tab and select "By Style" under Icon Selection, then check the styles you want to include. (If you have access to Pro+ icon collections, you'll see those listed in Settings as well.)
By Style Icon Selection in Your Kit's Settings
Our SVG+JS method is already most efficient when loading all styles so you don't need to limit your styles when using that tech.
By Icon (Kits)
If you know exactly which icons you want to include, subsetting "By Icon" gives you full control to slim things down as much as possible. Hand-pick exactly the icons your project needs for the smallest Kit and fastest load. Just keep in mind you'll need to come back to add icons when you want to use new ones.
Before enabling "By Icon" on a Kit, there are a few things to know:
- When you first enable "By Icon", your Kit will only include your Kit's custom icons until you select which icons to include in your Kit.
- We don't recommend switching to "By Icon" when using a hosted Kit on a production site because it will stop serving icons until you select some icons. For a seamless transition, create a new Kit, add the icons for your subset, and then swap the Kit embed code on your production site.
Enable By Icon in Your Kit Settings
Head to the Settings page for your Kit and select "By Icon" under Icon Selection.
By Icon Selection in Your Kit's Settings
Your Kit will not include any icons except your custom uploaded icons until you add icons in the next step.
Add Icons to Your Kit
There are two ways to add icons to a Kit with "By Icon" enabled:
Browse and Add from the Icon Search
The easiest way to build your subset is right from the Font Awesome Search:
- Search or browse for icons on fontawesome.com.
- Click the button in the upper left of any icon to select it. A tray will appear at the bottom of the page showing how many icons you've selected.
- Manage your selections by clicking "Manage Selection" in the tray to see all your collected icons. You can also remove any you don't need.
- Select your Kit from the dropdown in the tray. Only Kits set to subset "By Icon" will appear here.
- Click "Add to Kit" to add all your selected icons to the Kit.
The Icon Grid Tray at the bottom of the icon browse page
If you don't have a Kit with Icon Selection set to "By Icon" yet, you'll be prompted to create one when you try to add an icon.
From the Kit Icons Tab
You can also manage your icon selections or search for more directly from your Kit's Icons tab.
Managing your By Icon selections in the Kit Icons tab
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.
In Web-based Projects
Hosted via 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, and your Kit will deliver only the icons you have included in your subset.
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. The download will only contain the icons you included in your subset. And if you make changes, don't forget to download and install the updated files!
View what's in a subsetted Kit download for Web.
When you're self-hosting a SVG+JS subsetted kit with Sharp icons, all the icons and utilities for Classic AND Sharp will be included in the all.js file - you don't need to add any sharp- files. (This is different from the way you would use the regular Font Awesome download which needs both all.js and any sharp- style files.)
In Desktop Apps
Download
Download your subsetted Kit from the Set Up tab and use it just like regular Font Awesome in your desktop apps. The download will only contain the icons you included in your subset. And if you make changes, don't forget to download and install the updated files!
View what's in a subsetted Kit download for Desktop