How to animate an SVG icon

An animated icon is one of the cheapest ways to make an interface feel alive: a menu that draws itself, a checkmark that lands, a logo that assembles on a splash screen. This guide takes a plain SVG and turns it into an animation you can hand to a developer, all in a browser tab.

1. Prepare the SVG

Most problems happen before the animation starts. Three things to check in Illustrator, Figma or Inkscape before exporting:

• Convert text to outlines. A <text> element has no path data to animate. Whatever tool you use, type stays static unless you outline it.
• Expand strokes only if you must. An expanded stroke becomes a filled shape, and a filled shape has no stroke left to reveal. If the icon is line art, keep the lines as strokes.
• Keep the shapes separate. Merging everything into one compound path means one timeline for the whole icon. Separate shapes give you a separate delay for each.

2. Import and split into layers

Drop the file onto the canvas. Each shape becomes a layer with its own row on the timeline. If your file arrived as one compound path, press Split: sub-paths become independent layers, each with its own delay and colour.

Rename layers by double-clicking the name — outer circle, arrow, dot — and give each a label colour. On an icon with twenty shapes this is the difference between working and guessing.

3. Choose how it draws

The Mode menu decides how the stroke appears. The three classics:

• Draw on — the line grows from its start point to its end. The default handwriting effect.
• Draw off — the reverse, used for exits and dismissals.
• Yoyo — draws in, then retreats the way it came. Good for looping badges.

And six less obvious ones. From the centre and From both ends suit symmetrical icons, where growing from one end looks lopsided. Comet sends a short arc racing along the path and reads as speed. Typewriter advances in steps instead of gliding, which suits technical or retro work. Segments and Stardust break the line into pieces that swell until they merge — stardust uses enough dots that the shape looks like it condenses out of dust.

4. Time it: duration, stagger, easing

Three controls do most of the work.

Duration is how long one shape takes to draw. For interface icons, 0.4 to 0.8 seconds feels responsive; for a logo reveal, 2 to 3 seconds gives it room to breathe.

Stagger delay offsets each layer from the previous one. Without it every shape starts together and the result is mush. With 80 to 150 ms the icon assembles piece by piece.

The easing curve decides the character. Linear looks mechanical. power2.out starts fast and settles, which reads as confident. back.out overshoots slightly and feels playful. Pick the curve before you fine-tune the timing: it changes the perceived speed more than the duration does.

5. Keyframes, when you need more control

Everything above animates the drawing itself. For movement, scale, rotation, thickness or colour, use keyframes: put the playhead where you want a value, press the ◆ next to the field, move the slider, move the playhead and repeat.

The part people miss: the span between two keyframes has its own curve. Click the segment between two diamonds on the timeline and pick a curve for just that stretch. An object can arrive with a soft ease and leave abruptly — one animation, two different characters.

6. Export

Four formats, one animation:

• Lottie (.json) for apps and websites. Small, sharp at any size, and a developer can recolour it or control playback in code.
• Animated SVG for markup with no library at all: the file animates itself with CSS.
• GIF for email, chat and anywhere video is unwelcome. Heavier and limited to 256 colours.
• MP4 for social media, where video is expected and GIFs look dated.

If you are unsure, there is a guide comparing the four.

Common mistakes

• Everything starting at once. Turn on stagger. It is the single change that most improves a multi-shape icon.
• Too slow. An icon that takes three seconds is charming once and irritating every time after. Interface animations belong under a second.
• A filled logo that turns into an outline. Expected: the effect reveals a stroke, so shapes made only of fill are drawn as their contour. Either accept the outline look or go back to the source and keep the line work as strokes.
• Exporting at icon size. Export size only affects raster output (GIF, MP4). Lottie and SVG are vector and scale freely, but a GIF exported at 64 px will look soft on a retina screen.