Free SVG Loading Spinners: Animated Spinner & Loader Icons

Loading spinners are one of the few icon categories that need to animate out of the box, not after you wire up JavaScript. This collection covers two open-source, MIT-licensed packs built specifically for this: SVG Spinners by Utkarsh Verma (46 icons: every spinner has its animation baked directly into the SVG via <animate> and <animateTransform> tags, so it moves the instant it renders, with zero CSS or JS) and Line MD / Material Line Icons by Vjacheslav Trushkin (1,218 icons: a broader animated icon set covering not just spinners but transitions like menu-to-close, bell-to-ring, and check-to-loading states).

2 icon packs · 1,264 total icons · Free & open source

Icon Packs

SVG Spinners

46 icons MIT

Material Line Icons

1,218 icons MIT

Common Use Cases

1 Button loading states and form submission feedback

2 Full-page and skeleton loading screens

3 Infinite-scroll and pagination loaders

4 Async data-fetching indicators in dashboards

5 Micro-interaction state transitions (menu ↔ close, bell ↔ mute)

6 CLI-style progress indicators in web-based dev tools

Frequently Asked Questions

Do these spinners animate without any JavaScript or CSS?

Yes. SVG Spinners bakes the animation directly into the SVG file using native SMIL / elements. Drop the raw SVG markup or an

tag into your page and it spins immediately, no CSS keyframes or JS required. Line MD icons animate the same way, including multi-state transitions like a menu icon morphing into a close icon.

What is the difference between SVG Spinners and Line MD?

SVG Spinners (46 icons) is purpose-built for loading states only: bars, dots, rings, pulses, and rotating arcs in various speeds and styles. Line MD (1,218 icons) is a much larger general-purpose icon set where animation is a design feature throughout, covering not just spinners but state-change icons like a heart filling in, a bell ringing, or a checkmark drawing itself.

Will SMIL animation work in all browsers?

SMIL (the tag standard these SVGs use) is supported in all major evergreen browsers: Chrome, Firefox, Safari, and Edge. It was deprecated in Chrome for a period but reinstated after developer pushback; as of current browser versions it works reliably. For very old browser support requirements, wrap the spinner in a CSS animation on a static SVG as a fallback.

Can I change the color or speed of a spinner?

Colors: most SVG Spinners icons use currentColor or stroke, so wrapping them in an element with a CSS color set will recolor them, or use our SVG Color Editor tool. Speed: since the animation is baked into the SVG's dur attribute, changing speed means editing that attribute directly in the SVG source (there's no external CSS variable to override).

Are animated SVG spinners better than a GIF or CSS-only spinner?

Generally yes. SVG spinners scale to any size without quality loss (unlike a raster GIF), have a much smaller file size, support currentColor recoloring, and (unlike many hand-rolled CSS spinners) ship pre-tuned easing and timing so they look professional without design tweaking.

Do I need to respect prefers-reduced-motion for spinners?

Loading spinners communicate function (something is happening), not decoration, so most accessibility guidance treats them as exempt from prefers-reduced-motion the way a decorative parallax effect isn't. If you want to be extra considerate, swap to a slower-rotating or static "loading" glyph with a text label when reduced motion is requested.

Are these spinner icons free for commercial use?

Yes, both packs are MIT licensed, free for commercial use in any product, including SaaS dashboards and client work, with the license notice preserved in your project (no visible on-page credit required).