Chapter 77: Icons Weather
Weather Icons The table below shows the Free Font Awesome 5 Weather icons:
followed by the table with icon previews, class names, unicode values, and “Try it” buttons.
1. What is the “Icons Weather” page?
This page lists only the icons that represent weather conditions, sky phenomena, temperature, wind, rain, clouds, sun, moon, storms, snow, fog, humidity, and related atmospheric states.
These icons are extremely useful for:
- Weather apps and websites
- Dashboard widgets (current weather, forecast)
- Travel / tourism pages (what to expect in a destination)
- “Outdoor Event” planning sections
- Agriculture / farming apps (rain prediction, frost warning)
- “Good Day for Hiking” / “Beach Weather” indicators
- News / blog posts about climate or seasons
- Smart home displays (temperature, humidity)
- “Rainy Day” / “Sunny Day” mood cards
In Font Awesome 5 free the Weather category is medium-sized and very visual — around 20–30 icons (mostly solid fas style, some regular far). Font Awesome 6 and 7 later added many more (temperature-high/low, wind variants, cloud-bolt, cloud-showers-heavy, smog, hurricane, tornado, sunrise/sunset), but FA5 free already has the classic weather symbols that are still used on millions of weather widgets, travel sites, and forecast pages in 2026.
2. Main Free Weather Icons in Font Awesome 5 (From the W3Schools Page)
Here are the most important and frequently used free ones (solid fas unless noted):
| Icon name | Class name | Looks like | Most common meaning / usage |
|---|---|---|---|
| sun | fas fa-sun | ☀️ Bright sun | Clear sky, sunny day, hot weather |
| cloud | fas fa-cloud | ☁️ Cloud | Cloudy / overcast |
| cloud-sun | fas fa-cloud-sun | ⛅ Partly cloudy | Partly sunny / mixed weather |
| cloud-rain | fas fa-cloud-rain | 🌧️ Rainy cloud | Rain, showers |
| cloud-showers-heavy | fas fa-cloud-showers-heavy | 🌧️ Heavy rain | Heavy downpour / monsoon |
| cloud-bolt | Not in FA5 free | — | — (added in FA6) |
| bolt | fas fa-bolt | ⚡ Lightning | Thunderstorm, storm |
| snowflake | fas fa-snowflake | ❄️ Snowflake | Snow, winter, cold weather |
| wind | fas fa-wind | 🍃 Wind | Windy, breezy |
| smog | fas fa-smog | 🌫️ Smog / pollution | Air quality, hazy weather |
| fog | fas fa-fog | 🌫️ Fog | Foggy / misty conditions |
| thermometer | fas fa-thermometer + variants | 🌡️ Thermometer | Temperature (full, half, quarter, empty) |
| thermometer-high | Not in FA5 free | — | — (added in FA6) |
| thermometer-low | Not in FA5 free | — | — (added in FA6) |
| umbrella | fas fa-umbrella | ☂️ Umbrella | Rain protection |
| umbrella-beach | fas fa-umbrella-beach | 🏖️ Beach umbrella | Summer / vacation rain (overlap with Travel) |
| rainbow | fas fa-rainbow | 🌈 Rainbow | After rain, hope, good weather |
These are the core free Weather icons in FA5 — very clean, colorful when styled, and instantly understandable for any weather/forecast context.
3. Real Code Examples – How to Use Weather Icons
Example 1: Simple Weather Widget / Current Conditions
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div style="max-width:380px; margin:50px auto; padding:30px; background:#e3f2fd; border-radius:16px; box-shadow:0 6px 20px rgba(33,150,243,0.15); text-align:center;"> <i class="fas fa-cloud-sun fa-7x" style="color:#ff9800; margin-bottom:20px;"></i> <h2 style="margin:0; font-size:2.6rem;">28°C</h2> <p style="font-size:1.4rem; color:#555; margin:10px 0;"> Partly Cloudy • Hyderabad </p> <div style="display:flex; justify-content:space-around; font-size:1.8rem; color:#757575;"> <div> <i class="fas fa-wind"></i> 12 km/h </div> <div> <i class="fas fa-tint"></i> 65% </div> </div> </div> |
Example 2: 3-Day Forecast Cards
|
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:25px; flex-wrap:wrap; margin:50px 0;"> <div style="text-align:center; padding:20px; background:#e8f5e9; border-radius:12px; min-width:140px;"> <p style="font-size:1.2rem; margin-bottom:8px;">Today</p> <i class="fas fa-sun fa-5x" style="color:#ff9800;"></i> <p style="font-size:1.8rem; margin-top:10px;">32°C</p> </div> <div style="text-align:center; padding:20px; background:#fff3e0; border-radius:12px; min-width:140px;"> <p style="font-size:1.2rem; margin-bottom:8px;">Tomorrow</p> <i class="fas fa-cloud-rain fa-5x" style="color:#2196f3;"></i> <p style="font-size:1.8rem; margin-top:10px;">26°C</p> </div> <div style="text-align:center; padding:20px; background:#e3f2fd; border-radius:12px; min-width:140px;"> <p style="font-size:1.2rem; margin-bottom:8px;">Friday</p> <i class="fas fa-cloud-sun fa-5x" style="color:#ff9800;"></i> <p style="font-size:1.8rem; margin-top:10px;">29°C</p> </div> </div> |
Example 3: “Beach Weather Today” Badge
|
0 1 2 3 4 5 6 7 8 9 |
<div style="display:inline-flex; align-items:center; gap:12px; padding:14px 28px; background:#0288d1; color:white; border-radius:50px; font-size:1.3rem;"> <i class="fas fa-umbrella-beach" style="font-size:1.8rem;"></i> <span>Perfect Beach Day – 28°C & Sunny</span> </div> |
Example 4: “High Temperature Alert” Banner
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<div style="background:#fff3e0; padding:20px; border-left:6px solid #ff9800; border-radius:4px; margin:30px 0; display:flex; align-items:center; gap:20px;"> <i class="fas fa-thermometer-full fa-4x" style="color:#ff9800;"></i> <div> <h3 style="margin:0; color:#ef6c00;">Heat Wave Alert</h3> <p style="margin:8px 0 0; color:#424242;">Temperatures expected to reach 38°C today. Stay hydrated!</p> </div> </div> |
4. Teacher Summary – Quick Recap
Font Awesome 5 Weather Icons = W3Schools’ page listing free weather & sky icons like sun ☀️, cloud ☁️, cloud-sun ⛅, cloud-rain 🌧️, cloud-showers-heavy 🌧️, bolt ⚡, snowflake ❄️, wind 🍃, smog 🌫️, fog 🌫️, rainbow 🌈, thermometer 🌡️, umbrella ☂️, umbrella-beach 🏖️, etc.
Very useful for:
- Weather apps / widgets
- Travel / tourism forecast sections
- “Outdoor Event” planning
- Heat wave / rain alerts
- Summer / winter / monsoon mood cards
Got it now? Want me to:
- Build a full “Weather Widget” or “Travel Forecast” demo page with these icons?
- Show how they look in a modern dark-mode weather app?
- Compare FA5 vs FA6/7 weather icons (way more detailed storm, temperature, sunrise/sunset icons in newer versions)?
- Or move to the next category like “Icons Users & People” (wait — we already did Users)?
Just tell your teacher — we’re checking the forecast today! ☀️🌧️🌈🍃🚀
