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.
You should definitely check out http://LordIcon.com – you can download there 50 animated svg icons completly for free.