Chapter 103: Icons AV
What is Google AV Icons
Let me explain it very slowly, very clearly, and very honestly — like a real teacher who wants you to really understand and never be confused again.
The short & truthful answer first
There is no official icon set called “Google AV Icons” in 2026.
Google does not publish, distribute, or officially name any library as “Google AV Icons”, “Google Audio-Video Icons”, “Google AV Icons”, or anything similar.
When people search or ask for “Google AV Icons” (especially in 2025–2026), they are almost always making one of these three common mistakes / mix-ups:
- They mean Material Symbols (Google’s current official icon library) and are looking for icons related to audio & video (play, pause, volume, camera, microphone, fullscreen, etc.).
- They saw someone write “AV icons” in a tutorial/blog/Reddit post meaning “Audio-Video icons” and thought it was an official Google product name.
- They are confusing it with the old Google Material Icons “av” namespace that existed in very early versions (2014–2018), where many media icons had class names starting with av_ (e.g. av_play, av_pause, av_volume_up).
Bottom line (write this down):
There is no separate “Google AV Icons” library. The icons you are looking for are part of Material Symbols (or the legacy Material Icons), and they do not have a special “AV” category or prefix anymore.
2. Where the confusion comes from (important history – 3 minutes)
Back in 2014–2018 when Google first released Material Icons:
- Icons were organized in categories with short prefixes in their class names / file names
- Audio & Video related icons were in a folder/category called av → so you had av_play, av_pause, av_stop, av_volume_up, av_volume_down, av_volume_off, av_mic, av_videocam, etc.
- Developers saw these class names and started calling them “Google AV icons” or “Material AV icons” in tutorials, Stack Overflow answers, and blog posts.
Then Google changed everything:
- 2018–2022 → Material Icons → still had av_ names internally, but public usage moved to descriptive names
- 2022–2023 → Material Symbols (variable font) → all prefixes disappeared → now every icon has a simple English name: play_arrow, pause, stop, volume_up, mic, videocam, fullscreen, etc.
So in 2026:
- There is no “AV” category anymore
- There is no “Google AV Icons” product
- All the icons people used to call “AV icons” are now just normal Material Symbols with normal names
3. The real icons people want when they ask for “Google AV Icons” (2026 list)
These are the most common audio/video player icons from Material Symbols that developers use to build media players, video embeds, audio controls, etc.
All of them are available in Material Symbols Outlined / Rounded / Sharp styles.
| What you want to show | Current Material Symbols name (2026) | Looks like (description) | Old “av_” name (2014–2020) |
|---|---|---|---|
| Play button | play_arrow | ▶️ | av_play |
| Pause | pause | ‖ | av_pause |
| Stop | stop | ■ | av_stop |
| Fast forward | fast_forward | ⏩ | av_fast_forward |
| Fast rewind | fast_rewind | ⏪ | av_fast_rewind |
| Skip next | skip_next | ⏭ | av_skip_next |
| Skip previous | skip_previous | ⏮ | av_skip_previous |
| Volume up | volume_up | 🔊 | av_volume_up |
| Volume down | volume_down | 🔉 | av_volume_down |
| Volume off / mute | volume_off | 🔇 | av_volume_off |
| Fullscreen | fullscreen | ↔ | av_fullscreen |
| Exit fullscreen | fullscreen_exit | ⇱ | av_fullscreen_exit |
| Video camera / record video | videocam | 📹 | av_videocam |
| Video camera off | videocam_off | 📹 🚫 | av_videocam_off |
| Microphone / record audio | mic | 🎤 | av_mic |
| Microphone off | mic_off | 🎤 🚫 | av_mic_off |
| Closed captions / subtitles | closed_caption | CC | av_closed_caption |
| Subtitles off | closed_caption_off | CC 🚫 | — |
| Repeat / loop | repeat | 🔁 | av_repeat |
| Shuffle | shuffle | 🔀 | av_shuffle |
4. Real, copy-paste examples (how people actually use these icons in 2026)
Example 1: Classic video player control bar (Material Symbols 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 24 25 26 27 28 |
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <div style="max-width:800px; margin:60px auto; background:#111; color:white; padding:16px; border-radius:12px;"> <div style="display:flex; align-items:center; justify-content:space-between; font-size:2.2rem;"> <!-- Left: backward / play / forward --> <div style="display:flex; gap:30px;"> <span class="material-symbols-outlined">skip_previous</span> <span class="material-symbols-outlined" style="font-size:3rem; color:#4caf50;">play_arrow</span> <span class="material-symbols-outlined">skip_next</span> </div> <!-- Center: time --> <div style="font-size:1.1rem;"> 1:45 / 4:30 </div> <!-- Right: volume / fullscreen --> <div style="display:flex; gap:30px;"> <span class="material-symbols-outlined">volume_up</span> <span class="material-symbols-outlined">fullscreen</span> </div> </div> </div> |
Example 2: Big centered play overlay (YouTube / Vimeo style)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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 button --> <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.4);"> <span class="material-symbols-outlined" style="font-size:120px; color:white; cursor:pointer;"> play_circle </span> </div> </div> |
Example 3: Volume & mute toggle
|
0 1 2 3 4 5 6 7 8 9 10 |
<div style="display:flex; align-items:center; gap:16px; font-size:2.5rem; margin:40px auto; max-width:300px;"> <span class="material-symbols-outlined" style="color:#f44336;">volume_off</span> <input type="range" min="0" max="100" value="70" style="width:180px;"> <span class="material-symbols-outlined" style="color:#4caf50;">volume_up</span> </div> |
5. Teacher Summary – Quick Truth Table (March 2026)
| Question | Honest Answer (2026) |
|---|---|
| Is there an official library called “Google AV Icons” or “Google Action Icons”? | No |
| Where do the audio/video player icons come from? | Material Symbols (Google’s current official icon library) |
| Old prefix people remember? | av_ (2014–2020 era) — no longer used |
| Current icon names? | play_arrow, pause, volume_up, videocam, mic, fullscreen, etc. |
| Best way to use them in 2026? | Material Symbols via Google Fonts CDN (variable font) |
| Number of media icons available? | ~80–120 (plenty for any player) |
Final Teacher Advice
If you want Google-style audio & video player icons in 2026:
→ Use Material Symbols → Take icons named: play_arrow, pause, stop, volume_up, volume_off, fullscreen, videocam, mic, etc. → Style them in Google colors (#1a73e8 blue, #ea4335 red, #34a853 green, #fbbc05 yellow) if you want the authentic Google look
Got it now? Want me to:
- Build a full mini video player control bar using only Material Symbols?
- Show side-by-side comparison of Material Symbols vs Font Awesome 5 media icons?
- Give you ready-to-copy Material Symbols CDN code + a complete player example?
- Or go back to the Font Awesome 5 categories?
Just raise your hand — teacher is ready! ▶️ ‖ 🔊 📹 🎤 🚀
