Chapter 70: Icons Status
Status Icons” (officially called Icons Status on the W3Schools site).
This is — as always — the dedicated reference/cheat-sheet page on W3Schools listing all free Font Awesome 5 icons in the Status category.
URL (still working in February 2026): https://www.w3schools.com/icons/fontawesome5_icons_status.asp
It’s usually placed near the end of the list (after Spinners / Social and before Users or Text Formatting), because status icons are mostly used for state indicators and UI feedback.
The page opens with the short introduction:
Status Icons The table below shows the Free Font Awesome 5 Status icons:
…followed by the standard table with preview, class name, unicode, and “Try it” button.
1. What does the “Icons Status” page contain?
This category contains only the icons that are primarily used to show status, state, availability, progress, success/failure, online/offline, pending, warning, danger, or information messages.
These icons are extremely common in modern web applications for:
- User status (online/offline/away)
- Notification badges (success, error, info, warning)
- Form validation (check / cross / exclamation)
- Progress / task status
- Order / delivery status
- Chat / messaging status (seen, delivered, sending)
- Server / system status indicators
- “Loading / Pending” states
- Alert / toast messages
- Availability calendars / booking status
In Font Awesome 5 free the Status category is small but extremely useful — only about 12–18 truly practical icons (mostly solid fas style). Font Awesome 6 and 7 later added many more (circle-check, circle-xmark, circle-info, circle-exclamation, square-check, square-xmark, signal / wifi-signal variants, battery levels), but FA5 free already has the classic status indicators that are still used on millions of websites and dashboards in 2026.
2. The actual free Status icons in Font Awesome 5
Here are the most important / most frequently used ones from the W3Schools page (solid fas style unless noted):
| Icon name | Class name | Looks like | Most common usage / meaning |
|---|---|---|---|
| check | fas fa-check | ✓ Checkmark | Success, done, correct, verified |
| check-circle | fas fa-check-circle | ✓ Inside circle | Success alert / toast, positive validation |
| check-double | fas fa-check-double | ✓✓ Double check | Seen / read (very common in chat apps) |
| check-square | fas fa-check-square | ✓ Inside square | Checkbox checked state |
| times | fas fa-times | × Close / cross | Error, close, delete, wrong |
| times-circle | fas fa-times-circle | × Inside circle | Error alert / toast, negative validation |
| exclamation | fas fa-exclamation | ! Exclamation | Warning, important, attention |
| exclamation-circle | fas fa-exclamation-circle | ! Inside circle | Warning / danger alert |
| exclamation-triangle | fas fa-exclamation-triangle | ⚠️ Warning triangle | Critical warning, danger |
| info | fas fa-info | i Info | Information, help, more details |
| info-circle | fas fa-info-circle | i Inside circle | Info alert / tooltip |
| question | fas fa-question | ? Question mark | Unknown, help, FAQ |
| question-circle | fas fa-question-circle | ? Inside circle | Help / tooltip / unknown state |
| bell | fas fa-bell | 🔔 Notification bell | Notifications, alerts (regular: far fa-bell) |
| bell-slash | fas fa-bell-slash | 🔔🚫 Muted bell | Notifications off |
| dot-circle | fas fa-dot-circle | ◉ Circle with dot | Radio button selected, status dot |
| circle | fas fa-circle | ● Solid circle | Status indicator (green/red/yellow dot) |
These are basically the complete useful set for status in Font Awesome 5 free.
3. Real code examples – how developers actually use them
Example 1 – Form Validation States (very common)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div style="max-width:500px; margin:50px auto;"> <!-- Success input --> <div style="position:relative; margin-bottom:25px;"> <input type="text" placeholder="Username" style="width:100%; padding:14px 45px 14px 18px; border:2px solid #4caf50; border-radius:6px; font-size:1.1rem;"> <i class="fas fa-check-circle" style="position:absolute; right:15px; top:50%; transform:translateY(-50%); color:#4caf50; font-size:1.4rem;"></i> </div> <!-- Error input --> <div style="position:relative; margin-bottom:25px;"> <input type="email" placeholder="Email" style="width:100%; padding:14px 45px 14px 18px; border:2px solid #f44336; border-radius:6px; font-size:1.1rem;"> <i class="fas fa-times-circle" style="position:absolute; right:15px; top:50%; transform:translateY(-50%); color:#f44336; font-size:1.4rem;"></i> </div> <!-- Info input --> <div style="position:relative;"> <input type="text" placeholder="Coupon code" style="width:100%; padding:14px 45px 14px 18px; border:2px solid #2196f3; border-radius:6px; font-size:1.1rem;"> <i class="fas fa-info-circle" style="position:absolute; right:15px; top:50%; transform:translateY(-50%); color:#2196f3; font-size:1.4rem;"></i> </div> </div> |
Example 2 – Notification / Toast Messages
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div style="position:fixed; bottom:30px; right:30px; z-index:1000; width:320px;"> <!-- Success toast --> <div style="background:#4caf50; color:white; padding:16px; border-radius:8px; margin-bottom:12px; display:flex; align-items:center; gap:15px;"> <i class="fas fa-check-circle fa-2x"></i> <div> <strong>Success!</strong><br> <small>Your order has been placed</small> </div> </div> <!-- Warning toast --> <div style="background:#ff9800; color:white; padding:16px; border-radius:8px; margin-bottom:12px; display:flex; align-items:center; gap:15px;"> <i class="fas fa-exclamation-triangle fa-2x"></i> <div> <strong>Warning</strong><br> <small>Low stock on 3 items</small> </div> </div> <!-- Error toast --> <div style="background:#f44336; color:white; padding:16px; border-radius:8px; display:flex; align-items:center; gap:15px;"> <i class="fas fa-times-circle fa-2x"></i> <div> <strong>Error</strong><br> <small>Payment failed. Please try again</small> </div> </div> </div> |
Example 3 – Online / Offline Status Dots
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div style="display:flex; align-items:center; gap:30px; font-size:1.4rem; margin:50px auto; max-width:400px;"> <div style="display:flex; align-items:center; gap:12px;"> <i class="fas fa-circle" style="color:#4caf50; font-size:1.2rem;"></i> Online </div> <div style="display:flex; align-items:center; gap:12px;"> <i class="fas fa-circle" style="color:#ff9800; font-size:1.2rem;"></i> Away </div> <div style="display:flex; align-items:center; gap:12px;"> <i class="fas fa-circle" style="color:#f44336; font-size:1.2rem;"></i> Offline </div> </div> |
Example 4 – “Seen / Delivered” Chat Status
|
0 1 2 3 4 5 6 7 8 9 |
<div style="display:flex; justify-content:flex-end; margin:20px; font-size:1.2rem; color:#757575;"> <span>Seen</span> <i class="fas fa-check-double" style="margin-left:6px; color:#4fc3f7;"></i> </div> |
4. Quick Teacher Summary – FA5 Status Icons (2026 reality)
- How many real status icons are there in FA5 free? → Around 10–14 truly useful ones (check, times, exclamation, info, question, bell, shield, user-shield, etc.)
- Is there a modern “circle-check” / “square-check” / “shield-check”? → No — those came in Font Awesome 6 free
- Best alternatives in 2026 if you need more status icons
- Font Awesome 6 or 7 (free version) → much better status & validation set
- Google Material Symbols → excellent check, close, info, warning, error icons
- Bootstrap Icons → good status & alert icons
- Tabler Icons → very complete status & notification set
- Heroicons / Lucide → modern line-style status icons
So in short: Font Awesome 5 Status Icons = small but very powerful set → check ✓, times ×, exclamation !, info i, question ?, bell 🔔, shield 🛡️, user-shield 👤🛡️, etc.
Got it now? Want me to:
- Build a full “Form Validation + Toast Notifications + Status Dots” demo page with these icons?
- Show how they look in a modern chat app (seen/delivered) or dashboard (online/offline)?
- Compare FA5 vs FA6/7 status icons (way more modern validation & state icons in newer versions)?
- Or move to the next category in the series?
Just raise your hand — teacher is ready! ✓ × ! i ? 🛡️ 🚀
