8 Best Animated Icon Packs for Your Web Project

An object in the movement grabs attention quickly than a static one. So why don’t add some catchy animated icons to your website to make it more attentive?

In this article, we have shared some cool CSS and SVG animated icon packs, use them in your web projects to spice up your website and make it more interactive. Most of the animated icon packs listed in this article are free to use. So, let’s get started.

Also read:

List of the Best Animated Icon Packs to Use in your Web Projects


Livicons animated icon pack

Livicons is a set of attention grabbing SVG animated icon pack which has more than 370 icons to use in your website. This animated icon pack comes with various icons for different needs such as home office, medical, tools, transportation and arrows etc.

Livicons comes with 5 different kinds of icon styles such as solid, line, original, lines alt and filled styles. Livicons is a paid plugin and is available in jquery plugin and WordPress plugin versions. Check out Livicons here.

Titanic – Free Animated SVG Icon Set by Icons8

Titanic SVG animated icon pack

Titanic is a collection of 60 free animated SVG icons by icons8. These animated icons can be used for the web projects related to finance, shopping, Audio/Video and cloud computing etc. Take a look and download Titan pack here.


Transformicons icon pack

Transformicons is set of animated icons, symbols and buttons, this pack includes animated menu, grid, mail, scroll indicator, play/pause button and loader etc. This pack is useful for creating interactive form elements and mobile menu. Here is Transformicons homepage.


Animaticons icon pack

Animations is a collection of GIF animations, these icons comes with colorful and black and white options, Animaticons essential and animaticons camp packs are free to use. Check out Animaticons here.

Font Awesome Animation

how to add animated Font Awesome icons

Font Awesome Animation is a small CSS library that makes it easy to animate Fontawesome icons, this library has 15 animation effects, just include this CSS library and use the available CSS classes to animate the Fontawesome icon. Here is the homepage of Font Awesome Animation CSS library.


loading io

loading.io is a collection of SVG, CSS and GIF animated icons which can be used as the preloader for the website. You can customize the animation, speed and color of animated icons before downloading them to match them to your website. You can also animate your own icons here. Take a look at loading.io.

Animated SVG Icons by Tympanus

Animated SVG Icons by Tympanus

Tympanus has come up with some cool SVG animated icons to use in your website, in this set you will find animated arrows, flag, glass with water, clock, hour clock, smiley, key and many other attention grabbing icons, Check them over here.

Animated Weather Icons

Animated Weather Icons

Looking for some cool animated weather icons for your project? Josh Bader has crafted a set of catchy animated CSS weather icons which is available in CodePen. Check out this link for the source code and preview.

Lordicon [Updated]

lordicon animated SVG icons

Lordicon has the collection of 50 free SVG animated icons which can be used in your web or mobile projects, you can change the color and style of these icons, you can use lottie.js library to implement these icons in your web project. Download Lordicon SVG pack now.


Article by Shrinivas Naik

Hi, This is Shrinivas I am a web developer and WordPress enthusiast. I am also a hobby blogger who loves to write about WordPress, web tools, blogging and technology.

4 comments on “8 Best Animated Icon Packs for Your Web Project

Leave a Reply