Animated icons: when they help, when they hurt, and how to use them

On this page 10 sections

Animated icons help when the motion tells people something: that a tap worked, that something changed, that the app is busy loading, or that one new thing deserves a look. They hurt when they loop forever, move just to look busy, or ignore people who have asked their device for less motion. Used once, briefly and with meaning, a moving icon makes an interface clearer.

Below: the kinds of animated icons, good and bad uses, the accessibility rules (checked with the W3C in October 2026), speed, and slides and email.

loader bell-ring heart check-circle refresh download

Six icons, each with its own motion: the loader steps round, the bell swings, the heart beats, the tick pulses softly, refresh turns once and rests, the arrow nudges down into its tray.

What is an animated icon?

An animated icon is a small picture that moves: it spins, bounces, beats, draws itself or turns into another icon. The drawing is the same as a normal icon. What changes is the file format that carries the motion. There are four you will meet:

CSS or animated SVG. An SVG is a picture made of shapes, so it stays sharp at any size. The motion is a few lines of instructions (CSS) that the browser plays. Tiny and ideal for websites.
Lottie. An animation saved as a JSON data file, often made in Adobe After Effects with a plugin called Bodymovin. A small player library runs it on the web, iOS, Android and more.
GIF. The old favourite: still frames played in a loop. Bigger and less sharp than SVG, but it plays almost everywhere, including slides, chat and most email.
Video (MP4 or WebM). Smooth and well supported in slide apps, but it usually sits in a coloured box.

Which animated icon format works where (checked October 2026)
Format	Best for	Websites	Slides	Email
Animated SVG / CSS	Websites, Notion, web apps		Shows still	Patchy
Lottie	Mobile and web apps	With a player
GIF	Slides, chat, email	Heavier		Mostly
MP4 / WebM video	Keynote, PowerPoint, social posts	In a box

If you are not sure which file you need, our SVG vs PNG guide explains the still versions, and the how to animate an icon guide walks through the moving ones.

When do animated icons actually help?

Good motion answers a question the person already has. Nielsen Norman Group, a respected usability research firm, points out that animation can show how one element relates to another and give feedback that an action worked. Four uses earn their place:

Feedback. You tap like and the heart gives a little beat. The motion says “got it” without a pop-up.
A change of state. Play turns into pause, the menu becomes a close cross. The movement shows the two states are connected.
Loading and progress. A spinner or a filling battery tells people the app has not frozen. This is the one place where a loop makes sense, and only while something is really happening.
Pointing at one thing, once. The bell rings when a new message arrives, then rests. One short ring is a polite tap on the shoulder.

Natural “turn into” pairs: play and pause, menu and close, eye and eye-off, sun and moon, and a heart that fills up when liked. Tap one to switch it, tap again to switch back.

Timing matters as much as the motion. Nielsen Norman Group suggests most interface animations should last roughly 100 to 500 milliseconds, around 100 ms for simple feedback like a toggle, and warns that at 500 ms animations start to feel like a drag. Feedback should also start straight away, within about a tenth of a second of the tap.

When do animated icons hurt?

Our eyes are wired to notice movement, especially at the edge of our view. That is why motion grabs attention so well, and why it is easy to overdo. Animated icons get in the way when:

They loop forever for no reason. A gear that spins on a settings page that is not loading anything just says “something is happening” when nothing is.
Several move at once. Three bouncing feature icons compete with each other and with your headline. Keep continuous loops to one or two per screen at most.
They slow people down. Nielsen Norman Group notes that animations people see again and again become roadblocks.
They flash. WCAG 2.3.1 (Level A) says nothing should flash more than three times in any one second, unless it stays below safe thresholds. Flashing can trigger seizures.
They ignore reduce motion. For some people, movement on screen causes real dizziness and nausea. More on that next.

Animate one icon to confirm an action or show a change, keep it short, and let it come to rest.

Don’t

Set every feature icon on a page bouncing in a loop to make it feel “alive”. It reads as noise and pulls eyes away from your words.

Long exposure of yellow light trails — Motion leaves a trail in our attention, just like light in a long exposure. Spend it on the moments that matter.Photo: Maxime VALCARCE on Unsplash

