# Adding Icon Styling with React Tips and techniques for styling Font Awesome icons in React 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 React, but the syntax is different from our general web-use documentation. Below you'll find the syntax for adding styling with React, with links to the general documentation which 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`. ```jsx /* T-shirt sizes */ /* X-factor sizing */ ``` Remember, you can always control icon size directly with the CSS `font-size` attribute. The `FontAwesomeIcon`'s size prop determines icon size relative to the current context's font-size. ## Automatic Widths [](/web/style/icon-canvas.md) Set an icon's width to only their symbol and not the entire [Icon Canvas](/web/style/icon-canvas.md). ```jsx ``` ## Icons in a List [](/web/style/lists.md) Remember to include the proper parent markup (a `
    ` or `
      `) along with the appropriate class (`fa-ul`). ```jsx
      • First things first
      • Do this thing
      • But not this thing yet
      ``` ## 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. ```jsx /* Rotate */ /* Flip */ ``` ### 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](). ```jsx ``` ## 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. ```jsx ``` We've also built a 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. ```jsx ``` ## Pulled Icons [](/web/style/pull.md) Wrap text around an icon with this utility. ```js ``` ## 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. ```js {/* Use basic utilites */} {/* Or computed */} ``` ## 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. ```jsx ``` ## Duotone Icons [](/web/style/duotone.md) For Duotone icons, you can swap the opacity on the layers: ```jsx ``` We've also built a lot of utility into [CSS custom properties for Duotone icons](/web/style/duotone.md#duotone-cheatsheet). ## Use SVG Symbols ```jsx ``` And here's how those symbols are rendered. ```html ``` When you are using the default value for `symbol`, the `#id` is generated and used as the `href` attribute. If you specify a symbol value, that will be used as the value for the `href` attribute. ## Layer [](/web/style/layer.md) You can use the layering utilities 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. ```jsx ``` ### Invert the Icon Color to White This can be useful when layering icons, or on its own. ```jsx ``` ## Add Your Own CSS Classes You can add classes for your own project purposes and styling to any component using the className property. ```jsx ```

      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.