Chapter 73: Icons Toggle
Toggle Icons
This is the same kind of reference page we’ve been studying the whole time — a dedicated cheat-sheet on W3Schools listing all free Font Awesome 5 icons in the Toggle category.
URL (still working in February 2026): https://www.w3schools.com/icons/fontawesome5_icons_toggle.asp
It’s usually near the end of the list (after Status / Spinner / Shapes and before Users or Text Formatting). The page has the short intro:
Toggle Icons The table below shows the Free Font Awesome 5 Toggle icons:
followed by the table with preview, class name, unicode, and “Try it” button.
1. What is the “Icons Toggle” page?
This page lists only the icons that represent toggle switches, on/off states, checkboxes in toggle form, and binary controls — basically the visual symbols people use to show “enabled/disabled”, “active/inactive”, “true/false”, “visible/hidden” states in user interfaces.
These icons are extremely common in modern web and mobile apps for:
- Dark mode / light mode switches
- Notification toggles (on/off)
- Feature switches (enable/disable)
- Settings toggles (Wi-Fi, Bluetooth, location, etc.)
- Checkbox replacements (more stylish than default browser checkboxes)
- Toggle buttons in forms
- “Show password” / “Hide password” icons
- Availability toggles (online/offline)
- Theme / appearance switches
In Font Awesome 5 free, the Toggle category is very small — exactly 2 icons (both solid fas style):
| Icon name | Class name | Looks like (static) | Most common usage |
|---|---|---|---|
| toggle-on | fas fa-toggle-on | toggle switched ON | Enabled / active / true / on state |
| toggle-off | fas fa-toggle-off | toggle switched OFF | Disabled / inactive / false / off state |
That’s it — only these two icons exist in the entire free Toggle category in Font Awesome 5.
2. The complete free Toggle icons in Font Awesome 5
| Preview (ON) | Preview (OFF) | Class name | Unicode | Typical color usage & meaning |
|---|---|---|---|---|
| toggle switched to right | toggle switched to left | fas fa-toggle-on | | Green / success / enabled / active |
| toggle switched to left | toggle switched to right | fas fa-toggle-off | | Gray / muted / disabled / inactive |
Important notes about FA5 Toggle icons (2026 reality):
- Only 2 icons total — no variants (no square toggles, no colorful styles, no animation built-in)
- They are very basic — just a rounded rectangle with a circle inside
- The ON/OFF state is purely visual — you decide which one means “on” and which means “off” (convention is fa-toggle-on = enabled, fa-toggle-off = disabled)
- They look best at fa-2x to fa-3x size with a little padding
- In Font Awesome 6 / 7 this category grew significantly (toggle-on/off variants, square toggles, colored versions, better contrast), but in FA5 it’s really just these two.
3. Real code examples – how developers actually use them
Example 1: Dark Mode / Light Mode Toggle (very common)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- FA5 CDN in <head> --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <label style="display:flex; align-items:center; gap:12px; font-size:1.3rem; cursor:pointer;"> <span>Dark Mode</span> <i class="fas fa-toggle-on fa-2x" style="color:#4caf50;"></i> <!-- or use fa-toggle-off when dark mode is disabled --> </label> |
Example 2: Settings Toggle List (mobile app style)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div style="max-width:500px; margin:50px auto; font-size:1.3rem;"> <div style="display:flex; justify-content:space-between; align-items:center; padding:15px; border-bottom:1px solid #eee;"> Notifications <i class="fas fa-toggle-on fa-2x" style="color:#28a745; cursor:pointer;"></i> </div> <div style="display:flex; justify-content:space-between; align-items:center; padding:15px; border-bottom:1px solid #eee;"> Location Services <i class="fas fa-toggle-off fa-2x" style="color:#757575; cursor:pointer;"></i> </div> <div style="display:flex; justify-content:space-between; align-items:center; padding:15px; border-bottom:1px solid #eee;"> Auto-save drafts <i class="fas fa-toggle-on fa-2x" style="color:#28a745; cursor:pointer;"></i> </div> <div style="display:flex; justify-content:space-between; align-items:center; padding:15px;"> Sound effects <i class="fas fa-toggle-off fa-2x" style="color:#757575; cursor:pointer;"></i> </div> </div> |
Example 3: “Show Password” Toggle (form field)
|
0 1 2 3 4 5 6 7 8 9 |
<div style="position:relative; max-width:400px; margin:40px auto;"> <input type="password" placeholder="Enter password" style="width:100%; padding:14px 50px 14px 18px; border:1px solid #ddd; border-radius:6px; font-size:1.1rem;"> <i class="fas fa-toggle-off fa-lg" style="position:absolute; right:15px; top:50%; transform:translateY(-50%); color:#757575; cursor:pointer;"></i> </div> |
Example 4: Simple On/Off Status Indicator
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div style="display:flex; justify-content:center; gap:60px; font-size:4rem; margin:60px 0;"> <div style="text-align:center;"> <i class="fas fa-toggle-on" style="color:#4caf50;"></i> <p style="font-size:1.3rem; margin-top:10px;">Enabled</p> </div> <div style="text-align:center;"> <i class="fas fa-toggle-off" style="color:#757575;"></i> <p style="font-size:1.3rem; margin-top:10px;">Disabled</p> </div> </div> |
4. Teacher Summary – Quick Recap (February 2026)
Font Awesome 5 Toggle Icons = extremely small category → only 2 icons:
- fas fa-toggle-on → ON / enabled / active / true
- fas fa-toggle-off → OFF / disabled / inactive / false
Very useful for:
- Dark mode / theme switches
- Settings toggles (notifications, location, Wi-Fi…)
- Show/hide password buttons
- On/off status indicators
- Feature enable/disable controls
Got it now? Want me to:
- Build a full “Settings Page” or “Dark Mode Toggle” demo with these two icons?
- Show how they look when styled with brand colors or different sizes?
- Compare FA5 vs FA6/7 toggle icons (way more variants & styles in newer versions)?
- Or move to the next category in the series?
Just tell your teacher — we’re switching things on and off today! 🔛🔘🚀
