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

Edit in sandbox 
        
            
      <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

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