Add icons to graphically represent each `weather_code`

[Leftium]

Open-Meteo's weather_code can have many different values: 28 different weather conditions represented as WMO Weather (WW) interpretation codes. It would be nice to have graphical icons to represent each code that could be freely used like the Open-Meteo API itself. Most applications that consume the Open-Meteo API will not show the raw code, but rather either a graphical and/or textual representation of that code.

Open-Meteo itself could use these icons in its preview chart in the API documentation. Although increasing WMO code indicates increasing severity, icons would be more readable than a line graph for daily weather conditions:

There are many weather forecast icon sets available, but most have one or more of the following problems:

• Not all 28 conditions have a unique representation; multiple, different weather conditions must be presented by a single icon.
• (Relative) weather conditions not depicted in a useful way.
• Not aesthetically pleasing.
• Not freely available for use.

---

Until a custom weather icon set for Open-Meteo is available, here is a list of the top candidates I have found:

Open source license:

• Airycons
• omweather
• OpenWeather (with mapping from WMO codes)

License unknown (for reference/inspiration):

• Google weather icons
• Apple weather icons
• WMO Weather Icons
• Meteomatics

[Leftium]

Airycons maps pretty nicely to Open-Meteo WMO codes: https://weather-sense.leftium.com/wmo-codes

Source code if you wish to use my WMO mappings:

• WMO codes slightly reordered so severity increases more consistently.
• Changed some descriptions (mostly for consistency/shortening).
• Added unique colors for most codes, tweaked so severest form of precipitation "groups" contrasts with white text.

[Leftium]

I have made a "periodic table" of the WMO condition codes. Each code has its own unique Pico CSS color; some icons had to be re-used: https://weather-sense.leftium.com/wmo-codes

• The source code

[Leftium]

I documented how I arrived at my selection of icons and colors for each WMO code: https://blog.leftium.com/2024/07/wmo-codes.html

[jscrane]

@Leftium Very nice icons! Did you think of producing night-time equivalents?

[Leftium]

@Leftium Very nice icons! Did you think of producing night-time equivalents?

I did not make the icons myself; credit goes to Airycons. There are night versions but I chose not to use them:

[derethil]

@Leftium Airycons has been deleted / made private from what I can tell, which is rather unfortunate. It's the first weather icon pack I've found that I really love.

Do you have a copy of repository still cloned / archived somewhere? I'd really like to use the night versions as well but your source code only has a copy of the day versions.

[Leftium]

@derethil That's a shame... perhaps the creator is selling them, now?

https://iconbuddy.com/airycons

edit: It seems this is just an archive of open source icons that offers some type of subscription service.

[nunnsy]

If there's been no change of licence and these were legitimately open-source previously, does someone have a local repository copy to make available?

Or, @HaroleDev, are you able to share if you might make them available again?

[angelabernaldz]

Hi @Leftium, I was looking for Airycons icons for my weather app but couldn't find them, and your icons are exactly what I need. Would it be okay if I use them in my project? I'll make sure to credit you properly.

Thanks!

[Leftium]

Hi @Leftium, I was looking for Airycons icons for my weather app but couldn't find them, and your icons are exactly what I need. Would it be okay if I use them in my project? I'll make sure to credit you properly.

Thanks!

Sure, but I didn't make them!

• @HaroleDev is the creator (https://github.com/HaroleDev/Airycons)
• The icons in my repo were copied while the project was still open source.

[angelabernaldz]

Thanks @Leftium When I try to access the repo created by @HaroleDev, I get 404 error (the page is no longer available).

Do you have the icons accesible in any other format different that the full "periodic table" image that appears above?

[Leftium]

Do you have the icons accesible in any other format different that the full "periodic table" image that appears above?

Look in my repo: https://github.com/Leftium/weather-sense/tree/main/static/icons/airy

[angelabernaldz]

Amazing! Thank you so much 👍 @Leftium

[HaroleDev]

I've been intending to delete my GitHub profile since I have no purpose keeping them around anymore, so I'm making the decision to delete my repo, it is however open source and I intended to keep the license around, but I no longer wanted to be credited with my name.

Reply if you have anything to say regarding my decision