Using a Package Manager

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

We’ll cover the basics of choosing the package that best suits your needs, access configuration, and tips adding and using icons.

We have a few package groups available:

Package	What’s in it	What’s it good for
Kit Package New!	Whatever you put in your Kit - custom icons, a subset of Font Awesome icons and styles - and nothing else.	Customizing your package
pro-*-svg-icons	JavaScript-based Classic family SVG icon packages.	Using with our JavaScript API or JavaScript components
sharp-*-svg-icons	JavaScript-based Sharp family SVG icon packages.	Using with our JavaScript API or JavaScript components
free-*-svg-icons	JavaScript-based Free and Brands SVG icon packages.	Using with our JavaScript API or JavaScript components
fontawesome-pro	All the Version 6 goodness including all the latest features and Pro icons, spanning 5 styles available in 2 families, Classic and our new Sharp. And there’s our Brands icon family on top of that too.	Getting CSS, webfonts, Sass & Less, and SVG assets in an npm package
fontawesome-free	All the Version 6 goodness but just the Free icons	Open Source projects

Basically, the packages contain all the stuff in the Font Awesome for Web download or when downloading a Font Awesome Kit, but bundled as a package. Pick the one that suits your project and follow the steps below to get set up.

1. Configure Pro Package Access

Using only free packages? Skip to Step 2.

Skip to Install Your Package if you’re using Free packages since you don’t need to set up access tokens. (The Free packages are @fortawesome/fontawesome-free, @fortawesome/free-solid-svg-icons, and @fortawesome/free-regular-svg-icons.)

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.

Kit or Font Awesome packages: Which Do I Use?

Kit Packages are our recommendation. You can pick only the styles or individual icons you use and even upload your own icons. They are custom-built to your needs. Head to Your Kits to create one if you have a Pro subscription.

Our Font Awesome packages contain only Font Awesome official icons. They are not subsetted, so they are larger downloads.

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, pnpm, or yarn v1, create a .npmrc file in the root of your project (or wherever your package.json file lives). For yarn v2 (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 Font Awesome 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

There are three options to for installing the Font Awesome packages:

Install	What You Get
Kit Package New!	Your custom icons, icon styles or individual icons you choose in a variety of formats. This is our recommended choice for most projects.
SVG icon packages	JavaScript-based packages named by family and style. If Kits aren’t for you this lets you use our Javascript API, a Javascript component, and tree-shaking. Follow the steps for Javascript API for this installation.
All The Things	The Free and Pro packages include not only the icons in all the styles, but also all the supporting files to make them render. We do not recommend using this package. This package closely resembles what you get from our Downloads page. You have a lot of options with this package but it’s also the largest.

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'

SVG Icon Packages

The Pro Packages

npm

npm install --save @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.

npm install --save @fortawesome/free-brands-svg-icons
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

yarn add @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.

yarn add @fortawesome/free-brands-svg-icons
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

The Free Packages

npm

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

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

All The Things

The Pro Package

Once you have global or per-project access setup, you can install the Version 6 Pro package via npm or yarn:

All the Things (npm)

npm install --save @fortawesome/fontawesome-pro

All the Things (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

The Free Package

If you need just the Free icons, we have a slimmed-down free-only package for that. Install with this command:

All the Things (npm)

npm install --save @fortawesome/fontawesome-free

All the Things (yarn)

yarn add @fortawesome/fontawesome-free

3. Pick Your Method and Add Icons

You’re all set to use Font Awesome packages in your project. Here are some common options:

• Vue
• React
• React Native
• Ember
• Angular

4. Cache Your CI Dependencies

Tune your CI to keep your bandwidth usage low. We’ll show you how.

5. Troubleshooting Your Configuration

Supported Package managers

Font Awesome supports the following package managers:

• npm
• Classic yarn (1.x)
• Modern yarn (2.x+)
• pnpm

Private and Public npm Repositories

Repository	Public	Require active Pro subscription	Kit Package	Font Awesome Pro	Font Awesome Free
https://npm.fontawesome.com
https://registry.yarnpkg.com
https://registry.npmjs.org

Note: To use the Private npm Repository, an active subscription to Font Awesome Pro is required.

Configuration Troubleshooting Commands

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

• npm: npm config list
• Classic yarn: yarn config list --verbose
• Modern yarn: yarn config --why (pay attention to npmScopes entry)
• pnpm: pnpm config list (pay attention to the config from section)

Use the Private Repository

If your application needs to use the private repository, ensure that credentials are set:

npm example output

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

Classic yarn example output

verbose 0.100133333 Found configuration file "/path/to/.npmrc".
# ...
'@fortawesome:registry': 'https://npm.fontawesome.com/',
'//npm.fontawesome.com/:_authToken': REDACTED,

Modern yarn example output

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

//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 (and vice versa)

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.