Will the animated SVG work in all browsers?

Yes. The animation is plain CSS inside the SVG, which Chrome, Edge, Firefox and Safari all play - also when the file is used in an tag or as a CSS background. Only Play on hover needs the SVG pasted inline in your HTML, because images do not receive the mouse.

SVG Icon Animator - Add Animations to SVG Icons Online

Drop an SVG icon here or browse Any SVG up to 3 MB - outline icons work great 12 CSS animations Line drawing Nothing uploaded

Live preview

Other icon

The preview speed only affects this preview - the file uses the real timing.

Animated SVG

Animation

What moves

Duration1s

Start delay0s

Stagger between parts0.12s

Easing Repeat

Direction

How to Animate an SVG Icon

Add your icon. Drop an SVG file into the box, paste SVG code, or start from a sample bell, check or loader icon.

Pick an animation. Choose from 12 presets - spin, pulse, bounce, draw, fade, shake, wiggle, heartbeat, float, swing, flip or pop in.

Choose what moves. Animate the whole icon, each part one after another, or only the parts you tick, then set timing, easing and repeats.

Export. Download the animated SVG, or copy its code or just the CSS.

Starting from a PNG logo? Turn it into a vector first with PNG to SVG.

Which Animation Fits Your Icon?

Icon	Try	Why
Loader, settings, refresh	Spin	Shows that something is working
Bell, phone, alert	Wiggle or Swing	Grabs attention without moving away
Check, signature, logo outline	Draw, repeat 1x	A satisfying hand-drawn reveal
Heart, like, live dot	Heartbeat or Pulse	Feels alive, works as a status signal
Arrow, download, scroll hint	Bounce or Float	Points the way
Error, wrong password	Shake, repeat 1x	The universal "nope"

Keep loops subtle and slow for icons that stay on screen - fast endless motion is distracting.

Why CSS-Animated SVG?

Tiny

A few hundred bytes of CSS on top of the icon.

A GIF of the same icon is often 50 times bigger.

Sharp

Vectors stay crisp at 16 px and at 512 px.

No blurry edges on retina screens.

No JavaScript

Plays in an <img> tag, needs no library.

Make it even smaller with Compress SVG.

Browse more vector tools in SVG Tools.

Frequently Asked Questions

Drop your SVG in the box (or try a sample), pick an animation such as Spin, Pulse or Draw, and adjust the timing. The preview plays live.

Press Download animated SVG - the animation is built into the file, so it plays wherever SVG images are shown.

Yes. The animation is plain CSS inside the SVG, which Chrome, Edge, Firefox and Safari all play - also when the file is used in an <img> tag or as a CSS background.

Only Play on hover needs the SVG pasted inline in your HTML, because images do not receive the mouse.

Upload the SVG and use it like any image: <img src="bell-wiggle.svg" width="48" alt="">. For hover effects or to change its colour with CSS, paste the SVG code straight into your HTML instead.

Class and keyframe names are unique per export, so several animated icons can share one page.

Yes. Choose Each part to animate every shape one after another with a stagger delay, or Pick parts and tick the shapes you want - for example only the clapper of a bell or the tick inside a circle.

Draw sets pathLength on each stroked shape and animates the stroke dash, so lines appear to be drawn by hand. It works on outline icons with a stroke, such as Lucide, Feather, Tabler or Heroicons outline.

Filled icons have no stroke to draw - add one first in the SVG Icon Editor.

Set Repeat to 1. The icon keeps its final pose afterwards. Combine it with Pop in or Draw for a nice entrance effect.

With Respect reduced motion on (the default), the file includes a prefers-reduced-motion rule: visitors who turned off animations in their system settings see the still icon. That is kinder and helps accessibility audits.

Not here - this tool makes animated SVG, which stays sharp at any size and is usually a few kilobytes. If you need a GIF for a chat app, record the preview with Screen to GIF.