Adding Icon Styling with Vue

Font Awesome has a ton of great styling tools that work hand-in-hand with our icons to make your project look its best.

The entire Font Awesome styling toolkit is available when using Vue, but the syntax is different from our general web-use documentation. Below you'll find the syntax for adding styling with Vue, with a link to the general documentation that has descriptions and examples for each styling tool.

Size

Font Awesome supports t-shirt size scale from 2xs to 2xl as well as literal sizing from 1x to 10x.

String

Array

<!-- T-shirt sizes -->
<font-awesome-icon icon="fa-solid fa-coffee" size="xs" />
<font-awesome-icon icon="fa-solid fa-coffee" size="lg" />

<!-- X-factor sizing -->
<font-awesome-icon icon="fa-solid fa-coffee" size="6x" />

<!-- T-shirt sizes -->
<font-awesome-icon :icon="['fas', 'coffee']" size="xs" />
<font-awesome-icon :icon="['fas', 'coffee']" size="lg" />

<!-- X-factor sizing -->
<font-awesome-icon :icon="['fas', 'coffee']" size="7x" />

Remember, you can always control icon size directly with the CSS font-size attribute. The font-awesome-icon's size prop determines icon size relative to the current context's font-size.

Automatic Width

Set an icon's width to only their symbol and not the entire Icon Canvas.

String

Array

<font-awesome-icon icon="fa-solid fa-coffee" widthAuto />

<font-awesome-icon :icon="['fas', 'coffee']" widthAuto />

Icons in a List

There's no Vue-specific syntax for using icons in a list, so you can use fa-ul and fa-li to replace default bullets in unordered lists just like usual.

Rotate and Flip Icons

Rotate on quarter turns and flip horizontally, vertically, or both. Or try power transforms for more granularity.

String

Array

<!-- Rotate -->
<font-awesome-icon icon="fa-solid fa-coffee" rotation="90" />
<font-awesome-icon icon="fa-solid fa-coffee" rotation="180" />
<font-awesome-icon icon="fa-solid fa-coffee" rotation="270" />

<!-- Mirror -->
<font-awesome-icon icon="fa-solid fa-coffee" flip="horizontal" />
<font-awesome-icon icon="fa-solid fa-coffee" flip="vertical" />
<font-awesome-icon icon="fa-solid fa-coffee" flip="both" />

<!-- Rotate -->
<font-awesome-icon :icon="['fas', 'coffee']" rotation="90" />
<font-awesome-icon :icon="['fas', 'coffee']" rotation="180" />
<font-awesome-icon :icon="['fas', 'coffee']" rotation="270" />

<!-- Mirror -->
<font-awesome-icon :icon="['fas', 'coffee']" flip="horizontal" />
<font-awesome-icon :icon="['fas', 'coffee']" flip="vertical" />
<font-awesome-icon :icon="['fas', 'coffee']" flip="both" />

Custom Rotation

You can also customize the rotation of an icon by a specific angle of your choice. To do so:

Include the rotateBy property in your icon component reference. The rotateBy property is a boolean flag and does not accept a value directly.
To customize the rotation angle, set the --fa-rotate-angle CSS custom property to any valid CSS transform rotate value.

String

Array

<font-awesome-icon icon="fa-solid fa-coffee" rotateBy style="--fa-rotate-angle: 329deg" />

<font-awesome-icon :icon="['fas', 'coffee']" rotateBy style="--fa-rotate-angle: 329deg" />

Animate Icons

You can use the animate utilities as a way to indicate loading or processing, especially when paired with icons like spinner or sync. The spin utility smoothly spins the icon clockwise, and the pulse utility spins clockwise in eight steps.

String

Array

