Animated icons

Bootstrap 5 Animated icons component

Responsive Animated icons built with Bootstrap 5. Examples of a loading or status communicating-icon to spin.

We’ve included some basic animations in our support styling for you to use.

Basic example

Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate with 8 steps. Works especially well with fa-spinner & everything in the spinner icons category.

Spin

<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="far fa-smile-beam fa-spin"></i>
</div>

Pulse

<div class="fa-3x">
  <i class="fas fa-spinner fa-pulse"></i>
</div>

Related resources