Skip to content
Font Awesome Docs

Set Up with Vue

When using Font Awesome with Vue.js, we recommend using our official vue-fontawesome component to make everything work just right.

In this doc, we’ll cover the basics of installing core utility packages, icon installation, and installing the Vue component, so that you can make awesome stuff your way!

1. Add the Vue Component

Section titled “1. Add the Vue Component”

First things first. Let’s install the vue-fontawesome component into your project.

Terminal window
npm install @fortawesome/vue-fontawesome@latest-3

2. Add SVG Core

Section titled “2. Add SVG Core”

Next you’ll need to use npm or yarn to install the core package which is a dependency that includes all the utilities to make the icons work.

Terminal window
npm install @fortawesome/fontawesome-svg-core
More about what's in the SVG Core

3. Add Icon Packages

Section titled “3. Add Icon Packages”

Lastly, you’ll need to install the icons you want to use.

Pick the method that works for your project, and continue on for details on how to get the icons into your project.

Section titled “Using a Kit Package (Recommended)”

This is the simplest way to get started if you’re using any Pro icons. And it’s also the only way to use to use Pro+ icons via a package manager.

Before installing your Kit package, you’ll need to complete the following steps:

  1. Set up a Kit
  2. Enable Package Installation for that Kit
  3. Configure access to your Kit’s package

Once you’ve completed the steps above, install your Kit package:

Terminal window
npm install @awesome.me/kit-KIT_CODE@latest

Using SVG Icon Packages (Alternate)

Section titled “Using SVG Icon Packages (Alternate)”

Alternatively, you can install individual Free or Pro icon packages for each style you want to use.

Free Icon Packages

Section titled “Free Icon Packages”

Free icons can be installed without any additional configuration and include the following styles.

Terminal window
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-brands-svg-icons

Pro Icon Packages

Section titled “Pro Icon Packages”

Pro icons require an active Pro Plan. You’ll also need to configure access to these Pro Packages before you can install and use them.

Configure Pro Package Access

After configuration is complete, you can install any of the individual styles as packages, but use caution when installing full styles as they are big packages that include a lot of icons! (Using a Kit is more effcient.)

Here’s how to install the SVG packages for each style:

Terminal window
npm install @fortawesome/pro-solid-svg-icons
npm install @fortawesome/pro-regular-svg-icons
npm install @fortawesome/pro-light-svg-icons
npm install @fortawesome/pro-thin-svg-icons
npm install @fortawesome/pro-duotone-svg-icons
npm install @fortawesome/duotone-regular-svg-icons
npm install @fortawesome/duotone-light-svg-icons
npm install @fortawesome/duotone-thin-svg-icons
npm install @fortawesome/sharp-solid-svg-icons
npm install @fortawesome/sharp-regular-svg-icons
npm install @fortawesome/sharp-light-svg-icons
npm install @fortawesome/sharp-thin-svg-icons
npm install @fortawesome/sharp-duotone-solid-svg-icons
npm install @fortawesome/sharp-duotone-regular-svg-icons
npm install @fortawesome/sharp-duotone-light-svg-icons
npm install @fortawesome/sharp-duotone-thin-svg-icons