Home / Premium Pro Plugins / 40 Animated SVG Social Media Icons

40 Animated SVG Social Media Icons

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)


These animated SVG icons are the proper technique to ship your clients to your social media. They’re all SVGs (scaleable vector graphics), which suggests you could make them any measurement and present them on any display screen (even retina), they usually’ll look 100% crisp and clear.

What occurs when the icon isn’t on the display screen? Don’t fear, the icons received’t animate till you’ve scrolled them into view.

Icons Included

  • AddThis
  • Amazon
  • Bebo
  • Behance
  • Blogger
  • Scrumptious
  • DeviantArt
  • Digg
  • Dribbble
  • Dropbox
  • Evernote
  • fb
  • Flickr
  • Forrst
  • GitHub
  • Google
  • Grooveshark
  • Instagram
  • Kickstarter
  • Final.fm
  • LinkedIn
  • Myspace
  • Picassa
  • Pinterest
  • Quora
  • RSS
  • ShareThis
  • Skype
  • SoundCloud
  • StumbleUpon
  • Technocrati
  • Tumblr
  • Twitter
  • Vimeo
  • Wikipedia
  • WordPress
  • Xing
  • Yahoo!
  • YouTube
  • Zerply

Straightforward to Edit

Utilizing these icons is ridiculously straightforward! Severely, simply add a div with the proper class title and we’ll take it from there:

<div class="browsericon facebookIcon"></div>

All the colours are dealt with proper within the CSS so there’s no have to dig by way of SVG code or open a graphics file:

.browsericon .fb .f

Even including buttons to manage the animations is a peice of cake. You’ll be able to even specify which icons might be affected by placing their numbers in between the brackets:

<button onclick="restartIcons([0,1,2,3,4])">Restart</button>
<button onclick="reverseIcons([0,1,2,3,4])">Reverse</button>

Wish to get all loopy and mess with the .js file? It couldn’t be extra easy:

var imagesPath = "pictures/";//path to the photographs
var delayBetweenIcons = .5;//stagger the animation of every iccon (in seconds)
var useRollover = true;//have an animation on rollover
var hoverScale = 1.2;//how a lot does the icon develop on rollover 
var pace = 1;//pace up or decelerate the animations (1 being regular pace)
var playOnStart = true;//play animations on web page load

Evaluate the scale and high quality of SVG’s, JPG’s, and PNG’s

Suitable With All Main Browsers

All major browsers

Easy Javascript Animations

There are not any Flash or animated GIF parts right here. All the animations you see are 100% Javascript and don’t require any browser plugins.

This merchandise makes use of Greensock’s TweenMax for the animations, moderately than jQuery. Why? As a result of GSAP is SOOOO a lot sooner and smoother. See for your self: jQuery vs GSAP pace check.

Free Flat Icons

In order for you simply the icons (not animated), you may get them free right here at GraphicBurger.

40 Animated SVG Social Media Icons for WordPress
Animated SVG Browser Icons
jQuery Goal Thermometer
Customizable Analog Clock - jQuery
WordPress Goal Thermometer


Check Also


Double Colors

DOWNLOAD It’s countless recreation. You want faucet for rotate blocks. Contact similar colours! Watch video ...


Love Calculator

DOWNLOAD Love calculator is a enjoyable software the place buddies and can calculate the share ...