Animated icons
Animated icons you can play on hover or tap with your own player controls. Choose one style for a consistent set.
Animations
We read the colours and fonts from your home page. They stay in this browser.
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
2 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
2 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
2 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
2 s, loops
-
2 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
3 s, loops
-
2 s, loops
-
2 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
2.5 s, loops
-
2 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
2 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.5 s, loops
-
1.2 s, loops
-
1.5 s, loops
Tips for animated icons
Play on hover or tap
Icons feel best when they move in response to something. Load them paused and play them on hover or tap.
Size them like icons
Show them at 24 to 48 pixels next to text, the same size as the rest of your icons.
Label the button, not the icon
If the icon sits in a button, give the button a text label or an aria-label, and mark the animation itself with aria-hidden.
Change shapes and timing in the Mosso animation editor. Check your download with the Lottie viewer, or convert it with Lottie to GIF and Lottie to MP4.
Make your own icon
Every animation here was made in Mosso, and you can make your own the same way: shapes, text, keyframes, easing and one-click animations like pop, rise and bounce, all in your brand. Then export Lottie, GIF, MP4 or transparent video.
Questions
How do I play an icon on hover?
Load it with autoplay off and call play() when the pointer enters. Every Lottie player has a play method.
Can I change the line width?
Yes. In Mosso you can change the stroke width and colour of the whole icon.
Are these free for commercial use?
Yes. A free account lets you download up to 50 library animations a day. You may edit these animations and use them in personal and commercial work, including client projects. Third party parts keep their own licences. Keep the supplied notices and credits when you share them. Mosso does not require a credit for its own work. The restriction on reselling Mosso templates does not limit rights granted by third party licences.