Adding Icon Styling with React

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 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.

/* T-shirt sizes */
<FontAwesomeIcon icon="fa-solid fa-coffee" size="xs" />
<FontAwesomeIcon icon="fa-solid fa-coffee" size="lg" />

/* X-factor sizing */
<FontAwesomeIcon icon="fa-solid fa-coffee" size="6x" />

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

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

<FontAwesomeIcon icon="fa-solid fa-coffee" automaticWidth />

Icons in a List

Remember to include the proper parent markup (a <ul> or <ol>) along with the appropriate class (fa-ul).

<ul className="fa-ul">
  <li>
    <FontAwesomeIcon icon="fa-solid fa-coffee" listItem />
    First things first
  </li>
  <li>
    <FontAwesomeIcon icon="fa-solid fa-check-square" listItem />
    Do this thing
  </li>
  <li>
    <FontAwesomeIcon icon="fa-solid fa-check-square" listItem />
    But not this thing yet
  </li>
</ul>

Rotate and Flip Icons

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

/* Rotate */
<FontAwesomeIcon icon="fa-solid fa-coffee" rotation={90} />
<FontAwesomeIcon icon="fa-solid fa-coffee" rotation={180} />
<FontAwesomeIcon icon="fa-solid fa-coffee" rotation={270} />

/* Flip */
<FontAwesomeIcon icon="fa-solid fa-coffee" flip="horizontal" />
<FontAwesomeIcon icon="fa-solid fa-coffee" flip="vertical" />
<FontAwesomeIcon icon="fa-solid fa-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.

<FontAwesomeIcon
  icon="fa-solid fa-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.

<FontAwesomeIcon icon="fa-solid fa-heart" beat />
<FontAwesomeIcon icon="fa-solid fa-circle-info" beatFade />
<FontAwesomeIcon icon="fa-solid fa-basketball" bounce />
<FontAwesomeIcon icon="fa-solid fa-triangle-exclamation" fade />
<FontAwesomeIcon icon="fa-solid fa-compact-disc" flip />
<FontAwesomeIcon icon="fa-solid fa-bell" shake />
<FontAwesomeIcon icon="fa-solid fa-cog" spin />
<FontAwesomeIcon icon="fa-solid fa-compass" spin spinReverse />
<FontAwesomeIcon icon="fa-solid fa-spinner" spinPulse />

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

Bordered Icons

Add a border around an icon with this utility.

<FontAwesomeIcon icon="fa-solid fa-coffee" border />

Pulled Icons

Wrap text around an icon with this utility.

<FontAwesomeIcon icon="fa-solid fa-coffee" pull="left" />
<FontAwesomeIcon icon="fa-solid fa-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.

/* Use basic utilites */
<FontAwesomeIcon icon="fa-solid fa-coffee" transform="shrink-6 left-4" />

/* Or computed */
<FontAwesomeIcon icon="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.

<FontAwesomeIcon icon="fa-solid fa-coffee" mask="fa-regular fa-circle" />

Duotone Icons

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

<FontAwesomeIcon icon="fa-duotone fa-solid fa-coffee" swapOpacity />
<FontAwesomeIcon icon="fa-sharp-duotone fa-solid fa-house" swapOpacity />

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

Use SVG Symbols

<FontAwesomeIcon icon="fa-solid fa-coffee" symbol />
<FontAwesomeIcon icon="fa-solid fa-user" symbol="user-icon" />

And here’s how those symbols are rendered.

<svg><use href="#fas-fa-coffee"></use></svg>
<svg><use href="#user-icon"></use></svg>

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

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.

<span className="fa-layers fa-lg">
  <FontAwesomeIcon icon="fa-solid fa-circle" />
  <FontAwesomeIcon icon="fa-solid fa-check" transform="shrink-6" inverse />
</span>

Invert the Icon Color to White

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

<FontAwesomeIcon icon="fa-solid fa-coffee" inverse />

Add Your Own CSS Classes

You can add classes for your own project purposes and styling to any component using the className property.

<FontAwesomeIcon icon="fa-solid fa-spinner" className="highlight" />