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

Flatimation SVG by Garett® - 7 Animation Effects Flatimation SVG by Garett® - Spin Demo Flatimation SVG by Garett® - Jump Demo Flatimation SVG by Garett® - Rock Demo Flatimation SVG by Garett® - Pulse Demo Flatimation SVG by Garett® - Bounce Demo Flatimation SVG by Garett® - Zoom Demo .GIF above is heavily optimized. Animations run even smoother on Live Preview.

3 Background Variations

Flatimation SVG by Garett® - 3 Background Variations

6 Precoded Sizes

Flatimation SVG by Garett® - 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!

Flatimation SVG by Garett® - All Icons Flatimation SVG by Garett® - SVG vs PNG Demo

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”!

Flatimation SVG by Garett® - 3 Word Combinations .GIF above is heavily optimized. Animations run even smoother on Live Preview.

Plays Well With Others

Flatimation SVG by Garett® - SVG vs PNG Demo

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 by Garett® - All Icons Flatimation SVG by Garett® - 81 Icons in 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

Flatimation SVG - An Animated SVG Icon Set