40 Animated SVG Social Media Icons

CodeCanyon price: 6$ | Click here to tryout


High Resolution: Yes
Software application Version: Various other
Files Included: CSS, JavaScript JS, HTML
Tags: svg, dropbox, flickr, facebook, forrst, youtube, skype, twitter, social networks, instagram, computer animated, symbol, evernote, dribbble, kickstarter
Last Update: 10 October 15
Suitable Browsers: IE11, Opera, Safari, Chrome, IE9, Firefox, IE10
Developed: 20 February 15



 These animated SVG symbols are the ideal means to send your consumers to your social media. They’re all SVGs (scaleable vector graphics), which implies that you can make them any type of dimension as well as reveal them on any type of screen (even retina), and they’ll look 100% clear and also crisp.

What takes place when the symbol isn’t really on the screen? Do not fret, the symbols won’t animate up until you have actually scrolled them forward.

Icons Included AddThis Amazon.com Bebo Behance Blog owner Delicious DeviantArt Digg Dribbble Dropbox Evernote facebook Flickr Forrst GitHub Google Grooveshark Instagram Kickstarter Last.fm LinkedIn Myspace Picassa Pinterest Quora RSS ShareThis Skype SoundCloud StumbleUpon Technocrati Tumblr Twitter Vimeo Wikipedia WordPress Xing Yahoo! YouTube Zerply

Easy to Edit

Using these symbols is unbelievably simple! Seriously, simply include a div with the right class name and we’ll take it from there:
<< div class=" browsericon facebookIcon"><> .

All the colors are taken care of right in the CSS so there’s no should dig through SVG code or open a graphics file:

. browsericon.facebook.f
fill: #D 97827;

Even adding buttons to manage the animations is a peice of cake. You could also specify which icons will be impacted by placing their numbers between the braces:

<< button onclick=" restartIcons( [0,1,2,3,4]">> Restart<. << switch onclick=" reverseIcons( [0,1,2,3,4]">> Opposite<. Wish to get all crazy and also mess with the.js file? It couldn't be much more simple:. var imagesPath="pictures/";// path to the photos. var delayBetweenIcons =.5;// startle the computer animation of each iccon (in secs). var useRollover = real;// have a computer animation on rollover. var hoverScale = 1.2;// just how much does the symbol grow on rollover. var speed = 1;// accelerate or reduce the animations (1 being regular speed). var playOnStart = real;// play computer animations on web page tons. Compare the dimension and high quality of SVG's, JPG's, and PNG's. Suitable With All Major Internet browsers. Smooth Javascript Animations. There are no Flash or animated GIF aspects right here. All the computer animations you see are 100% Javascript and also do not need any kind of web browser plugins. This item makes use of Greensock's TweenMax for the computer animations, rather than jQuery. See for on your own: jQuery vs GSAP rate test. Free Flat Icons. You can get them free here at GraphicBurger if you want simply the icons (not computer animated). Related Products. Making use of these icons is ridiculously easy! Even adding switches to regulate the computer animations is a peice of cake. This product uses Greensock's TweenMax for the computer animations, instead than jQuery. Since GSAP is SOOOO much faster and also smoother. See for on your own: jQuery vs GSAP speed test.

Comments are closed.