Refactor repo structure and add new icon sets

Restructured the repository from v1-v4 folders to a set-based organization
(set-1 through set-6) grouped by visual style rather than arbitrary version
numbers. Added new icon sets, dark theme variants, Lottie animations, and
a comprehensive icons.json mapping file.
This commit is contained in:
Darren Griffin
2026-03-13 12:24:56 +00:00
parent 617c2b5540
commit fb1e33de55
535 changed files with 2248 additions and 892 deletions

538
README.md
View File

@@ -1,211 +1,375 @@
# Google Weather Icons
A collection of the official weather icons used by Google.
> **March 13, 2026**: The repo has been refactored with a new structure. The old `v1``v4` folders have been replaced with `sets/set-1` through `sets/set-6`, organized by visual style rather than arbitrary version numbers. We've also added the new accessibility icon sets (outlined and outlined+gradient styles), dark theme variants, Lottie background animations from the Pixel Weather app, and a comprehensive `icons.json` mapping file. See the [Structure](#structure) section below for details.
A comprehensive collection of official weather icons used by Google across their products.
**Disclaimer**: I do not own these icons. All rights belong to Google.
### Formats
I could only find PNG versions of the v1 and v2 icons. I've used the highest resolution I could obtain from Google.
## Structure
SVGs are available for v3 and v4 and have been optimised using [SVGOMG](https://svgomg.net/). I have purposefully not minimised the SVGs as I believe it is better to have readable SVGs. However, do as you wish with them.
Icons are organized into **sets** — each representing a distinct visual style. Sets with theme support have `light/` and `dark/` subdirectories. An `icons.json` file at the root maps every weather condition to its icon files across all sets.
Fun fact: [Did you know that Google has a typo for one of their icons?](https://twitter.com/MrDarrenGriffin/status/1725896460363788681)
```
sets/
├── set-1/ # Google Search (Original) — PNGs
├── set-2/ # Google Search (Updated) — PNGs
├── set-3/ # Google Maps Weather — 32x32 SVGs
│ ├── light/
│ └── dark/
├── set-4/ # Google Weather (Filled) — 48x48 SVGs
│ ├── light/
│ └── dark/
├── set-5/ # Google Weather (Outlined) — 48x48 SVGs
│ ├── light/
│ └── dark/
├── set-6/ # Google Weather (Outlined + Gradient) — 48x48 SVGs
│ ├── light/
│ └── dark/
└── lottie/ # Animated weather backgrounds — Lottie JSON
├── phone_portrait/
├── phone_portrait_night/
├── phone_landscape/
├── phone_landscape_night/
├── tablet_portrait/
├── tablet_portrait_night/
├── tablet_landscape/
└── tablet_landscape_night/
```
# Icons
Below are the icons for each version downscaled to 64px. They have been somewhat grouped by icon type but are not in any particular order.
## v1
In this variant, no night versions exist.
### Day
[<img src="v1/sunny.png" width="64"/>](v1/sunny.png)
[<img src="v1/sunny_s_cloudy.png" width="64"/>](v1/sunny_s_cloudy.png)
[<img src="v1/partly_cloudy.png" width="64"/>](v1/partly_cloudy.png)
[<img src="v1/cloudy_s_sunny.png" width="64"/>](v1/cloudy_s_sunny.png)
[<img src="v1/rain_s_sunny.png" width="64"/>](v1/rain_s_sunny.png)
[<img src="v1/sunny_s_rain.png" width="64"/>](v1/sunny_s_rain.png)
### General
[<img src="v1/cloudy.png" width="64"/>](v1/cloudy.png)
[<img src="v1/rain_light.png" width="64"/>](v1/rain_light.png)
[<img src="v1/rain.png" width="64"/>](v1/rain.png)
[<img src="v1/rain_heavy.png" width="64"/>](v1/rain_heavy.png)
[<img src="v1/rain_s_cloudy.png" width="64"/>](v1/rain_s_cloudy.png)
[<img src="v1/cloudy_s_rain.png" width="64"/>](v1/cloudy_s_rain.png)
[<img src="v1/thunderstorms.png" width="64"/>](v1/thunderstorms.png)
[<img src="v1/snow_light.png" width="64"/>](v1/snow_light.png)
[<img src="v1/snow.png" width="64"/>](v1/snow.png)
[<img src="v1/snow_heavy.png" width="64"/>](v1/snow_heavy.png)
[<img src="v1/snow_s_cloudy.png" width="64"/>](v1/snow_s_cloudy.png)
[<img src="v1/cloudy_s_snow.png" width="64"/>](v1/cloudy_s_snow.png)
[<img src="v1/rain_s_snow.png" width="64"/>](v1/rain_s_snow.png)
[<img src="v1/snow_s_rain.png" width="64"/>](v1/snow_s_rain.png)
[<img src="v1/fog.png" width="64"/>](v1/fog.png)
## Sets
### Misc
[<img src="v1/arrow_unselected.svg" width="64"/>](v1/arrow_unselected.svg)
[<img src="v1/arrow_selected.svg" width="64"/>](v1/arrow_selected.svg)
### set-1 — Google Search (Original)
The original weather icons from Google Search. PNG format, day variants only.
## v2
### Day
[<img src="v2/sunny.png" width="64"/>](v2/sunny.png)
[<img src="v2/mostly_sunny.png" width="64"/>](v2/mostly_sunny.png)
[<img src="v2/partly_cloudy.png" width="64"/>](v2/partly_cloudy.png)
[<img src="v2/mostly_cloudy_day.png" width="64"/>](v2/mostly_cloudy_day.png)
[<img src="v2/scattered_showers_day.png" width="64"/>](v2/scattered_showers_day.png)
[<img src="v2/isolated_scattered_tstorms_day.png" width="64"/>](v2/isolated_scattered_tstorms_day.png)
### Night
[<img src="v2/clear_night.png" width="64"/>](v2/clear_night.png)
[<img src="v2/mostly_clear_night.png" width="64"/>](v2/mostly_clear_night.png)
[<img src="v2/partly_cloudy_night.png" width="64"/>](v2/partly_cloudy_night.png)
[<img src="v2/mostly_cloudy_night.png" width="64"/>](v2/mostly_cloudy_night.png)
[<img src="v2/scattered_showers_night.png" width="64"/>](v2/scattered_showers_night.png)
[<img src="v2/isolated_scattered_tstorms_night.png" width="64"/>](v2/isolated_scattered_tstorms_night.png)
### General
[<img src="v2/cloudy.png" width="64"/>](v2/cloudy.png)
[<img src="v2/drizzle.png" width="64"/>](v2/drizzle.png)
[<img src="v2/showers_rain.png" width="64"/>](v2/showers_rain.png)
[<img src="v2/heavy_rain.png" width="64"/>](v2/heavy_rain.png)
[<img src="v2/flurries.png" width="64"/>](v2/flurries.png)
[<img src="v2/snow_showers_snow.png" width="64"/>](v2/snow_showers_snow.png)
[<img src="v2/heavy_snow.png" width="64"/>](v2/heavy_snow.png)
[<img src="v2/wintry_mix_rain_snow.png" width="64"/>](v2/wintry_mix_rain_snow.png)
[<img src="v2/sleet_hail.png" width="64"/>](v2/sleet_hail.png)
[<img src="v2/strong_tstorms.png" width="64"/>](v2/strong_tstorms.png)
[<img src="v2/haze_fog_dust_smoke.png" width="64"/>](v2/haze_fog_dust_smoke.png)
[<img src="v2/blowing_snow.png" width="64"/>](v2/blowing_snow.png)
[<img src="v2/blizzard.png" width="64"/>](v2/blizzard.png)
[<img src="v2/tornado.png" width="64"/>](v2/tornado.png)
#### Misc
[<img src="sets/set-1/arrow_selected.svg" width="64"/>](sets/set-1/arrow_selected.svg)
[<img src="sets/set-1/arrow_unselected.svg" width="64"/>](sets/set-1/arrow_unselected.svg)
## v3
For some reason, Google chose to make the moon yellow in this variant. I have made a custom alternative which is more realistic.
### Day
[<img src="v3/sunny.svg" width="64"/>](v3/sunny.svg)
[<img src="v3/mostly_sunny.svg" width="64"/>](v3/mostly_sunny.svg)
[<img src="v3/partly_cloudy.svg" width="64"/>](v3/partly_cloudy.svg)
[<img src="v3/mostly_cloudy.svg" width="64"/>](v3/mostly_cloudy.svg)
#### Weather
[<img src="sets/set-1/sunny.png" width="64"/>](sets/set-1/sunny.png)
[<img src="sets/set-1/sunny_s_cloudy.png" width="64"/>](sets/set-1/sunny_s_cloudy.png)
[<img src="sets/set-1/partly_cloudy.png" width="64"/>](sets/set-1/partly_cloudy.png)
[<img src="sets/set-1/cloudy_s_sunny.png" width="64"/>](sets/set-1/cloudy_s_sunny.png)
[<img src="sets/set-1/cloudy.png" width="64"/>](sets/set-1/cloudy.png)
[<img src="sets/set-1/rain_light.png" width="64"/>](sets/set-1/rain_light.png)
[<img src="sets/set-1/rain.png" width="64"/>](sets/set-1/rain.png)
[<img src="sets/set-1/rain_heavy.png" width="64"/>](sets/set-1/rain_heavy.png)
[<img src="sets/set-1/rain_s_sunny.png" width="64"/>](sets/set-1/rain_s_sunny.png)
[<img src="sets/set-1/sunny_s_rain.png" width="64"/>](sets/set-1/sunny_s_rain.png)
[<img src="sets/set-1/rain_s_cloudy.png" width="64"/>](sets/set-1/rain_s_cloudy.png)
[<img src="sets/set-1/cloudy_s_rain.png" width="64"/>](sets/set-1/cloudy_s_rain.png)
[<img src="sets/set-1/thunderstorms.png" width="64"/>](sets/set-1/thunderstorms.png)
[<img src="sets/set-1/snow_light.png" width="64"/>](sets/set-1/snow_light.png)
[<img src="sets/set-1/snow.png" width="64"/>](sets/set-1/snow.png)
[<img src="sets/set-1/snow_heavy.png" width="64"/>](sets/set-1/snow_heavy.png)
[<img src="sets/set-1/snow_s_cloudy.png" width="64"/>](sets/set-1/snow_s_cloudy.png)
[<img src="sets/set-1/cloudy_s_snow.png" width="64"/>](sets/set-1/cloudy_s_snow.png)
[<img src="sets/set-1/rain_s_snow.png" width="64"/>](sets/set-1/rain_s_snow.png)
[<img src="sets/set-1/snow_s_rain.png" width="64"/>](sets/set-1/snow_s_rain.png)
[<img src="sets/set-1/fog.png" width="64"/>](sets/set-1/fog.png)
### Night
[<img src="v3/clear.svg" width="64"/>](v3/clear.svg)
[<img src="v3/partly_clear.svg" width="64"/>](v3/partly_clear.svg)
[<img src="v3/mostly_clear.svg" width="64"/>](v3/mostly_clear.svg)
[<img src="v3/mostly_cloudy_night.svg" width="64"/>](v3/mostly_cloudy.svg)
### set-2 — Google Search (Updated)
Updated icons from Google Search with more weather conditions and day/night variants. PNG format.
### MrDarrenGriffin's Night Alternative
I've altered these icons inherit the same moon gradient as v4 which, in my opinion, looks better.
#### Day
[<img src="sets/set-2/sunny.png" width="64"/>](sets/set-2/sunny.png)
[<img src="sets/set-2/mostly_sunny.png" width="64"/>](sets/set-2/mostly_sunny.png)
[<img src="sets/set-2/partly_cloudy.png" width="64"/>](sets/set-2/partly_cloudy.png)
[<img src="sets/set-2/mostly_cloudy_day.png" width="64"/>](sets/set-2/mostly_cloudy_day.png)
[<img src="sets/set-2/scattered_showers_day.png" width="64"/>](sets/set-2/scattered_showers_day.png)
[<img src="sets/set-2/isolated_scattered_tstorms_day.png" width="64"/>](sets/set-2/isolated_scattered_tstorms_day.png)
[<img src="v3/clear_alt.svg" width="64"/>](v3/clear.svg)
[<img src="v3/partly_clear_alt.svg" width="64"/>](v3/partly_clear.svg)
[<img src="v3/mostly_clear_alt.svg" width="64"/>](v3/mostly_clear.svg)
[<img src="v3/mostly_cloudy_night_alt.svg" width="64"/>](v3/mostly_cloudy.svg)
#### Night
[<img src="sets/set-2/clear_night.png" width="64"/>](sets/set-2/clear_night.png)
[<img src="sets/set-2/mostly_clear_night.png" width="64"/>](sets/set-2/mostly_clear_night.png)
[<img src="sets/set-2/partly_cloudy_night.png" width="64"/>](sets/set-2/partly_cloudy_night.png)
[<img src="sets/set-2/mostly_cloudy_night.png" width="64"/>](sets/set-2/mostly_cloudy_night.png)
[<img src="sets/set-2/scattered_showers_night.png" width="64"/>](sets/set-2/scattered_showers_night.png)
[<img src="sets/set-2/isolated_scattered_tstorms_night.png" width="64"/>](sets/set-2/isolated_scattered_tstorms_night.png)
### General
[<img src="v3/cloudy.svg" width="64"/>](v3/cloudy.svg)
[<img src="v3/drizzle.svg" width="64"/>](v3/drizzle.svg)
[<img src="v3/scattered_showers.svg" width="64"/>](v3/scattered_showers.svg)
[<img src="v3/showers.svg" width="64"/>](v3/showers.svg)
[<img src="v3/snow_showers.svg" width="64"/>](v3/snow_showers.svg)
[<img src="v3/flurries.svg" width="64"/>](v3/flurries.svg)
[<img src="v3/scattered_snow.svg" width="64"/>](v3/scattered_snow.svg)
[<img src="v3/heavy_snow.svg" width="64"/>](v3/heavy_snow.svg)
[<img src="v3/icy.svg" width="64"/>](v3/icy.svg)
[<img src="v3/mixed_rain_hail_sleet.svg" width="64"/>](v3/mixed_rain_hail_sleet.svg)
[<img src="v3/sleet_hail.svg" width="64"/>](v3/sleet_hail.svg)
[<img src="v3/wintry_mix.svg" width="64"/>](v3/wintry_mix.svg)
[<img src="v3/isolated_tstorms.svg" width="64"/>](v3/isolated_tstorms.svg)
[<img src="v3/strong_tstorms.svg" width="64"/>](v3/strong_tstorms.svg)
[<img src="v3/wind.svg" width="64"/>](v3/wind.svg)
[<img src="v3/blizzard.svg" width="64"/>](v3/blizzard.svg)
[<img src="v3/blowing_snow.svg" width="64"/>](v3/blowing_snow.svg)
[<img src="v3/mist.svg" width="64"/>](v3/mist.svg)
[<img src="v3/fog.svg" width="64"/>](v3/fog.svg)
[<img src="v3/smoke.svg" width="64"/>](v3/smoke.svg)
[<img src="v3/dust.svg" width="64"/>](v3/dust.svg)
[<img src="v3/tornado.svg" width="64"/>](v3/tornado.svg)
[<img src="v3/very_cold.svg" width="64"/>](v3/very_cold.svg)
#### General
[<img src="sets/set-2/cloudy.png" width="64"/>](sets/set-2/cloudy.png)
[<img src="sets/set-2/drizzle.png" width="64"/>](sets/set-2/drizzle.png)
[<img src="sets/set-2/showers_rain.png" width="64"/>](sets/set-2/showers_rain.png)
[<img src="sets/set-2/heavy_rain.png" width="64"/>](sets/set-2/heavy_rain.png)
[<img src="sets/set-2/flurries.png" width="64"/>](sets/set-2/flurries.png)
[<img src="sets/set-2/snow_showers_snow.png" width="64"/>](sets/set-2/snow_showers_snow.png)
[<img src="sets/set-2/heavy_snow.png" width="64"/>](sets/set-2/heavy_snow.png)
[<img src="sets/set-2/wintry_mix_rain_snow.png" width="64"/>](sets/set-2/wintry_mix_rain_snow.png)
[<img src="sets/set-2/sleet_hail.png" width="64"/>](sets/set-2/sleet_hail.png)
[<img src="sets/set-2/strong_tstorms.png" width="64"/>](sets/set-2/strong_tstorms.png)
[<img src="sets/set-2/haze_fog_dust_smoke.png" width="64"/>](sets/set-2/haze_fog_dust_smoke.png)
[<img src="sets/set-2/blowing_snow.png" width="64"/>](sets/set-2/blowing_snow.png)
[<img src="sets/set-2/blizzard.png" width="64"/>](sets/set-2/blizzard.png)
[<img src="sets/set-2/tornado.png" width="64"/>](sets/set-2/tornado.png)
### Misc
[<img src="v3/arrow.svg" width="64"/>](v3/arrow.svg)
[<img src="v3/arrow_2.svg" width="64"/>](v3/arrow_2.svg)
[<img src="v3/arrow_3.svg" width="64"/>](v3/arrow_3.svg)
[<img src="v3/arrow_4.svg" width="64"/>](v3/arrow_4.svg)
[<img src="v3/arrow_5.svg" width="64"/>](v3/arrow_5.svg)
### set-3 — Google Maps Weather
32x32 flat colored SVGs from the [Google Maps Weather API](https://developers.google.com/maps/documentation/weather/weather-condition-icons). Light and dark theme variants.
[<img src="v3/droplet_clear.svg" width="64"/>](v3/droplet_clear.svg)
[<img src="v3/droplet_drizzle.svg" width="64"/>](v3/droplet_drizzle.svg)
[<img src="v3/droplet_light.svg" width="64"/>](v3/droplet_light.svg)
[<img src="v3/droplet_moderate.svg" width="64"/>](v3/droplet_moderate.svg)
[<img src="v3/droplet_heavy.svg" width="64"/>](v3/droplet_heavy.svg)
#### Light
[<img src="sets/set-3/light/sunny.svg" width="64"/>](sets/set-3/light/sunny.svg)
[<img src="sets/set-3/light/mostly_sunny.svg" width="64"/>](sets/set-3/light/mostly_sunny.svg)
[<img src="sets/set-3/light/partly_cloudy.svg" width="64"/>](sets/set-3/light/partly_cloudy.svg)
[<img src="sets/set-3/light/mostly_cloudy.svg" width="64"/>](sets/set-3/light/mostly_cloudy.svg)
[<img src="sets/set-3/light/cloudy.svg" width="64"/>](sets/set-3/light/cloudy.svg)
[<img src="sets/set-3/light/clear.svg" width="64"/>](sets/set-3/light/clear.svg)
[<img src="sets/set-3/light/partly_clear.svg" width="64"/>](sets/set-3/light/partly_clear.svg)
[<img src="sets/set-3/light/mostly_clear.svg" width="64"/>](sets/set-3/light/mostly_clear.svg)
[<img src="sets/set-3/light/mostly_cloudy_night.svg" width="64"/>](sets/set-3/light/mostly_cloudy_night.svg)
[<img src="sets/set-3/light/drizzle.svg" width="64"/>](sets/set-3/light/drizzle.svg)
[<img src="sets/set-3/light/showers.svg" width="64"/>](sets/set-3/light/showers.svg)
[<img src="sets/set-3/light/scattered_showers.svg" width="64"/>](sets/set-3/light/scattered_showers.svg)
[<img src="sets/set-3/light/heavy.svg" width="64"/>](sets/set-3/light/heavy.svg)
[<img src="sets/set-3/light/flurries.svg" width="64"/>](sets/set-3/light/flurries.svg)
[<img src="sets/set-3/light/snow_showers.svg" width="64"/>](sets/set-3/light/snow_showers.svg)
[<img src="sets/set-3/light/scattered_snow.svg" width="64"/>](sets/set-3/light/scattered_snow.svg)
[<img src="sets/set-3/light/heavy_snow.svg" width="64"/>](sets/set-3/light/heavy_snow.svg)
[<img src="sets/set-3/light/blowing_snow.svg" width="64"/>](sets/set-3/light/blowing_snow.svg)
[<img src="sets/set-3/light/blizzard.svg" width="64"/>](sets/set-3/light/blizzard.svg)
[<img src="sets/set-3/light/wintry_mix.svg" width="64"/>](sets/set-3/light/wintry_mix.svg)
[<img src="sets/set-3/light/sleet_hail.svg" width="64"/>](sets/set-3/light/sleet_hail.svg)
[<img src="sets/set-3/light/icy.svg" width="64"/>](sets/set-3/light/icy.svg)
[<img src="sets/set-3/light/isolated_tstorms.svg" width="64"/>](sets/set-3/light/isolated_tstorms.svg)
[<img src="sets/set-3/light/strong_tstorms.svg" width="64"/>](sets/set-3/light/strong_tstorms.svg)
[<img src="sets/set-3/light/tornado.svg" width="64"/>](sets/set-3/light/tornado.svg)
[<img src="sets/set-3/light/windy_breezy.svg" width="64"/>](sets/set-3/light/windy_breezy.svg)
[<img src="sets/set-3/light/very_cold.svg" width="64"/>](sets/set-3/light/very_cold.svg)
[<img src="sets/set-3/light/fog.svg" width="64"/>](sets/set-3/light/fog.svg)
[<img src="sets/set-3/light/mist.svg" width="64"/>](sets/set-3/light/mist.svg)
[<img src="sets/set-3/light/dust.svg" width="64"/>](sets/set-3/light/dust.svg)
[<img src="sets/set-3/light/smoke.svg" width="64"/>](sets/set-3/light/smoke.svg)
## v4
### Day
[<img src="v4/clear_day.svg" width="64"/>](v4/clear_day.svg)
[<img src="v4/mostly_clear_day.svg" width="64"/>](v4/mostly_clear_day.svg)
[<img src="v4/partly_cloudy_day.svg" width="64"/>](v4/partly_cloudy_day.svg)
[<img src="v4/mostly_cloudy_day.svg" width="64"/>](v4/mostly_cloudy_day.svg)
[<img src="v4/scattered_snow_showers_day.svg" width="64"/>](v4/scattered_snow_showers_day.svg)
[<img src="v4/scattered_showers_day.svg" width="64"/>](v4/scattered_showers_day.svg)
[<img src="v4/isolated_scattered_thunderstorms_day.svg" width="64"/>](v4/isolated_scattered_thunderstorms_day.svg)
[<img src="v4/very_hot.svg" width="64"/>](v4/very_hot.svg)
### Night
[<img src="v4/clear_night.svg" width="64"/>](v4/clear_night.svg)
[<img src="v4/mostly_clear_night.svg" width="64"/>](v4/mostly_clear_night.svg)
[<img src="v4/partly_cloudy_night.svg" width="64"/>](v4/partly_cloudy_night.svg)
[<img src="v4/mostly_cloudy_night.svg" width="64"/>](v4/mostly_cloudy_night.svg)
[<img src="v4/scattered_snow_showers_night.svg" width="64"/>](v4/scattered_snow_showers_night.svg)
[<img src="v4/scattered_showers_night.svg" width="64"/>](v4/scattered_showers_night.svg)
[<img src="v4/isolated_scattered_thunderstorms_night.svg" width="64"/>](v4/isolated_scattered_thunderstorms_night.svg)
### General
[<img src="v4/cloudy.svg" width="64"/>](v4/cloudy.svg)
[<img src="v4/drizzle.svg" width="64"/>](v4/drizzle.svg)
[<img src="v4/showers_rain.svg" width="64"/>](v4/showers_rain.svg)
[<img src="v4/heavy_rain.svg" width="64"/>](v4/heavy_rain.svg)
[<img src="v4/flurries.svg" width="64"/>](v4/flurries.svg)
[<img src="v4/showers_snow.svg" width="64"/>](v4/showers_snow.svg)
[<img src="v4/heavy_snow.svg" width="64"/>](v4/heavy_snow.svg)
[<img src="v4/mixed_rain_snow.svg" width="64"/>](v4/mixed_rain_snow.svg)
[<img src="v4/mixed_rain_hail_sleet.svg" width="64"/>](v4/mixed_rain_hail_sleet.svg)
[<img src="v4/sleet_hail.svg" width="64"/>](v4/sleet_hail.svg)
[<img src="v4/strong_thunderstorms.svg" width="64"/>](v4/strong_thunderstorms.svg)
[<img src="v4/isolated_thunderstorms.svg" width="64"/>](v4/isolated_thunderstorms.svg)
[<img src="v4/icy.svg" width="64"/>](v4/icy.svg)
[<img src="v4/tropical_storm_hurricane.svg" width="64"/>](v4/tropical_storm_hurricane.svg)
[<img src="v4/haze_fog_dust_smoke.svg" width="64"/>](v4/haze_fog_dust_smoke.svg)
[<img src="v4/windy.svg" width="64"/>](v4/windy.svg)
[<img src="v4/blowing_snow.svg" width="64"/>](v4/blowing_snow.svg)
[<img src="v4/blizzard.svg" alt="drawing" width="64"/>](v4/blizzard.svg)
[<img src="v4/tornado.svg" width="64"/>](v4/tornado.svg)
[<img src="v4/very_cold.svg" width="64"/>](v4/very_cold.svg)
[<img src="v4/umbrella.svg" width="64"/>](v4/umbrella.svg)
### Japanese Regional (Thanks to [@NikSavchenk0](https://github.com/mrdarrengriffin/google-weather-icons/issues/3))
[<img src="v4/cloudy_with_rain_dark.svg" width="64"/>](v4/cloudy_with_rain_dark.svg)
[<img src="v4/cloudy_with_rain_light.svg" width="64"/>](v4/cloudy_with_rain_light.svg)
[<img src="v4/cloudy_with_snow_dark.svg" width="64"/>](v4/cloudy_with_snow_dark.svg)
[<img src="v4/cloudy_with_snow_light.svg" width="64"/>](v4/cloudy_with_snow_light.svg)
[<img src="v4/cloudy_with_sunny_dark.svg" width="64"/>](v4/cloudy_with_sunny_dark.svg)
[<img src="v4/cloudy_with_sunny_light.svg" width="64"/>](v4/cloudy_with_sunny_light.svg)
[<img src="v4/rain_with_cloudy_dark.svg" width="64"/>](v4/rain_with_cloudy_dark.svg)
[<img src="v4/rain_with_cloudy_light.svg" width="64"/>](v4/rain_with_cloudy_light.svg)
[<img src="v4/rain_with_snow_dark.svg" width="64"/>](v4/rain_with_snow_dark.svg)
[<img src="v4/rain_with_snow_light.svg" width="64"/>](v4/rain_with_snow_light.svg)
[<img src="v4/rain_with_sunny_dark.svg" width="64"/>](v4/rain_with_sunny_dark.svg)
[<img src="v4/rain_with_sunny_light.svg" width="64"/>](v4/rain_with_sunny_light.svg)
[<img src="v4/snow_with_cloudy_dark.svg" width="64"/>](v4/snow_with_cloudy_dark.svg)
[<img src="v4/snow_with_cloudy_light.svg" width="64"/>](v4/snow_with_cloudy_light.svg)
[<img src="v4/snow_with_rain_dark.svg" width="64"/>](v4/snow_with_rain_dark.svg)
[<img src="v4/snow_with_rain_light.svg" width="64"/>](v4/snow_with_rain_light.svg)
[<img src="v4/snow_with_sunny_dark.svg" width="64"/>](v4/snow_with_sunny_dark.svg)
[<img src="v4/snow_with_sunny_light.svg" width="64"/>](v4/snow_with_sunny_light.svg)
[<img src="v4/sunny_with_cloudy_dark.svg" width="64"/>](v4/sunny_with_cloudy_dark.svg)
[<img src="v4/sunny_with_cloudy_light.svg" width="64"/>](v4/sunny_with_cloudy_light.svg)
[<img src="v4/sunny_with_rain_dark.svg" width="64"/>](v4/sunny_with_rain_dark.svg)
[<img src="v4/sunny_with_rain_light.svg" width="64"/>](v4/sunny_with_rain_light.svg)
[<img src="v4/sunny_with_snow_dark.svg" width="64"/>](v4/sunny_with_snow_dark.svg)
[<img src="v4/sunny_with_snow_light.svg" width="64"/>](v4/sunny_with_snow_light.svg)
#### Night Alternatives
Custom moon variants with a more realistic gradient (replaces Google's yellow moon).
# TODO
- [x] Add custom night icons for v3
- [ ] Add JSON file to map icon names to icon files and to easily switch variants
[<img src="sets/set-3/light/clear_alt.svg" width="64"/>](sets/set-3/light/clear_alt.svg)
[<img src="sets/set-3/light/partly_clear_alt.svg" width="64"/>](sets/set-3/light/partly_clear_alt.svg)
[<img src="sets/set-3/light/mostly_clear_alt.svg" width="64"/>](sets/set-3/light/mostly_clear_alt.svg)
[<img src="sets/set-3/light/mostly_cloudy_night_alt.svg" width="64"/>](sets/set-3/light/mostly_cloudy_night_alt.svg)
#### Misc
[<img src="sets/set-3/light/arrow.svg" width="64"/>](sets/set-3/light/arrow.svg)
[<img src="sets/set-3/light/arrow_2.svg" width="64"/>](sets/set-3/light/arrow_2.svg)
[<img src="sets/set-3/light/arrow_3.svg" width="64"/>](sets/set-3/light/arrow_3.svg)
[<img src="sets/set-3/light/arrow_4.svg" width="64"/>](sets/set-3/light/arrow_4.svg)
[<img src="sets/set-3/light/arrow_5.svg" width="64"/>](sets/set-3/light/arrow_5.svg)
[<img src="sets/set-3/light/droplet_clear.svg" width="64"/>](sets/set-3/light/droplet_clear.svg)
[<img src="sets/set-3/light/droplet_drizzle.svg" width="64"/>](sets/set-3/light/droplet_drizzle.svg)
[<img src="sets/set-3/light/droplet_light.svg" width="64"/>](sets/set-3/light/droplet_light.svg)
[<img src="sets/set-3/light/droplet_moderate.svg" width="64"/>](sets/set-3/light/droplet_moderate.svg)
[<img src="sets/set-3/light/droplet_heavy.svg" width="64"/>](sets/set-3/light/droplet_heavy.svg)
#### Dark
[<img src="sets/set-3/dark/sunny.svg" width="64"/>](sets/set-3/dark/sunny.svg)
[<img src="sets/set-3/dark/mostly_sunny.svg" width="64"/>](sets/set-3/dark/mostly_sunny.svg)
[<img src="sets/set-3/dark/partly_cloudy.svg" width="64"/>](sets/set-3/dark/partly_cloudy.svg)
[<img src="sets/set-3/dark/mostly_cloudy.svg" width="64"/>](sets/set-3/dark/mostly_cloudy.svg)
[<img src="sets/set-3/dark/cloudy.svg" width="64"/>](sets/set-3/dark/cloudy.svg)
[<img src="sets/set-3/dark/clear.svg" width="64"/>](sets/set-3/dark/clear.svg)
[<img src="sets/set-3/dark/partly_clear.svg" width="64"/>](sets/set-3/dark/partly_clear.svg)
[<img src="sets/set-3/dark/mostly_clear.svg" width="64"/>](sets/set-3/dark/mostly_clear.svg)
[<img src="sets/set-3/dark/mostly_cloudy_night.svg" width="64"/>](sets/set-3/dark/mostly_cloudy_night.svg)
[<img src="sets/set-3/dark/drizzle.svg" width="64"/>](sets/set-3/dark/drizzle.svg)
[<img src="sets/set-3/dark/showers.svg" width="64"/>](sets/set-3/dark/showers.svg)
[<img src="sets/set-3/dark/scattered_showers.svg" width="64"/>](sets/set-3/dark/scattered_showers.svg)
[<img src="sets/set-3/dark/heavy.svg" width="64"/>](sets/set-3/dark/heavy.svg)
[<img src="sets/set-3/dark/flurries.svg" width="64"/>](sets/set-3/dark/flurries.svg)
[<img src="sets/set-3/dark/snow_showers.svg" width="64"/>](sets/set-3/dark/snow_showers.svg)
[<img src="sets/set-3/dark/scattered_snow.svg" width="64"/>](sets/set-3/dark/scattered_snow.svg)
[<img src="sets/set-3/dark/heavy_snow.svg" width="64"/>](sets/set-3/dark/heavy_snow.svg)
[<img src="sets/set-3/dark/blowing_snow.svg" width="64"/>](sets/set-3/dark/blowing_snow.svg)
[<img src="sets/set-3/dark/blizzard.svg" width="64"/>](sets/set-3/dark/blizzard.svg)
[<img src="sets/set-3/dark/wintry_mix.svg" width="64"/>](sets/set-3/dark/wintry_mix.svg)
[<img src="sets/set-3/dark/sleet_hail.svg" width="64"/>](sets/set-3/dark/sleet_hail.svg)
[<img src="sets/set-3/dark/icy.svg" width="64"/>](sets/set-3/dark/icy.svg)
[<img src="sets/set-3/dark/isolated_tstorms.svg" width="64"/>](sets/set-3/dark/isolated_tstorms.svg)
[<img src="sets/set-3/dark/strong_tstorms.svg" width="64"/>](sets/set-3/dark/strong_tstorms.svg)
[<img src="sets/set-3/dark/tornado.svg" width="64"/>](sets/set-3/dark/tornado.svg)
[<img src="sets/set-3/dark/windy_breezy.svg" width="64"/>](sets/set-3/dark/windy_breezy.svg)
[<img src="sets/set-3/dark/very_cold.svg" width="64"/>](sets/set-3/dark/very_cold.svg)
[<img src="sets/set-3/dark/mist.svg" width="64"/>](sets/set-3/dark/mist.svg)
[<img src="sets/set-3/dark/dust.svg" width="64"/>](sets/set-3/dark/dust.svg)
[<img src="sets/set-3/dark/smoke.svg" width="64"/>](sets/set-3/dark/smoke.svg)
### set-4 — Google Weather (Filled)
48x48 gradient-filled SVGs with rich colors. Includes Japanese regional weather icons contributed by [@NikSavchenk0](https://github.com/mrdarrengriffin/google-weather-icons/issues/3).
#### Day
[<img src="sets/set-4/light/clear_day.svg" width="64"/>](sets/set-4/light/clear_day.svg)
[<img src="sets/set-4/light/mostly_clear_day.svg" width="64"/>](sets/set-4/light/mostly_clear_day.svg)
[<img src="sets/set-4/light/partly_cloudy_day.svg" width="64"/>](sets/set-4/light/partly_cloudy_day.svg)
[<img src="sets/set-4/light/mostly_cloudy_day.svg" width="64"/>](sets/set-4/light/mostly_cloudy_day.svg)
[<img src="sets/set-4/light/scattered_showers_day.svg" width="64"/>](sets/set-4/light/scattered_showers_day.svg)
[<img src="sets/set-4/light/scattered_snow_showers_day.svg" width="64"/>](sets/set-4/light/scattered_snow_showers_day.svg)
[<img src="sets/set-4/light/isolated_scattered_thunderstorms_day.svg" width="64"/>](sets/set-4/light/isolated_scattered_thunderstorms_day.svg)
[<img src="sets/set-4/light/very_hot.svg" width="64"/>](sets/set-4/light/very_hot.svg)
#### Night
[<img src="sets/set-4/light/clear_night.svg" width="64"/>](sets/set-4/light/clear_night.svg)
[<img src="sets/set-4/light/mostly_clear_night.svg" width="64"/>](sets/set-4/light/mostly_clear_night.svg)
[<img src="sets/set-4/light/partly_cloudy_night.svg" width="64"/>](sets/set-4/light/partly_cloudy_night.svg)
[<img src="sets/set-4/light/mostly_cloudy_night.svg" width="64"/>](sets/set-4/light/mostly_cloudy_night.svg)
[<img src="sets/set-4/light/scattered_showers_night.svg" width="64"/>](sets/set-4/light/scattered_showers_night.svg)
[<img src="sets/set-4/light/scattered_snow_showers_night.svg" width="64"/>](sets/set-4/light/scattered_snow_showers_night.svg)
[<img src="sets/set-4/light/isolated_scattered_thunderstorms_night.svg" width="64"/>](sets/set-4/light/isolated_scattered_thunderstorms_night.svg)
#### General
[<img src="sets/set-4/light/cloudy.svg" width="64"/>](sets/set-4/light/cloudy.svg)
[<img src="sets/set-4/light/drizzle.svg" width="64"/>](sets/set-4/light/drizzle.svg)
[<img src="sets/set-4/light/showers_rain.svg" width="64"/>](sets/set-4/light/showers_rain.svg)
[<img src="sets/set-4/light/heavy_rain.svg" width="64"/>](sets/set-4/light/heavy_rain.svg)
[<img src="sets/set-4/light/flurries.svg" width="64"/>](sets/set-4/light/flurries.svg)
[<img src="sets/set-4/light/showers_snow.svg" width="64"/>](sets/set-4/light/showers_snow.svg)
[<img src="sets/set-4/light/heavy_snow.svg" width="64"/>](sets/set-4/light/heavy_snow.svg)
[<img src="sets/set-4/light/mixed_rain_snow.svg" width="64"/>](sets/set-4/light/mixed_rain_snow.svg)
[<img src="sets/set-4/light/mixed_rain_hail_sleet.svg" width="64"/>](sets/set-4/light/mixed_rain_hail_sleet.svg)
[<img src="sets/set-4/light/sleet_hail.svg" width="64"/>](sets/set-4/light/sleet_hail.svg)
[<img src="sets/set-4/light/strong_thunderstorms.svg" width="64"/>](sets/set-4/light/strong_thunderstorms.svg)
[<img src="sets/set-4/light/isolated_thunderstorms.svg" width="64"/>](sets/set-4/light/isolated_thunderstorms.svg)
[<img src="sets/set-4/light/icy.svg" width="64"/>](sets/set-4/light/icy.svg)
[<img src="sets/set-4/light/tropical_storm_hurricane.svg" width="64"/>](sets/set-4/light/tropical_storm_hurricane.svg)
[<img src="sets/set-4/light/haze_fog_dust_smoke.svg" width="64"/>](sets/set-4/light/haze_fog_dust_smoke.svg)
[<img src="sets/set-4/light/windy.svg" width="64"/>](sets/set-4/light/windy.svg)
[<img src="sets/set-4/light/blowing_snow.svg" width="64"/>](sets/set-4/light/blowing_snow.svg)
[<img src="sets/set-4/light/blizzard.svg" width="64"/>](sets/set-4/light/blizzard.svg)
[<img src="sets/set-4/light/tornado.svg" width="64"/>](sets/set-4/light/tornado.svg)
[<img src="sets/set-4/light/very_cold.svg" width="64"/>](sets/set-4/light/very_cold.svg)
[<img src="sets/set-4/light/umbrella.svg" width="64"/>](sets/set-4/light/umbrella.svg)
#### Japanese Regional
Thanks to [@NikSavchenk0](https://github.com/mrdarrengriffin/google-weather-icons/issues/3).
[<img src="sets/set-4/light/cloudy_with_rain.svg" width="64"/>](sets/set-4/light/cloudy_with_rain.svg)
[<img src="sets/set-4/light/cloudy_with_snow.svg" width="64"/>](sets/set-4/light/cloudy_with_snow.svg)
[<img src="sets/set-4/light/cloudy_with_sunny.svg" width="64"/>](sets/set-4/light/cloudy_with_sunny.svg)
[<img src="sets/set-4/light/rain_with_cloudy.svg" width="64"/>](sets/set-4/light/rain_with_cloudy.svg)
[<img src="sets/set-4/light/rain_with_snow.svg" width="64"/>](sets/set-4/light/rain_with_snow.svg)
[<img src="sets/set-4/light/rain_with_sunny.svg" width="64"/>](sets/set-4/light/rain_with_sunny.svg)
[<img src="sets/set-4/light/snow_with_cloudy.svg" width="64"/>](sets/set-4/light/snow_with_cloudy.svg)
[<img src="sets/set-4/light/snow_with_rain.svg" width="64"/>](sets/set-4/light/snow_with_rain.svg)
[<img src="sets/set-4/light/snow_with_sunny.svg" width="64"/>](sets/set-4/light/snow_with_sunny.svg)
[<img src="sets/set-4/light/sunny_with_cloudy.svg" width="64"/>](sets/set-4/light/sunny_with_cloudy.svg)
[<img src="sets/set-4/light/sunny_with_rain.svg" width="64"/>](sets/set-4/light/sunny_with_rain.svg)
[<img src="sets/set-4/light/sunny_with_snow.svg" width="64"/>](sets/set-4/light/sunny_with_snow.svg)
### set-5 — Google Weather (Outlined)
48x48 outlined/stroked SVGs with minimal fills. A cleaner, more modern style.
[<img src="sets/set-5/light/sunny.svg" width="64"/>](sets/set-5/light/sunny.svg)
[<img src="sets/set-5/light/mostly_sunny.svg" width="64"/>](sets/set-5/light/mostly_sunny.svg)
[<img src="sets/set-5/light/partly_cloudy.svg" width="64"/>](sets/set-5/light/partly_cloudy.svg)
[<img src="sets/set-5/light/cloudy.svg" width="64"/>](sets/set-5/light/cloudy.svg)
[<img src="sets/set-5/light/clear_night.svg" width="64"/>](sets/set-5/light/clear_night.svg)
[<img src="sets/set-5/light/mostly_clear_night.svg" width="64"/>](sets/set-5/light/mostly_clear_night.svg)
[<img src="sets/set-5/light/partly_cloudy_night.svg" width="64"/>](sets/set-5/light/partly_cloudy_night.svg)
[<img src="sets/set-5/light/mostly_cloudy_night.svg" width="64"/>](sets/set-5/light/mostly_cloudy_night.svg)
[<img src="sets/set-5/light/drizzle.svg" width="64"/>](sets/set-5/light/drizzle.svg)
[<img src="sets/set-5/light/heavy_rain.svg" width="64"/>](sets/set-5/light/heavy_rain.svg)
[<img src="sets/set-5/light/flurries.svg" width="64"/>](sets/set-5/light/flurries.svg)
[<img src="sets/set-5/light/snow_showers.svg" width="64"/>](sets/set-5/light/snow_showers.svg)
[<img src="sets/set-5/light/heavy_snow.svg" width="64"/>](sets/set-5/light/heavy_snow.svg)
[<img src="sets/set-5/light/blowing_snow.svg" width="64"/>](sets/set-5/light/blowing_snow.svg)
[<img src="sets/set-5/light/blizzard.svg" width="64"/>](sets/set-5/light/blizzard.svg)
[<img src="sets/set-5/light/wintry_mix.svg" width="64"/>](sets/set-5/light/wintry_mix.svg)
[<img src="sets/set-5/light/sleet_hail.svg" width="64"/>](sets/set-5/light/sleet_hail.svg)
[<img src="sets/set-5/light/icy.svg" width="64"/>](sets/set-5/light/icy.svg)
[<img src="sets/set-5/light/thunderstorms.svg" width="64"/>](sets/set-5/light/thunderstorms.svg)
[<img src="sets/set-5/light/strong_thunderstorms.svg" width="64"/>](sets/set-5/light/strong_thunderstorms.svg)
[<img src="sets/set-5/light/hurricane.svg" width="64"/>](sets/set-5/light/hurricane.svg)
[<img src="sets/set-5/light/tornado.svg" width="64"/>](sets/set-5/light/tornado.svg)
[<img src="sets/set-5/light/windy.svg" width="64"/>](sets/set-5/light/windy.svg)
### set-6 — Google Weather (Outlined + Gradient)
48x48 outlined SVGs with gradient fills. The newest icon style.
[<img src="sets/set-6/light/sunny.svg" width="64"/>](sets/set-6/light/sunny.svg)
[<img src="sets/set-6/light/mostly_sunny.svg" width="64"/>](sets/set-6/light/mostly_sunny.svg)
[<img src="sets/set-6/light/partly_cloudy.svg" width="64"/>](sets/set-6/light/partly_cloudy.svg)
[<img src="sets/set-6/light/cloudy.svg" width="64"/>](sets/set-6/light/cloudy.svg)
[<img src="sets/set-6/light/clear_night.svg" width="64"/>](sets/set-6/light/clear_night.svg)
[<img src="sets/set-6/light/mostly_clear_night.svg" width="64"/>](sets/set-6/light/mostly_clear_night.svg)
[<img src="sets/set-6/light/partly_cloudy_night.svg" width="64"/>](sets/set-6/light/partly_cloudy_night.svg)
[<img src="sets/set-6/light/mostly_cloudy_night.svg" width="64"/>](sets/set-6/light/mostly_cloudy_night.svg)
[<img src="sets/set-6/light/drizzle.svg" width="64"/>](sets/set-6/light/drizzle.svg)
[<img src="sets/set-6/light/heavy_rain.svg" width="64"/>](sets/set-6/light/heavy_rain.svg)
[<img src="sets/set-6/light/flurries.svg" width="64"/>](sets/set-6/light/flurries.svg)
[<img src="sets/set-6/light/heavy_snow.svg" width="64"/>](sets/set-6/light/heavy_snow.svg)
[<img src="sets/set-6/light/blowing_snow.svg" width="64"/>](sets/set-6/light/blowing_snow.svg)
[<img src="sets/set-6/light/wintry_mix.svg" width="64"/>](sets/set-6/light/wintry_mix.svg)
[<img src="sets/set-6/light/sleet_hail.svg" width="64"/>](sets/set-6/light/sleet_hail.svg)
[<img src="sets/set-6/light/icy.svg" width="64"/>](sets/set-6/light/icy.svg)
[<img src="sets/set-6/light/strong_thunderstorms.svg" width="64"/>](sets/set-6/light/strong_thunderstorms.svg)
[<img src="sets/set-6/light/hurricane.svg" width="64"/>](sets/set-6/light/hurricane.svg)
[<img src="sets/set-6/light/tornado.svg" width="64"/>](sets/set-6/light/tornado.svg)
[<img src="sets/set-6/light/windy.svg" width="64"/>](sets/set-6/light/windy.svg)
[<img src="sets/set-6/light/very_cold.svg" width="64"/>](sets/set-6/light/very_cold.svg)
[<img src="sets/set-6/light/very_hot.svg" width="64"/>](sets/set-6/light/very_hot.svg)
### Lottie — Weather Background Animations
Lottie JSON animations extracted from the Pixel Weather app (`com.google.android.apps.weather`). These are the animated backgrounds shown behind weather conditions.
Available in 8 variants: phone/tablet, portrait/landscape, day/night.
## Recommended Set
**set-4** has the best coverage (72% of all conditions) and is the only set with Japanese regional icons. If you need a single set to cover most use cases, start there.
## icons.json
The `icons.json` file maps weather conditions to their corresponding icon files across all sets. Each condition includes:
- **`label`** — Human-readable name
- **`aliases`** — Alternative condition names used across different Google products (useful for mapping API responses)
- **`has_day_night`** — Whether the condition has separate day and night icons
- **`region`** — If the icon is region-specific (e.g. `"japan"`)
- **`sets`** — Which sets contain this icon, with filenames for each variant (`day`, `night`, or `default`)
Each set definition includes a **`path_template`** so you can construct full file paths:
```js
const icons = require('./icons.json');
// Get the clear/sunny icon from set-4
const condition = icons.conditions.clear;
const set = icons.sets['set-4'];
const file = condition.sets['set-4'].day; // 'clear_day.svg'
const path = set.path_template
.replace('{theme}', 'light')
.replace('{filename}', file);
// 'sets/set-4/light/clear_day.svg'
// Find all sets that have a tornado icon
const tornado = icons.conditions.tornado;
Object.keys(tornado.sets); // ['set-2', 'set-3', 'set-4', 'set-5', 'set-6']
// Look up a condition by alias
const byAlias = Object.entries(icons.conditions)
.find(([_, c]) => c.aliases?.includes('sunny'));
// ['clear', { label: 'Clear Sky', ... }]
```
> **Note:** Because different Google products use different naming conventions (e.g. `sunny` vs `clear_day`, `strong_tstorms` vs `strong_thunderstorms`), filenames vary between sets. Always use `icons.json` rather than assuming filenames.
## Sources
| Set | Source | Format |
|-----|--------|--------|
| set-1 | Google Search | PNG |
| set-2 | Google Search | PNG |
| set-3 | [Google Maps Weather API](https://developers.google.com/maps/documentation/weather/weather-condition-icons) (`maps.gstatic.com/weather/v1/`) | SVG 32x32 |
| set-4 | Google Weather (`www.gstatic.com/weather/conditions/v1/svg/`) | SVG 48x48 |
| set-5 | Google Weather (`www.gstatic.com/weather/conditions/v2/svg/`) | SVG 48x48 |
| set-6 | Google Weather (`www.gstatic.com/weather/conditions/v3/svg/`) | SVG 48x48 |
| lottie | Google Weather APK | Lottie JSON |
## License
All icons are the property of Google. This repository is for reference and educational purposes.
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=mrdarrengriffin/google-weather-icons&type=Date&theme=dark" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=mrdarrengriffin/google-weather-icons&type=Date" />
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=mrdarrengriffin/google-weather-icons&type=Date" />
</picture>