Chapter 92: Icons Spinner
Spinner Icons The table below shows the Free Font Awesome 5 Spinner icons:
followed by the table with preview, class name, unicode, and — most importantly — the “Try it” button that lets you see the animation live.
1. What is the Spinner category really for?
These icons are not just decorative — they are meant to move.
You add the CSS class fa-spin (smooth continuous rotation) or fa-pulse (stepped / 8-frame rotation) to make them animate.
Typical real-world uses:
- “Loading…” overlay while fetching data
- Refresh / sync button animation
- Form submission / processing state
- Page transition / preloader
- API call waiting indicator
- “Please wait…” message in modals
- Progress / busy state in dashboards
- Seasonal fun (spinning snowflake for Christmas)
In Font Awesome 5 free there are only 6–8 really good spinner candidates (all solid fas style). Font Awesome 6 & 7 added many more (spinner-third, arrows-rotate, circle-notch variants, arrows-spin), but FA5 already has the timeless classics that millions of sites still use today.
2. The complete free Spinner icons in Font Awesome 5
Here are all the icons listed on the W3Schools page (solid fas):
| Icon name | Class name | Static appearance | Best animation class | Most common real usage (2026) |
|---|---|---|---|---|
| spinner | fas fa-spinner | ◌ notched circle | fa-spin | Classic, most used loading spinner |
| circle-notch | fas fa-circle-notch | ◌ notched circle | fa-spin | Very clean, modern alternative to spinner |
| sync | fas fa-sync | ↻ circular arrows | fa-spin | Refresh page / reload data / sync |
| sync-alt | fas fa-sync-alt | ↻ horizontal arrows | fa-spin | Alternative refresh / sync icon |
| cog | fas fa-cog | ⚙️ gear | fa-spin | Settings loading / processing gears |
| cogs | fas fa-cogs | ⚙️⚙️ two gears | fa-spin | Multiple processes / heavy background task |
| snowflake | fas fa-snowflake | ❄️ snowflake | fa-spin | Christmas / winter loading animation |
| stroopwafel | fas fa-stroopwafel | 🍪 waffle | fa-spin | Fun / food-themed spinner (very rarely used) |
Real ranking in 2026 usage (based on millions of sites):
- fa-spinner – the absolute king
- fa-circle-notch – cleanest & most modern-looking
- fa-sync / fa-sync-alt – refresh buttons
- fa-cog – settings / loading gears
- fa-snowflake – only for Christmas/winter themes
The others (stroopwafel) are mostly jokes or seasonal fun.
3. How to actually animate them (very important!)
All these icons become animated when you add one of these classes:
- fa-spin → smooth, continuous 360° rotation (most common)
- fa-pulse → stepped rotation (8 steps, looks like old hard-drive loading)
You can also control speed with CSS:
|
0 1 2 3 4 5 6 7 |
.fa-spin-slow { animation: fa-spin 6s infinite linear; } .fa-spin-fast { animation: fa-spin 1s infinite linear; } |
4. Real, copy-paste examples (how people actually use them)
Example 1 – Full-page loading overlay (very common)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div style="position:fixed; inset:0; background:rgba(255,255,255,0.95); display:flex; align-items:center; justify-content:center; z-index:9999;"> <div style="text-align:center;"> <i class="fas fa-spinner fa-spin fa-6x" style="color:#1976d2;"></i> <p style="font-size:1.6rem; margin-top:25px; color:#333;"> Loading your dashboard… please wait </p> </div> </div> |
Example 2 – Button with loading state
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background:#4caf50; color:white; padding:14px 28px; border:none; border-radius:50px; font-size:1.2rem; cursor:pointer; min-width:180px;"> <i class="fas fa-sync fa-spin" style="margin-right:10px;"></i> Refreshing data… </button> |
Example 3 – Inline loading text
|
0 1 2 3 4 5 6 7 8 9 10 |
<p style="font-size:1.3rem; text-align:center; margin:40px 0;"> Fetching latest posts <i class="fas fa-circle-notch fa-spin" style="color:#2196f3; margin:0 6px;"></i> please wait… </p> |
Example 4 – Multiple spinners (processing multiple tasks)
|
0 1 2 3 4 5 6 7 8 9 10 |
<div style="display:flex; justify-content:center; gap:50px; font-size:4rem; margin:60px 0;"> <i class="fas fa-spinner fa-spin" style="color:#f44336;"></i> <i class="fas fa-cog fa-spin" style="color:#2196f3; animation-duration:3s;"></i> <i class="fas fa-circle-notch fa-pulse" style="color:#4caf50;"></i> </div> |
Example 5 – Christmas / winter fun spinner
|
0 1 2 3 4 5 6 7 8 9 |
<div style="text-align:center; margin:50px 0;"> <i class="fas fa-snowflake fa-spin fa-5x" style="color:#2196f3;"></i> <p style="font-size:1.5rem; margin-top:20px;">Winter loading… ❄️</p> </div> |
5. Quick Teacher Summary – FA5 Spinner Icons (2026 reality)
- How many good spinner icons in FA5 free? → Only 6–8 really useful ones
- Top 3 in real-world usage (2026):
- fa-spinner (classic)
- fa-circle-notch (clean & modern)
- fa-sync / fa-cog (refresh / settings)
- Is there spinner-third, arrows-rotate, or modern spinners? → No — those came in Font Awesome 6 free
Best alternatives in 2026 if you need better spinners
- Font Awesome 6 or 7 (free) → many more spinners & animation styles
- Google Material Symbols → excellent loading/spinner set
- Bootstrap Icons → good sync & spinner icons
- Tabler Icons → very complete progress/loading set
- Pure CSS spinners (no icon needed) — extremely popular in 2026
So in short: Font Awesome 5 Spinner Icons = small but powerful set → fa-spinner ◌, fa-circle-notch ◌, fa-sync ↻, fa-cog ⚙️ are the real workhorses.
Got it now? Want me to:
- Build a full “Loading States Showcase” demo with all FA5 spinners?
- Show how they look inside buttons, overlays, and inline text?
- Compare FA5 vs FA6/7 spinner icons (way more variety in newer versions)?
- Or move to the next category?
Just raise your hand — teacher is ready! ◌ ↻ ⚙️ ❄️ 🚀
