> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/m20prs/Sky-AI-Forecast/llms.txt
> Use this file to discover all available pages before exploring further.

# Weather icons

> Understand how Sky AI Forecast maps weather codes to Lucide icons and learn how to customize or extend them.

Sky AI Forecast uses the [Lucide](https://lucide.dev) icon library for all weather icons. Lucide is loaded via CDN in `index.html`:

```html index.html theme={null}
<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](https://open-meteo.com/en/docs#weathervariables) and returns an HTML string with the matching Lucide icon and color:

```js script.js theme={null}
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 code | Condition            | Icon         | Color                  |
| -------- | -------------------- | ------------ | ---------------------- |
| `0`      | Clear sky            | `sun`        | `#ffb703` (amber)      |
| `1`–`3`  | Partly cloudy        | `cloud`      | `#8ecae6` (light blue) |
| `4`+     | Rain / precipitation | `cloud-rain` | `#007bff` (blue)       |

<Note>
  `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.
</Note>

## 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](https://open-meteo.com/en/docs#weathervariables).

```js script.js theme={null}
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>';
}
```

<Tip>
  Browse the full Lucide icon library at [lucide.dev/icons](https://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`).
</Tip>

## 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:

```js script.js theme={null}
// 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>';
```

<Note>
  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.
</Note>

## Logo icons

The app logo in `index.html` uses two Lucide icons that animate in an arc above the `SkyAI` wordmark:

```html index.html theme={null}
<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:

```css style.css theme={null}
.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:

```html index.html theme={null}
<!-- 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>
```

<Warning>
  After changing `data-lucide` values, verify the icon names are valid at [lucide.dev/icons](https://lucide.dev/icons). An invalid name will silently produce no icon.
</Warning>