Chapter 32: Icons Energy
1. What is the “Icons Energy” Page?
This page lists only the icons from Font Awesome 5 free that represent energy, power, electricity, batteries, charging, lightning, fire, sun, radiation, and related concepts — basically anything to do with energy sources, power supply, or “energy” in a physical/technical sense.
These icons are perfect for:
- Electric vehicle (EV) charging stations / apps
- Solar power / renewable energy websites
- Battery status indicators (phone, laptop, car)
- Power company / utility provider sites
- Eco-friendly / green energy blogs
- “Low Battery” warnings or charging animations
- Science / physics education pages (lightning, atom, radiation)
- “Power Up” buttons or energy drink brands
- Dashboard widgets showing energy consumption
In Font Awesome 5 free, the Energy category is small but very focused (around 8–12 icons, mostly solid fas style). Newer versions (FA6/7) added many more (bolt, plug, plug-circle-bolt, solar-panel, wind, leaf for green energy), but FA5 free already has the most commonly used energy/power symbols that are still everywhere in 2026.
2. Main Free Energy Icons in Font Awesome 5 (From the W3Schools Page)
Here are the key free ones you’ll see listed (solid fas style unless noted; these are the classics from FA5 free Energy category):
- Bolt (lightning bolt – electricity / power / fast energy) <i class=”fas fa-bolt”></i>
- Battery Full (full battery icon) <i class=”fas fa-battery-full”></i>
- Battery 3/4 (75% battery) <i class=”fas fa-battery-three-quarters”></i>
- Battery 1/2 (50% battery) <i class=”fas fa-battery-half”></i>
- Battery 1/4 (25% battery) <i class=”fas fa-battery-quarter”></i>
- Battery Empty (empty / low battery) <i class=”fas fa-battery-empty”></i>
- Plug (electric plug / power socket) <i class=”fas fa-plug”></i>
- Charging Station (EV charging station – electric vehicle plug) <i class=”fas fa-charging-station”></i>
- Radiation (radiation symbol – nuclear / energy hazard) <i class=”fas fa-radiation”></i>
- Sun (sun with rays – solar energy / power) <i class=”fas fa-sun”></i> (overlaps with Weather)
- Fire (flame – fire / energy / heat) <i class=”fas fa-fire”></i> (overlaps with Nature)
These are the core free Energy icons — very clean and instantly understood for power, battery, or electricity themes.
3. Real Code Examples – How to Use Energy Icons
Example 1: Battery Status Indicator (very common in apps/dashboards)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- 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="display: flex; align-items: center; gap: 15px; font-size: 2.5rem; margin: 40px 0;"> <i class="fas fa-battery-full" style="color: #28a745;"></i> 100% <i class="fas fa-battery-three-quarters" style="color: #4caf50;"></i> 75% <i class="fas fa-battery-half" style="color: #ffc107;"></i> 50% <i class="fas fa-battery-quarter" style="color: #ff9800;"></i> 25% <i class="fas fa-battery-empty" style="color: #dc3545;"></i> 5% </div> |
Example 2: EV Charging Station Locator Button
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background: #2196f3; color: white; padding: 16px 32px; border: none; border-radius: 50px; font-size: 1.3rem; cursor: pointer; box-shadow: 0 4px 12px rgba(33,150,243,0.3);"> <i class="fas fa-charging-station" style="margin-right: 12px; font-size: 1.8rem;"></i> Find Nearest EV Charger </button> |
Example 3: Solar Energy / Green Power Section
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div style="text-align: center; padding: 50px 20px; background: #e8f5e9; border-radius: 12px;"> <i class="fas fa-sun" style="font-size: 7rem; color: #ffc107; margin-bottom: 20px;"></i> <h1>Solar Power Solutions</h1> <p style="font-size: 1.5rem;"> <i class="fas fa-bolt" style="color: #ff9800; margin-right: 8px;"></i> Clean • <i class="fas fa-plug" style="color: #4caf50; margin-right: 8px;"></i> Renewable • <i class="fas fa-charging-station" style="color: #2196f3;"></i> Sustainable </p> </div> |
Example 4: Low Battery Warning (mobile app style)
|
0 1 2 3 4 5 6 7 8 9 10 |
<div style="background: #fff3e0; padding: 25px; border-radius: 10px; text-align: center; margin: 30px 0;"> <i class="fas fa-battery-quarter" style="font-size: 6rem; color: #ff9800; margin-bottom: 15px;"></i> <h3>Low Battery!</h3> <p style="font-size: 1.3rem;">Your device is at 18%. Please connect to a charger soon.</p> </div> |
Example 5: “Power Up” Fun Button (app/game)
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background: linear-gradient(45deg, #ff5722, #f44336); color: white; padding: 18px 36px; border: none; border-radius: 50px; font-size: 1.4rem; cursor: pointer;"> <i class="fas fa-bolt" style="margin-right: 12px; font-size: 1.8rem;"></i> Power Up! </button> |
4. Teacher Tips for Energy Icons
- Colors — Green (#28a745 / #4caf50) for full/renewable energy, yellow/orange (#ffc107 / #ff9800) for medium battery/sun, red (#dc3545) for low/empty, blue (#2196f3) for charging/EV.
- Size — Big sizes (fa-5x, fa-7x) look powerful on banners/buttons; use fa-2x inside text for inline battery %.
- Animation — Add CSS pulse or shake to low battery icon: @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
- Combine categories — Pair with Computers (laptop, desktop), Automotive (car-battery), or Design (bolt for energy in creative work).
- Accessibility — Add aria-label=”Battery at 75%” or text; never rely on icon color alone for status.
- Upgrade note — In Font Awesome 6/7, Energy category is much richer (bolt, plug-circle-bolt, solar-panel, wind, leaf, car-bolt) — upgrade for modern EV/solar sites.
Summary – Quick Recap
Font Awesome 5 Energy Icons = W3Schools’ page listing free energy/power icons like bolt ⚡, battery-full/full/empty 🔋, charging-station ⛽, plug 🔌, sun ☀️, radiation ☢️, etc. Perfect for battery indicators, EV charging, solar/renewable energy sites, power companies, low-battery warnings, or any “energy/power supply” theme.
Got it now? Want me to:
- Build a full “EV Charger Finder” or “Battery Dashboard” demo page with these icons?
- Show a nice animated low-battery warning?
- Compare FA5 vs newer versions (way more energy/EV icons)?
- Or next category like “Icons Files”?
Just tell your teacher — we’re charged up and ready! ⚡🔋☀️🚀