How do you make animated icons accessible?

Most phones and computers have a setting to cut down on motion: “Reduce motion” on iPhone, iPad and Mac, “Animation effects” on Windows 11, and “Remove animations” on Android. When someone turns it on, websites can detect it with a CSS media query called prefers-reduced-motion, and should calm things down or stop them.

Three success criteria in the Web Content Accessibility Guidelines (WCAG 2.2) cover moving icons:

The WCAG 2.2 success criteria that apply to animated icons (checked October 2026)
WCAG rule	Level	What it means for icons
2.2.2 Pause, Stop, Hide	A	Anything that moves on its own, lasts more than five seconds and sits alongside other content needs a way to pause, stop or hide it. A loading spinner that is the only thing on screen is an accepted exception.
2.3.1 Three Flashes or Below Threshold	A	Nothing should flash more than three times per second (unless the flash is below safe thresholds).
2.3.3 Animation from Interactions	AAA	Motion triggered by an interaction, like a hover or a tap, can be turned off, unless the motion is essential.

The W3C explains why this matters: for people with vestibular (inner ear) disorders, motion on screen can trigger nausea, migraines and dizziness. In practice, the simplest fix is to switch animations off when reduce motion is on. If you or your developer write CSS, it is one short rule:

@media (prefers-reduced-motion: reduce) {
  .icon-anim { animation: none; transition: none; }
}

Also keep the label on the button (a moving icon is still decorative), and never let motion be the only signal: an error should say what went wrong in words too. Our friendly guide to accessible icons covers labels in more detail.

How do you keep animated icons fast?

A browser can move some things much more cheaply than others. Google’s web.dev guide recommends animating only transform (moving, turning and scaling) and opacity (fading), because the browser can do those without re-laying out the page. Animating size or position properties like width, top or left makes the browser redo work on every frame, which leads to stutter.

1
Animate transform and opacity only
Spin with rotate, bounce with translate, pulse with scale, fade with opacity.
2
Prefer SVG and CSS over GIF on websites
A few lines of CSS are far lighter than a GIF made of many frames.
3
Limit loops
One or two continuous animations per screen. Everything else plays on hover, on tap, or once.
4
Pause what nobody can see
Loops running off screen waste battery. Start them when they scroll into view.

Can you use animated icons in slides and email?

Yes, but the file format changes. Slide apps and email apps do not run website code, so an animated SVG shows up as a still picture there. Use these instead:

PowerPoint: insert a GIF like any picture. Microsoft says it plays in Slide Show in PowerPoint for Microsoft 365 and PowerPoint 2016 and later, on Windows and Mac. PowerPoint for the web shows the GIF but does not play it. MP4 video works too. See our PowerPoint guide.
Google Slides: GIFs are supported (Insert, then Image). SVG is not on Google’s list of formats, so use a GIF or PNG. See the Google Slides guide.
Keynote: an MP4 video is the safest choice, and you can pick your slide’s colour as its background. See the Keynote guide.
Email: GIFs play in most email apps. Litmus notes that desktop Outlook 2007 to 2019 only shows the first frame, so make that frame complete on its own. Skip SVG in email: Can I email (tested September 2026) shows Gmail on the web turns SVGs into still PNGs and desktop Outlook does not show them. Our email signature guide has the details.

trophy rocket sparkles star

Creative styles like Gloss make great slide moments at 48 px and up. Hover or tap: the trophy does a little celebration, the rocket takes off and the sparkles twinkle, just as they do in the GIF you download.

How does motion work in with icons?

Every one of our 500 icons comes with its own suggested motion, chosen to match what it means: the bell rings, the heart beats, the loader steps round, the rocket rises. There are 32 motion presets in all, from ring, beat and spin to float, twinkle, bounce, nudge and ta-da, and any icon can use any of them. Motion works in every one of the 20 styles.

500: icons with their own motion
32: motion presets
12: “turn into” effects
50: Live icons

