# Adding Icon Styling with Vue Tips and techniques for styling Font Awesome icons in Vue.js applications. > 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](/web/style.md) 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 [](/web/style/size.md) Font Awesome supports t-shirt size scale from `2xs` to `2xl` as well as literal sizing from `1x` to `10x`. **String:** **Array:** ```html ``` ```html ``` 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 [](/web/style/icon-canvas.md#automatic-width) Set an icon's width to only their symbol and not the entire [Icon Canvas](/web/style/icon-canvas.md). **String:** **Array:** ```html ``` ```html ``` ## Icons in a List [](/web/style/lists.md) 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](/web/style/lists.md) just like usual. ## Rotate and Flip Icons [](/web/style/rotate.md) Rotate on quarter turns and flip horizontally, vertically, or both. Or try [power transforms](#power-transforms) for more granularity. **String:** **Array:** ```html ``` ```html ``` ### Custom Rotation You can also [customize the rotation of an icon](/web/style/rotate.md#custom-rotation) by a specific angle of your choice. To do so: 1. Include the `rotateBy` property in your icon component reference. The `rotateBy` property is a boolean flag and does not accept a value directly. 2. To customize the rotation angle, set the `--fa-rotate-angle` CSS custom property to any valid CSS transform rotate [value](). **String:** **Array:** ```html ``` ```html ``` ## Animate Icons [](/web/style/animate.md) 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:** ```html ``` ```html ``` We've also built some [animation utilities into CSS custom properties](/web/style/animate.md). ## Bordered Icons [](/web/style/pull.md) Add a border around an icon with this utility. **String:** **Array:** ```html ``` ```html ``` ## Pulled Icons [](/web/style/pull.md) Wrap text around an icon with this utility. **String:** **Array:** ```html ``` ```html ``` ## Power Transforms [](/web/style/power-transform.md) 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:** ```html ``` ## Mask [](/web/style/mask.md) 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:** ```html ``` ```html ``` ## 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:** ```html ``` ```html ``` ### 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:** ```html ``` ```html ```

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 [](/web/style/duotone.md) For Duotone icons, you can swap the opacity on the layers: **String:** **Array:** ```html ``` ```html ``` We've also built a lot of utility into [CSS custom properties for Duotone icons](/web/style/duotone.md#duotone-cheatsheet). ## Layer [](/web/style/layer.md) 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: ```js 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:** ```html ``` ```html ``` ### Layer Text Add text on top of an icon. Use power transforms to control how the text appears. **String:** **Array:** ```html ``` ```html ``` ### 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:** ```html ``` ```html ``` ### Invert the Icon Color to White This can be useful when layering icons, or on its own. **String:** **Array:** ```html ``` ```html ```

Did you know?

We have an `fa-truck` load of [CSS custom properties](/web/style/style-cheatsheet.md) to let you customize and style your icons even more.