With the rise in popularity of SVG’s, now is the perfect time to create new assets that can be used responsively across all screen sizes and resolutions. In this post i have compiled 11 best resources where you can download free animated SVG icons to use in your existing and future projects.

SVG Loaders

Loading icons and small animations built purely in SVG, no CSS or JS.

Transformicons

Animated icons, symbols and buttons using SVG and CSS.

Free Animated SVG Icons

There are 6 different sets of icons with various differences in styling and animation. All the styling and animation is done exclusively in CSS, externally from the inline SVG mark-up.

Simple Icon Hover Effects

A set of simple round icon hover effects with CSS transitions and animations for your inspiration.

Animated weather icons

Animated Adam Whitcroft’s awesome Climacons with CSS. Inspired by Forecast.io’s animated weather icons, but wanted to achieve the same results without canvas.

SVG Morpheus

JavaScript library enabling SVG icons to morph from one to the other.

One div

The single element HTML/CSS icon database.

CSS3 Icons

Beautiful icons using css/3, which makes your site light and fewer http requests.

Navicon

Animated Navigation Icons with CSS Transforms.

Yet Another Set of Animated Social Icons

A simple spinning and border-radius animation on :hover for social icons. Social icons from icomoon and initial design by Nikki Clark

Animated SVG Icons

Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.