Animations

Boxicons comes with a set of pre-built CSS animations that let you add motion to your icons with simple utility classes. Animations are useful for drawing attention to actions, indicating loading states, or adding subtle feedback to your UI.

Enable Animations

To use the animation utilities, you first need to include the animations stylesheet in the <head> of your page:

animations.min.css


<link href="https://cdn.boxicons.com/animations.min.css" rel="stylesheet">

Basic Animations

You can apply an animation to an icon by adding one of the animation classes directly to it.

Available animation classes

bx-spin
bx-tada
bx-flashing
bx-burst
bx-fade-left
bx-fade-right
bx-fade-up
bx-fade-down
bx-breathe
bx-beat
bx-wiggle
bx-bounce


<i class="bxf bx-thumb-up bx-spin"></i>
<i class="bxf bx-thumb-up bx-tada"></i>
<i class="bxf bx-thumb-up bx-bounce"></i>

These animations run continuously by default.

On Hover Animation

If you only want the animation to play when the user hovers over the icon, use the -hover variants of the animation classes.

Hover animation classes

bx-spin-hover
bx-tada-hover
bx-flashing-hover
bx-burst-hover
bx-fade-left-hover
bx-fade-right-hover
bx-fade-up-hover
bx-fade-down-hover
bx-breathe-hover
bx-beat-hover
bx-wiggle-hover
bx-bounce-hover


<i class="bxf bx-thumb-up bx-spin-hover"></i>
<i class="bxf bx-thumb-up bx-tada-hover"></i>
<i class="bxf bx-thumb-up bx-bounce-hover"></i>

Controlling Animation Speed and Repetition

Because these are pure CSS animations, you can fully control them using standard CSS properties:

animation-duration — controls how fast or slow the animation runs
animation-iteration-count — controls how many times the animation repeats


<i
  class="bxf bx-thumb-up bx-spin"
  style="animation-duration: 2s; animation-iteration-count: 1;"
></i>