Flatimation SVG - An Animated SVG Icon Set

2025: While the Flatimation code-set can be used and easily adapted to modern icons, it is no longer supported. Please purchase with the intention to use it for your own projects rather than an end solution!

It’s time that you add a little fun back to your website! What if I told you that you could add eye-catching animated icons that work across all major browsers and mobile devices, all while having the maximum flexibility of smaller file sizes, unlimited scalability, and extreme customization in only three words? Meet Flatimation SVG!

What is Flatimation SVG?

Flatimation SVG is a set of 81 Animated SVG icons with 7 animation effects, 3 background variations, and 6 precoded size options. All of these 126 options per icon can be changed in just three words – and that’s not counting the unlimited color and hover possibilities found in the detailed CSS stylesheet. That’s 10,206 options in one purchase!

7 Animation Effects

.GIF above is heavily optimized. Animations run even smoother on Live Preview.

3 Background Variations

6 Precoded Sizes

Goodbye Pixels, Hello Scalability

SVGs are vector graphics, meaning that they can scale from 16px to 1000px while remaining beautifully sharp. This also means there’s no need to duplicate icons for Retina-Ready/High Resolution devices. Say?nara pixelation!

3 Word Combinations

I kid you not, the hardest part of Flatimation SVG is choosing which 3 word combination you want in your SVG snippet. 126 options and you have to narrow it down to 1 animation effect, 1 background variation, and 1 size option – good luck! My favorite combination is “spinsvg circlebg middleicon”!

.GIF above is heavily optimized. Animations run even smoother on Live Preview.

Plays Well With Others

Thanks to Velosity.js and jQuery, Flatimation SVG works effortlessly across all major browsers and mobile devices without the need of Flash or any other plugin. Did I mention Flatimation SVG even plays with that bully IE 9+?

Extremely Detailed Documentation

Whether you’re a veteran web developer or my 50-year-old mother, I’ve explained in great detail how to get Flatimation SVG working and implemented on your website within minutes. Yes, I literally tested my not so tech savvy mother – her record is 7 minutes.

Keeping It Simple, Silly

Thanks to its minimalistic flatness and customization, Flatimation SVG fits in with all themes, websites, and brands. It doesn’t matter if the website is for a fortune 500, a punk rock group, or a cat blog – Flatimation SVG fits in!

Meet The Flatimation SVG Family

Flatimation SVG is made up of 63 social media and 18 general use icons. Here is what they look like in their 3 background variations:

Flatimation SVG Features

• 81 Beautiful SVG Icons
• 100% Scalable & Compatible
• 10,206 Easy Customizable Options
• Detailed Documentation
• Designed to Match ALL Websites
• Retina Ready & High Resolution
• Direct Support From Author