Animated Icons & Their Uses

Read on below to learn about how web icons can be created or to get started with a mockup of your own. Best practices, formats required, and common misconceptions are described. 

SVG Web Icons

Scaleable Vector Graphics (SVGs) are the first step for creating animated web icons.

Logo Animations

Logos typically contain an icon element which can be supplemental for logo animations.

Final Formats

Common (final) formats for animated icons typically include; GIF, JSON, or video format.

Looping GIFS

Animated icons such as GIF for JSON can be made to appear never-ending.

Animate Your Icons - Get a Free Mockup

Get started by submitting your own icon for a free seamless mockup. Customize your colors, dimensions, and final format for export. To start, fill out the brief form below and submit your icon. Don’t yet have an icon? No problem, get in touch using the same form and I’d be glad to chat further. 

(browse some examples of recent Icon GIFs created at the bottom of this page)

Web Icons 101:
Popular Misconceptions

One of the most frequently asked questions is final format in regards to SVG animations. SVG (otherwise known as scaleable vector graphics) is the final format of the icons created (before they are animated for the web). 

SVG Format Misconceptions

For example, if you are ever using Adobe Illustrator or Photoshop, these typically deal with scaleable vectors and the final export of these layers. The image to the left here is an image in .PNG format. This can be downloaded and saved to your computer by right clicking (go on give it a try if you wish). PNGs typically have a transparent background and are fully capable of scaling to any container size needed. 

When creating this image in Adobe Illustrator it is important to know that each layer or “group” has their own components (i.e. the bubbles are separated out from the beaker, the purple cloud floating on top is in a separate group, etc. etc.). In order to fully animate this icon, each individual layer or group needs to be separated out from the rest. 

When you create an image-based format such as .PNG, JPG, JPEG, etc. you are telling all the layers to be grouped together to produce one final image. Web Animations can (and should not) be subjected to these restrictions. 

Now, even if we were to separate all the layers out from the Adobe Illustrator out (bubbles, beakers, floating cloud, etc.), we would be left with some type of SVG file. You still need to be able to upload the files into the website at hand and then, more importantly, tell the separate SVG layers what to do! More on this to further down…

Where To Use:
Common Uses

Some of the common formats for animated icons are Video, GIF, and JSON (for the web).

For The Web - JSON Format

The most popular and versatile format of animation for the web is JSON. The example gear and funnel here is a SVG animation that is controlled by what is called JSON. 

What is JSON you may ask?

JSON is short for JavaScript Object Notation, and is a way to store information in an organized, easy-to-access manner. In a nutshell, it gives us a human-readable collection of data that we can access in a really logical manner.
(source)

For the purposes of web animation, the above definition means that you can upload SVG files all day but will need something like JSON in order to recall the data from where it’s stored on your servers (website).

I’d like to emphasize the fact that you do not need to know how to code or be any kind of expert in web-development language to be able to use this format. 

Notice:
If you were to click your mouse and hold down on one of the picture images above, try the beaker or Adobe Illustrator screenshot above, and then drag the image around the page you would see that it lifts off the page and follows your mouse around (must hold the mouse pointer down when dragging). Now, if you were to try that same quick exercise on the funnel and gear icon animation above, you will find that you are unable to do so. 

This is because the JSON animation is embedded directly into the website. This website uses WordPress which if you haven’t heard of before you can find more here

GIF Format

Another popular animation format that you may have heard about is GIF. You can easily insert animated GIFs into your website, PPT Presentation, or really anywhere else you need to. 

The major setback with GIFs is that they do not support transparent backgrounds. 

I’ve purposely reused the exact same animation here (gears and funnel) to demonstrate how JSON animations can be placed on top of any color background. If you were using a GIF animation for example, you would need to choose one specific background color and while this may be just fine for a PPT presentation or offline document, it does not do well on the web. 

Here’s why…
GIFs do a terrible job supporting transparent backgrounds, they just can’t do it well without losing quality. If you do try and remove the background whether using photoshop or another GIF exporting software, you will likely come up with something that has a grainy background and colors will not always appear where they should be. 

GIFs do however work well for social media where an endless loop cycle can make for engaging visuals. 

Icon Animation Load Time: GIFs vs. JSON

Another benefit of JSON-style animation (at least for the web) is page speed. If you’re considering future or current SEO-purposes you probably want the faster of the two options. GIF can provide a faster load time. 

Video
Format 80%
GIF
Format 60%
JSON (From SVG)
Format 40%

Icon Animation
Requirements To Build

See below some FAQs and common considerations 

Duration

If you are creating an animation for the web, either GIF or JSON animation, the total duration of the animation can be no more than 15 seconds, especially if using GIF. This is because there is a length requirement before a GIF will automatically repeat itself. Within this time you’ll want to make sure that the total animation wraps up and resets itself to the first frame. 

Logo Morph

Icons are not uncommon to accompany a logo with text. These logo supplements are great for creating a branded GIF animation. This can then be repurposed for social media and corporate presentation intro/outros. 

Seamless Looping

The trick with most web animations is to make them subtle. We don’t want them zooming in and around the page, this would only distract the page viewer. Instead, we want small movements such as a bounce, spin, or layers that repeat – the trick is to make them appear as if they are never skipping and difficult to tell where one cycle ends and the other begins. 

Video Bumpers

Video bumpers are also known as video intros/outros. While video animations can certainly go on longer than the 15 second max of a web animation, these typically are no longer than 10 seconds to preface the beginning of branded (internal) content. 

Dimensions

Depending on where you want the animation to appear, web, video, or presentation, the typical dimensions will be square or rectangular. This pertains to the container of the animation, typical sizes will be square or rectangular. Rectangle dimensions for video are usually 1920 x 1080 or if you are creating for Instagram, 1080 x 1080 (square) dimensions. Social Platforms will have varying sizes so be sure to consider where you’re putting the final animation. 

Have Questions? Need Icons?