Chapter 55: Icons Music
1. What is the “Icons Music” Page?
This page collects only the icons that represent music, audio, instruments, sound, notes, headphones, microphone, vinyl records, equalizer, volume controls, play/pause/stop, playlist, and music-related actions.
These icons are extremely useful for:
- Music streaming / player websites (Spotify, YouTube Music style)
- Podcast / radio station landing pages
- DJ / music production portfolios
- “Now Playing” or audio player controls
- Album / playlist covers
- “Listen Now” / “Play Track” buttons
- Audio recording / microphone interfaces
- Karaoke or music lesson apps
- Event / concert / festival promotion pages
- Sound settings / volume sliders in apps
In Font Awesome 5 free, the Music category is medium-sized and very practical (around 25â35 icons, mostly solid fas style, some regular far). Newer versions (FA6/7) added many more (music-note, waveform, vinyl-record, guitar, drum, saxophone, headphones-alt variants), but FA5 free already has the most essential music & audio symbols that are still powering almost every music website, audio player, podcast page, and DJ portfolio in 2026.
2. Main Free Music Icons in Font Awesome 5 (From the W3Schools Page)
Here are the most important and frequently used free ones you’ll see in the table (solid fas unless noted):
- Music đĩ (music note / quaver) <i class=”fas fa-music”></i>
- Headphones đ§ (over-ear headphones) <i class=”fas fa-headphones”></i>
- Headphones Alt đ§ (alternative style â often used for modern earphones) <i class=”fas fa-headphones-alt”></i>
- Microphone đ¤ (classic microphone) <i class=”fas fa-microphone”></i>
- Microphone Alt đ¤ (alternative mic style) <i class=”fas fa-microphone-alt”></i>
- Microphone Slash đ¤đĢ (mic muted / off) <i class=”fas fa-microphone-slash”></i>
- Volume Up đ (speaker full volume) <i class=”fas fa-volume-up”></i>
- Volume Down đ <i class=”fas fa-volume-down”></i>
- Volume Off đ (muted) <i class=”fas fa-volume-off”></i>
- Volume Mute đ (explicit mute) <i class=”fas fa-volume-mute”></i>
- Play âļī¸ <i class=”fas fa-play”></i>
- Pause â¸ī¸ <i class=”fas fa-pause”></i>
- Stop âšī¸ <i class=”fas fa-stop”></i>
- Forward ⊠/ Fast Forward âī¸ <i class=”fas fa-forward”></i> / <i class=”fas fa-fast-forward”></i>
- Backward âĒ / Fast Backward âŽī¸ <i class=”fas fa-backward”></i> / <i class=”fas fa-fast-backward”></i>
- Step Forward / Step Backward<i class=”fas fa-step-forward”></i> / <i class=”fas fa-step-backward”></i>
- Eject âī¸ <i class=”fas fa-eject”></i>
- Random đ (shuffle) <i class=”fas fa-random”></i>
- Repeat đ <i class=”fas fa-repeat”></i> / <i class=”fas fa-redo”></i>
- Music Note / Note Sticky (music sheet) <i class=”fas fa-music”></i> (main one)
- Guitar đ¸ <i class=”fas fa-guitar”></i> (added in later FA5 patches)
- Drum đĨ <i class=”fas fa-drum”></i>
These are the core free Music icons in FA5 â very clean and instantly understandable for any audio/music/media context.
3. Real Code Examples â How to Use Music Icons
Example 1: Music Player Controls (very common)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div style="display: flex; justify-content: center; gap: 30px; font-size: 4rem; margin: 50px 0; color: #673ab7;"> <i class="fas fa-backward" style="cursor: pointer;"></i> <i class="fas fa-pause-circle" style="color: #4caf50; cursor: pointer;"></i> <i class="fas fa-play-circle" style="cursor: pointer;"></i> <i class="fas fa-forward" style="cursor: pointer;"></i> </div> <div style="text-align: center; margin-top: 20px;"> <i class="fas fa-volume-down" style="margin-right: 10px;"></i> <input type="range" min="0" max="100" value="70" style="width: 200px;"> <i class="fas fa-volume-up" style="margin-left: 10px;"></i> </div> |
Example 2: Podcast / Music Streaming Card
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div style="border: 1px solid #bbdefb; padding: 30px; max-width: 400px; margin: 40px auto; border-radius: 12px; text-align: center; background: #e3f2fd;"> <i class="fas fa-headphones fa-6x" style="color: #673ab7; margin-bottom: 20px;"></i> <h2>Morning Chill Playlist</h2> <p style="font-size: 1.4rem;"> <i class="fas fa-music" style="margin-right: 8px;"></i> 45 Tracks âĸ <i class="fas fa-clock" style="margin-right: 8px;"></i> 3 hr 12 min </p> <button style="background: #673ab7; color: white; padding: 12px 24px; border: none; border-radius: 50px;"> <i class="fas fa-play" style="margin-right: 8px;"></i> Play Now </button> </div> |
Example 3: “Now Playing” Mini Player
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div style="display: flex; align-items: center; gap: 20px; padding: 15px; background: #212121; color: white; border-radius: 12px; max-width: 500px; margin: 40px auto;"> <i class="fas fa-music fa-3x" style="color: #f44336;"></i> <div style="flex: 1;"> <strong>Song Title â Artist Name</strong><br> <small>Album Name âĸ 2:45 / 4:12</small> </div> <div style="font-size: 2.5rem; display: flex; gap: 15px;"> <i class="fas fa-backward"></i> <i class="fas fa-pause"></i> <i class="fas fa-forward"></i> </div> </div> |
Example 4: DJ / Music Production Tools
|
0 1 2 3 4 5 6 7 8 9 10 |
<div style="display: flex; justify-content: center; gap: 40px; font-size: 5rem; margin: 50px 0;"> <i class="fas fa-headphones" style="color: #673ab7;" title="Monitoring"></i> <i class="fas fa-microphone-alt" style="color: #f44336;" title="Recording"></i> <i class="fas fa-guitar" style="color: #4caf50;" title="Instruments"></i> </div> |
4. Teacher Summary â Quick Recap
Font Awesome 5 Music Icons = W3Schools’ page listing free music/audio icons like music đĩ, headphones đ§, microphone đ¤, play/pause/stop âļī¸â¸ī¸âšī¸, volume-up/down/off đđđ, forward/backward âŠâĒ, shuffle đ, repeat đ, guitar đ¸, drum đĨ, etc.
Very useful for:
- Music players / streaming sites
- Podcast / radio pages
- DJ / producer portfolios
- Audio recording interfaces
- “Play” / “Listen” buttons
- Volume & playback controls
Got it now? Want me to:
- Build a full “Music Player” or “Podcast Landing Page” demo with these icons?
- Show a nice “Now Playing” bar with progress & controls?
- Compare FA5 vs FA6/7 music icons (way more instruments & waveforms in newer versions)?
- Or move to the next category like “Icons Medical” (wait â we already did Medical) or “Icons Household”?
Just tell your teacher â we’re turning up the volume today! đĩđ§đ¤đ
