Animating Icons

Our Styling Toolkit takes the trouble out of sizing, rotating, and stacking icons, so you can make your site pop with animations.

We’ll cover the basics of animations like beat, fade, beat-fade, flip, and spin to your icons, so that you can create more visual interest on your site.

Before You Get Started

Make sure you're:

Set up with Font Awesome in your project.
Familiar with the basics of adding Font Awesome icons.

Beat

Use the fa-beat animation to scale an icon up or down. This is useful for grabbing attention or for use with health/heart-centric icons.

<div class="fa-3x">
  <i class="fa-solid fa-circle-plus fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat"></i>
  <i
    class="fa-solid fa-heart fa-beat"
    style="--fa-animation-duration: 0.5s;"
  ></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-beat-scale: 2.0;"></i>
</div>

Beat Utilities

Utility	Details
`--fa-beat-scale`	Set max value that an icon will scale

Fade

Use the fa-fade animation to fade an icon in and out visually to grab attention in a subtle (or not so subtle) way.

<div class="fa-3x">
  <i class="fa-solid fa-triangle-exclamation fa-fade"></i>
  <i class="fa-solid fa-skull-crossbones fa-fade"></i>
  <i class="fa-solid fa-desktop-arrow-down fa-fade"></i>
  <i
    class="fa-solid fa-i-cursor fa-fade"
    style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;"
  ></i>
</div>

Fade Utilities

Utility	Details
`--fa-fade-opacity`	Set lowest opacity value an icon will fade to and from

Beat-Fade

Use the fa-beat-fade animation to grab attention by visually scaling and pulsing an icon in and out.

<div class="fa-3x">
  <i class="fa-solid fa-triangle-person-digging fa-beat-fade"></i>
  <i class="fa-solid fa-square-exclamation fa-beat-fade"></i>
  <i
    class="fa-solid fa-poo-bolt fa-beat-fade"
    style="--fa-beat-fade-opacity: 0.1; --fa-beat-fade-scale: 1.25;"
  ></i>
  <i
    class="fa-solid fa-circle-info fa-beat-fade"
    style="--fa-beat-fade-opacity: 0.67; --fa-beat-fade-scale: 1.075;"
  ></i>
</div>

Beat-Fade Utilities

Utility	Details
`--fa-beat-fade-opacity`	Set lowest opacity value an icon will fade to and from
`--fa-beat-fade-scale`	Set max value that an icon will scale

Bounce

Use the fa-bounce animation to grab attention by visually bouncing an icon up and down.

<div class="fa-3x">
  <i class="fa-solid fa-basketball fa-bounce"></i>
  <i class="fa-solid fa-volleyball fa-bounce"></i>

  <!-- bounce animation with no "squish" -->
  <i
    class="fa-solid fa-frog fa-bounce"
    style="
      --fa-bounce-start-scale-x: 1; 
      --fa-bounce-start-scale-y: 1; 
      --fa-bounce-jump-scale-x: 1; 
      --fa-bounce-jump-scale-y: 1; 
      --fa-bounce-land-scale-x: 1; 
      --fa-bounce-land-scale-y: 1;
    "
  ></i>

  <!-- bounce animation with no "squish" or "rebound" -->
  <i
    class="fa-solid fa-envelope fa-bounce"
    style="
      --fa-bounce-start-scale-x: 1; 
      --fa-bounce-start-scale-y: 1; 
      --fa-bounce-jump-scale-x: 1; 
      --fa-bounce-jump-scale-y: 1; 
      --fa-bounce-land-scale-x: 1; 
      --fa-bounce-land-scale-y: 1; 
      --fa-bounce-rebound: 0;"
  ></i>
</div>

Bounce Utilities

Utility	Details
`--fa-bounce-rebound`	Set the amount of rebound an icon has when landing after the jump
`--fa-bounce-height`	Set the max height an icon will jump to when bouncing
`--fa-bounce-start-scale-x`	Set the icon's horizontal distortion ("squish") when starting to bounce
`--fa-bounce-start-scale-y`	Set the icon's vertical distortion ("squish") when starting to bounce
`--fa-bounce-jump-scale-x`	Set the icon's horizontal distortion ("squish") at the top of the jump
`--fa-bounce-jump-scale-y`	Set the icon's vertical distortion ("squish") at the top of the jump
`--fa-bounce-land-scale-x`	Set the icon's horizontal distortion ("squish") when landing after the jump
`--fa-bounce-land-scale-y`	Set the icon's vertical distortion ("squish") when landing after the jump

Flip

Use the fa-flip animation to rotate an icon in 3D space (opens new window). By default, flip rotates an icon about the Y axis 180 degrees. Flipping is helpful for transitions, processing states, or for using physical objects that one flips in the real world.

<div class="fa-3x">
  <i class="fa-solid fa-compact-disc fa-flip"></i>
  <i class="fa-solid fa-camera-rotate fa-flip"></i>
  <i class="fa-solid fa-cassette-tape fa-flip"></i>
  <i
    class="fa-solid fa-scroll fa-flip"
    style="--fa-flip-x: 1; --fa-flip-y: 0;"
  ></i>
  <i
    class="fa-solid fa-money-check-dollar fa-flip"
    style="--fa-animation-duration: 3s;"
  ></i>
