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.

Advertisement
Pro Plan Required

Pro Plan Required!

This is a Pro feature so you'll need to grab a Pro-level plan to use it. You'll also get thousands more icons, access to services, and support! Already got a plan? Sign in!

About Subsets

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.

When to use a custom subset:

  • You want to fine-tune performance of your web project or app
  • You want to create a set of specific set of icons for your project team to use from design to development
  • You know the icons or styles you want to use

When NOT to use a custom subset (yet):

  • You want to try out a variety of icons as you design or build your project
  • You are happy using our Auto-Subsetting feature to do the subset work for you

Options for Subsetting

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

Auto-Subsetting

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.

Kit Custom 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.

Before custom subsetting a Kit, there are a few things to know:

  • Custom subsetting is only available on Kits set to Pro Icons AND Version 6.4+.
  • 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.

Set Your Kit to Custom Subsetting

If custom subsetting is right for your project, here's how to get started:

  1. Select the Kit you want to subset from your Kit listing page.
  2. Go to the Settings tab for your Kit.
  3. Switch the Subset option to "Custom Subsetting". Heads up that we will pin your version to the current latest available so any icons you select will be available in that version.
  4. Scroll down to save your new settings.

Mind the Gap!

Your Kit will only include your custom icons until you pick icons in the next step.

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

A Kit Ready to Subset

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.

Searching and selecting icons from the Classic Regular style for your subset

Select icons from the Classic Regular style for your subset

Viewing the icons in your subset for the Classic Regular style

Viewing the icons in your subset for the Classic Regular style

Make It So

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.

Use in a Web-based Projects

all.js Really Has It All

When you're self-hosting a SVG+JS subsetted kit with Sharp icons, all the icons and utilities for Sharp and Classic 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.)

Use in Desktop Apps

Updating

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.

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 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 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

Saving your subset .yaml file in the Desktop Subsetter on a Mac

Once you have your subset's .yaml file...

  1. Log into your Font Awesome account and scroll down to the "Pro Subsetter App" section.
  2. 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.
  3. 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.)
  4. 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.

Desktop Subsetter

The Desktop Subsetter is Sunsetted

The Desktop Subsetter is sunsetted and has been replaced with Kit Subsetting. (You can easily switch over if you want.) The Desktop Subsetter will no longer be updated but will receive essential bug fixes. Instructions below are for previously released versions.

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.

Pro Tip: Save your project YAML file!

The project YAML file created when you save will store all the icons you have selected so you can load it back up to add, edit, and rebuild the subset in the future. This YAML file is also used to import your subset into Kit when you're ready to switch.

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.