si-icon-play // callback on toggle (click or mouseover/mouseout)Ĭheck out the demo to see some examples for different sizes, easings and activations (on click and on hover). With the help of Modernizr we can define the fallback in our CSS. We’ll add the icons dynamically to our page using Snap.svg and if SVG is not supported we’ll simply show a background image for the span elements that we use to wrap each graphic: We’ll define what will happen for each icon in our script. For example, for the zoom icon we’ll want to scale up the plus path. We used a size of 64×64 pixel for the icons.įor each icon we want a special animation to happen.

The first thing we do is to create some SVG icons using an SVG editor like Inkscape. Older and non-supporting browsers will not be capable of all features. Free Download : 150+ Free Animated Flat SVG Icons Flat Design Icons, Icon Design. Please note that we are working with a modern JavaScript library for manipulating our SVGs. The pack containg 150+ free animated icon in Flat style With Shadow. We want to try to do something similar using SVG icons with the help of Snap.svg. You’ve surely seen some great examples of animated icons using CSS transitions and animations like the Navicon Transformicons by Bennett Feely which were explained in this excellent collaborative tutorial by Sara Soueidan. With great libraries like Snap.svg the use of SVG assets becomes more easy and today we’d like to explore how to animate SVG icons. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using animations, many developers don’t know where to start. SVG has been one of the most underused technologies when it comes to web development.

Animated svg free download