</div>

Flip Utilities

Utility	Details
`--fa-flip-x`	Set x-coordinate of the vector denoting the axis of rotation (between `0` and `1`)
`--fa-flip-y`	Set y-coordinate of the vector denoting the axis of rotation (between `0` and `1`)
`--fa-flip-z`	Set z-coordinate of the vector denoting the axis of rotation (between `0` and `1`)
`--fa-flip-angle`	Set rotation angle of flip. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

Shake

Use the fa-shake animation to grab attention or note that something is not allowed by shaking an icon back and forth.

<div class="fa-3x">
  <i class="fa-solid fa-bell fa-shake"></i>
  <i class="fa-solid fa-lock fa-shake"></i>
  <i class="fa-solid fa-stopwatch fa-shake"></i>
  <i class="fa-solid fa-bomb fa-shake"></i>
</div>

Spin

Use the fa-spin class to get any icon to rotate, and use fa-spin-pulse to have it rotate with eight steps. This works especially well with fa-spinner and everything in the spinner icons category. If you would like an icon to spin in reverse (e.g., counter-clockwise), add an additional class of fa-spin-reverse.

<div class="fa-3x">
  <i class="fa-solid fa-sync fa-spin"></i>
  <i class="fa-solid fa-circle-notch fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin fa-spin-reverse"></i>
  <i class="fa-solid fa-spinner fa-spin-pulse"></i>
  <i class="fa-solid fa-spinner fa-spin-pulse fa-spin-reverse"></i>
</div>

Spin Utilities

Utility	Details
`fa-spin`	Makes an icon spin 360° clockwise
`fa-spin-pulse`	Makes an icon spin 360° clockwise in 8 incremental steps
`fa-spin-reverse`	When used in conjunction with `fa-spin` or `fa-spin-pulse`, makes an icon spin counter-clockwise.

We've deprecated fa-pulse

The fa-pulse animation class that we used on previous versions of Font Awesome still works in Version 6. But we've decided to rename it to fa-spin-pulse. We think that name is more accurate to its purpose and will migrate to use it in future versions.

Accessibility

Using animations on the web in the most accessible way requires a little extra consideration:

In general, it's best to use animations on the web in a complementary way rather than the only way to note a state change in UI. Remember to update the text of actions and change elements' other visual aspects too!

And when it comes to an animation's timing and duration, avoid changing the state of something at a rate of three times per second or greater - which can trigger photosensitive epilepsy.

All included animations now support and leverage the prefers-reduced-motion CSS media feature (opens new window) to detect if a user has requested that the system minimize the amount of non-essential motion it uses.

Case	How It Affects Included Animations
No preference set (default)	Animations will render as expected
Preference set to `reduce`	Animations will be disabled

When a prefers-reduced-motion is set to reduce, it indicates that the user prefers less motion, which may trigger discomfort for those with vestibular motion disorders on the page.

Help, my icons are not animating!

Make sure your system's settings are not preventing your icons from being animated. You can check it or change it in user preferences (opens new window). If you still have problems you can reach out to our support team.

Customization

We've added CSS custom properties (opens new window) to make customizing easier and more efficient, and you can use these custom properties across all of our animations. Define your own values for the following properties to override and customize Font Awesome's defaults.

CSS Custom Property	Details	Accepted Values
`--fa-animation-delay`	Set an initial delay for animation	Any valid CSS `animation-delay` value (opens new window)
`--fa-animation-direction`	Set direction for animation	Any valid CSS `animation-direction` value (opens new window)
`--fa-animation-duration`	Set duration for animation	Any valid CSS `animation-duration` value (opens new window)
`--fa-animation-iteration-count`	Set number of iterations for animation	Any valid CSS `animation-iteration-count` value (opens new window)
`--fa-animation-timing`	Set how the animation progresses through frames	Any valid CSS `animation-timing-function` value (opens new window)

<div class="fa-3x">
  <i class="fa-solid fa-cog fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin" style="--fa-animation-direction: reverse;"
  ></i>
  <i class="fa-solid fa-cog fa-spin" style="--fa-animation-duration: 15s;"></i>
  <i class="fa-solid fa-compact-disc fa-spin" style="--fa-animation-duration: 30s; --fa-animation-iteration-count: 1;"></i>
  <i class="fa-solid fa-tire fa-spin" style="--fa-animation-duration: 3s; --fa-animation-iteration-count: 5;--fa-animation-timing: ease-in-out;"></i>
</div>

Icon Animation + Wobbles

We've worked hard to keep icons perfectly centered when they spin or pulse. However, we've seen issues with several browsers with the Web Fonts + CSS method of Font Awesome. This appears to be an issue with web fonts in general and not something we can directly fix. We do have a couple of ways you might be able to work around this:

Set the display of the animating icon — Use display: block; where you can. This seems to help a lot with this issue.
Switch Frameworks — Switch to the SVG with JavaScript method; it's working a lot better for this.