<font-awesome-icon icon="fa-solid fa-heart" beat />
<font-awesome-icon icon="fa-solid fa-circle-info" beat-fade />
<font-awesome-icon icon="fa-solid fa-basketball" bounce />
<font-awesome-icon icon="fa-solid fa-exclamation-triangle" fade />
<font-awesome-icon icon="fa-solid fa-compact-disc" flip />
<font-awesome-icon icon="fa-solid fa-bell" shake />
<font-awesome-icon icon="fa-solid fa-cog" spin />
<font-awesome-icon icon="fa-solid fa-compass" spin spin-reverse />
<font-awesome-icon icon="fa-solid fa-spinner" spin-pulse />

<font-awesome-icon :icon="['fas', 'heart']" beat />
<font-awesome-icon :icon="['fas', 'circle-info']" beat-fade />
<font-awesome-icon :icon="['fas', 'basketball']" bounce />
<font-awesome-icon :icon="['fas', 'exclamation-triangle']" fade />
<font-awesome-icon :icon="['fas', 'compact-disc']" flip />
<font-awesome-icon :icon="['fas', 'bell']" shake />
<font-awesome-icon :icon="['fas', 'cog']" spin />
<font-awesome-icon :icon="['fas', 'compass']" spin spin-reverse />
<font-awesome-icon :icon="['fas', 'spinner']" spin-pulse />

We've also built some animation utilities into CSS custom properties.

Bordered Icons

Add a border around an icon with this utility.

String

Array

<font-awesome-icon icon="fa-solid fa-coffee" border />

<font-awesome-icon :icon="['fas', 'coffee']" border />

Pulled Icons

Wrap text around an icon with this utility.

String

Array

<font-awesome-icon icon="fa-solid fa-coffee" pull="left" /> <font-awesome-icon icon="fa-solid fa-coffee" pull="right" />

<font-awesome-icon :icon="['fas', 'coffee']" pull="left" /> <font-awesome-icon :icon="['fas', 'coffee']" pull="right" />

Power Transforms

Power Transforms are just that - powerful! You can scale, position, rotate, and flip all with this one styling tool.

To scale icons up or down, use grow-# and shrink-# with any arbitrary value, including decimals.
To move icons up, down, left, or right, use up-#, down-#, left-#, and right-# with any arbitrary value, including decimals.
To rotate or flip icons use any combination of flip-v, flip-h, or rotate-# with any arbitrary value.

String

<font-awesome-icon icon="fa-solid fa-coffee" transform="shrink-6 left-4" />

Mask

Grab the Mask utility when you want to layer two icons but have the inner icon cut out from the icon below so the parent element's background shows through.

String

Array

<!-- using transform with mask will allow you to scale, shrink, grow, etc. the coffee icon within the circle icon -->
<font-awesome-icon icon="fa-solid fa-coffee" transform="shrink-7" mask="fa-solid fa-circle" />

<!-- using transform with mask will allow you to scale, shrink, grow, etc. the coffee icon within the circle icon -->
<font-awesome-icon :icon="['fas', 'coffee']" transform="shrink-7" :mask="['fas', 'circle']" />

Gradient Fill

Version Requirement

Gradient fill support requires @fortawesome/vue-fontawesome version 3.2.0 or later.

Apply SVG gradient fills directly to icons using the :gradient-fill prop. Both linear and radial gradients are supported.

Linear Gradient

Set type: 'linear' and use the following properties to control the gradient:

Property	Description
`id`	A unique string identifying the gradient. Must be unique per page — see the warning below.
`type`	Set to `'linear'` for a linear gradient.
`x1`	The horizontal start point of the gradient vector, as a percentage string (e.g. `'0%'`).
`y1`	The vertical start point of the gradient vector, as a percentage string (e.g. `'0%'`).
`x2`	The horizontal end point of the gradient vector, as a percentage string (e.g. `'100%'`). Together with `x1`, controls the left-to-right direction of the gradient.
`y2`	The vertical end point of the gradient vector, as a percentage string (e.g. `'0%'`). Together with `y1`, controls the top-to-bottom direction. Set both `x2` and `y2` to non-zero values for a diagonal gradient.
`stops`	An array of stop objects. Each stop has an `offset` (where along the gradient the color applies), a `color` (hex or CSS color), and an optional `opacity` (0–1). The `offset` accepts a percentage string (`'0%'`, `'100%'`) or a decimal number (`0`, `1`).

