Using a Package Manager

For those using package managers (such as npm, yarn, or pnpm), you can use the Font Awesome packages to keep your project up-to-date with the latest icons and improvements.

We package up our icons and Styling Toolkits for project use in a few different ways.

Package Type	Description
Kit Package	Custom package, Pro+ icons
SVG Icon Packages	Individual core toolkit + style packages
”All” Inclusive Packages	One package with everything except Pro+ icons (which is a LOT)

We recommend using a Kit package, but read on and select the package that is right for your project.

Kit Packages - Recommended!

Font Awesome Kits are the most efficient and customized way to get just the Font Awesome icons you need into your project when using a package manager!

A Kit package will contain whatever you put into your Kit including:

• Any individual icons or styles that you’ve added to your subset - including Pro+ icons if you have a Pro+ plan!
• Uploaded Custom Icons
• Font Awesome’s core Styling Toolkit

A Kit and its package are subsetted and optimized so it will not include any icon styles and features you have not enabled. Talk about lean and mean!

Pro+ Icons are only available in Kit Packages!

Along with a Pro+ Plan, you'll need to install a downloaded Kit package to use any of our Pro+ Icons — they are not available in any other packages.

SVG Icon Packages

These packages are JavaScript-based and replace any <i> instances with <svg> icons. They also handle loading the proper CSS into your page to render those icons.

SVG Icon Packages are great to use alongside our official Font Awesome Vue.js, React, and other JavaScript components, or installing and using with our JavaScript API.

Package Name	What’s included	Availability
free-brands-svg-icons	Brands Icon Pack	Free
free-solid-svg-icons	Free Classic Solid Icons	Free
free-regular-svg-icons	Free Classic Regular Icons	Free
pro-solid-svg-icons	Pro Classic Solid Icons	Pro only
pro-regular-svg-icons	Pro Classic Regular Icons	Pro only
pro-light-svg-icons	Pro Classic Light Icons	Pro only
pro-thin-svg-icons	Pro Classic Thin Icons	Pro only
sharp-solid-svg-icons	Sharp Solid Icons	Pro only
sharp-regular-svg-icons	Sharp Regular Icons	Pro only
sharp-light-svg-icons	Sharp Light Icons	Pro only
sharp-thin-svg-icons	Sharp Thin Icons	Pro only
duotone-solid-svg-icons	Duotone Solid Icons	Pro only
duotone-regular-svg-icons	Duotone Regular Icons	Pro only
duotone-light-svg-icons	Duotone Light Icons	Pro only
duotone-thin-svg-icons	Duotone Thin Icons	Pro only
sharp-duotone-solid-svg-icons	Sharp Duotone Solid Icons	Pro only
sharp-duotone-regular-svg-icons	Sharp Duotone Regular Icons	Pro only
sharp-duotone-light-svg-icons	Sharp Duotone Light Icons	Pro only
sharp-duotone-thin-svg-icons	Sharp Duotone Thin Icons	Pro only
fontawesome-svg-core	SVG Core used as subsetting tool or base libraries for larger integrations	Free

All Inclusive Packages

All inclusive packages contain ALL the Font Awesome icons and supporting assets in ALL the formats. These packages are the same as the Font Awesome download - whether Free or Pro - for the web. They contain all CSS, Web Fonts, SCSS, and SVG assets. But these packages are really huge and may have performance and npm package bandwidth usage implications if not used responsibly.

Package Name	What’s included	Availability
fontawesome-free	Web Fonts, SVGs, CSS, Sass, and core toolkit for all Free icons	Free
fontawesome-pro	Web Fonts, SVGs, CSS, Sass, and core toolkit for all Pro families (Classic, Duotone, Sharp, and Sharp Duotone) in all styles (Solid, Regular, Light, and Thin) but does not include Pro+ icons	Pro only

1. Configure Pro Package Access

Using only Free packages? Skip to Step 2!

If you’re installing and using only Free packages, you can skip to Install Your Package since setting up access tokens isn’t needed in that case.

If you plan to use the Pro packages, which contain more icons and styles, you’ll need to have an active subscription to a Pro Plan and a valid Pro Package Token and then follow the steps below to configure Pro access for your project.

Keep It Secret, Keep It Safe!

Your super-secret npm token is private. Don’t share it with anyone who shouldn’t have it. (You can find it in your account as the “Package Token”.)

Your package token gives you access to our registry, npm.fontawesome.com. In the next steps we’ll configure specific NPM scopes to use this registry.

