Host Yourself - SVG + JS

If you like control, you can host Font Awesome yourself, and you can choose to use SVG + JS described below or Web Fonts + CSS to get icons into your projects.

Set up with SVG+JS

Inside the Font Awesome Download or package, you’ll find the files you need. The /js folder contains the core styling, utilities, and icons for all of Font Awesome’s family and style options.

Which Files and Folders	What’s in there
`/js`	Icons and scripts for each style, or all of them at once.

Add Font Awesome Files to Your Project

Copy both the fontawesome.js loader and the .js files for the styles you’d like to use into your project’s static assets directory (or wherever you prefer to keep front end assets or vendor stuff). Be sure to include the core file - /js/fontawesome.js - as well as the JS files for any individual styles you want to use.

Copy the core and specific style files you need into your project directories Copy the core fontawesome.js and specific style files you need into your project directories

Here are tables that show which files go with which styles:

Classic

Style	Availability	JS File Name
Solid	Pro only	`solid.js` or `solid.min.js`
Regular	Pro only	`regular.js` or `regular.min.js`
Light	Pro only	`light.js` or `light.min.js`
Thin	Pro only	`thin.js` or `thin.min.js`

Duotone

Style	Availability	JS File Name
Solid	Pro only	`duotone.js` or `duotone.min.js`
Regular	Pro only	`duotone-regular.js` or `duotone-regular.min.js`
Light	Pro only	`duotone-light.js` or `duotone-light.min.js`
Thin	Pro only	`duotone-thin.js` or `duotone-thin.min.js`

Sharp

Style	Availability	JS File Name
Solid	Pro only	`sharp-solid.js` or `sharp-solid.min.js`
Regular	Pro only	`sharp-regular.js` or `sharp-regular.min.js`
Light	Pro only	`sharp-light.js` or `sharp-light.min.js`
Thin	Pro only	`sharp-thin.js` or `sharp-thin.min.js`

Sharp Duotone

Style	Availability	JS File Name
Solid	Pro only	`sharp-duotone-solid.js` or `sharp-duotone-solid.min.js`
Regular	Pro only	`sharp-duotone-regular.js` or `sharp-duotone-regular.min.js`
Light	Pro only	`sharp-duotone-light.js` or `sharp-duotone-light.min.js`
Thin	Pro only	`sharp-duotone-thin.js` or `sharp-duotone-thin.min.js`

Brands

Style	Availability	JS File Name	Preview
Solid	Free	`brands.js` or `brands.min.js`

Chisel

Style	Availability	JS File Name	Preview
Regular	Pro+ only	`chisel-regular.js` or `chisel-regular.min.js`

Etch

Style	Availability	JS File Name	Preview
Solid	Pro+ only	`etch-solid.js` or `etch-solid.min.js`

Jelly

Style	Availability	JS File Name
Regular	Pro+ only	`jelly-regular.js` or `jelly-regular.min.js`
Fill Regular	Pro+ only	`jelly-fill-regular.js` or `jelly-fill-regular.min.js`
Duo Regular	Pro+ only	`jelly-duo-regular.js` or `jelly-duo-regular.min.js`

Notdog

Style	Availability	JS File Name	Preview
Solid	Pro+ only	`notdog-solid.js` or `notdog-solid.min.js`
Duo Solid	Pro+ only	`notdog-duo-solid.js` or `notdog-duo-solid.min.js`

Slab

Style	Availability	JS File Name	Preview
Regular	Pro+ only	`slab-regular.js` or `slab-regular.min.js`
Press Regular	Pro+ only	`slab-press-regular.js` or `slab-press-regular.min.js`

Thumbprint

Style	Availability	JS File Name	Preview
Light	Pro+ only	`thumbprint-light.js` or `thumbprint-light.min.js`

Whiteboard

Style	Availability	JS File Name	Preview
Semibold	Pro+ only	`whiteboard-semibold.js` or `whiteboard-semibold.min.js`

Reference Font Awesome in Your Project

