Chapter 36: Icons Food
1. What is the “Icons Fitness” Page?
This page collects only the icons that represent fitness, exercise, gym, sports, health tracking, running, weights, yoga, heartbeat, water bottle, and physical activity.
These icons are perfect for:
- Gym / fitness center websites
- Workout / exercise tracking apps
- Health & wellness blogs
- Personal trainer portfolios or booking pages
- Running club / marathon event sites
- Yoga studio / meditation apps
- “Daily Steps” or “Calories Burned” dashboard widgets
- Sports nutrition / supplement stores
- “Join Our Fitness Challenge” landing pages
In Font Awesome 5 free, the Fitness category is small but very targeted (only about 8–12 icons, mostly solid fas style). Font Awesome kept this category quite minimal in v5 (they focused more on generic sports/health icons). Newer versions (FA6/7) added many more (dumbbell, heart-pulse variants, person-running, person-biking, yoga pose, water, fire for HIIT), but FA5 free already has the core fitness symbols that are still widely used on gym sites, fitness trackers, and health apps in 2026.
2. Main Free Fitness Icons in Font Awesome 5 (From the W3Schools Page)
Here are the most important free ones you’ll see in the table (solid fas style unless noted; these are the classics from FA5 free Fitness category):
- Heartbeat (heart with pulse line – health monitoring / cardio) <i class=”fas fa-heartbeat”></i>
- Running (person running silhouette) <i class=”fas fa-running”></i>
- Biking (person on bicycle) <i class=”fas fa-biking”></i>
- Swimmer (person swimming) <i class=”fas fa-swimmer”></i>
- Dumbbell (gym weight / dumbbell) <i class=”fas fa-dumbbell”></i>
- Biking (alternative biking style) <i class=”fas fa-biking”></i> (main one)
- Walking (person walking – light exercise) <i class=”fas fa-walking”></i>
- Hiking (person hiking with backpack) <i class=”fas fa-hiking”></i> (overlap with Camping)
- Fire (flame – burning calories / HIIT intensity) <i class=”fas fa-fire”></i> (overlap with Energy)
- Heart (basic heart – fitness love / health) <i class=”fas fa-heart”></i> (overlap with Emoji/Charity)
- Water / Glass Whiskeys (hydration – water bottle or glass) <i class=”fas fa-glass-whiskey”></i> (sometimes used for water)
These are the core free Fitness icons in FA5 — very simple and clean, but limited compared to modern needs.
3. Real Code Examples – How to Use Fitness Icons
Example 1: Gym / Fitness Center Homepage Hero
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- FA5 CDN in <head> --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <div style="text-align: center; padding: 60px 20px; background: linear-gradient(to bottom, #ff5722, #f44336); color: white; border-radius: 0 0 20px 20px;"> <i class="fas fa-dumbbell" style="font-size: 7rem; margin-bottom: 20px;"></i> <h1>Hyderabad Fitness Hub</h1> <p style="font-size: 1.6rem;"> <i class="fas fa-heartbeat" style="margin-right: 10px;"></i> Cardio • <i class="fas fa-running" style="margin-right: 10px;"></i> Running • <i class="fas fa-biking" style="margin-right: 10px;"></i> Cycling • <i class="fas fa-swimmer" style="margin-right: 10px;"></i> Swimming </p> </div> |
Example 2: Workout Tracker / Daily Stats Card
|
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: space-around; gap: 20px; flex-wrap: wrap; margin: 40px 0;"> <div style="text-align: center; padding: 25px; background: #e8f5e9; border-radius: 12px; min-width: 160px;"> <i class="fas fa-heartbeat" style="font-size: 4rem; color: #f44336;"></i> <h4>Heart Rate</h4> <p style="font-size: 2rem; color: #f44336;">142 bpm</p> </div> <div style="text-align: center; padding: 25px; background: #fff3e0; border-radius: 12px; min-width: 160px;"> <i class="fas fa-running" style="font-size: 4rem; color: #2196f3;"></i> <h4>Steps</h4> <p style="font-size: 2rem; color: #2196f3;">12,450</p> </div> <div style="text-align: center; padding: 25px; background: #e3f2fd; border-radius: 12px; min-width: 160px;"> <i class="fas fa-fire" style="font-size: 4rem; color: #ff9800;"></i> <h4>Calories</h4> <p style="font-size: 2rem; color: #ff9800;">780 kcal</p> </div> </div> |
Example 3: “Join Fitness Challenge” Button
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background: #f44336; color: white; padding: 18px 36px; border: none; border-radius: 50px; font-size: 1.4rem; cursor: pointer; box-shadow: 0 4px 12px rgba(244,67,54,0.3);"> <i class="fas fa-dumbbell" style="margin-right: 12px; font-size: 1.8rem;"></i> Join 30-Day Challenge </button> |
Example 4: Yoga / Wellness Class Card
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div style="border: 1px solid #bbdefb; padding: 25px; max-width: 400px; margin: 30px auto; border-radius: 12px; background: #e3f2fd; text-align: center;"> <i class="fas fa-running" style="font-size: 5rem; color: #673ab7; margin-bottom: 15px;"></i> <h3>Morning Yoga Flow</h3> <p style="font-size: 1.3rem;"> <i class="fas fa-heartbeat" style="margin-right: 8px; color: #f44336;"></i> 45 min • <i class="fas fa-clock" style="margin-right: 8px; color: #2196f3;"></i> 7:00 AM </p> <button style="background: #673ab7; color: white; padding: 12px 24px; border: none; border-radius: 6px;"> Book Your Spot </button> </div> |
4. Teacher Tips for Fitness Icons
- Colors — Red/orange (#f44336 / #ff9800) for heartbeat/fire/energy, blue (#2196f3) for running/cycling (movement), purple (#673ab7) for yoga/wellness, green (#28a745) for health/success.
- Size — Big sizes (fa-5x, fa-7x) look motivating on gym/fitness banners; smaller (fa-2x) inside stats or buttons.
- Combine categories — Pair with Heartbeat (health), Date & Time (class schedule), Emoji (happy face after workout), or Energy (fire for HIIT).
- Animation — Add CSS pulse/beat to heartbeat icon: @keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
- Accessibility — Add aria-label=”Heart rate: 142 bpm” or text; never rely on icon color alone for health data.
- Upgrade note — In Font Awesome 6/7, Fitness category is much richer (dumbbell variants, person-running, person-biking, person-swimming, yoga pose, water, fire-flame-curved) — upgrade for modern fitness trackers/apps.
Summary – Quick Recap
Font Awesome 5 Fitness Icons = W3Schools’ page listing free fitness/exercise icons like heartbeat ❤️🔥, running 🏃, biking 🚴, swimmer 🏊, dumbbell 🏋️, fire 🔥, walking 🚶, etc. Perfect for gyms, fitness apps, workout trackers, health blogs, yoga studios, running clubs, or any “exercise/fitness/health” theme.
Got it now? Want me to:
- Build a full “Gym / Fitness App” landing page demo with these icons?
- Show a nice animated heartbeat pulse effect?
- Compare FA5 vs newer versions (way more fitness-specific icons)?
- Or next category like “Icons Food”?
Just tell your teacher — we’re feeling pumped today! 🏋️♂️🏃♂️🔥🚀
