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

> WMO weather interpretation codes and how Sky AI Forecast maps them to icons.

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](https://lucide.dev) icon via the `getWeatherIcon()` function in `script.js`.

## Icon mapping logic

```javascript 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>';
}
```

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`         |

<Tip>
  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`:

  ```javascript 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>';
      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](https://lucide.dev/icons/) for the full list of available icon names.
</Tip>