Animated Icons & Their Uses
Read on below to learn about animated icons, best practices and how to animate yours. Icon GIFs and video formats can easily be embedded into presentations, websites or apps.
(browse even more examples at the bottom of this page)
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 can loop seamlessly, such as a common GIF format. Ready for any platform.
About Animated Icons
Tips & Info
Before we get into examples and best formats for the web, let’s take a brief look at some popular questions when it comes to animated icons.
Why Use Animated Icons?
Animated icons have been around for a long time, and are often used in marketing to catch the eye of potential customers.
An animated icon is a clean and minimal design (or logo) which can be set to a variety of play settings. Typically embedded within a website or app, animated icons can autoplay or play upon a user interaction (such as a click or hover effect).
The animation can be anything from a simple bouncing ball to words that change as they scroll across the screen.
Some of the best animated icons match your brand’s style or website colors to enhance the brand.
Website Icons Animated Examples
Some of the best animated icon examples will include seamless looping so there is not apparent ‘end point.’ If any kind of animated icons or GIFs are not created to loop seamlessly, there will be a very abrupt skip in the animation.
Here are some examples of animated icons with transparent backgrounds. These two examples are in a web format called ‘JSON Animations.’
Transparent Animated Icons
If you are looking for animated icons with a truly transparent background, there are a few formats that I’d recommend. The top two recommendations are Lottie (or JSON) format and an HD video with what’s called ‘alpha matte background.’ This is just a technical term for a video with a with transparent background.
Recommendation: If you don’t know how to install or work with either Lottie or .mov transparent videos (great for animated icon overlays), I recommend matching the GIF background color to whichever section of your website, social media platform or presentation background that the GIF will be placed in.
(more on animated GIF formats below)
Where To Use:
Common Uses
Some of the common formats for animated icons are Video, GIF, and JSON (for the web).
Loading Icon Animations
Loading icons are a great way to keep your users informed about the status of your website. They can also be used to entertain users while they’re waiting for the page to load.
There are lots of different loading icons available online, but you can also create your own using an animated SVG file.
There are a few things to keep in mind when creating, and using, loading icons:
Some loading icons can be quite flashy and use a lot of color and motion. While this can be eye-catching, it can also be distracting or confusing for your users. Try to stick to simple animations that are easy to follow.
Icon GIF Format
One of the most 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 and if page load time is something that you want to be wary about, I recommend looking into a ‘JSON or Lottie’ animation format. If you have a powerful hosting provider for your website however, this might not be an issue for you. All icons start with the save design process in scalable vector format (SVG) and it’s the animation process and final output that will determine format variables.
GIFs are also very popular when embedding into an email signature or sharing through social platforms.
TIP: Animated Icon GIFs
There are a few things to keep in mind when embedding GIF icons on your website:
1) Make sure the file size is small enough that it won’t slow down your page loading times.
2) Use simple, easy-to-follow animations that are easy for users to understand.
3) Stick to a limited number of colors and avoid using too much motion.
Lottie (JSON) Icon Format
Lottie is a new animation format that was created by Airbnb (yes that Airbnb). It uses vector graphics to create smooth, high-quality animations that can be used on any device. The major benefit of this animation format is that they support full-background transparency (unlike GIF) and their load times are incredibly fast.
This makes lottie icons perfect for use on websites and mobile apps. They can be resized without becoming pixelated, and they look great on any screen size. Below you will find a bell notification icon, if you click on it it will begin to play. Another major benefit of Lottie format is the user-interactivity on websites and apps.
Read further about Lottie animations below or continue below with designs and animation examples.
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.“
(click to play)
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 and a page builder software called Elementor.
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.
Email Icon Animation
Because GIF animations contain everything they need to animate within one file, they make it very easy to drag and drop into an email signature. This is where an animated icon or animated name signature could go a long way.
Custom Designs:
Browse & Shop Below
Want to get some ideas or drag-and-drop moving icons for your presentation or website? Browse some pre-made options below and customize to your brand colors, dimensions and more.
Customize and Buy Animation Icons
Browse and customize these animated icons. Customize your colors, dimensions and format.
These animations can be used to overlay in video projects, standalone GIFs on websites and many other places.
Design Considerations
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 Icon Animations
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 via programming language/code.
Animate Your
Icon Ideas
If you have your own custom design and want to have it animated, feel free to learn more about the variables that go into animation. Get in touch using the form below and I’d be glad to quote you out a price to animate your icon.
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.