Skip to Content
Boxicons v3.0 is released 🎉
Animate the icons

Animate the Icons

Animate your icons with pre built CSS animations using classes bx-spin,bx-tada,bx-flashing,bx-burst,bx-fade-left,bx-fade-right,bx-breathe,bx-beat,bx-wiggle & bx-bounce

You can change the speed of the animation with the animation-duration property & to change the number of times the animation takes place with the property animation-iteration-count in CSS

<i class='bx bxs-like bx-spin'></i> <i class='bx bxs-like bx-tada'></i> <i class='bx bxs-like bx-flashing'></i> <i class='bx bxs-like bx-burst'></i> <i class='bx bxs-like bx-fade-left'></i> <i class='bx bxs-like bx-fade-right'></i> <i class='bx bxs-like bx-fade-up'></i> <i class='bx bxs-like bx-fade-down'></i> <i class='bx bxs-like bx-breathe'></i> <i class='bx bxs-like bx-beat'></i> <i class='bx bxs-like bx-wiggle'></i> <i class='bx bxs-like bx-bounce'></i>

Animation on Hover

Animate your icons on hover with pre built CSS animations using classes bx-spin-hover,bx-tada-hover,bx-flashing-hover,bx-burst-hover,bx-fade-left-hover,bx-fade-right-hover, bx-breathe-hover,bx-beat-hover,bx-wiggle-hover & bx-bounce-hover

You can change the speed of the animation with the animation-duration property & to change the number of times the animation takes place with the property animation-iteration-count in CSS

<i class='bx bxs-like bx-spin-hover'></i> <i class='bx bxs-like bx-tada-hover'></i> <i class='bx bxs-like bx-flashing-hover'></i> <i class='bx bxs-like bx-burst-hover'></i> <i class='bx bxs-like bx-fade-left-hover'></i> <i class='bx bxs-like bx-fade-right-hover'></i> <i class='bx bxs-like bx-fade-up-hover'></i> <i class='bx bxs-like bx-fade-down-hover'></i> <i class='bx bxs-like bx-breathe-hover'></i> <i class='bx bxs-like bx-beat-hover'></i> <i class='bx bxs-like bx-wiggle-hover'></i> <i class='bx bxs-like bx-bounce-hover'></i>
Last updated on