Chapter 67: Icons Spinner
Spinner Icons (officially called Icons Spinner on the W3Schools site).
This is exactly the same kind of reference page we’ve been studying the whole time: it’s the dedicated cheat-sheet on W3Schools listing all free Font Awesome 5 icons that belong to the Spinner category.
URL (still working in February 2026): https://www.w3schools.com/icons/fontawesome5_icons_spinner.asp
It’s usually placed near the end of the list (after Shapes / Social and before Status / Users), because spinners are a very special-purpose group.
The page opens with the short introduction:
Spinner Icons The table below shows the Free Font Awesome 5 Spinner icons:
…followed by the familiar table with preview, class name, unicode, and — most importantly — the “Try it” button that lets you see the animation live.
1. What does the “Icons Spinner” page contain?
This category contains only the icons that are designed to be animated with spinning / rotating / pulsing to indicate:
- loading states
- processing
- waiting / in-progress
- refreshing data
- submitting forms
- fetching content
These icons are not decorative — they are meant to spin (using CSS class fa-spin or fa-pulse).
The whole point of this category is that these icons look good when animated.
In Font Awesome 5 free the Spinner category is small but extremely useful — only 6–8 really good spinner icons (mostly solid fas style). Font Awesome 6 and 7 later added many more (spinner-third, circle-notch variants, arrows-rotate, arrows-spin), but FA5 free already has the classic spinners that are still used on millions of websites in 2026.
2. The actual free Spinner icons in Font Awesome 5
Here are all the icons listed on the W3Schools page (solid fas style):
| Icon name | Class name | Looks like (static) | Best animation style | Most common usage |
|---|---|---|---|---|
| spinner | fas fa-spinner | ◌ Circle with gap | fa-spin | The #1 classic loading spinner |
| circle-notch | fas fa-circle-notch | ◌ Notched circle | fa-spin | Very clean, modern loading spinner |
| sync | fas fa-sync | ↻ Arrows circle | fa-spin | Refresh / reload / sync data |
| sync-alt | fas fa-sync-alt | ↻ Horizontal arrows | fa-spin | Alternative refresh / sync icon |
| cog | fas fa-cog | ⚙️ Gear | fa-spin | Settings loading / processing |
| cogs | fas fa-cogs | ⚙️⚙️ Two gears | fa-spin | Multiple processes / heavy loading |
| snowflake | fas fa-snowflake | ❄️ Snowflake | fa-spin | Christmas loading / winter-themed spinner |
| stroopwafel | fas fa-stroopwafel | 🍪 Waffle | fa-spin | Fun / food-themed loading (rare) |
These are literally all the icons in the Spinner category in Font Awesome 5 free.
Most used in real life (2026 reality):
- fa-spinner — the absolute king
- fa-circle-notch — very clean alternative
- fa-sync / fa-sync-alt — refresh buttons
- fa-cog — settings / processing
The others (snowflake, stroopwafel) are mostly fun/seasonal.
3. How to animate them (very important!)
All spinner icons become animated when you add one of these classes:
- fa-spin — smooth continuous rotation (most common)
- fa-pulse — stepped rotation (8 steps, looks like old loading)
Examples:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Classic spinning circle --> <i class="fas fa-spinner fa-spin fa-3x"></i> <!-- Notched circle pulsing --> <i class="fas fa-circle-notch fa-pulse fa-4x" style="color:#2196f3;"></i> <!-- Gear spinning slowly --> <i class="fas fa-cog fa-spin fa-2x" style="animation-duration:3s;"></i> |
You can control speed with CSS:
|
0 1 2 3 4 5 6 7 8 |
.fa-spin-slow { animation: fa-spin 4s infinite linear; } |
4. Real code examples – how developers actually use them
Example 1 – Loading overlay / full-page loader
|
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.9); 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... </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> Processing... </button> |
Example 3 – Refresh / Sync button
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background:#673ab7; color:white; padding:12px 20px; border:none; border-radius:6px; font-size:1.1rem; cursor:pointer;"> <i class="fas fa-sync fa-spin" style="margin-right:8px;"></i> Refresh Data </button> |
Example 4 – Inline loading in 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 5 – Multiple spinners (processing queue)
|
0 1 2 3 4 5 6 7 8 9 10 |
<div style="display:flex; justify-content:center; gap:40px; 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:2.5s;"></i> <i class="fas fa-circle-notch fa-pulse" style="color:#4caf50;"></i> </div> |
5. Quick Teacher Summary – FA5 Spinner Icons (2026 reality)
- How many real spinner icons are there in FA5 free? → Only 6–8 truly good ones (spinner, circle-notch, sync, sync-alt, cog, cogs are the most used)
- Is there a modern spinner-third or arrows-rotate? → No — those came in Font Awesome 6 free
- Best alternatives in 2026 if you need more spinners
- Font Awesome 6 or 7 (free version) → many more spinners & animations
- Google Material Symbols → excellent loading / spinner set
- Bootstrap Icons → good sync & spinner icons
- Tabler Icons → very complete loading & progress set
- Pure CSS spinners (no icons needed) — very popular in 2026
So in short: Font Awesome 5 Spinner Icons = small but very useful 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” demo page with all FA5 spinners?
- Show how they look when used inside buttons, overlays, and inline text?
- Compare FA5 vs FA6/7 spinner icons (way more variety & styles in newer versions)?
- Or move to the next category in the series?
Just raise your hand — teacher is ready! ◌ ↻ ⚙️ 🚀