String

Array

<!-- Horizontal -->
<font-awesome-icon
  icon="fa-solid fa-star"
  size="6x"
  :gradient-fill="{
    id: 'linearH',
    type: 'linear',
    x1: '0%', y1: '0%', x2: '100%', y2: '0%',
    stops: [
      { offset: '0%', color: '#FF5F6D' },
      { offset: '100%', color: '#FFC371' }
    ]
  }" />

<!-- Diagonal -->
<font-awesome-icon
  icon="fa-solid fa-heart"
  size="6x"
  :gradient-fill="{
    id: 'linearD',
    type: 'linear',
    x1: '0%', y1: '0%', x2: '100%', y2: '100%',
    stops: [
      { offset: '0%', color: '#4facfe' },
      { offset: '100%', color: '#00f2fe' }
    ]
  }" />

<!-- Multi-stop with numeric offsets (0–1) -->
<font-awesome-icon
  icon="fa-solid fa-users"
  size="6x"
  :gradient-fill="{
    id: 'linearNumeric',
    type: 'linear',
    x1: '0%', y1: '0%', x2: '100%', y2: '0%',
    stops: [
      { offset: 0, color: '#f97316' },
      { offset: 0.5, color: '#facc15' },
      { offset: 1, color: '#4ade80' }
    ]
  }" />

<!-- Horizontal -->
<font-awesome-icon
  :icon="['fas', 'star']"
  size="6x"
  :gradient-fill="{
    id: 'linearH',
    type: 'linear',
    x1: '0%', y1: '0%', x2: '100%', y2: '0%',
    stops: [
      { offset: '0%', color: '#FF5F6D' },
      { offset: '100%', color: '#FFC371' }
    ]
  }" />

<!-- Diagonal -->
<font-awesome-icon
  :icon="['fas', 'heart']"
  size="6x"
  :gradient-fill="{
    id: 'linearD',
    type: 'linear',
    x1: '0%', y1: '0%', x2: '100%', y2: '100%',
    stops: [
      { offset: '0%', color: '#4facfe' },
      { offset: '100%', color: '#00f2fe' }
    ]
  }" />

<!-- Multi-stop with numeric offsets (0–1) -->
<font-awesome-icon
  :icon="['fas', 'users']"
  size="6x"
  :gradient-fill="{
    id: 'linearNumeric',
    type: 'linear',
    x1: '0%', y1: '0%', x2: '100%', y2: '0%',
    stops: [
      { offset: 0, color: '#f97316' },
      { offset: 0.5, color: '#facc15' },
      { offset: 1, color: '#4ade80' }
    ]
  }" />

Radial Gradient

Set type: 'radial' and use the following properties to control the gradient:

Property	Description
`id`	A unique string identifying the gradient. Must be unique per page — see the warning below.
`type`	Set to `'radial'` for a radial gradient.
`cx`	The horizontal center of the gradient circle, as a percentage string (e.g. `'50%'`).
`cy`	The vertical center of the gradient circle, as a percentage string (e.g. `'50%'`).
`r`	The radius of the gradient circle, as a percentage string (e.g. `'50%'`). Controls how far the gradient spreads.
`fx`	Optional. The horizontal focal point — where the innermost color originates. Defaults to `cx`. Shift this to move the light source left or right.
`fy`	Optional. The vertical focal point — where the innermost color originates. Defaults to `cy`. Shift this to move the light source up or down.
`stops`	An array of stop objects. Each stop has an `offset` (where along the gradient the color applies), a `color` (hex or CSS color), and an optional `opacity` (0–1). The `offset` accepts a percentage string (`'0%'`, `'45%'`) or a decimal number (`0`, `0.45`, `1`).

