Skip to main content
Sky AI Forecast uses the Lucide icon library for all weather icons. Lucide is loaded via CDN in index.html:
index.html
<script src="https://unpkg.com/lucide@latest"></script>
After the page loads, lucide.createIcons() is called to replace every <i data-lucide="..."> element with the corresponding SVG.

​
How icons are mapped to weather codes

The getWeatherIcon(code) function in script.js takes a WMO weather interpretation code and returns an HTML string with the matching Lucide icon and color:
script.js
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>';
}
WMO codeConditionIconColor
0Clear skysun#ffb703 (amber)
1–3Partly cloudycloud#8ecae6 (light blue)
4+Rain / precipitationcloud-rain#007bff (blue)
lucide.createIcons() must be called after injecting HTML that contains data-lucide attributes, or the icons will not render. The existing showCurrent(), show24h(), and show30d() functions already do this.

​
Adding more granular icon mappings

The current mapping covers three broad ranges. You can extend getWeatherIcon to handle more specific WMO codes. The full WMO code table is available in the Open-Meteo docs.
script.js
function getWeatherIcon(code) {
    // Clear sky
    if (code === 0) return '<i data-lucide="sun" style="color: #ffb703"></i>';

    // Mainly clear, partly cloudy, overcast
    if (code <= 3) return '<i data-lucide="cloud" style="color: #8ecae6"></i>';

    // Fog and depositing rime fog
    if (code <= 49) return '<i data-lucide="cloud-fog" style="color: #adb5bd"></i>';

    // Drizzle
    if (code <= 59) return '<i data-lucide="cloud-drizzle" style="color: #74b9ff"></i>';

    // Rain
    if (code <= 69) return '<i data-lucide="cloud-rain" style="color: #007bff"></i>';

    // Snow
    if (code <= 79) return '<i data-lucide="snowflake" style="color: #a8dadc"></i>';

    // Rain showers
    if (code <= 84) return '<i data-lucide="cloud-rain" style="color: #0056c7"></i>';

    // Snow showers
    if (code <= 94) return '<i data-lucide="cloud-snow" style="color: #caf0f8"></i>';

    // Thunderstorm
    return '<i data-lucide="cloud-lightning" style="color: #f4a261"></i>';
}
Browse the full Lucide icon library at lucide.dev/icons to find the right icon name for each condition. Use the exact name as the data-lucide attribute value (e.g., cloud-fog, snowflake, cloud-lightning).

​
Changing icon colors

Each icon’s color is set via an inline style="color: ..." attribute inside the string returned by getWeatherIcon. Update the hex value for any condition to change its color:
script.js
// Change rain icon from blue to teal
return '<i data-lucide="cloud-rain" style="color: #00b4d8"></i>';

// Change clear sky icon from amber to golden yellow
if (code === 0) return '<i data-lucide="sun" style="color: #f9c74f"></i>';
Lucide icons are rendered as inline SVGs. The color CSS property sets their currentColor, which fills the SVG stroke. You can also control width, height, and stroke-width with additional inline styles if needed.

​
Logo icons

The app logo in index.html uses two Lucide icons that animate in an arc above the SkyAI wordmark:
index.html
<div class="logo-animation-wrapper">
    <i data-lucide="sun" class="sun-icon"></i>
    <i data-lucide="cloud-rain" class="rain-icon"></i>
    <h1 class="logo-text">Sky<span>AI</span></h1>
</div>
  • The sun icon is visible by default and fades out on hover.
  • The cloud-rain icon is hidden by default and fades in on hover.
Both icons use the weatherArcPath animation defined in style.css to travel across the arc. Their colors are controlled by the .sun-icon and .rain-icon CSS rules:
style.css
.sun-icon {
    color: #ffb703;
}

.rain-icon {
    color: #007bff;
}

​
Swapping logo icons

To use different icons in the logo, change the data-lucide attribute on either <i> element to any valid Lucide icon name:
index.html
<!-- Replace sun with cloud-sun, and cloud-rain with cloud-lightning -->
<i data-lucide="cloud-sun" class="sun-icon"></i>
<i data-lucide="cloud-lightning" class="rain-icon"></i>
After changing data-lucide values, verify the icon names are valid at lucide.dev/icons. An invalid name will silently produce no icon.

Build docs developers (and LLMs) love

Get started for freeTalk to us