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

Advertisement

We’ll cover the basics of choosing the package that best suits your needs, access configuration, tips for which method to use for adding icons, and more!

We have a couple of packages available:

Package What's in it What's it good for
[email protected] V6 Beta with all the latest features and Pro icons in all five styles plus brands! Making projects awesome
[email protected] V6 Beta with all the features but just the Free icons Open Source projects

Pick the one that suits your project and follow the steps below to get set up.

1. Configure Access

If you're just using the free package, you can skip this step.

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 - TOKEN - is private. Don't share it with anyone who shouldn't have it. (You can find it in your account.)

Now that you've got your package token handy, you'll need to configure the @fortawesome scope to use our Pro npm registry. You can set this up globally or per-project.

Set Up npm Token for All Projects

This global setup will allow any of your projects to use the Font Awesome package and your token. For the global set up, run:

npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" TOKEN

Set Up npm Token for a Specific Project

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

You'll need to create a .npmrc file in the root of your project (or wherever your package.json file lives) and put this in it:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKEN

Alternate Per-project Setup: Using Environment Variables

You can use npm environment variables in your .npmrc file if you prefer:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

And then run this command to install the all Pro icons package (or edit the package name at the end to install a different package):

FONTAWESOME_NPM_AUTH_TOKEN=TOKENVALUE npm install --save @fortawesome/[email protected]
Advertisement

2. Install Your Package

The Pro Package

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

    npm install --save @fortawesome/[email protected]
    
    yarn add @fortawesome/[email protected]
    

    The Free Package

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

      npm install --save @fortawesome/[email protected]
      
      yarn add @fortawesome/[email protected]
      

      3. Pick Your Method and Add Icons

      You're all set to reference Font Awesome in your project. You can use either Web Fonts + CSS or SVG + JS to get icons into your projects.

      Not sure which to pick? Learn which is right for your project.

      You're viewing the Version 6 Beta

      It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

      Get the Deets on Version 6

      Head Back to Our Current Version 5 Release

      Need a Hand?

      If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

      Or get Real Human Support™ with a Pro Subscription!