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.

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!

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.

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.

1. Configure Pro Package Access

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.

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.

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

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

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

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

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.

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

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.

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

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.

@fortawesome:registry=https://npm.fontawesome.com/
@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:username=token
//npm.fontawesome.com/:_password=BASE64-ENCODED-TOKEN

npmScopes:
  fortawesome:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthIdent: "token:BASE64-ENCODED-TOKEN
  awesome.me:
    npmAlwaysAuth: true
    npmRegistryServer: "https://npm.fontawesome.com/"
    npmAuthIdent: "token:BASE64-ENCODED-TOKEN

You must use a Base64-encoded string for the BASE64-ENCODED-TOKEN value. Here's a quick utility you can use. Paste your package token and hit the "Encode" button to get the Base64-encoded version.

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 install --save '@awesome.me/kit-KIT_CODE@latest'

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.

# 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

# 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).

# 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

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

npm install --save @fortawesome/fontawesome-pro

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.

npm install --save @fortawesome/fontawesome-free

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:

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…

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

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/'
  }
}

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

Supported Package Managers

We officially support the following Package Managers: