Animating Icons

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

In this doc, we'll cover how to make your icons beat, fade, flip, spin, buzz, float, jello, swing, wag, and more with our animations, so that you can create more visual interest on your site.

Before You Get Started

Make sure you're:

Seeing display issues with animated icons in Safari?

We're aware of a bug in Safari where some icons are being visually cut off when animated. Learn more and grab a manual workaround!

Animations

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 (number with 1 being no scaling)

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 (number between 0 and 1)

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 (number between 0 and 1)
--fa-beat-fade-scale Set max value that an icon will scale (number with 1 being no scaling)

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-volleyball fa-bounce"></i>

  <!-- bounce with extra rebound and "squish" on landing -->
  <i
    class="fa-solid fa-basketball fa-bounce"
    style="--fa-bounce-land-scale-x: 1.2;--fa-bounce-land-scale-y: .8;--fa-bounce-rebound: 5px;"></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 (number with 0 being no rebound)
--fa-bounce-anticipation Set the amount of squish before an icon jumps in length units (px, rem, etc)
--fa-bounce-height Set the max height an icon will jump to when bouncing in length units (px, rem, etc)
--fa-bounce-start-scale-x Set horizontal distortion when starting to bounce (number with 1 being no distortion)
--fa-bounce-start-scale-y Set vertical distortion when starting to bounce (number with 1 being no distortion)
--fa-bounce-jump-scale-x Set horizontal distortion at the top of the jump (number with 1 being no distortion)
--fa-bounce-jump-scale-y Set vertical distortion at the top of the jump (number with 1 being no distortion)
--fa-bounce-land-scale-x Set horizontal distortion when landing after the jump (number with 1 being no distortion)
--fa-bounce-land-scale-y Set vertical distortion when landing after the jump (number with 1 being no distortion)

New!

Buzz

The fa-buzz animation is a fast, tight vibration with rapid decay. Use the Buzz animation for quick attention without being loud - a phone buzzing on a table, an expiring timer. Available in Version 7.3 and later.

 
<div class="fa-3x">
  <i class="fa-solid fa-mobile-vibrate fa-buzz"></i>
  <i class="fa-solid fa-bee fa-buzz"></i>
  <i class="fa-solid fa-triangle-exclamation fa-buzz" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-bell fa-buzz" style="--fa-buzz-distance: 9px;"></i>
</div>

Buzz Utilities

Utility Details
--fa-buzz-distance Set distance of the vibration in length units (px, rem, etc)

Flip

Use the fa-flip animation to rotate an icon in 3D space. 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-camera-rotate fa-flip"></i>
  <i class="fa-solid fa-coin-vertical 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-compact-disc fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 1;"></i>
  <i class="fa-solid fa-cassette-tape fa-flip" style="--fa-animation-duration: 3s;"></i>
</div>

New!

Flip 360

An extension of the fa-flip animation, fa-flip-360 lets you flip the icon all the way around in a smooth animation. Give your flips some extra oomph. The same utilities are available for both flip animations. Available in Version 7.3 and later.

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

Flip Utilities

Utility Details
--fa-flip-x Set x-coordinate of the axis of rotation (number between 0 and 1)
--fa-flip-y Set y-coordinate of the axis of rotation (number between 0 and 1)
--fa-flip-z Set z-coordinate of the axis of rotation (number between 0 and 1)
--fa-flip-angle Adjust the flip rotation in degrees. Positive angle for a clockwise rotation, a negative angle for counter-clockwise

New!

Float

The fa-float animation is a slow, spooky addition to the Font Awesome animations. Great for empty spaces, subtle attention, and adding a bit of playful lightness to your UI. Available in Version 7.3 and later.

 
<div class="fa-3x">
  <i class="fa-solid fa-ghost fa-float"></i>
  <i class="fa-solid fa-feather fa-float"></i>
  <i class="fa-solid fa-butterfly fa-float" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-balloon fa-float" style="--fa-float-height: .5em;"></i>
</div>

Float Utilities

Utility Details
--fa-float-height Set height of the vertical motion in length units (px, rem, etc)
--fa-float-drift Set horizontal drift distance in length units (px, rem, etc)
--fa-float-tilt Set tilt during drift in degrees
--fa-float-squash-x Set horizontal distortion at bottom of hover (number with 1 being no distortion)
--fa-float-squash-y Set vertical distortion at bottom of hover (number with 1 being no distortion)
--fa-float-stretch-x Set horizontal distortion at top of apex (number with 1 being no distortion)
--fa-float-stretch-y Set vertical distortion at top of apex (number with 1 being no distortion)

New!

Jello

Add some playful fun to your UI with the fa-jello animation. Nothing jiggles like a bowl of fa-jello! Great for calling attention to something new, fun, interactive. Available in Version 7.3 and later.

 
<div class="fa-3x">
  <i class="fa-solid fa-droplet fa-jello"></i>
  <i class="fa-solid fa-star fa-jello"></i>
  <i class="fa-solid fa-cube fa-jello" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-cube fa-jello" style="--fa-jello-scale-x: 1.3;"></i>
