11 Resources For Downloading Free Animated SVG Icons

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.

SVG Loader

Transformicons

Animated icons, symbols and buttons using SVG and CSS.

Transformicons

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.

Animated SVG Icons

Simple Icon Hover Effects

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

hover icon

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 Icons Animated with CSS

SVG Morpheus

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

SVG Morpheus

One div

The single element HTML/CSS icon database.

one div

CSS3 Icons

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

css3

Navicon

Animated Navigation Icons with CSS Transforms.

navicon

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 social icons

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.

animated svg icon

0 Comments

  1. You should definitely check out http://LordIcon.com – you can download there 50 animated svg icons completly for free.

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.