Font Awesome has a ton of great styling tools that work hand-in-hand with our icons to make your project look its best.
Advertisement Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 26,107 icons in Font Awesome 5 Classic styles of every icon 3 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
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
2xl as well as literal sizing from
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.
Setting icons to use a fixed-width helps when you're trying to align icons in a vertical column. Icons in a List
Rotate and Flip Icons
Rotate on quarter turns and flip horizontally, vertically, or both. Or try power transforms for more granularity. Animate Icons
You can use the animate utilities as a way to indicate loading or processing, especially when paired with icons like
sync. The spin utility smoothly spins the icon clockwise, and the pulse utility spins clockwise in eight steps.
We've also built a some
animation utilities into CSS custom properties. Bordered Icons
Add a border around an icon with this utility. Pulled Icons
Wrap text around an icon with this utility. 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
shrink-# with any arbitrary value, including decimals.
To move icons up, down, left, or right, use
right-# with any arbitrary value, including decimals.
To rotate or flip icons use any combination of
rotate-# with any arbitrary value.
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. Duotone Icons
For Duotone icons, you can swap the opacity on the layers:
We've also built a lot of utility into
CSS custom properties for Duotone icons. Use SVG Symbols Layer
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. Include
fixed-width to have the layers align.
Invert the Icon Color to White
This can be useful when layering icons, or on its own.
Add Your Own CSS Classes
You can add classes for your own project purposes and styling to any component using the className property.