</div>

Jello Utilities

Utility Details
--fa-jello-scale-x Adjust the horizontal distortion (number with 1 being no distortion)
--fa-jello-scale-y Adjust the vertical distortion (number with 1 being no distortion)

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>

Updated!

Spin and Spin-snap

So you need an icon to spin? We gotcha covered! We have a bunch of spin animations that let you pick the right spin for your situation. If you would like a reverse spin, you can add the fa-spin-reverse to any of our spin animations.

Spin animations are great for loading states, but can be used to add circular motion to any part of your UI. These animations work especially well with icons in the spinner icons category.

 
<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-compact-disc fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin-snap"></i>
  <i class="fa-solid fa-cog fa-spin-snap-8 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 Variations

Here's a quick reference table of all the spin animations available.

Animation Description
fa-spin Makes an icon spin 360° clockwise
fa-spin-pulse Makes an icon spin 360° clockwise in 8 discrete steps (no transitions/easing)
fa-spin-snap * Makes an icon spin 360° clockwise with 6 pauses
fa-spin-snap-4 * Makes an icon spin 360° clockwise with 4 pauses
fa-spin-snap-8 * Makes an icon spin 360° clockwise with 8 pauses
fa-spin-reverse Add to any spin animation to make it spin in reverse (counter-clockwise)

* Available in Version 7.3 and later.

We've deprecated fa-pulse

The fa-pulse animation class that we used on previous versions of Font Awesome still works. But we've decided to rename it to fa-spin-pulse. We think that name is a more accurate description and will refer to it as "spin-pulse" from now on.

New!

Swing

The fa-swing animation is a subtle dangle with a slow decay. Use the Swing animation for subtle attention - great for things that physically dangle, like keys, clothes hangers, or bells. Available in Version 7.3 and later.

 
<div class="fa-3x">
  <i class="fa-solid fa-key fa-swing"></i>
  <i class="fa-solid fa-clothes-hanger fa-swing"></i>
  <i class="fa-solid fa-bell fa-swing" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-bell fa-swing" style="--fa-swing-angle: 45deg;"></i>
</div>

Swing Utilities

Utility Details
--fa-swing-angle Set angle of the swing in degrees

New!

Wag

The fa-wag animation is a cousin of the swing animation - the top of the icon wags with a slow decay. You can also use the Wag animation for subtle attention - great for things that physically wag or wobble, like hands. Available in Version 7.3 and later.

 
<div class="fa-3x">
  <i class="fa-solid fa-hand-point-right fa-wag"></i>
  <i class="fa-solid fa-hand-pointer fa-wag"></i>
  <i class="fa-solid fa-flask-round-potion fa-wag" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-hand-point-up fa-wag" style="--fa-wag-angle: 45deg;"></i>
</div>

Wag Utilities

Utility Details
--fa-wag-angle Set angle of the wag in degrees

Accessibility and Animations

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 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 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. If you still have problems you can reach out to our support team.

Customizing Animations

We've added CSS custom properties 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
--fa-animation-direction Set direction for animation Any valid CSS animation-direction value
--fa-animation-duration Set duration for animation Any valid CSS animation-duration value
--fa-animation-iteration-count Set number of iterations for animation Any valid CSS animation-iteration-count value
--fa-animation-timing Set how the animation progresses through frames Any valid CSS animation-timing-function value 
<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>

Troubleshooting

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:

Conflicts with animate.css

Older versions of animate.css also used the fast CSS class selector to control the speed of animations.

Since Font Awesome also uses this class selector, they conflict with each other.

You can fix this by upgrading animate.css to a new version or you can add this exception into your CSS somewhere to work around the issues.

.animated.fast {
  font-family: inherit;
}

Safari Bug with Animating Icons

Currently, some icons may become visually cut off in Safari when animated. This is a known bug in Safari that only occurs with Font Awesome icons when all of the following are true:

There is a workaround you can manually apply using custom CSS. In the following example, the top and bottom of the first fa-eye-slash's slash will be cut off in Safari. The second fa-eye-slash icon has the workaround applied.

 
<style>
  /*custom rule */
  .fa-fix-animation-for-safari::before {
    /* add a bit more block-level padding to stop animating icon from being cropped in Safari */
    padding-top: 0.1em;
    padding-bottom: 0.1em;
  }
</style>

<!-- affected icon without manual workaround -->
<i class="fa-solid fa-eye-slash fa-beat"></i>

<!--
 affected icon with manual workaround
 (triggered by .fa-fix-animation-for-safari)
-->
<i class="fa-solid fa-eye-slash fa-beat fa-fix-animation-for-safari"></i>
    No results