String

Array

<!-- Multi-stop radial -->
<font-awesome-icon
  icon="fa-solid fa-circle"
  size="6x"
  :gradient-fill="{
    id: 'radial1',
    type: 'radial',
    cx: '30%', cy: '30%', r: '70%',
    stops: [
      { offset: '0%', color: '#FDF497' },
      { offset: '45%', color: '#FD5949' },
      { offset: '60%', color: '#D6249F' },
      { offset: '90%', color: '#285AEB' }
    ]
  }" />

<!-- With per-stop opacity -->
<font-awesome-icon
  icon="fa-solid fa-bolt"
  size="6x"
  :gradient-fill="{
    id: 'radialOpacity',
    type: 'radial',
    cx: '50%', cy: '50%', r: '50%',
    stops: [
      { offset: 0, color: '#f7ff00', opacity: 1 },
      { offset: 1, color: '#db36a4', opacity: 0.8 }
    ]
  }" />

<!-- With focal point (fx/fy) -->
<font-awesome-icon
  icon="fa-solid fa-circle"
  size="6x"
  :gradient-fill="{
    id: 'radialFocal',
    type: 'radial',
    cx: '50%', cy: '50%', r: '60%',
    fx: '30%', fy: '30%',
    stops: [
      { offset: 0, color: '#ffffff' },
      { offset: 0.5, color: '#60a5fa' },
      { offset: 1, color: '#1e3a8a' }
    ]
  }" />

<!-- Multi-stop radial -->
<font-awesome-icon
  :icon="['fas', 'circle']"
  size="6x"
  :gradient-fill="{
    id: 'radial1',
    type: 'radial',
    cx: '30%', cy: '30%', r: '70%',
    stops: [
      { offset: '0%', color: '#FDF497' },
      { offset: '45%', color: '#FD5949' },
      { offset: '60%', color: '#D6249F' },
      { offset: '90%', color: '#285AEB' }
    ]
  }" />

<!-- With per-stop opacity -->
<font-awesome-icon
  :icon="['fas', 'bolt']"
  size="6x"
  :gradient-fill="{
    id: 'radialOpacity',
    type: 'radial',
    cx: '50%', cy: '50%', r: '50%',
    stops: [
      { offset: 0, color: '#f7ff00', opacity: 1 },
      { offset: 1, color: '#db36a4', opacity: 0.8 }
    ]
  }" />

<!-- With focal point (fx/fy) -->
<font-awesome-icon
  :icon="['fas', 'circle']"
  size="6x"
  :gradient-fill="{
    id: 'radialFocal',
    type: 'radial',
    cx: '50%', cy: '50%', r: '60%',
    fx: '30%', fy: '30%',
    stops: [
      { offset: 0, color: '#ffffff' },
      { offset: 0.5, color: '#60a5fa' },
      { offset: 1, color: '#1e3a8a' }
    ]
  }" />

Unique IDs Required

