Loading Spinner SVG Icons

The moment between a click and a result needs something to fill it, and that's what this collection is for — spinners, progress rings, and pulsing dots pulled from SVG Spinners, Material Line Icons, and other sources, with the animation already built into the file. No extra CSS keyframes or JavaScript library needed; drop one in and it moves on its own, from simple rotating rings to more distinctive multi-dot or bar-style loaders.

2 icon packs·Free & open source

Icon Packs

Material Line Icons

1,233 iconsMIT

SVG Spinners

46 iconsMIT

Common Use Cases

1
Button loading states shown while a form submits or an action processes
2
Full-page loaders shown while an app initializes or a route transitions
3
Skeleton and placeholder states for content that's still being fetched
4
File upload and download progress indicators
5
Chat and messaging apps showing a 'typing...' or 'sending...' indicator
6
Data tables and dashboards showing a loading state while a query runs
7
Infinite scroll and pagination loaders at the bottom of a content feed
8
Payment and checkout flows showing a processing state during transactions

Frequently Asked Questions

The libraries do overlap, since SVG Spinners and Material Line Icons also appear in the Animated collection. This collection narrows that down specifically to loading and spinner icons, leaving out other animated content like weather icons. If you need animated icons beyond loading states, the Animated collection covers that broader range.

They're designed to work out of the box — the animation is built into the SVG file itself (via SMIL or embedded CSS), so dropping the file into your markup is enough to see it spin, pulse, or rotate without writing any animation code yourself.

Color is usually straightforward — most spinners use 'currentColor' or a simple fill/stroke you can override with CSS. Speed depends on how the animation is implemented: CSS-based spinners let you override the animation-duration property, while SMIL-based ones require editing the SVG's animation values directly.

By default, these spinners will still animate regardless of that setting, since the motion is core to what a spinner communicates. If you want to respect reduced-motion preferences, consider swapping to a simpler static indicator (like a progress bar or a pulsing opacity) for users with that preference enabled, rather than removing the loading feedback entirely.

Each icon keeps the license from its source library attached to it, and terms can differ between SVG Spinners, Material Line Icons, and other included libraries. Check the license shown on the individual icon or pack page before using it commercially.

Using a handful of spinners at once (like in a data table with several loading cells) is generally fine, but dozens running simultaneously can add up in terms of rendering cost, since each one is animating independently. For long lists, consider showing a single loading state instead of one spinner per row where possible.

This collection focuses on spinner-style loaders (rings, dots, bars that loop continuously) rather than determinate progress indicators that show a specific percentage. For a percentage-based progress bar, you'd likely need to build that separately using your own component, since it needs to reflect real progress data rather than looping indefinitely.

Loading Spinner SVG Icons

Icon Packs

Material Line Icons

SVG Spinners

Common Use Cases

Frequently Asked Questions

More Collections

Brands & Logos

Weather

Maps & Location

Food & Drink

Transport & Vehicle

Emoji

E-Commerce

Medical & Health

Loading Spinner SVG Icons

Icon Packs

Material Line Icons

SVG Spinners

Common Use Cases

Frequently Asked Questions

How is this different from the Animated collection — some libraries overlap?

Do these spinners work out of the box, or do I need to add my own CSS animation?

Can I control the spin speed or change the color to match my brand?

Will a spinner still show something for users who have 'prefers-reduced-motion' enabled?

Are these icons free to use in commercial products?

Do a lot of spinners on one page hurt performance?

What if I need a very specific loader style, like a progress bar instead of a spinning ring?

More Collections

Brands & Logos

Weather

Maps & Location

Food & Drink

Transport & Vehicle

Emoji

E-Commerce

Medical & Health