Choose when it moves: Always (a gentle loop), On hover, or Once. For a file you upload as an image, pick Always or Once, because an image cannot see the mouse.
Turn one icon into another: play into pause, an outline heart into a solid one, sun into moon, with 12 switch effects like flip, fade and morph.
Icons move in parts: a sun’s rays turn while its backdrop only breathes, and a shadow stays on the ground. Too busy? Set Decorations to Keep still.
Download it moving: animated SVG for websites and Notion, GIF for slides and email, MP4 or WebM for video, Lottie for apps, plus animated PNG, animated WebP and PNG frames.
It respects reduce motion: on websites, when someone has turned on reduce motion, the icons politely stay still.

Line

Solid

Duo

Gloss

Engrave

Blueprint

Sketch

Glass

Kawaii

Sticker

Pixel

Retro

Bauhaus

Luxe

Skeuo

Anime

Coquette

Gothic

Pastel

Plush

The bell icon in the styles this page can show. Hover one: it swings from its hook the same way in each style, because motion moves the drawing, not one style.

For developers, motion ships as a separate, optional package, @withicons/motion: pure CSS classes for loop, hover and once, plus a small script for scroll-into-view and “turn into” switches. Install it with npm i @withicons/motion, or copy the code and download files from any icon page. The developer page shows every preset.

What are Live icons?

Live icons are a different kind of “alive”: instead of moving, they show content you set. There are 50 of them: a calendar with your date, a clock with your time, a bell with your notification count, a battery at your level, a tag with your short text, the weather with your temperature. You type the value, pick one of the 20 styles and download it for slides, docs or your website.

calendar clock bell battery shopping-cart tag thermometer wifi

Everyday icons whose Live versions show your numbers: date, time, count, charge, cart items, a price, a temperature, signal strength.

Try them on the Live icons page. Text stays at four characters or fewer so it is readable when small.

A quick checklist before you add motion

1
Ask what the motion says
Feedback, a change of state, loading or one alert. If you cannot name it, leave the icon still.
2
Keep it short
About 100 to 500 ms for interface motion. Let it come to rest.
3
Limit loops
One or two per screen, and only while something is really happening.
4
Respect reduce motion
Turn animation off under prefers-reduced-motion, and give long animations a pause button.
5
Pick the right file
Animated SVG for websites, GIF for slides and email, MP4 for Keynote and video, Lottie for apps.

Motion is seasoning, not the meal. Browse all the icons, pick a style from duo to glass, and see each one move on its page.

Frequently asked questions

Are animated icons bad for accessibility?

Not if you use them with care. Keep motion short and meaningful, let anything that moves on its own for more than five seconds be paused (WCAG 2.2.2), avoid flashing, and turn motion off when someone has switched on reduce motion in their device settings (the prefers-reduced-motion media query).

Do animated icons slow down a website?

Small CSS or SVG animations barely affect speed if they only change transform and opacity, which browsers can animate smoothly. Heavy GIFs, many looping icons, or animations that change size and position (width, top, left) are what make pages feel slow.

Can I use an animated icon in PowerPoint or Google Slides?

Yes, as a GIF. Microsoft says PowerPoint for Microsoft 365 and PowerPoint 2016 and later play animated GIFs in Slide Show (PowerPoint for the web does not). Google Slides accepts GIFs too. An animated SVG shows up as a still picture in slide apps, and MP4 video is a good choice for Keynote and PowerPoint.

Do animated GIFs work in email?

In most email apps, yes. Litmus notes that desktop Outlook 2007 to 2019 shows only the first frame, so make sure the first frame makes sense on its own. Avoid SVG in email: support is patchy.

What is the difference between Lottie and animated SVG?

An animated SVG is a single image file with its motion built in, and a browser plays it by itself. A Lottie is a JSON animation file (often made in After Effects) that needs a small player library to run on the web, iOS, Android and other platforms.

How long should an icon animation last?

Short. Nielsen Norman Group suggests most interface animations should last roughly 100 to 500 milliseconds, with simple feedback like a toggle around 100 ms. Calm, slow loops are fine for a single loading or “live” indicator.

Are with icons animated icons free?

Yes. All 500 with icons icons, their motion and their downloads (animated SVG, GIF, MP4, Lottie and more) are free under the MIT licence, for personal and commercial use, with no attribution required.

Sources and notes

Facts about other icon sets were checked against their official sites in October 2026. Libraries change, so check the links above for the latest numbers.

Published October 3, 2026