How to animate SVG icons

SVG icons can spin, draw themselves, morph and pulse — all without turning them into heavy GIFs or videos. You have three main tools, each with a sweet spot.

1. CSS animation

The most common approach: animate transforms, opacity or stroke-dashoffset with CSS transitions and keyframes. Great for hovers, spinners and simple line-drawing effects, and it respects prefers-reduced-motion.

@keyframes spin { to { transform: rotate(360deg) } }
.spinner { animation: spin 1s linear infinite }

2. SMIL (built-in SVG animation)

SVG has native <animate> tags. Sets like line-md and svg-spinners use SMIL so the animation lives inside the SVG file and plays even in an <img> tag — no JS needed.

3. JavaScript libraries

For complex, interactive or timeline-based motion, libraries like GSAP or Lottie give you fine control. Heavier, but powerful for storytelling animations.

Frequently asked questions