Edit

Icons Info

QWeather Icons && Fonts is a beautiful weather icon and weather icon font in SVG format for easy embedding in websites or APPs. QWeather Icons is open source project and you can use it for any project or redesign these icons for free.

图标截图

Download and Usage

You can download and install QWeather Icons in many ways, including npm, CDN or direct download.

QWeather Icons is in SVG format and supports svg and img tags, icon fonts or css styles, you can freely control the size, style and color of QWeather Icons.

Go to QWeather Icons for more information and browse the full icons.

Source Code 

git clone https://github.com/qwd/Icons.git

Or visit our Github repo for source code of QWeather Icons, if you get some bug, feel free to submit an issue or PR.

Icon Code

Please note: icons and icon codes are constantly being updated, including additions, modifications and deletions, you have to make sure that your program is compatible so that these changes do not cause errors!

Weather icons

Some weather conditions will return different icons depending on day and night. For example: sunny day will response 100 (which is a sun icon) and clear night will response 150 (which is a moon icon).

Icon code Weather Day Night
100 Sunny ✅ ❌
101 Cloudy ✅ ❌
102 Few Clouds ✅ ❌
103 Partly Cloudy ✅ ❌
104 Overcast ✅ ✅
150 Clear ❌ ✅
151 Cloudy ❌ ✅
152 Few Clouds ❌ ✅
153 Partly Cloudy ❌ ✅
300 Shower Rain ✅ ❌
301 Heavy Shower Rain ✅ ❌
302 Thundershower ✅ ✅
303 Heavy Thunderstorm ✅ ✅
304 Hail ✅ ✅
305 Light Rain ✅ ✅
306 Moderate Rain ✅ ✅
307 Heavy Rain ✅ ✅
308 Extreme Rain ✅ ✅
309 Drizzle Rain ✅ ✅
310 Rainstorm ✅ ✅
311 Heavy Rainstorm ✅ ✅
312 Severe Rainstorm ✅ ✅
313 Freezing Rain ✅ ✅
314 Light to Moderate Rain ✅ ✅
315 Moderate to Heavy Rain ✅ ✅
316 Heavy Rain to Rainstorm ✅ ✅
317 Rainstorm to Heavy Rainstorm ✅ ✅
318 Heavy to Severe Rainstorm ✅ ✅
350 Shower Rain ❌ ✅
351 Heavy Shower Rain ❌ ✅
399 Rain ✅ ✅
400 Light Snow ✅ ✅
401 Moderate Snow ✅ ✅
402 Heavy Snow ✅ ✅
403 Snowstorm ✅ ✅
404 Sleet ✅ ✅
405 Rain and Snow ✅ ✅
406 Shower Rain and Snow ✅ ❌
407 Snow Flurry ✅ ❌
408 Light to Moderate Snow ✅ ✅
409 Moderate to Heavy Snow ✅ ✅
410 Heavy Snow to Snowstorm ✅ ✅
456 Shower Rain and Snow ❌ ✅
457 Snow Flurry ❌ ✅
499 Snow ✅ ✅
500 Mist ✅ ✅
501 Fog ✅ ✅
502 Haze ✅ ✅
503 Sand ✅ ✅
504 Dust ✅ ✅
507 Duststorm ✅ ✅
508 Sandstorm ✅ ✅
509 Dense Fog ✅ ✅
510 Strong Fog ✅ ✅
511 Moderate Haze ✅ ✅
512 Heavy Haze ✅ ✅
513 Severe Haze ✅ ✅
514 Heavy Fog ✅ ✅
515 Extra Heavy Fog ✅ ✅
900 Hot ✅ ✅
901 Cold ✅ ✅
999 Unknown ✅ ✅

Moon phase icons

The Moon phase icon will automatically adapt to the Moon phase style in the northern and southern hemispheres. For example, the Moon phase is First quarter, then API response will be 802 in the northern hemisphere and 806 in the southern hemisphere.

Learn more about Moon phase.

Icon code Moon Phase(Northern hemisphere) Moon Phase(Southern hemisphere)
800 New-moon New-moon
801 Waxing crescent Waning crescent
802 First quarter Last quarter
803 Waxing gibbous Waning gibbous
804 Full-moon Full-moon
805 Waning gibbous Waxing gibbous
806 Last quarter First quarter
807 Waning crescent Waxing crescent

Weather warning icons

Weather warning icons corresponds to warning.type, refer to Warning type for the currently supported warning.type.

Copyright QWeather

Code for MIT

Icons for CC BY 4.0

Previous versions

Previous versions no longer provide any updates and may not match the current latest weather icon code

QWeather Icons was formerly known as the Weather Icons project. This project provides two sets of icons in PNG format, including color and monochrome versions. If you tend to use this older version, please visit the Weather Icons repository for download.