Skip to content
Font Awesome Docs

Add Icons with Vue

When adding icon in a project configured with vue-cli, you’ll first create a library of icons, and then you can call them anywhere in your UI.

Adding Icons with a Kit Package

Section titled “Adding Icons with a Kit Package”

The easiest way to add icons when using React is with a Pro Kit — which allows custom icon upload and icon subsetting. There are a few interfaces you can use with these packages. Use the Kit Package API docs to find the best way for your project and situation.

Kit Package API docs

By Prefix and Name

Section titled “By Prefix and Name”
<script setup lang="ts">
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  import { byPrefixAndName } from '@awesome.me/kit-KIT_CODE/icons'
</script>


<template>
  <FontAwesomeIcon :icon="byPrefixAndName.fas['house']" />
</template>

For this to work, you’ll need to have a Kit that contains the icons in the examples. If you’re not familiar with how Kits work, you can find out here.

Importing Specific Icons

Section titled “Importing Specific Icons”

An alternative to using the prefix and name is by importing icons directly. This is your best bet at leveraging tree-shaking if that’s useful to you.

<script setup lang="ts">
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
  import { faTree } from '@awesome.me/kit-KIT_CODE/icons/sharp/solid'
  import { faDog } from '@awesome.me/kit-KIT_CODE/icons/duotone/solid'
  import { faDragon } from '@awesome.me/kit-KIT_CODE/icons/sharp-duotone/solid'
</script>


<template>
  <FontAwesomeIcon :icon="faHouse" />
  <FontAwesomeIcon :icon="faTree" />
  <FontAwesomeIcon :icon="faDog" />
  <FontAwesomeIcon :icon="faDragon" />
</template>

You can use all the icons in a family and style, too. But this will put the kibosh on tree-shaking (Probably‽, are we using A.I. for this yet?).

<script setup lang="ts">
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  import { fas, fad, fass, fasds } from '@awesome.me/kit-KIT_CODE/icons'
</script>


<template>
  <FontAwesomeIcon :icon="fas.faHouse" />
  <FontAwesomeIcon :icon="fad.faMouse" />
  <FontAwesomeIcon :icon="fass.faCat" />
  <FontAwesomeIcon :icon="fasds.faDog" />
</template>

Using the Library

Section titled “Using the Library”

Another mechanism that the SVG Core provides is a JavaScript class called Library.

With a subsetted Kit, this can be an easy way to add all icons once and use them with a syntax that requires less typing.

// in main.ts
import './assets/main.css'


import { createApp } from 'vue'
import { createPinia } from 'pinia'


import App from './App.vue'
import router from './router'


/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'


/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'


/* import specific icons */
import { all } from '@awesome.me/kit-KIT_CODE/icons'


/* add icons to the library */
library.add(...all)


const app = createApp(App)


app.component('font-awesome-icon', FontAwesomeIcon)
app.use(createPinia())
app.use(router)


app.mount('#app')

Now all icons in the Kit have been added in just one, easy line. No fuss, no muss.

Using it doesn’t require importing the icons. You just need an array or string.

Also note here that we’ve switched from importing and using FontAwesomeIcon directly and are using the already registered component, through app.component(). That means our syntax shifts slightly and we use <font-awesome-icon ...> now.

<template>
  <font-awesome-icon :icon="['fas', 'house']" />
</template>

Custom icons are just as easy.

<template>
  <font-awesome-icon :icon="['fak', 'my-icon']" />
</template>

Adding Icons with SVG Icon Packages

Section titled “Adding Icons with SVG Icon Packages”

If you can’t or don’t want to use a Kit, you can explicitly add individual icons to each component. Here’s a simple example:

Set up the Library

Section titled “Set up the Library”

You’ll first create a library of all the icons you want to use in your project in the src/main.js or src/main.ts file. Here’s an example that adds the Solid style User Secret icon to the library:

import { createApp } from 'vue'
import App from './App.vue'


/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'


/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'


/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'


/* add icons to the library */
library.add(faUserSecret)


createApp(App)
  .component('font-awesome-icon', FontAwesomeIcon)
  .mount('#app')

Calling the Icons

Section titled “Calling the Icons”

You can now call the icons. You can add icons to your Vue project using a string format or an array format. Just use the syntax below wherever you want the icons to appear in your project, like in the src/App.vue file. Here’s the rest of the example we started above that adds the fa-user-secret icon into the app UI:

<template>
  <div id="app">
    <!-- Add the style and icon you want using the Array format -->
    <font-awesome-icon :icon="['fas', 'user-secret']" />
  </div>
</template>


<script>
  export default {
    name: 'App'
  }
</script>

Several Icons in Different Styles

Section titled “Several Icons in Different Styles”

Here’s an example with a number of icons in different styles, just to give you a sense of how the syntax changes from style to style in your main.js file.

