Static icons are fine. Animated icons are better — they communicate state changes, guide attention, and make interfaces feel alive. Here's how to do it right.

Why Animated Icons?

Animation isn't decoration. When used correctly, it serves functional purposes:

• State feedback. A checkbox that bounces when checked, a download icon that fills up, a delete icon that shakes on hover — each communicates state visually before the user reads any text.
• Attention guidance. A pulsing notification dot draws the eye more reliably than a static badge.
• Onboarding. Animated empty states or loading indicators reduce perceived wait time.

The rule: animate when the animation communicates something. Skip it when it's purely cosmetic.

Format Options

Lottie (Best for Most Use Cases)

Lottie JSON is vector-based, tiny (10-80KB for icon animations), and fully scriptable. You can pause, play, seek to any frame, and respond to user events. Works on web, iOS, and Android.

Use Lottie when:

• The animation has multiple layers or timing
• You need interactive control (hover, click to trigger)
• File size matters (it always does)
• You want the same animation on mobile and web

Get 500+ free Lottie icons: iconking.net/all-assets?type=lottie&price=free

CSS/SVG Animation

For simple interactions — a hamburger menu that becomes an X, a checkmark that draws itself, an icon that spins on load — CSS animation on an inline SVG is often the lightest approach. No library required.

Use CSS animation when:

• The animation is simple (2-3 elements, single transition)
• You want zero JavaScript overhead
• The animation responds to CSS class changes (which React/Vue make easy)

GIF

Only use GIF when you have no control over the rendering environment: email, Slack, Notion, presentations.

GIF problems: huge file sizes, 256-color limit, no transparency anti-aliasing, no playback control.

If you need a GIF from a Lottie file, use the free Lottie-to-GIF converter.

Implementing Lottie Icons

Web (vanilla JS):

<script src="https://unpkg.com/@lottiefiles/dotlottie-web/dist/dotlottie-player.js"></script>
<dotlottie-player src="/icons/checkmark.json" autoplay style="width:32px;height:32px"></dotlottie-player>

React:

import { DotLottieReact } from '@lottiefiles/dotlottie-react';

function AnimatedIcon({ src, size = 32 }) {
  return (
    <DotLottieReact
      src={src}
      autoplay
      style={{ width: size, height: size }}
    />
  );
}

Trigger on interaction:

function HoverIcon({ src }) {
  const [dotLottie, setDotLottie] = useState(null);
  return (
    <span
      onMouseEnter={() => dotLottie?.play()}
      onMouseLeave={() => dotLottie?.stop()}
    >
      <DotLottieReact src={src} dotLottieRefCallback={setDotLottie} loop={false} style={{ width: 24, height: 24 }} />
    </span>
  );
}

The Tooling Workflow

Preview before integrating. Always check an animation at the actual size you'll use. Something that looks great at 200px can look choppy at 24px. Use iconking.net/preview — drag and drop any .json or .lottie file, check it in the browser.

Edit colors and speed. Brand colors matter. The IconKing editor lets you swap any color in a Lottie animation and adjust speed without touching JSON manually.

Export for other contexts. Need the same icon as a GIF for a newsletter? As MP4 for a tutorial video? Use the converters at iconking.net:

• Lottie → GIF
• Lottie → MP4
• Lottie → WebM
• Lottie → SVG
• Lottie → WebP
• Lottie → APNG

Common Mistakes

Overusing animation. Every animated element competes for attention. Pick the 2-3 interactions that matter most, animate those, leave the rest static.

Ignoring reduced motion. Always respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  dotlottie-player { display: none; }
  .static-fallback { display: block; }
}

Not testing on mobile. Lottie animations that look great on desktop can feel heavy on low-end mobile. Test at realistic network conditions.

The free Lottie icon library at iconking.net covers the most common UI animation patterns — checkmarks, loaders, toggles, arrows, social icons — with both free download and browser-based editing tools.