150+ Free Animated SVG Icons

December 27, 2013 • By Joe Howard • In Web Development

SVG implementation is fast becoming one of the hottest topics sweeping design and development circles as of late. With all the start-ups and JavaScript libraries, I wanted to create a set of SVG icons that have zero third-party dependencies and that can be implemented easily.

I’ve already written a number of articles on SVG, including this tutorial on animating icons with simple CSS and a tiny bit of jQuery. If you’re mostly unfamiliar with SVG implementation, it’s a good place to start. For some additional reading, take a look at this article here, which looks at the comparisons between SVG and icon-fonts.

However, the idea with this article is to provide a set of icons that any web designer or developer can use. Let’s take a look at how everything’s setup.

*Please note, due a number of websites reposting/hosting this demo and content. We do not allow any of our content to be reposted or hosted elsewhere unless stated otherwise.*

View Demo Download Source


As you can see in the demo, 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. If you take a look at the source files, you’ll notice I’ve separated all the styling into individual styles-sheets for the corresponding icon style.

Let’s take a look at the general document setup:

<meta charset="utf-8">
<title>150+ Animated SVG Icons Demo</title>
<link rel="stylesheet" type="text/css" href="css/social_line_styles.css"><!--SVG Styles & Animation-->

<span class="svg-icon flat-line" id="line-lightning"></span><!-- SVG icon is injected via JavaScript into span via the ID -->

<script src="js/svg_inject_scoial_line.js"></script><!--SVG injection script - contains the inline SVG Data-->


As you can see, the setup is quite simple. The SVG mark-up is injected externally via JavaScript and styled in an external style-sheet.

SVG Injection

Let’s take a look at how the JavaScript injects the SVG into the page. The idea here is that you can use it more dynamically as you won’t need to worry about putting SVG inline SVG’s directly into the page. All you need to do is create an HTML element with the corresponding “id”, and the script will inject the SVG into that element. Additionally, I’ve included all the cleaned and optimised SVG files if you prefer to use other means of implementing.

var SVGstring = "<!--SVG Mark-Up Goes Here-->";



The HTML is pretty simple, the icons are injected into “<span>”s with a class for general styling and an ‘id” for specific styling and the injection.



The SVG mark-up contains all the classes and path data. By default, it contains CSS styling mark-up as well. However I’ve placed this in the style-sheets and applied some basic styling and animations. If you want to get more advanced with the animations, feel free to do so.

Lastly, the flat design icons were designed by Studio4 | Creative and are free for any use, credit goes to them for the design. However I slightly modified the original designs as well as converted them to SVG (amongst other things). That’s it really. Feel free to use them to your liking.


Please note, although I’ve designed this for easy implementation, you may need to make some minor adjustments in integrating it into your own set-up. Enjoy!

View Demo Download Source

About The Author

Joe Howard

Joe Howard is a hybrid designer, front-end developer and graphic designer. He's also the founder and editor of Pencil Scoop. You can follow him on your preferred social media platform.


6 Responses to “150+ Free Animated SVG Icons”

  1. December 30, 2013 at 10:03 am, HiZb UllAh said:

    It’s really awesome!!!

  2. January 07, 2014 at 7:02 pm, e11world said:

    I don’t really like the jumping animation but still very nicely done!

  3. February 02, 2014 at 3:05 pm, Manoj6994 said:

    Excellent resource! Can I use them for my commercial bootstrap template up for sell in a marketplace? Of course with a credit :)

  4. February 06, 2014 at 12:34 pm, カラフルなフラットデザインのアイコンを簡単にアニメーションできる「150+ Free Animated SVG Icons」 | päivittäin kukka said:

    […] フラットデザインの制作に役立ちそうなSVGアニメーション「150+ Free Animated SVG Icons」が良かったのでご紹介をしたいとおもいます。 SVGはベクター形式の画像フォーマットなのでRetinaディスプレイでも綺麗に表示されます。なのでこれから使われるサイトがどんどん増えてくるかもしれません。 […]

  5. February 08, 2014 at 8:01 am, Best of the Week #12 | Wordpress Themes said:

    […] This huge set of SVG icons is divided into 6 different groups with various differences in styling. Every icon has an animated hover effect and thanks to SVG this set has zero third-party dependencies. All styling and animation is done exclusively in CSS, externally from the inline SVG mark-up. A short description on how to use these icons is available at pencilscoop.com. […]

  6. February 21, 2014 at 5:00 pm, 150+ Free Animated Flat SVG Icons said:

    […] Source DownloadShare this […]

  7. March 05, 2014 at 6:22 pm, Soni said:

    Hello! This is really great! was wondering if that can be integrated to wordpress? how does it work? many thanks!

  8. March 09, 2014 at 8:51 pm, Soni said:

    Hello! Please how can i use this in WordPress?

  9. March 10, 2014 at 1:16 pm, 275+ Best High Quality Free Flat Icons | Designrazzi said:

    […] MORE / INFO DEMO […]

Leave a Reply