/* add fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'


import { fas } from '@fortawesome/free-solid-svg-icons'
import { fass } from '@fortawesome/sharp-solid-svg-icons'
import { fad } from '@fortawesome/pro-duotone-svg-icons'
import { fadt } from '@fortawesome/duotone-thin-svg-icons'
import { fasds } from '@fortawesome/sharp-duotone-solid-svg-icons'


import { faTwitter, faFontAwesome } from '@fortawesome/free-brands-svg-icons'
import { faHatCowboy } from '@fortawesome/pro-thin-svg-icons'
import { faHatChef } from '@fortawesome/sharp-solid-svg-icons'




library.add(fas, fass, fad, fadt, fasds, faTwitter, faFontAwesome, faHatCowboy, faHatChef)

In our call to library.add() we’re passing:

  • fas: which represents all of the icons in @fortawesome/free-solid-svg-icons. (Be careful importing whole styles - it can be a LOT of icons!) So any of the icons in that package may be referenced by icon name as a string anywhere else in our app. For example: coffee, check-square, or spinner.
  • fass: represents all sharp solid icons in @sharp-solid-svg-icons. (pro icons!)
  • fad: represents all duotone solid icons in @pro-duotone-svg-icons. (pro icons!)
  • fadt: represents all duotone thin icons in @duotone-thin-svg-icons. (pro icons!)
  • fasds: represents all sharp duotone solid icons in @sharp-duotone-solid-svg-icons. (pro icons!)
  • faTwitter, faFontAwesome, faHatCowboy, and faHatChef: Adding each of these icons individually allows us to refer to them throughout our app by their icon string names, twitter, font-awesome, hat-cowboy, hat-chef, and plate-utensils.

You can then use any of those icons anywhere in your app without needing to re-import into each component. So if you used icons in a couple of components, that would end up looking something like this:

<script setup lang="ts">
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
<script>


<template>
  <FontAwesomeIcon icon="fa-solid fa-dog" />
  <FontAwesomeIcon icon="fa-sharp fa-solid fa-hippo" />
  <FontAwesomeIcon icon="fa-duotone fa-solid fa-feather" />
  <FontAwesomeIcon icon="fa-duotone fa-thin fa-fish" />
  <FontAwesomeIcon icon="fa-sharp-duotone fa-solid fa-dolphin" />
</template>
<script setup lang="ts">
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
</script>


<template>
  <FontAwesomeIcon icon="fa-brands fa-twitter" />
  <FontAwesomeIcon icon="fa-brands fa-font-awesome" />
  <FontAwesomeIcon icon="fa-thin fa-hat-cowboy" />
  <FontAwesomeIcon icon="fa-sharp fa-solid fa-hat-chef" />
<template>

You’ll notice we were able use the imported brand icons without explicitly importing them in the component. And we used the dog, hippo, feather, fish, and dolphin icons without explicitly importing them anywhere. But, each bundle now has over 1000 solid icons plus the two brand icons we added, which is more than we’re using - a good reason to avoid importing a whole style.

Same Icons, Different Styles

Section titled “Same Icons, Different Styles”

Using ES modules and import statements we can define unique names for two or more different styles of the same icon. Here’s is what your main.js file would look like:

import { library } from '@fortawesome/fontawesome-svg-core'


import { faCoffee as fasFaCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as fadFaCoffee } from '@fortawesome/pro-duotone-svg-icons'
import { faCoffee as fadtFaCoffee } from '@fortawesome/duotone-thin-svg-icons'
import { faCoffee as fassFaCoffee } from '@fortawesome/sharp-solid-svg-icons'
import { faCoffee as fasdsFaCoffee } from '@fortawesome/sharp-duotone-solid-svg-icons'


library.add(fasFaCoffee, fadFaCoffee, fadtFaCoffee, fassFaCoffee, fasdsFaCoffee)

Add the icons to your component.

<font-awesome-icon icon="fa-solid fa-coffee" />
<font-awesome-icon icon="fa-duotone fa-solid fa-coffee" />
<font-awesome-icon icon="fa-duotone fa-thin fa-coffee" />
<font-awesome-icon icon="fa-sharp fa-solid fa-coffee" />
<font-awesome-icon icon="fa-sharp-duotone fa-solid fa-coffee" />

Watch Out for Self-Closing Tags in HTML

Section titled “Watch Out for Self-Closing Tags in HTML”

If you are using inline templates or HTML as templates you need to be careful to avoid self-closing tags. Read more about self-closing tags on Vue.js. If you are writing these types of templates, you’ll need to adjust the syntax to be valid HTML, like this:

<!-- Add Icons using String format -->
<font-awesome-icon icon="fa-regular fa-envelope"></font-awesome-icon>

Add Some Style

Section titled “Add Some Style”

Now that you have some icons on the page, add some pieces of flair! Check out all the styling options you can use with Font Awesome and Vue.

Express Yourself with Some Styling!