Animated SVG Icons

Not every icon needs to sit still. This collection is for the moments a static icon isn't enough — a spinner while something loads, a sun that actually shines, a line that draws itself in in response to a click. It brings together loading indicators, animated weather icons, and motion-friendly line icons that already have their animation built in, so there's no keyframe CSS to write from scratch. Preview each one in motion before picking it, since an icon that looks right standing still doesn't always move the way you'd expect.

3 icon packs·Free & open source

Icon Packs

Common Use Cases

1
Loading states for buttons, forms, and page transitions where users need visual feedback that something is processing
2
Weather widgets and dashboards that show live conditions with icons that animate rain, wind, or sunshine
3
Skeleton screens and data-fetching states in dashboards or admin panels
4
Micro-interactions on hover or click, like a checkmark that draws itself in after a successful action
5
Onboarding and empty states that use subtle motion to feel more alive than a flat illustration
6
Progress indicators for multi-step forms, uploads, or background tasks
7
Landing pages and product demos that use a bit of motion to draw attention to a specific feature

Frequently Asked Questions

It depends on the library. Some icons use SVG's native animation (SMIL) baked directly into the file, while others rely on CSS animations applied to the SVG's paths or strokes. Check the icon or pack page to see which approach a given icon uses, since it affects how much control you have over timing and easing.

For CSS-based icons, yes — since the animation lives in CSS classes, you can override duration, easing, or trigger conditions in your own stylesheet. For icons using SMIL animation embedded in the SVG itself, this is more limited and usually requires editing the SVG markup directly.

This depends on how each icon is built rather than something this collection controls universally. If you're building for accessibility, it's worth wrapping animated icons in your own CSS that respects 'prefers-reduced-motion' and falls back to a static state for users who've disabled motion.

Generally yes, though usually not by much for a handful of icons. SMIL and CSS animations both run on the browser's rendering thread, so using dozens of animated icons on one screen at once (like a full page of spinners) can add up more than using a few deliberately.

They're built to represent specific conditions — sun, rain, snow, wind, and so on — so they're meant to be mapped to actual weather data rather than used as decorative icons. Check the pack page for the full list of conditions covered.

The spinners are largely ready to use as-is — drop in the SVG and it animates on its own without needing extra JavaScript or a loading library, since the motion is already part of the file.

Each icon keeps the original license from its source library (SVG Spinners, Material Line Icons, or Meteocons) attached to it. Check the license shown on the individual icon or pack page before using it commercially, since terms can differ between the three.

Animated SVG Icons

Icon Packs

Material Line Icons

Meteocons

SVG Spinners

Common Use Cases

Frequently Asked Questions

More Collections

Brands & Logos

Weather

Maps & Location

Food & Drink

Transport & Vehicle

Emoji

E-Commerce

Medical & Health

Animated SVG Icons

Icon Packs

Material Line Icons

Meteocons

SVG Spinners

Common Use Cases

Frequently Asked Questions

How are these icons animated — is it CSS, SMIL, or something else?

Can I control the animation speed, direction, or trigger it manually (e.g. only on hover)?

Will these icons still work if animations are disabled, like with 'prefers-reduced-motion'?

Do animated icons cost more in terms of performance than static ones?

Are the weather icons from Meteocons tied to specific weather conditions, or are they generic?

Can I use these as loading spinners without any extra setup?

Are these icons free to use in commercial projects?

More Collections

Brands & Logos

Weather

Maps & Location

Food & Drink

Transport & Vehicle

Emoji

E-Commerce

Medical & Health