Chapter 68: Icons Sport
Sport Icons (officially called Icons Sport on the W3Schools site).
This is — as always — the classic W3Schools reference/cheat-sheet page that lists all free Font Awesome 5 icons belonging to the Sport category.
It’s usually placed after “Social” or “Shapes” and before “Status” or “Users” in their sidebar (exact order can vary slightly). The page opens with the short intro:
Sport Icons The table below shows the Free Font Awesome 5 Sport icons:
…followed by the familiar table with preview, class name, unicode, and “Try it” button.
1. What does the “Icons Sport” page contain?
This category contains only the icons that represent sports, athletics, fitness activities, balls, equipment, medals, trophies, and competition symbols.
These icons are extremely useful for:
- Sports club / gym / fitness center websites
- “Sports News” or “Live Scores” sections
- Event / tournament / match promotion pages
- “Join Our Team” / “Register for Tournament” buttons
- Athlete / player profile pages
- Sports betting / fantasy league apps
- “Scoreboard” or “Leaderboard” displays
- Physical education / school sports pages
- “Buy Tickets” / “Watch Live” CTAs
In Font Awesome 5 free the Sport category is relatively small — only about 12–18 really useful icons (mostly solid fas style). Font Awesome 6 and 7 later added many more (basketball-ball, football-ball, soccer-ball, baseball-ball, volleyball-ball, hockey-puck, tennis-ball, golf-ball, bowling-ball, table-tennis-paddle-ball, medals, trophy variants, person-running, person-biking, person-swimming), but FA5 free already has the most essential sports symbols that are still widely used in 2026.
2. The actual free Sport icons in Font Awesome 5
Here are the most important / most frequently used ones from the W3Schools page (solid fas style):
| Icon name | Class name | Looks like | Most common meaning / usage |
|---|---|---|---|
| football-ball | fas fa-football-ball | ⚽ American football | Football (American), rugby, NFL |
| basketball-ball | fas fa-basketball-ball | 🏀 Basketball | Basketball, NBA |
| soccer-ball | Not in FA5 free | — | — (added in FA6 as fa-futbol) |
| baseball-ball | fas fa-baseball-ball | ⚾ Baseball | Baseball, MLB |
| volleyball-ball | fas fa-volleyball-ball | 🏐 Volleyball | Volleyball |
| hockey-puck | fas fa-hockey-puck | 🏒 Hockey puck | Ice hockey |
| golf-ball | Not in FA5 free | — | — (added in FA6) |
| bowling-ball | Not in FA5 free | — | — (added in FA6) |
| table-tennis | Not in FA5 free | — | — (added in FA6 as fa-table-tennis-paddle-ball) |
| trophy | fas fa-trophy | 🏆 Trophy | Winner, champion, award |
| medal | Not in FA5 free | — | — (added in FA6) |
| running | fas fa-running | 🏃 Person running | Athletics, marathon, jogging |
| biking | fas fa-biking | 🚴 Person biking | Cycling, mountain bike |
| swimmer | fas fa-swimmer | 🏊 Person swimming | Swimming, aquatics |
| dumbbell | fas fa-dumbbell | 🏋️ Dumbbell | Weight training, gym |
| heartbeat | fas fa-heartbeat | ❤️🔥 Pulse line | Fitness tracker, cardio (overlap with Health) |
These are basically the complete useful set for sport in Font Awesome 5 free.
Missing in FA5 free (but added in FA6/7 free):
- soccer-ball / futbol ⚽
- tennis-ball 🎾
- golf-ball ⛳
- bowling-ball 🎳
- table-tennis-paddle-ball 🏓
- medal 🥇🥈🥉
- person-running / person-biking / person-swimming variants
- whistle, jersey, helmet, etc.
3. Real code examples – how developers actually use them
Example 1 – Sports Club / Gym Homepage Hero
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div style="text-align:center; padding:80px 20px; background:linear-gradient(to right,#0d47a1,#1976d2); color:white; border-radius:0 0 20px 20px;"> <i class="fas fa-dumbbell fa-8x" style="margin-bottom:30px;"></i> <h1 style="font-size:3.8rem;">Webliance Fitness & Sports Club</h1> <p style="font-size:1.7rem; margin:25px 0;"> <i class="fas fa-basketball-ball" style="margin:0 15px;"></i> Basketball • <i class="fas fa-football-ball" style="margin:0 15px;"></i> Football • <i class="fas fa-running" style="margin:0 15px;"></i> Athletics • <i class="fas fa-swimmer" style="margin:0 15px;"></i> Swimming </p> <button style="background:#ffffff; color:#0d47a1; padding:18px 40px; border:none; border-radius:50px; font-size:1.4rem; font-weight:bold; cursor:pointer;"> Join Membership </button> </div> |
Example 2: Sports Event / Tournament Card
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div style="border:1px solid #bbdefb; padding:30px; max-width:450px; margin:40px auto; border-radius:12px; background:#e3f2fd; text-align:center;"> <i class="fas fa-trophy fa-6x" style="color:#ff9800; margin-bottom:20px;"></i> <h2>Hyderabad Inter-College Basketball Tournament</h2> <p style="font-size:1.4rem;"> <i class="fas fa-calendar-alt" style="margin-right:8px; color:#2196f3;"></i> March 15–18, 2026 • <i class="fas fa-basketball-ball" style="margin-right:8px; color:#f44336;"></i> 12 Teams </p> <button style="background:#ff9800; color:white; padding:12px 24px; border:none; border-radius:50px;"> Register Team </button> </div> |
Example 3: Fitness / Sports Tracker Stats
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div style="display:flex; justify-content:center; gap:50px; flex-wrap:wrap; margin:50px 0;"> <div style="text-align:center; min-width:160px;"> <i class="fas fa-running fa-5x" style="color:#2196f3;"></i> <p style="margin-top:12px; font-weight:bold;">Distance</p> <p style="font-size:2.2rem;">12.4 km</p> </div> <div style="text-align:center; min-width:160px;"> <i class="fas fa-heartbeat fa-5x" style="color:#f44336;"></i> <p style="margin-top:12px; font-weight:bold;">Heart Rate</p> <p style="font-size:2.2rem;">148 bpm</p> </div> <div style="text-align:center; min-width:160px;"> <i class="fas fa-dumbbell fa-5x" style="color:#673ab7;"></i> <p style="margin-top:12px; font-weight:bold;">Weight Lifted</p> <p style="font-size:2.2rem;">850 kg</p> </div> </div> |
Example 4: “Live Score” or “Match Day” Badge
|
0 1 2 3 4 5 6 7 8 9 |
<div style="display:inline-flex; align-items:center; gap:12px; padding:12px 24px; background:#d32f2f; color:white; border-radius:50px; font-size:1.3rem;"> <i class="fas fa-football-ball" style="font-size:1.8rem;"></i> <span>Live Match – India vs Australia</span> </div> |
4. Quick Teacher Summary – FA5 Sport Icons (2026 reality)
- How many real sport icons are there in FA5 free? → Only 8–10 truly useful ones (football-ball, basketball-ball, baseball-ball, volleyball-ball, hockey-puck, running, biking, swimmer, dumbbell, trophy)
- Is there a soccer-ball / futbol ⚽ icon? → No — that came in Font Awesome 6 (fa-futbol)
- Is there a medal / gold medal 🥇 icon? → No — added in FA6
- Best alternatives in 2026 if you need a richer sports set
- Font Awesome 6 or 7 (free version) → much better sports ball & activity collection
- Bootstrap Icons → good basketball, football, running icons
- Tabler Icons → very complete sports & fitness set
- Heroicons / Lucide → modern line-style sports icons
- Google Material Symbols → rich sports & activity icons
So in short: Font Awesome 5 Sport Icons = small but usable set → football-ball ⚽ (American), basketball-ball 🏀, baseball-ball ⚾, volleyball-ball 🏐, hockey-puck 🏒, running 🏃, biking 🚴, swimmer 🏊, dumbbell 🏋️, trophy 🏆.
Got it now? Want me to:
- Build a full “Sports Club” or “Fitness Event” landing page demo with these icons?
- Show how they look in a modern sports score / live match UI?
- Compare FA5 vs FA6/7 sport icons (way more balls, sports equipment & activities in newer versions)?
- Or move to the next category in the series?
Just raise your hand — teacher is ready! 🏀🏃♂️🏆🚀
