Weather codes

Sky AI Forecast receives a WMO weather interpretation code from Open-Meteo in the weather_code fields of the API response. The app maps each code to a Lucide icon via the getWeatherIcon() function in script.js.

Icon mapping logic

function getWeatherIcon(code) {
    if (code === 0) return '<i data-lucide="sun" style="color: #ffb703"></i>';
    if (code <= 3) return '<i data-lucide="cloud" style="color: #8ecae6"></i>';
    return '<i data-lucide="cloud-rain" style="color: #007bff"></i>';
}

The function applies a simple three-tier grouping:

Condition	Codes	Icon
Clear sky	0	`sun`
Partly cloudy to overcast	1–3	`cloud`
All other conditions	4+	`cloud-rain`

Complete WMO code reference

Code(s)	WMO description	Sky AI Forecast icon
0	Clear sky	`sun`
1	Mainly clear	`cloud`
2	Partly cloudy	`cloud`
3	Overcast	`cloud`
45	Fog	`cloud-rain`
48	Depositing rime fog	`cloud-rain`
51	Drizzle: light	`cloud-rain`
53	Drizzle: moderate	`cloud-rain`
55	Drizzle: dense intensity	`cloud-rain`
61	Rain: slight	`cloud-rain`
63	Rain: moderate	`cloud-rain`
65	Rain: heavy	`cloud-rain`
71	Snow fall: slight	`cloud-rain`
73	Snow fall: moderate	`cloud-rain`
75	Snow fall: heavy	`cloud-rain`
77	Snow grains	`cloud-rain`
80	Rain showers: slight	`cloud-rain`
81	Rain showers: moderate	`cloud-rain`
82	Rain showers: violent	`cloud-rain`
85	Snow showers: slight	`cloud-rain`
86	Snow showers: heavy	`cloud-rain`
95	Thunderstorm: slight or moderate	`cloud-rain`
96	Thunderstorm with slight hail	`cloud-rain`
99	Thunderstorm with heavy hail	`cloud-rain`

To show more granular icons — for example, a dedicated snowflake for codes 71–77 or a lightning bolt for codes 95–99 — extend getWeatherIcon() with additional conditions before the final return:

function getWeatherIcon(code) {
    if (code === 0) return '<i data-lucide="sun" style="color: #ffb703"></i>';
    if (code <= 3) return '<i data-lucide="cloud" style="color: #8ecae6"></i>';
    if (code >= 71 && code <= 77) return '<i data-lucide="snowflake" style="color: #90e0ef"></i>';
    if (code === 95 || code === 96 || code === 99) return '<i data-lucide="cloud-lightning" style="color: #f4a261"></i>';
    return '<i data-lucide="cloud-rain" style="color: #007bff"></i>';
}

Check the Lucide icon library for the full list of available icon names.

Get Started

Features

Customization

Reference

Icon mapping logic

Complete WMO code reference

​Icon mapping logic

​Complete WMO code reference

Icon mapping logic

Complete WMO code reference