The id in your gradient-fill config must be unique per page. SVG gradient definitions are global to the document, and duplicate id values are invalid — if two icons share the same id, url(#id) references can resolve unpredictably. Use dynamic IDs (e.g. Vue's useId() in 3.5+, or a UUID) when reusing the same gradient config in multiple places on the same page.

Not Compatible with Symbol Mode

gradient-fill is not compatible with the symbol prop. When both are used together, the gradient will be ignored.

Duotone Icons

For Duotone icons, you can swap the opacity on the layers:

String

Array

<font-awesome-icon icon="fa-duotone fa-solid fa-coffee-pot" swap-opacity />

<font-awesome-icon :icon="['fad', 'coffee-pot']" swap-opacity />

We've also built a lot of utility into CSS custom properties for Duotone icons.

Layer

If you'd like to layer icons, add a text layer over an icon, or add a counter to an icon, you'll need to add the layering components. Edit your main.js to look like this:

import { createApp } from 'vue'
import App from './App.vue'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'

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

Then you can use the utilities in those components to layer icons, text, or add counters. You can also invert an icon to get a cut-out effect.

Layer Icons

Layer one or more icons to create a new icon.

String

Array

<font-awesome-layers class="fa-lg">
  <font-awesome-icon icon="fa-solid fa-circle" />
  <font-awesome-icon icon="fa-solid fa-check" transform="shrink-6" :style="{ color: 'white' }" />
</font-awesome-layers>

<font-awesome-layers class="fa-lg">
  <font-awesome-icon :icon="['fas', 'circle']" />
  <font-awesome-icon :icon="['fas', 'check']" transform="shrink-6" :style="{ color: 'white' }" />
</font-awesome-layers>

Layer Text

Add text on top of an icon. Use power transforms to control how the text appears.

String

Array

<font-awesome-layers fixed-width style="background: MistyRose" class="fa-4x">
  <font-awesome-icon icon="fa-solid fa-certificate" />
  <font-awesome-layers-text
    class="fa-inverse"
    transform="shrink-11.5 rotate--30"
    :style="{ fontWeight: 900 }"
    value="NEW" />
</font-awesome-layers>

<font-awesome-layers fixed-width style="background: MistyRose" class="fa-4x">
  <font-awesome-icon :icon="['fas', 'certificate']" />
  <font-awesome-layers-text
    class="fa-inverse"
    transform="shrink-11.5 rotate--30"
    :style="{ fontWeight: 900 }"
    value="NEW" />
</font-awesome-layers>

Add Counters

Add a counter to the corner of an icon. Postion can be bottom-left, bottom-right, top-left and the default top-right.

String

Array

<font-awesome-layers full-width class="fa-4x">
  <font-awesome-icon icon="fa-solid fa-envelope" />
  <font-awesome-layers-text counter value="1" position="top-right" />
</font-awesome-layers>

<font-awesome-layers full-width class="fa-4x">
  <font-awesome-icon :icon="['fas', 'envelope']" />
  <font-awesome-layers-text counter value="1" position="top-right" />
</font-awesome-layers>

Invert the Icon Color to White

This can be useful when layering icons, or on its own.

String

Array

<font-awesome-icon icon="fa-solid fa-coffee" inverse />

<font-awesome-icon :icon="['fas', 'coffee']" inverse />

Did you know?

We have an fa-truck load of CSS custom properties to let you customize and style your icons even more.

Getting Started on the Web

Add icons on the Web

Styling Icons on the Web

Upload Custom Icons

Integrations

Desktop

APIs

Dig Deeper

Help and Troubleshooting

Upgrade to Version 7

Font Awesome

Adding Icon Styling with Vue

Size

Automatic Width

Icons in a List

Rotate and Flip Icons

Custom Rotation

Animate Icons

Bordered Icons

Pulled Icons

Power Transforms

Mask

Gradient Fill

Version Requirement

Linear Gradient

Radial Gradient

Unique IDs Required

Not Compatible with Symbol Mode

Duotone Icons

Layer

Layer Icons

Layer Text

Add Counters

Invert the Icon Color to White

Did you know?

Getting Started on the Web

Add icons on the Web

Styling Icons on the Web

Upload Custom Icons

Integrations

Desktop

APIs

Dig Deeper

Help and Troubleshooting

Upgrade to Version 7

Font Awesome

Font Awesome Elsewhere

Adding Icon Styling with Vue

Size

Automatic Width

Icons in a List

Rotate and Flip Icons

Custom Rotation

Animate Icons

Bordered Icons

Pulled Icons

Power Transforms

Mask

Gradient Fill

Version Requirement

Linear Gradient

Radial Gradient

Unique IDs Required

Not Compatible with Symbol Mode

Duotone Icons

Layer

Layer Icons

Layer Text

Add Counters

Invert the Icon Color to White

Did you know?