Chapter 95: Icons Video
Video Player Icons.
Let me explain very clearly and honestly right from the beginning (teacher mode on):
Font Awesome 5 does NOT have an official category called “Video Player Icons”.
There is also no page named “Icons Video Player” on W3Schools for Font Awesome 5.
What usually happens is:
- People search for “Font Awesome 5 video player icons” because they want the classic set of icons used in media players: play, pause, stop, forward, backward, volume, fullscreen, etc.
- Google shows results from Font Awesome 5 Audio & Video category (which is the closest match) or from Font Awesome 6 / 7 (which split media controls into more detailed sub-categories and added many new icons).
- Or they land on blog posts / CodePen examples that mix FA5 + FA6 icons.
So today I’m going to give you the real, accurate answer for Font Awesome 5 (the version W3Schools still teaches in their FA5 sections in 2026).
1. There is no “Video Player” category — the closest one is Icons Audio & Video
The official name on W3Schools is: Font Awesome 5 Icons Audio & Video URL: https://www.w3schools.com/icons/fontawesome5_icons_audio_video.asp
This category contains both audio and video player controls — there is no separation between audio-only and video-only icons in FA5.
2. The most important free video player icons in Font Awesome 5
Here are the icons most people use to build a classic video player interface (all fas prefix unless noted):
| Icon name | Class name | Looks like | Most common video player usage |
|---|---|---|---|
| play | fas fa-play | ▶️ | Play / start video |
| play-circle | fas fa-play-circle | ▶️ in circle | Big play button overlay (very popular) |
| pause | fas fa-pause | ‖ | Pause |
| pause-circle | fas fa-pause-circle | ‖ in circle | Pause overlay button |
| stop | fas fa-stop | ■ | Stop video |
| forward | fas fa-forward | ⏩ | Fast forward / skip forward |
| fast-forward | fas fa-fast-forward | ⏭ | Faster skip forward |
| backward | fas fa-backward | ⏪ | Rewind / go back |
| fast-backward | fas fa-fast-backward | ⏮ | Faster rewind |
| step-forward | fas fa-step-forward | ⏭ (single step) | Next frame / next chapter |
| step-backward | fas fa-step-backward | ⏮ (single step) | Previous frame / previous chapter |
| expand | fas fa-expand | ↔ | Enter fullscreen |
| compress | fas fa-compress | ⇱ | Exit fullscreen |
| volume-up | fas fa-volume-up | 🔊 | Volume full / high |
| volume-down | fas fa-volume-down | 🔉 | Volume medium |
| volume-off | fas fa-volume-off | 🔇 | Mute |
| volume-mute | fas fa-volume-mute | 🔇 | Mute (alternative name) |
| video | fas fa-video | 📹 | Video camera / record video |
| video-slash | fas fa-video-slash | 📹 🚫 | Video off / camera disabled |
These are the core free video player controls in Font Awesome 5.
3. Real code examples – how developers actually build a video player UI with FA5 icons
Example 1: Classic video player control bar (most common pattern)
HTML
|
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 |
<div style="max-width:800px; margin:60px auto; background:#111; color:white; padding:15px; border-radius:12px;"> <div style="display:flex; align-items:center; justify-content:space-between; font-size:2.2rem;"> <!-- Left side: backward / play / forward --> <div style="display:flex; gap:25px;"> <i class="fas fa-backward" style="cursor:pointer;"></i> <i class="fas fa-play" style="color:#4caf50; cursor:pointer;"></i> <i class="fas fa-forward" style="cursor:pointer;"></i> </div> <!-- Center: time / progress --> <div style="font-size:1.1rem; text-align:center; flex:1;"> 1:45 / 4:30 </div> <!-- Right side: volume / fullscreen --> <div style="display:flex; gap:25px;"> <i class="fas fa-volume-down" style="cursor:pointer;"></i> <i class="fas fa-expand" style="cursor:pointer;"></i> </div> </div> </div> |
Example 2: Big centered play button overlay (YouTube-like)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div style="position:relative; width:640px; height:360px; margin:50px auto; background:#000; border-radius:12px; overflow:hidden;"> <video style="width:100%; height:100%; object-fit:cover;"></video> <!-- Big play overlay --> <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.4);"> <i class="fas fa-play-circle fa-8x" style="color:white; cursor:pointer; opacity:0.9;"></i> </div> </div> |
Example 3: Volume & mute toggle
HTML
|
0 1 2 3 4 5 6 7 8 9 10 |
<div style="display:flex; align-items:center; gap:15px; font-size:2.5rem; margin:40px auto; max-width:300px;"> <i class="fas fa-volume-mute" style="color:#f44336; cursor:pointer;"></i> <input type="range" min="0" max="100" value="70" style="width:180px;"> <i class="fas fa-volume-up" style="color:#4caf50; cursor:pointer;"></i> </div> |
Example 4: “Video off” / “Camera disabled” indicator
HTML
|
0 1 2 3 4 5 6 7 8 9 10 |
<div style="text-align:center; padding:40px; background:#111; color:white; border-radius:12px; max-width:500px; margin:50px auto;"> <i class="fas fa-video-slash fa-7x" style="color:#f44336; margin-bottom:20px;"></i> <h2>Camera is Off</h2> <p style="font-size:1.4rem;">Your video is currently disabled</p> </div> |
4. Teacher Summary – Quick Truth Table (February 2026)
| Question | Answer in Font Awesome 5 Free | Answer in Font Awesome 6/7 Free |
|---|---|---|
| Is there an official “Video Player” category? | No | Partially (more split in v6+) |
| Is there a play / pause / stop icon? | Yes ▶️ ‖ ■ | Yes (more variants) |
| Is there a big play-circle overlay icon? | Yes ▶️ in circle | Yes |
| Is there volume-up/down/off icons? | Yes 🔊 🔉 🔇 | Yes |
| Is there fullscreen / expand icon? | Yes ↔ / ⇱ | Yes |
| Is there modern progress bar / seek icons? | No | Yes (added in v6+) |
| Can I build a decent video player with FA5? | Yes — basic but very usable | Much richer & easier |
Final Teacher Advice
If your project is using Font Awesome 5 and you want to build a video player in 2026:
- Use these icons: play, play-circle, pause, pause-circle, forward, backward, volume-up/down/off, expand/compress
- They are perfectly sufficient for 95% of basic video players
- For more advanced controls (progress bar, seek, captions toggle, picture-in-picture, playback speed) → you will usually use custom SVGs or Font Awesome 6/7
Got it now? Want me to:
- Build a full mini video player control bar demo using only FA5 icons?
- Show how the same icons look in FA6/7 (more variants & styles)?
- Give you the exact CDN link to switch to FA6 for free?
- Or move to the next category in the series?
Just raise your hand — teacher is ready! ▶️ ‖ 🔊 ↔️ 🚀