Link the core fontawesome.js file along with the JS files for whichever styles you want to use into the <head> of each template or page that you plan to add icons to. We recommend referencing the fontawesome.js loader last. Make sure the paths correctly point to where you placed the files!

Here’s an example html page with the file links in the <head> and a few icons in the content.

<head>
  <!-- our project is using icons from Solid, Sharp Thin, Sharp Duotone Thin + Brands -->
  <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>
  <script defer src="/your-path-to-fontawesome/js/brands.js"></script>
  <script defer src="/your-path-to-fontawesome/js/solid.js"></script>
  <script defer src="/your-path-to-fontawesome/js/sharp-thin.js"></script>
  <script defer src="/your-path-to-fontawesome/js/sharp-duotone-thin.js"></script>
</head>
<body>
  <!-- solid style icon -->
  <i class="fa-solid fa-user"></i>

  <!-- brand icon -->
  <i class="fa-brands fa-github-square"></i>

  <!-- other pro styles -->
  <i class="fa-sharp fa-thin fa-dog"></i>
  <i class="fa-sharp-duotone fa-thin fa-dog"></i>
</body>

Yuss! You’re Ready to Add Icons

Like Anakin said, it’s woooorking! All of our icons are now ready to do your project’s bidding. Learn how to add icons in your project and then use their power to bring order and style to your UI!

Add Some Icons!

A Note About all.js

TL;DR: All.js doesn’t include “all” icons any more.

In the /js folder, you may have noticed a file named all.js. This file only contains the Classic Solid, Regular, Light, Thin, Duotone Regular, and Brands icons plus the core styling and utilities to render them. Since we kept making so many icons, the all.js file got too big to fit all the styles. And since we don’t recommend such a big file for production sites, it’s best to just use the .js files for whichever styles you’re using in your project.

Hosting Your Own Downloaded Kit

Did you know you can download a Pro Kit and host it yourself? To download your Kit, make sure it’s set to use Pro icons, then click the Download tab, download the “Host Yourself - SVJ/JS”, and follow the instructions above for hosting yourself.

Custom Icons in Downloaded Kits

If you have custom icons in your Kit, they will be included in your Kit download. You’ll find these additional files included in the download zip:

Path to the files	What the files do
`/css/custom-icons.css`	Handles the display of custom icons with Web Fonts
`/js/custom-icons.js` `/js/custom-icons.min.js`	Handles the display of custom icons with SVG+JS
`/sprites/custom-icons.svg`	All your custom icons in one SVG sprite
`/svgs/custom-icons/`	Folder containing all your custom icons as SVGs
`/webfonts/custom-icons.woff2`	Custom icon font in WOFF2 format
`/scss/custom-icons.scss`	Sass (SCSS) Preprocessor partials that handle the display of custom icons with Web Fonts

These files will work the same as the Font Awesome files and assets. And if you are using all.js or all.css, your custom icons will be included in those, though for performance reasons, we recommend adding just the files you are using in your project.

Here’s an example project using Sharp Solid and custom icons from a downloaded Kit:

<head>
  <!-- Our project just needs Font Awesome Sharp Solid + our Custom Icons -->
  <script defer src="/your-path-to-fontawesome/js/sharp-solid.js"></script>
  <script defer src="/your-path-to-fontawesome/js/custom-icons.js"></script>
  <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>
</head>
<body>
  <!-- uses sharp solid style -->
  <i class="fa-sharp fa-solid fa-user"></i>
  <!-- uses Kit custom icon style -->
  <i class="fa-kit fa-your-custom-icon-name"></i>
</body>

Upgrading from an Older Version?

For most projects, we’ve got you covered with backward compatibility so you won’t have to update any icon names in your project - we’ll translate any older version icon names, style syntax, and CSS pseudo-element icon references automatically.

But there are other changes that might affect your project from version to version, be sure to check out our upgrading guides to get all the details on upgrading an existing project using Version 6 or older versions to a newer version of Font Awesome.