Skip to main content
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:
ConditionCodesIcon
Clear sky0sun
Partly cloudy to overcast1–3cloud
All other conditions4+cloud-rain

​
Complete WMO code reference

Code(s)WMO descriptionSky AI Forecast icon
0Clear skysun
1Mainly clearcloud
2Partly cloudycloud
3Overcastcloud
45Fogcloud-rain
48Depositing rime fogcloud-rain
51Drizzle: lightcloud-rain
53Drizzle: moderatecloud-rain
55Drizzle: dense intensitycloud-rain
61Rain: slightcloud-rain
63Rain: moderatecloud-rain
65Rain: heavycloud-rain
71Snow fall: slightcloud-rain
73Snow fall: moderatecloud-rain
75Snow fall: heavycloud-rain
77Snow grainscloud-rain
80Rain showers: slightcloud-rain
81Rain showers: moderatecloud-rain
82Rain showers: violentcloud-rain
85Snow showers: slightcloud-rain
86Snow showers: heavycloud-rain
95Thunderstorm: slight or moderatecloud-rain
96Thunderstorm with slight hailcloud-rain
99Thunderstorm with heavy hailcloud-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.

Build docs developers (and LLMs) love

Get started for freeTalk to us