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

When using Font Awesome with Vue.js, we recommend using the official vue-fontawesome component (described below) which uses the SVG + JS method to render icons. But you can opt to use the Web Fonts with CSS method if you prefer.

Mind the (Alpha) Gap!

Remember Version 6 is an alpha release that's still under contruction and we may need to make breaking changes before final release. Use with caution!

Set up

Add (Alpha) SVG Core

First you'll need to use npm or yarn to install the core package which includes all the utilities to make the icons work:

#install the alpha package - using the @next flag
$ npm i --save @fortawesome/fontawesome-svg-core@next

#install the alpha package - using the @next flag
$ yarn add @fortawesome/fontawesome-svg-core@next

Find out more about what's in Font Awesome core

Add (Alpha) Icon Packages

Next, you'll install the icons you want to use - you can choose Free or Pro icons, and select any of our styles.

Free

For Free icons, you can add either - or both - of these styles:

# Free icons styles
$ npm i --save @fortawesome/free-solid-svg-icons@next
$ npm i --save @fortawesome/free-regular-svg-icons@next

Or if you're using Yarn...

# Free icons styles
$ yarn add @fortawesome/free-solid-svg-icons@next
$ yarn add @fortawesome/free-regular-svg-icons@next

Pro

For Pro icons, you'll first need to set up access with your secret Font Awesome npm token and global or per-project access.

Configure Access for Pro

Then add the Pro icon style packages that you plan to use in your app:

# Pro icons styles
$ npm i --save @fortawesome/pro-solid-svg-icons@next
$ npm i --save @fortawesome/pro-regular-svg-icons@next
$ npm i --save @fortawesome/pro-light-svg-icons@next
$ npm i --save @fortawesome/pro-thin-svg-icons@next
$ npm i --save @fortawesome/pro-duotone-svg-icons@next

Or if you're using Yarn...

# Pro icons styles
$ yarn add @fortawesome/pro-solid-svg-icons@next
$ yarn add @fortawesome/pro-regular-svg-icons@next
$ yarn add @fortawesome/pro-light-svg-icons@next
$ yarn add @fortawesome/pro-thin-svg-icons@next
$ yarn add @fortawesome/pro-duotone-svg-icons@next

Add the Vue Component

And lastly, install the Font Awesome Vue component:

$ npm i --save @fortawesome/vue-fontawesome@latest

Yuss! You’re Ready to Add Icons

Like Anakin said, it’s woooorking! All of our icons are now ready to do your project’s bidding. Learn how to add them to your Vue project and then use their power to bring order and style to your UI!

Add Some Icons!