Font Awesome Component For Vue.js

Install & Download:

$ npm install vue-awesome


A Vue.js component allows you to insert Font Awesome icons using inline SVG.

How to use it:

1. Import an icon of your choice or all icons as follows:

// import flag icon
import 'vue-awesome/icons/flag'
// import all icons
import 'vue-awesome/icons'

2. Import and register the component.

import Icon from 'vue-awesome/components/Icon'
Vue.component('v-icon', Icon)
// or locally
export default {
  components: {
    'v-icon': Icon

3. Use icons as components:

<v-icon name="flag" />

4. Available props.

name: {
  type: String,
  validator (val) {
    if (val && !(val in icons)) {
        `Invalid prop: prop "name" is referring to an unregistered icon "${val}".\n` +
          `Please make sure you have imported this icon before using it.`,
      return false
    return true
title: String,
scale: [Number, String],
spin: Boolean,
inverse: Boolean,
pulse: Boolean,
flip: {
  validator (val) {
    return val === 'horizontal' || val === 'vertical' || val === 'both'
label: String,
tabindex: [Number, String]




v4.3.1 (05/20/2020)

  • Fix that single icon imports wasn’t working since 4.2.0.

Add Comment