Use a Kit
Font Awesome Kits are here to save the day! Fast, flexible, friendly, and full of icons—They’re the personal CDN you’ve been waiting for.
What’s a Kit?
Section titled “What’s a Kit?”A Font Awesome Kit is the place to manage all your icons for a project. With the power of a Kit, you get the easiest way to use Font Awesome icons, great performance, easy customization, and you can even upload your own icons!
A Kit Icons page showing a Kit that includes 4 styles
It comes with amazing features like:
- Auto or Custom Subsetting: Serve only the icons you need so your pages load lightning-fast
- Free or Pro/Pro+ icons
- Upload your own icons: Add your own icons and serve them alongside Font Awesome ones!
- Web Font or SVG: Pick how you want your icons to render in your project
- JS or CSS only embed options: Choose how you want to get icons into your project, via javascript or javascript-free css-only
- Version 4 compatibility: Upgrade to the latest without changing all your icon references
- Conflict Detection: Help detect conflicting versions of Font Awesome
- … and more!
Creating and Using a Kit
Section titled “Creating and Using a Kit”Kits are incredibly versatile. They are the fastest way to get icons into your web projects, using just one line of code. But you can also use them via npm or yarn package, download and self-host, or download to use icons in your desktop apps.
Start from Your Kits Listing
Section titled “Start from Your Kits Listing”You’ll find a link to your Kits in the main nav or on your account page. From the Kits Listing page, choose one of your existing Kits, or click the “Add New Kit” button to start building a new Kit.
Build a New Kit
Section titled “Build a New Kit”When you add a new Kit, we’ll guide you through the set up process so it’s exactly what you need. Here are the steps:
1. Pick Your Styles
Section titled “1. Pick Your Styles”- Free Icons/Free Kit: Our Free icon styles - Solid and Regular, plus Brands - are bundled together. They’re fast to load, open-source friendly, and a great way to try out Font Awesome.
- Pro Pro and Pro+ Styles/Pro Kit: Choose from any of our ever-growing Pro/Pro+ icon styles plus Brands, and you can upload your own custom icons (with or without our Font Awesome icons).
2. Pick Your Delivery Method
Section titled “2. Pick Your Delivery Method”- Hosted: The easiest way to use Font Awesome. With one line of code, you can get icons onto your site. We’ll host and deliver your icons in a flash!
- Pro Self-Host: Download your Kit and include the icons and files into your project.
- Pro Package: Use an npm or yarn package to get icons into your project. Using a Kit instead of the full
fontawesomepackage means you can slim it down to just the icons and styles you need. - Pro Download for Desktop: Download your Kit to get the icon SVGs and OTF files to use in your desktop apps.
3. Customize Your Kit
Section titled “3. Customize Your Kit”- Give your Kit a name: Something memorable like your project name is a good choice. If you leave it blank, we’ll use your Kit’s unique ID.
- Pick a Color and Icon: Add some flair to make your Kit easy to identify in your list of Kits on fontawesome.com.
Put Your Kit to Use
Section titled “Put Your Kit to Use”From your Kit’s Set Up tab, you’ll find the embed code you need to copy if you’re using a hosted Kit. Add it to the <head> of each template or page of your project that you want to use Font Awesome icons. Or you can select one of the other ways to use a Kit listed your Kit’s Set Up tab.
About CSS-only Embed Codes
Section titled “About CSS-only Embed Codes”For those of you who prefer no JavaScript for “reasons”, you can select the option to use a CSS Kit embed code in the Kit’s Settings tab. Then go to your Kit’s Set Up tab and the copy the new CSS embed code, which will load Font Awesome strictly through CSS.
Heads up: You’ll need to set your Kit to use Version 7 with Web Fonts, and make sure you’re okay with the pros and cons:
| Benefits of CSS-only Kits | Cons of CSS-only Kits |
|---|---|
| No JavaScript | Blocks the page from loading until the icons are ready |
| No page repaints or jumping UI |
Additional Settings
Section titled “Additional Settings”Kits have a number of additional settings which you can access from your Kit’s Settings tab once you create it, so you can tune your Kit to be just what you need.
| Kit Feature | Description | Default Setting |
|---|---|---|
| Kit Name | An easily identifiable name for your kit (maybe use a project or site name?) | The Kit’s unique ID |
| Kit Color and Icon | Customize how your Kit looks on fontawesome.com | Yellow, icon is randomly selected |
| Type of Kit | Free includes all Free icons and is hosted, Pro lets you choose from any Pro/Pro+ icons and allows you to upload custom icons, download, or use as a package | Free for Free accounts, Pro for Pro accounts |
| Tech | Choose the type of tech you want to use to render your icons, Web Fonts or SVGs. | Web Fonts |
| Embed method | Change your embed code type from Javascript to CSS-only if you need to avoid using JavaScript in your project. (CSS-only requires using Web Fonts.) | JavaScript |
| Subset | Choose whether you want to use Auto-Subsetting or pick individual icons with Custom Subsetting. (Custom requires choosing styles and icons.) | Auto-Subsetting |
| Styles | Select the icon styles you plan to use in your project (i.e. want included in your Kit) | Solid, Regular, and Brands |
| Font Awesome Version | Select the version of Font Awesome icons and features you want to use | Latest (auto-updates to whatever the latest release is) |
| Limit Domains | Set which domains are allowed to use this Kit to prevent unauthorized use of your Kit embed code | Open (any domain can use) |
| Earlier version compatibility | Enables old version 4 or 5 icon names or references | On |
| Enable npm Download | Creates a package that you can install via npm or yarn for node-based projects | Off |
| Conflict Detection | Temporarily detects conflicts with other versions of Font Awesome loading in your project | Off |
Ready to Get Kitted Up?
Section titled “Ready to Get Kitted Up?”Take the power of kits into your hand… Head over to Kits and get started!
Downloading a Kit
Section titled “Downloading a Kit”If you don’t want us to host your Kit, you can download any Pro Kit and host it yourself (or use the icons in your desktop apps). Downloading is available on Kits set to Version 6.4 and higher (or Latest). Then on the Set Up tab in your Kit, you’ll see the options for downloading.
And if you have custom icons in your Kit, they will be included in your download in all the formats, just like the Font Awesome ones.
What’s in a Kit Download?
Section titled “What’s in a Kit Download?”| Folders & Files | What They Are |
|---|---|
css/ | CSS files for using with Web Fonts |
js/ | Icons and utility scripts for each style |
LICENSE.txt | License detailing permitted use of Pro/Pro+ Icons |
metadata/ | Metadata about the icons |
scss/ | SCSS-based utiliies to use with Web Fonts |
sprites/ | Icons as SVG sprites |
svgs/ | Icons as SVGs |
webfonts/ | Icons as Web Fonts to be used with CSS |
Using a Downloaded Kit
Section titled “Using a Downloaded Kit”Once you’ve downloaded the Kit, you can follow the instructions to Host Yourself - Web Fonts or Host Yourself - SVG+JS to get the icons and files into your project.
Using Kit Packages
Section titled “Using Kit Packages”You can use and manage your Kit’s assets as a package with package managers like npm or yarn!
A Kit package will contain whatever you put into your Kit. This includes any uploaded Custom Icons, assets for each icon style you’ve subset your Kit to use, and Font Awesome’s core Styling Toolkit.
Since Kits are subsetted and optimized, they only include the icon styles and features you’ve enabled.
Enable Package Installation for Your Kit
Section titled “Enable Package Installation for Your Kit”To make your Kit available as a package:
- Go to your Kit’s Settings
- Check the “Enable Installing Your Kit as a Package” option
- Save your changes
- Check the Kit’s Package Section for configuration details and usage instructions
Custom Subsetted Kits
Section titled “Custom Subsetted Kits”If you have set your Kit to Custom Subsetting, your Kit will include ONLY the icons you’ve selected plus any custom icons you’ve uploaded. That means:
- Hosted Kits will only serve the icons you’ve picked and your custom icons (if you have added some).
- Downloaded Kits will include the same folders listed above, but the files and fonts inside will ONLY include your selected and custom icons.
Once you’ve downloaded the Kit, you can follow the instructions to Host Yourself - Web Fonts or Host Yourself - SVG+JS.
Tune Your Kits
Section titled “Tune Your Kits”Performance
Section titled “Performance”Performance is one of those things you don’t care about until you do. And luckily, we already took care of that for you!
If you’re using a Pro Kit, Auto-subsetting takes just the icons you’re using in your project and creates a subset on the fly - whether you’re using Web Fonts or SVG icons. So your Kit only loads the icons you need and gives you the great performance auto-magically.
Or you can custom subset if you want to take full control.
Kits and Pageviews
Section titled “Kits and Pageviews”A pageview is counted whenever your Kit is loaded on a page. We count pageviews per month, and they renew on the first of each month.
How many pageviews do I have?
Section titled “How many pageviews do I have?”Every Font Awesome subscription comes with a number of Kit pageviews which are counted across all Kits. (Free accounts a limited number of pageviews as well!) You can check your Kit pageviews usage in your Account.
I’m getting a lot more pageviews than I think I should be. What can I do?
Section titled “I’m getting a lot more pageviews than I think I should be. What can I do?”Specifying a domain can help you control where and how you’re using Font Awesome Kits which helps avoid unexpected extreme usage.
If you’re seeing more pageviews than you expected, you might want to add domains to limit which sites can use your Kit:
Limit your Kit to certain domains
-
Go to your Kit settings and scroll down to the Domains section.
-
Click “Add a Domain” and you can enter a domain you’ll use the Kit on. (You can use wildcards to add subdomains or alternate endings - there’s a link to the full details right there next to the setting.)
-
Click the plus button to lock it in, and repeat to add more. If you need to remove one, hover over it and you’ll have the option to delete.
What if I go over?
Section titled “What if I go over?”If you go over your pageview limit, you may have to pay overage fees. Or if you know you’ll regularly want lots of pageviews, you may consider upgrading your plan.
Compatibility
Section titled “Compatibility”Using a Kit can handle a lot of the hassle of setting up and using icons in a project. But there are some cases when you may want to reach for a different tool. Here are some scenarios with recommendations…
| Scenario | Use Kits? | |
|---|---|---|
| On the Web (Hosted) | Get instant access to all icons and instant updates without worrying about hosting | |
| On the Web (Self-Hosted) | Pro only: Download a Kit and host the production-ready web files yourself | |
| With SCSS Preprocessors | Pro only: Download a Kit and add the SCSS files into your styling compile | |
| On the Desktop | Pro only: Download a kit and use its SVGs and ligature-based fonts in apps like Figma or Adobe Creative Suite | |
| With WordPress | Use our official Kit-powered WordPress plugin or use a hosted Kit | |
| Other CMSs | Use a hosted Kit | |
| With JS Frameworks | Use our official React, Vue, and other JS Framework components |