Gears Icon Animation

These rotating gears cogs are perfect for websites and pairing with written content. The continual spinning of the gears help to convey a 'automation' concept.

Looping Animated Gears GIF

A Seamlessly-looping gear rig on a white background in GIF format. Browse other gear animation examples below.

All colors can be changed and can be exported as a GIF, JSON (web) or video format. With some further tweaking and design work, the gears could be different shapes and sizes and a whole chain of gears added. The smaller gears typically rotate faster than the larger sizes. 

The GIF’s total time is 10 seconds in duration (allowing for one full rotating before repeating itself. 

GIF Creation Process:

This animated GIF was laid out first in Adobe Illustrator and exported into Adobe After Effects for animating. This gear rig uses nothing more than regular shape layers, circles, rounded rectangles (that make up the cog components of the gear’s exterior) and a semi-circle for the white interior streaks. 

Gear Animation Purchase Options:

Any of the icons that have a ‘customize this icon’ button next to them can be customized to your needs. Change the colors, formats, dimensions and more. 

If you don’t need a three gear right animation perhaps a single cog animation is  better adaptable for your project or website.

Gear Button Icon

Next up is an animated gear icon (created with vector shapes) embedded inside a button. This button could be exported to GIF, JSON, or video format. Not all formats support transparent background so it’s important to understand where you will use the animation. 

GIFs are the easiest format to embed in the web or presentations (PPT, Keynote, Prezi, etc.) but the background color will need to match the final background area. GIFs don’t do a great job of supporting transparent backgrounds. 

Vector Flat Gear Icon

These three formats shown are all in “JSON/Lottie.” These are all essentially SVG formats, otherwise known as ‘Scaleable Vector Graphics.’ This is one of the more popular animated icon formats for the web. 

Typically these are created in Adobe Illustrator (or another vector-based software) and then exported to an animating software for movement. SVGs do not move on their own, this is a common misconception. 

The benefits of using this type of animation is faster loading time and fully-transparent background.

Transparent Gear Animation

If you’re looking for a transparent Gear animation there are a variety of formats ready for the web, video overlays and more. 

A popular format that supports full background transparency is called “Lottie” animation. Click on the three orange cogs here and watch them start to spin. 

The great thing about Lottie format for the web is that the style supports user-interactions and looping capabilities.

(click to play)

Animate Your Icons

Get in touch using the form below to ask any questions about icon animations or start your own animated icon project. Questions welcome!

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.