Project-specific Using Configuration Files

This per-project setup lets you configure each project individually, which can be good for teams and CI/CD.

To authenticate when using npm or pnpm, create a .npmrc file in the root of your project (or wherever your package.json file lives). For yarn (version 2.x or later) you will need to create a .yarnrc.yml file. Then add one of the following snippets to the file.

For Kit Packages

If you’ve subsetted a Kit or uploaded icons to a specific Kit and want to use those through a package manager, add this to your package manager configuration.

.npmrc

@fortawesome:registry=https://npm.fontawesome.com/
@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

.yarnrc.yml

npmScopes:
  fortawesome:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  awesome.me:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

For SVG Icons and All Inclusive Packages

.npmrc

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

.yarnrc.yml

npmScopes:
  fortawesome:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

Wait, did you misspell "fontawesome"?

Oh, you mean “fort” instead of “font”? Noticed that, did you? It’s not misspelled… A while back, we created “fortawesome” with an “R” to span across multiple products. We should have thought through the “r” “n” confusion better.

Can I do both?

Yep. You can specify both @awesome.me and @fortawesome in the same config files. This is useful if you are in the process of migrating to the newer Kit Packages.

.npmrc

@awesome.me:registry=https://npm.fontawesome.com/
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

.yarnrc.yml

npmScopes:
  fortawesome:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  awesome.me:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

Using Environment Variables

A more secure way to configure your .npmrc or .yarnrc.yml files is with environment variables. This can help prevent tokens leaking and make token rotation easier (should you need to perform it).

While your .npmrc or .yarnrc.yml is normally checked in to your source code repository, environment variables values should not be. Using environment variables for your token is a way to keep from checking it in to your source code repository, which prevents it from being shared with others who should not have it.

This example uses FONTAWESOME_PACKAGE_TOKEN as the environment variable name.

.npmrc

@fortawesome:registry=https://npm.fontawesome.com/
@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_PACKAGE_TOKEN}

.yarnrc.yml

npmScopes:
  fortawesome:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN}
  awesome.me:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN}

Basic Authentication for Proxys

If you’re using a proxy, you can use basic authentication in your .npmrc file.

.npmrc

@fortawesome:registry=https://npm.fontawesome.com/
@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:username=username
//npm.fontawesome.com/:_password=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

.yarnrc.yml

npmScopes:
  fortawesome:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthIdent: "token:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  awesome.me:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthIdent: "token:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

2. Install Your Package(s)

Once you have configured access global or per-project access setup (for Pro packages) and have your project set up, you’re ready to install Font Awesome via packages.

Installing a Kit Package

If you’re using a Kit, you can install a Kit Package with the following command - just make sure to replace KIT_CODE with your specific Kit’s ID:

npm

npm install --save '@awesome.me/kit-KIT_CODE@latest'

yarn

yarn add '@awesome.me/kit-KIT_CODE@latest'

Or if you’re using environment variables, you can do this instead:

FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save '@awesome.me/kit-KIT_CODE@latest'

Installing Pro SVG Icon Packages

Manually choose and install the particular icon styles you want to use as individual packages alongside the utility-based SVG Core package.

npm

# Installing SVG Core for subsetting and base libaries.
npm install --save @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.
npm install --save @fortawesome/pro-solid-svg-icons
npm install --save @fortawesome/pro-regular-svg-icons
npm install --save @fortawesome/pro-light-svg-icons
npm install --save @fortawesome/pro-thin-svg-icons

npm install --save @fortawesome/pro-duotone-svg-icons
npm install --save @fortawesome/duotone-regular-svg-icons
npm install --save @fortawesome/duotone-light-svg-icons
npm install --save @fortawesome/duotone-thin-svg-icons

npm install --save @fortawesome/sharp-solid-svg-icons
npm install --save @fortawesome/sharp-regular-svg-icons
npm install --save @fortawesome/sharp-light-svg-icons
npm install --save @fortawesome/sharp-thin-svg-icons

npm install --save @fortawesome/sharp-duotone-solid-svg-icons
npm install --save @fortawesome/sharp-duotone-regular-svg-icons
npm install --save @fortawesome/sharp-duotone-light-svg-icons
npm install --save @fortawesome/sharp-duotone-thin-svg-icons

yarn

# Installing SVG Core for subsetting and base libaries.
yarn add @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.
yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-thin-svg-icons

yarn add @fortawesome/pro-duotone-svg-icons
yarn add @fortawesome/duotone-regular-svg-icons
yarn add @fortawesome/duotone-light-svg-icons
yarn add @fortawesome/duotone-thin-svg-icons

