weather-icons icon indicating copy to clipboard operation
weather-icons copied to clipboard

Additional icon request

Open hiljolodewijk opened this issue 2 years ago • 11 comments

Hi Bas,

Thanks for your icons! Really liked them. What i did is i used them for all the status codes for the OpenWeatherMap API. So for each status code of the OWM API, i chose an icon to represent it.

If you'd have the time, I'd like three additional icons for the weather statuses:

  • Thunderstorm with light drizzle (Onweersbui met lichte motregen) - a combination of drizzle icon and thunderstorm
  • Sleet/Frozen rain (IJzel): a bit like sleet i think, current sleet icon is more rain and snow?
  • Very thin clouds (Zeer lichte bewolking): Sun with very thin clouds (opacity?)

If you would have the time, please can you add these icons?

Thanks, Bedankt!

hiljolodewijk avatar Jan 05 '22 07:01 hiljolodewijk

For your info, I'm using the following code to translate the OWM API condition codes to an icon (descriptions are in Dutch): All conditions including descriptions can be found here: https://openweathermap.org/weather-conditions.

array( 200 => array( 'description' => 'onweersbui met lichte regen', 'icon_day' => 'thunderstorms-day-rain.svg', 'icon_night' => 'thunderstorms-night-rain.svg' ), 201 => array( 'description' => 'onweersbui met regen', 'icon_day' => 'thunderstorms-rain.svg', 'icon_night' => 'thunderstorms-rain.svg' ), 202 => array( 'description' => 'onweersbui met zware regenval', 'icon_day' => 'thunderstorms-rain.svg', 'icon_night' => 'thunderstorms-rain.svg' ), 210 => array( 'description' => 'lichte onweersbui', 'icon_day' => 'thunderstorms-day.svg', 'icon_night' => 'thunderstorms-night.svg' ), 211 => array( 'description' => 'onweersbui', 'icon_day' => 'thunderstorms.svg', 'icon_night' => 'thunderstorms.svg' ), 212 => array( 'description' => 'zware onweersbui', 'icon_day' => 'thunderstorms-rain.svg', 'icon_night' => 'thunderstorms-rain.svg' ), 221 => array( 'description' => 'verspreide onweersbui', 'icon_day' => 'thunderstorms-day.svg', 'icon_night' => 'thunderstorms-night.svg' ), 230 => array( 'description' => 'onweersbui met lichte motregen', 'icon_day' => 'thunderstorms-day-rain.svg', 'icon_night' => 'thunderstorms-night-rain.svg' ), 231 => array( 'description' => 'onweersbui met motregen', 'icon_day' => 'thunderstorms-day-rain.svg', 'icon_night' => 'thunderstorms-night-rain.svg' ), 232 => array( 'description' => 'onweersbui met zware motregen', 'icon_day' => 'thunderstorms-rain.svg', 'icon_night' => 'thunderstorms-rain.svg' ), 300 => array( 'description' => 'lichte motregen', 'icon_day' => 'partly-cloudy-day-drizzle.svg', 'icon_night' => 'partly-cloudy-night-drizzle.svg' ), 301 => array( 'description' => 'motregen', 'icon_day' => 'drizzle.svg', 'icon_night' => 'drizzle.svg' ), 302 => array( 'description' => 'zware motregen', 'icon_day' => 'drizzle.svg', 'icon_night' => 'drizzle.svg' ), 310 => array( 'description' => 'lichte motregen/regen', 'icon_day' => 'partly-cloudy-day-drizzle.svg', 'icon_night' => 'partly-cloudy-night-drizzle.svg' ), 311 => array( 'description' => 'motregen', 'icon_day' => 'drizzle.svg', 'icon_night' => 'drizzle.svg' ), 312 => array( 'description' => 'zware motregen/regen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 313 => array( 'description' => 'stortbuien en motregen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 314 => array( 'description' => 'hevige stortbuien en motregen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 321 => array( 'description' => 'zware motregen', 'icon_day' => 'drizzle.svg', 'icon_night' => 'drizzle.svg' ), 500 => array( 'description' => 'lichte regen', 'icon_day' => 'partly-cloudy-day-drizzle.svg', 'icon_night' => 'partly-cloudy-night-drizzle.svg' ), 501 => array( 'description' => 'matige regen', 'icon_day' => 'partly-cloudy-day-rain.svg', 'icon_night' => 'partly-cloudy-night-rain.svg' ), 502 => array( 'description' => 'zware regenval', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 503 => array( 'description' => 'zeer zware regenval', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 504 => array( 'description' => 'extreme regen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 511 => array( 'description' => 'koude buien', 'icon_day' => 'partly-cloudy-day-hail.svg', 'icon_night' => 'partly-cloudy-night-hail.svg' ), 520 => array( 'description' => 'lichte stortregen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 521 => array( 'description' => 'stortregen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 522 => array( 'description' => 'zware stortregen', 'icon_day' => 'rain.svg', 'icon_night' => 'rain.svg' ), 531 => array( 'description' => 'afwisselende stortbuien', 'icon_day' => 'partly-cloudy-day-rain.svg', 'icon_night' => 'partly-cloudy-night-rain.svg' ), 600 => array( 'description' => 'lichte sneeuw', 'icon_day' => 'partly-cloudy-day-snow.svg', 'icon_night' => 'partly-cloudy-night-snow.svg' ), 601 => array( 'description' => 'sneeuw', 'icon_day' => 'snow.svg', 'icon_night' => 'snow.svg' ), 602 => array( 'description' => 'hevige sneeuw', 'icon_day' => 'snow.svg', 'icon_night' => 'snow.svg' ), 611 => array( 'description' => 'ijzel', 'icon_day' => 'hail.svg', 'icon_night' => 'hail.svg' ), 612 => array( 'description' => 'lichte ijzel', 'icon_day' => 'partly-cloudy-day-hail.svg', 'icon_night' => 'partly-cloudy-night-hail.svg' ), 613 => array( 'description' => 'ijzel', 'icon_day' => 'hail.svg', 'icon_night' => 'hail.svg' ), 615 => array( 'description' => 'lichte regen en sneeuw', 'icon_day' => 'partly-cloudy-day-sleet.svg', 'icon_night' => 'partly-cloudy-night-sleet.svg' ), 616 => array( 'description' => 'regen en sneeuw', 'icon_day' => 'sleet.svg', 'icon_night' => 'sleet.svg' ), 620 => array( 'description' => 'lichte sneeuw', 'icon_day' => 'partly-cloudy-day-snow.svg', 'icon_night' => 'partly-cloudy-night-snow.svg' ), 621 => array( 'description' => 'natte sneeuw', 'icon_day' => 'sleet.svg', 'icon_night' => 'sleet.svg' ), 622 => array( 'description' => 'hevige sneeuw', 'icon_day' => 'snow.svg', 'icon_night' => 'snow.svg' ), 701 => array( 'description' => 'mist', 'icon_day' => 'fog.svg', 'icon_night' => 'fog.svg' ), 711 => array( 'description' => 'rook', 'icon_day' => 'partly-cloudy-day-smoke.svg', 'icon_night' => 'partly-cloudy-night-smoke.svg' ), 721 => array( 'description' => 'nevel', 'icon_day' => 'haze-day.svg', 'icon_night' => 'haze-night.svg' ), 731 => array( 'description' => 'zand/stof werveling', 'icon_day' => 'dust-wind.svg', 'icon_night' => 'dust-wind.svg' ), 741 => array( 'description' => 'dichte mist', 'icon_day' => 'mist.svg', 'icon_night' => 'mist.svg' ), 751 => array( 'description' => 'zandstorm', 'icon_day' => 'dust-wind.svg', 'icon_night' => 'dust-wind.svg' ), 761 => array( 'description' => 'stof', 'icon_day' => 'dust.svg', 'icon_night' => 'dust.svg' ), 762 => array( 'description' => 'vulkanische as', 'icon_day' => 'dust-day.svg', 'icon_night' => 'dust-night.svg' ), 771 => array( 'description' => 'rukwinden', 'icon_day' => 'windsock.svg', 'icon_night' => 'windsock.svg' ), 781 => array( 'description' => 'tornado', 'icon_day' => 'tornado.svg', 'icon_night' => 'tornado.svg' ), 800 => array( 'description' => 'onbewolkt', 'icon_day' => 'clear-day.svg', 'icon_night' => 'clear-night.svg' ), 801 => array( 'description' => 'zeer lichte bewolking', 'icon_day' => 'partly-cloudy-day.svg', 'icon_night' => 'partly-cloudy-night.svg' ), 802 => array( 'description' => 'licht bewolkt', 'icon_day' => 'partly-cloudy-day.svg', 'icon_night' => 'partly-cloudy-night.svg' ), 803 => array( 'description' => 'half bewolkt', 'icon_day' => 'overcast-day.svg', 'icon_night' => 'overcast-night.svg' ), 804 => array( 'description' => 'zwaar bewolkt', 'icon_day' => 'overcast.svg', 'icon_night' => 'overcast' ) );

hiljolodewijk avatar Jan 05 '22 07:01 hiljolodewijk

Hi Hiljo!

Thanks for using my icons and the positive message! I'm currently working on a major overhaul of the icons and will include your requested icons in the new version.

I'm not sure what you mean by another variant of the sleet icon though, currently sleet is a combination of snow and drizzle. Could you elaborate?

For the other requested icons, i'll design them in the coming days and share them here 😄

basmilius avatar Jan 07 '22 14:01 basmilius

Thanks for your hard work. What i mean is that the current sleet icon is perfect. But sleet is more like hail, weather technically spoken. I was thinking of an icon for freezing rain (in Dutch: ijzel). This is rain, but when it hits the ground, it'll freeze and form ice on the ground. Not easy to design i think? I think i'm gonna use the sleet icon for now.

The two other icons would still be nice though:

  • Thunderstorm with light drizzle - a combination of drizzle icon and thunderstorm
  • Very thin/tiny clouds: Sun with very thin clouds (opacity?) or a small cloud with sun

If any questions, let me know.

hiljolodewijk avatar Jan 10 '22 07:01 hiljolodewijk

From @hiljolodewijk script I made a lookup JSON. Didn't convert to other language:

[ { "id": 200, "description": "onweersbui met lichte regen", "icon_day": "thunderstorms-day-rain.png", "icon_night": "thunderstorms-night-rain.png" }, { "id": 201, "description": "onweersbui met regen", "icon_day": "thunderstorms-rain.png", "icon_night": "thunderstorms-rain.png" }, { "id": 202, "description": "onweersbui met zware regenval", "icon_day": "thunderstorms-rain.png", "icon_night": "thunderstorms-rain.png" }, { "id": 210, "description": "lichte onweersbui", "icon_day": "thunderstorms-day.png", "icon_night": "thunderstorms-night.png" }, { "id": 211, "description": "onweersbui", "icon_day": "thunderstorms.png", "icon_night": "thunderstorms.png" }, { "id": 212, "description": "zware onweersbui", "icon_day": "thunderstorms-rain.png", "icon_night": "thunderstorms-rain.png" }, { "id": 221, "description": "verspreide onweersbui", "icon_day": "thunderstorms-day.png", "icon_night": "thunderstorms-night.png" }, { "id": 230, "description": "onweersbui met lichte motregen", "icon_day": "thunderstorms-day-rain.png", "icon_night": "thunderstorms-night-rain.png" }, { "id": 231, "description": "onweersbui met motregen", "icon_day": "thunderstorms-day-rain.png", "icon_night": "thunderstorms-night-rain.png" }, { "id": 232, "description": "onweersbui met zware motregen", "icon_day": "thunderstorms-rain.png", "icon_night": "thunderstorms-rain.png" }, { "id": 300, "description": "lichte motregen", "icon_day": "partly-cloudy-day-drizzle.png", "icon_night": "partly-cloudy-night-drizzle.png" }, { "id": 301, "description": "motregen", "icon_day": "drizzle.png", "icon_night": "drizzle.png" }, { "id": 302, "description": "zware motregen", "icon_day": "drizzle.png", "icon_night": "drizzle.png" }, { "id": 310, "description": "lichte motregen/regen", "icon_day": "partly-cloudy-day-drizzle.png", "icon_night": "partly-cloudy-night-drizzle.png" }, { "id": 311, "description": "motregen", "icon_day": "drizzle.png", "icon_night": "drizzle.png" }, { "id": 312, "description": "zware motregen/regen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 313, "description": "stortbuien en motregen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 314, "description": "hevige stortbuien en motregen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 321, "description": "zware motregen", "icon_day": "drizzle.png", "icon_night": "drizzle.png" }, { "id": 500, "description": "lichte regen", "icon_day": "partly-cloudy-day-drizzle.png", "icon_night": "partly-cloudy-night-drizzle.png" }, { "id": 501, "description": "matige regen", "icon_day": "partly-cloudy-day-rain.png", "icon_night": "partly-cloudy-night-rain.png" }, { "id": 502, "description": "zware regenval", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 503, "description": "zeer zware regenval", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 504, "description": "extreme regen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 511, "description": "koude buien", "icon_day": "partly-cloudy-day-hail.png", "icon_night": "partly-cloudy-night-hail.png" }, { "id": 520, "description": "lichte stortregen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 521, "description": "stortregen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 522, "description": "zware stortregen", "icon_day": "rain.png", "icon_night": "rain.png" }, { "id": 531, "description": "afwisselende stortbuien", "icon_day": "partly-cloudy-day-rain.png", "icon_night": "partly-cloudy-night-rain.png" }, { "id": 600, "description": "lichte sneeuw", "icon_day": "partly-cloudy-day-snow.png", "icon_night": "partly-cloudy-night-snow.png" }, { "id": 601, "description": "sneeuw", "icon_day": "snow.png", "icon_night": "snow.png" }, { "id": 602, "description": "hevige sneeuw", "icon_day": "snow.png", "icon_night": "snow.png" }, { "id": 611, "description": "ijzel", "icon_day": "hail.png", "icon_night": "hail.png" }, { "id": 612, "description": "lichte ijzel", "icon_day": "partly-cloudy-day-hail.png", "icon_night": "partly-cloudy-night-hail.png" }, { "id": 613, "description": "ijzel", "icon_day": "hail.png", "icon_night": "hail.png" }, { "id": 615, "description": "lichte regen en sneeuw", "icon_day": "partly-cloudy-day-sleet.png", "icon_night": "partly-cloudy-night-sleet.png" }, { "id": 616, "description": "regen en sneeuw", "icon_day": "sleet.png", "icon_night": "sleet.png" }, { "id": 620, "description": "lichte sneeuw", "icon_day": "partly-cloudy-day-snow.png", "icon_night": "partly-cloudy-night-snow.png" }, { "id": 621, "description": "natte sneeuw", "icon_day": "sleet.png", "icon_night": "sleet.png" }, { "id": 622, "description": "hevige sneeuw", "icon_day": "snow.png", "icon_night": "snow.png" }, { "id": 701, "description": "mist", "icon_day": "fog.png", "icon_night": "fog.png" }, { "id": 711, "description": "rook", "icon_day": "partly-cloudy-day-smoke.png", "icon_night": "partly-cloudy-night-smoke.png" }, { "id": 721, "description": "nevel", "icon_day": "haze-day.png", "icon_night": "haze-night.png" }, { "id": 731, "description": "zand/stof werveling", "icon_day": "dust-wind.png", "icon_night": "dust-wind.png" }, { "id": 741, "description": "dichte mist", "icon_day": "mist.png", "icon_night": "mist.png" }, { "id": 751, "description": "zandstorm", "icon_day": "dust-wind.png", "icon_night": "dust-wind.png" }, { "id": 761, "description": "stof", "icon_day": "dust.png", "icon_night": "dust.png" }, { "id": 762, "description": "vulkanische as", "icon_day": "dust-day.png", "icon_night": "dust-night.png" }, { "id": 771, "description": "rukwinden", "icon_day": "windsock.png", "icon_night": "windsock.png" }, { "id": 781, "description": "tornado", "icon_day": "tornado.png", "icon_night": "tornado.png" }, { "id": 800, "description": "onbewolkt", "icon_day": "clear-day.png", "icon_night": "clear-night.png" }, { "id": 801, "description": "zeer lichte bewolking", "icon_day": "partly-cloudy-day.png", "icon_night": "partly-cloudy-night.png" }, { "id": 802, "description": "licht bewolkt", "icon_day": "partly-cloudy-day.png", "icon_night": "partly-cloudy-night.png" }, { "id": 803, "description": "half bewolkt", "icon_day": "overcast-day.png", "icon_night": "overcast-night.png" }, { "id": 804, "description": "zwaar bewolkt", "icon_day": "overcast.png", "icon_night": "overcast" } ]

bobbyziom avatar Jan 17 '22 13:01 bobbyziom

Like! :-)

hiljolodewijk avatar Jan 17 '22 17:01 hiljolodewijk

Hi @basmilius , Would you mind to create below icons in the new version too? Thanks

  • heavy-rain
  • hot
  • cold
  • dry

aes-alienrip avatar Jan 24 '22 12:01 aes-alienrip

Hi @aes-alienrip, i'll take a look at that!

I'm currently almost finished with making 3.0 on par with 2.0, after that I'll design all the icons requested in this issue 🙂

basmilius avatar Jan 25 '22 11:01 basmilius

Hi, long time no see :) A bit late, but I finally found some time to work on this issue. I designed the mostly-clear set and came up with the following (not animated, pure illustrator work):

image

I'm not really sure about the versions without the sun and the moon, but for consistency they should be included. Any tips?

I also designed the thunderstorms + drizzle icons and will look at the rest later!

basmilius avatar May 16 '22 18:05 basmilius

Hi Bas, Sorry for my late reply. I'd say that the mostly clear icons look good! I'm using the outlined versions personally, but this looks good already. I'd say continue :)

hiljolodewijk avatar Jun 09 '22 09:06 hiljolodewijk

I

Hi, long time no see :) A bit late, but I finally found some time to work on this issue. I designed the mostly-clear set and came up with the following (not animated, pure illustrator work):

image

I'm not really sure about the versions without the sun and the moon, but for consistency they should be included. Any tips?

I also designed the thunderstorms + drizzle icons and will look at the rest later!

Hello Bas, I can understand your comment about consistency but logically a description of mostly clear would always contain either a sun or moon depending on the time of day. Ian

Millardiang avatar Jul 20 '22 07:07 Millardiang

for consistency they should be included. Any tips?

👍 fully agree. Any chance they will make it to the dev branch soon? I am really looking forward to these (the line variant) as I personally find the current "partly cloudy"-set a bit out of balance.

I interpret "partly cloudy" semantically as "mostly sunny but with a few clouds". Hence, the sun is dominating and at worst it's 50:50. In the current "partly cloudy"-set the clouds are the dominating symbol instead.

-> I will use the new mostly clear/sunny set for partly cloudy conditions

marcelstoer avatar May 29 '23 21:05 marcelstoer