The entire Font Awesome styling toolkit 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
Font Awesome supports t-shirt size scale from 2xs to 2xl as well as literal sizing from 1x to 10x.
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.
Fixed-width
Setting icons to use a fixed-width helps when you're trying to align icons in a vertical column.
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.
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.
/* Use basic utilites */<FontAwesomeIconicon="fa-solid fa-coffee"transform="shrink-6 left-4"/>/* Or computed */<FontAwesomeIconicon="fa-solid fa-coffee"transform={{rotate:42}}/>
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.