yarn add @fortawesome/sharp-solid-svg-icons
yarn add @fortawesome/sharp-regular-svg-icons
yarn add @fortawesome/sharp-light-svg-icons
yarn add @fortawesome/sharp-thin-svg-icons

yarn add @fortawesome/sharp-duotone-solid-svg-icons
yarn add @fortawesome/sharp-duotone-regular-svg-icons
yarn add @fortawesome/sharp-duotone-light-svg-icons
yarn add @fortawesome/sharp-duotone-thin-svg-icons

Or if you’re using environment variables, you can do this instead:

FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save @fortawesome/pro-solid-svg-icons

Installing Free SVG Icon Packages

Similarly, you can manually choose Free icon styles to install and include in your project (alongside the SVG Core package).

npm

# Installing SVG Core for subsetting and base libaries.
npm install --save @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-brands-svg-icons

yarn

# Installing SVG Core for subsetting and base libaries.
yarn add @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

Installing The Pro All Inclusive Package

You can install all of the assets we include in Font Awesome Pro for the Web’s download via this package.

Pro All Inclusive Package (npm)

npm install --save @fortawesome/fontawesome-pro

Pro All Inclusive Package (yarn)

yarn add @fortawesome/fontawesome-pro

Or if you’re using environment variables, you can do this instead:

FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save @fortawesome/fontawesome-pro

Installing The Free All Inclusive Package

Similarly, you can install all of the Free assets we include in Font Awesome Free for the Web’s download via this package.

All the Things (npm)

npm install --save @fortawesome/fontawesome-free

All the Things (yarn)

yarn add @fortawesome/fontawesome-free

---

You’re All Set!

Your packages are now installed and are all set to be used in your project.

If you’ve installed your Kit Package or an All Inclusive Package, you’re good to start adding and styling icons in your project.

With our SVG Icon Packages, continue onto next steps such as using our Vue, React, Ember, and other JavaScript Components. Or check out our JavaScript API.

Remember to Cache Your CI Dependencies!

If you’re using Continuous Integration (CI) in your project’s workflow, remember to tune your CI to keep your package bandwidth usage low. We’ll show you how.

---

Troubleshooting + More Info

Use the following commands to get configuration information for your package manager:

Package Manager	Configuration Info Command
npm	npm config list
yarn	yarn config --why ( pay attention to npmScopes entry)
pnpm	pnpm config list (pay attention to the config from section)

Confirm Credentials for Private Repository use

If your application needs to use the private repository, ensure that credentials are set. Here’s some expected output for each package management tool…

npm

; "user" config from /path/to/.npmrc
# ...
@fortawesome:registry = "https://npm.fontawesome.com/"
//npm.fontawesome.com/:_authToken = REDACTED

yarn

YN0000: npmScopes, /path/to/.yarnrc.yml   Map(1) {
  'fortawesome' => Map(6) {
    'npmAlwaysAuth' => true,
    'npmAuthIdent' => null,
    'npmAuthToken' => 'REDACTED',
    'npmAuditRegistry' => null,
    'npmPublishRegistry' => null,
    'npmRegistryServer' => 'https://npm.fontawesome.com/'
  }
}

pnpm

//npm.fontawesome.com/:_authToken=REDACTED
@fortawesome:registry=https://npm.fontawesome.com/
prefix=/path/to/nodejs/18.13.0/.npm
registry=https://registry.npmjs.org/
user-agent=pnpm/7.29.1 npm/? node/v18.13.0 darwin arm64
# ...

Token in environment variable

Make sure that the environment variable is available and readable by the package manager, this may be the cause of authentication issues on remote servers. You’ll see 4xx HTTP status codes if this is the case.

Switching from Private to Public Repository

When switching from the Private Repository to the Public Repository, remove the currently installed Font Awesome packages from the lock file. The specific command to do this depends on the package manager you are using (yarn or npm). If you are brave enough, you can hand-edit these files.

npm Repositories

Here’s a summary of our repositories alongside what they provide and what requirements each has.

Name	Public?	Pro Sub?	Kit	Pro	Free
https://npm.fontawesome.com
https://registry.yarnpkg.com
https://registry.npmjs.org

Supported Package Managers

We officially support the following Package Managers:

Name	URL
npm	https://www.npmjs.com/
yarn (version 2.x and greater)	https://yarnpkg.com/
pnpm	https://pnpm.io/