kennethnym/google-weather-icons
1
0
Fork 0
mirror of https://github.com/mrdarrengriffin/google-weather-icons.git synced 2026-03-20 02:01:18 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
v2.0
google-weather-icons/README.md
Darren Griffin fb1e33de55 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.
2026-03-13 12:24:56 +00:00

376 lines
26 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Google Weather Icons
> **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.
## Structure
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.
```
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/
```
## Sets
### set-1 — Google Search (Original)
The original weather icons from Google Search. PNG format, day variants only.
#### 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)
#### 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)
### set-2 — Google Search (Updated)
Updated icons from Google Search with more weather conditions and day/night variants. PNG format.
#### 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)
#### 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="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)
### 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.
#### 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)
#### Night Alternatives
Custom moon variants with a more realistic gradient (replaces Google's yellow moon).
[<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>
Reference in New Issue View Git Blame Copy Permalink