7 ms·

Show HN: Weather Icons – Icon font with 123 weather-themed icons

184 points by eflowers 12y ago

nkozyra 12y ago
They look nice. You should let icomoon.io know, they also presently have Meteoicons from Alessio Atzeni: http://www.alessioatzeni.com/meteocons/#about http://www.alessioatzeni.com/meteocons/#about
- eflowers 12y ago
  I've had an icomoon fork open to merge mine in, just never got around to it, my metadata was lacking for their system. But it's 90% of the way there.
radley 12y ago
Since most people using weather icons will also be using APIs by Accuweather, WUnderground, and Open Weather Map, it's good to try to match actual reported conditions as much as possible: https://api.accuweather.com/developers/weatherIcons https://api.accuweather.com/developers/weatherIcons Often designers create lots of different wind and extreme icons (Tornado, Meteor) which will never be used and not enough subtle-difference icons (Mostly Sunny, Partly Sunny, Intermittent Clouds) which are needed. When implemented, we end up using only a small portion of a collection and repeating many icons.
- eflowers 12y ago
  There are some additions going on to make CSS addon sheets that match the NOAA, yahoo, accuweather, etc etc. It's just a ton of work to even get this far, I have to take month long breaks to return to the real world. The next big release will be integration with weather service API codes and other weather codes, and fixing some nuanced things like moon phases which are hard to conceive when you're in the depths of things. As far as the nuanced subtle-differences, that's a hard one. When designing, a lot of the icons start to be so similar, or the same, they become multi use. Some user research I need to do is to see how many people would use "mostly sunny, partly sunny, slightly overcast" as 3 icons, or if 1 works. I am pretty restricted with the choice to use the single color, bold stroke icon style. Especially when they are meant to look good at 16-20px. A "hairline" font weight is also planned.
  - alex_doom 12y ago
    They look really great. That's been a project I've wanted to try for fun but have lacked the time.
  - phkahler 12y ago
    IMHO weather icons really need color. This will be even more necessary when you want to have more subtle variations in conditions. Color - or shades of gray - could even be an indicator to the cloud type. A dark cloud with yellowish lightning is going to convey thunderstorms much faster and with less visual processing than anything you can possibly do in a mono-color icon. This all leads to the question: Why use a single color?
    - radley 12y ago
      It's a font, so single color. Multi-level (thus multi-color) fonts are possible, but are not heavily adopted.
    - eflowers 12y ago
      As a icon font, anything you want to do with it is via CSS. So they can be any color, have a shadow, etc, but unless someone wants to get clever, the icons have to be any single color. I could make component pieces that have color CSS coded and stack, like a yellow sun on a white cloud that are positioned on top of one another, but that would be a massive undertaking I don't think I could commit to.
      - chrisege 12y ago
        If you were to release this set as SVG, color would get a lot easier. It'd also open up the possibility of adding animation. For example: http://codepen.io/noahblon/details/lxukH http://codepen.io/noahblon/details/lxukH
      - phkahler 12y ago
        So someone made the wrong choice - font vs image.
  - 12y ago
carsonreinke 12y ago
Please weather.gov use this
- jabits 12y ago
  I don't know. I use noaa's forecast site a lot, and I kind of like the images they use for the conditions.
  - carsonreinke 12y ago
    Like this for sunny: http://forecast.weather.gov/images/wtf/medium/few.png http://forecast.weather.gov/images/wtf/medium/few.png Why are there clouds? I mean, its suppose to be sunny.
eps 12y ago
> Icon font with 123 weather-themed icons Everything an aspiring app designer needs for his right of passage on Dribbble.
thmorton 12y ago
Hey Erik, I just wanted to say thanks for your awesome icons. I used them on a Saturday project I did awhile ago (http://weather.basementserver.org/ http://weather.basementserver.org/) and they looked great!
- jabits 12y ago
  Your web app looks nice.
- eflowers 12y ago
  That's really cool, and a novel idea. Never thought about plotting weather across a long trip, really clever.
- hanley 12y ago
  Awesome idea. The next step would be allowing choice of departure time and arrival time and showing weather loosely based on that. The prediction might be less reliable but then at least I could put in that I was leaving for somewhere at 7pm and see the nighttime temp plus rain/snow/etc.
  - thmorton 12y ago
    Thanks for the feedback! That was actually one of the features I wanted to add, but I never got around to implementing it. I was planning on using the time estimates from Google's directions (in addition to the departure time), but parsing and correlating that information proved a little tricky and I ran out of time. A visible temperature indicator is also a nice touch. Maybe I'll get a chance to add that soon. I'd love to hear any other ideas for feedback!
brey 12y ago
very nice. I'm curious - is there some kind of international standard for these glyphs, or just an emerged convention of what eg. 'cloud plus rain' looks like?
- eflowers 12y ago
  Not that I know of. I got a few requests via email and github issues for very specific conditions in the Scandinavian countries. Some are so sublte, I am not a great enough graphic artist to truly nail the metaphor of what "dust" looks like in the style I borrowed (with permission) from @artill. Fog, smog, haze, dust, "dangerous air quality" are so similar but abstract in the style chosen.
stygiansonic 12y ago
wi-meteor I pray we never see this in the forecast.
- eflowers 12y ago
  What about Alien? Or Aliens who protect us from a meteor because they respect humanities kindness despite its atrocity, like the end of The Abyss.
tylerpachal 12y ago
These are so nice, I might make some sort of weather app just to use them aha!
OutThisLife 12y ago
[class*="wi-"] could save you from having to define `wi` on every icon.
- arseniclifeform 12y ago
  However, this is not as performant. Font Awesome switched away from this to an extra `fa` class for that reason.
  - OutThisLife 12y ago
    True.
- eflowers 12y ago
  I followed Font Awesome 4.0 really, I am not really the biggest expert on CSS advanced features like wildcard selectors, but as someone else said, I think there's performance hits. But really, I followed Font Awesomeas I figure Dave knows his shit (also check out blacktie https://www.kickstarter.com/projects/232193852/font-awesome-black-tie https://www.kickstarter.com/projects/232193852/font-awesome-...)
embolalia 12y ago
Why have an icon font for ℃ and ℉ instead of just using ℃ and ℉? There are probably Unicode codepoints for others in this set, too.
ColinCera 12y ago
Very nice. However, the symbol for hurricane is wrong. There is actually a standard symbol for hurricane and it has a solid center. The symbol you're using for hurricane, with an open center, is actually the symbol for a tropical storm. See: http://www.nhc.noaa.gov/gtwo.php?basin=atlc&fdays=2 http://www.nhc.noaa.gov/gtwo.php?basin=atlc&fdays=2
- dalke 12y ago
  Agreed. See also http://www.opc.ncep.noaa.gov/product_description/keyterm.shtml http://www.opc.ncep.noaa.gov/product_description/keyterm.sht... , which describes their symbols, including hurricane/tropical depression.
arnorb 12y ago
Looks like a stylized version of Climacons http://adamwhitcroft.com/climacons/ http://adamwhitcroft.com/climacons/
adoming3 12y ago
This is awesome man! How did you get the idea for this?
- eflowers 12y ago
  I wanted to make my own iOS7 style homepage for my phone, so I needed weather icons, And I found the original art from @artill, and then I didn't want to make PNGs so I thought an icon would be good, that was about a year ago. It's improved a lot since then and I lot of people are using it.

184 points by eflowers 12y ago

They look nice. You should let icomoon.io know, they also presently have Meteoicons from Alessio Atzeni: http://www.alessioatzeni.com/meteocons/#about http://www.alessioatzeni.com/meteocons/#about

eflowers 12y ago
I've had an icomoon fork open to merge mine in, just never got around to it, my metadata was lacking for their system. But it's 90% of the way there.

radley 12y ago

Since most people using weather icons will also be using APIs by Accuweather, WUnderground, and Open Weather Map, it's good to try to match actual reported conditions as much as possible: https://api.accuweather.com/developers/weatherIcons https://api.accuweather.com/developers/weatherIcons Often designers create lots of different wind and extreme icons (Tornado, Meteor) which will never be used and not enough subtle-difference icons (Mostly Sunny, Partly Sunny, Intermittent Clouds) which are needed. When implemented, we end up using only a small portion of a collection and repeating many icons.

eflowers 12y ago
There are some additions going on to make CSS addon sheets that match the NOAA, yahoo, accuweather, etc etc. It's just a ton of work to even get this far, I have to take month long breaks to return to the real world. The next big release will be integration with weather service API codes and other weather codes, and fixing some nuanced things like moon phases which are hard to conceive when you're in the depths of things. As far as the nuanced subtle-differences, that's a hard one. When designing, a lot of the icons start to be so similar, or the same, they become multi use. Some user research I need to do is to see how many people would use "mostly sunny, partly sunny, slightly overcast" as 3 icons, or if 1 works. I am pretty restricted with the choice to use the single color, bold stroke icon style. Especially when they are meant to look good at 16-20px. A "hairline" font weight is also planned.
- alex_doom 12y ago
  They look really great. That's been a project I've wanted to try for fun but have lacked the time.
- phkahler 12y ago
  IMHO weather icons really need color. This will be even more necessary when you want to have more subtle variations in conditions. Color - or shades of gray - could even be an indicator to the cloud type. A dark cloud with yellowish lightning is going to convey thunderstorms much faster and with less visual processing than anything you can possibly do in a mono-color icon. This all leads to the question: Why use a single color?
  - radley 12y ago
    It's a font, so single color. Multi-level (thus multi-color) fonts are possible, but are not heavily adopted.
  - eflowers 12y ago
    As a icon font, anything you want to do with it is via CSS. So they can be any color, have a shadow, etc, but unless someone wants to get clever, the icons have to be any single color. I could make component pieces that have color CSS coded and stack, like a yellow sun on a white cloud that are positioned on top of one another, but that would be a massive undertaking I don't think I could commit to.
    - chrisege 12y ago
      If you were to release this set as SVG, color would get a lot easier. It'd also open up the possibility of adding animation. For example: http://codepen.io/noahblon/details/lxukH http://codepen.io/noahblon/details/lxukH
    - phkahler 12y ago
      So someone made the wrong choice - font vs image.
- 12y ago

carsonreinke 12y ago

Please weather.gov use this

jabits 12y ago
I don't know. I use noaa's forecast site a lot, and I kind of like the images they use for the conditions.
- carsonreinke 12y ago
  Like this for sunny: http://forecast.weather.gov/images/wtf/medium/few.png http://forecast.weather.gov/images/wtf/medium/few.png Why are there clouds? I mean, its suppose to be sunny.

eps 12y ago

> Icon font with 123 weather-themed icons Everything an aspiring app designer needs for his right of passage on Dribbble.

thmorton 12y ago

Hey Erik, I just wanted to say thanks for your awesome icons. I used them on a Saturday project I did awhile ago (http://weather.basementserver.org/ http://weather.basementserver.org/) and they looked great!

jabits 12y ago
Your web app looks nice.
eflowers 12y ago
That's really cool, and a novel idea. Never thought about plotting weather across a long trip, really clever.
hanley 12y ago
Awesome idea. The next step would be allowing choice of departure time and arrival time and showing weather loosely based on that. The prediction might be less reliable but then at least I could put in that I was leaving for somewhere at 7pm and see the nighttime temp plus rain/snow/etc.
- thmorton 12y ago
  Thanks for the feedback! That was actually one of the features I wanted to add, but I never got around to implementing it. I was planning on using the time estimates from Google's directions (in addition to the departure time), but parsing and correlating that information proved a little tricky and I ran out of time. A visible temperature indicator is also a nice touch. Maybe I'll get a chance to add that soon. I'd love to hear any other ideas for feedback!

brey 12y ago

very nice. I'm curious - is there some kind of international standard for these glyphs, or just an emerged convention of what eg. 'cloud plus rain' looks like?

eflowers 12y ago
Not that I know of. I got a few requests via email and github issues for very specific conditions in the Scandinavian countries. Some are so sublte, I am not a great enough graphic artist to truly nail the metaphor of what "dust" looks like in the style I borrowed (with permission) from @artill. Fog, smog, haze, dust, "dangerous air quality" are so similar but abstract in the style chosen.

stygiansonic 12y ago

wi-meteor I pray we never see this in the forecast.

eflowers 12y ago
What about Alien? Or Aliens who protect us from a meteor because they respect humanities kindness despite its atrocity, like the end of The Abyss.

tylerpachal 12y ago

These are so nice, I might make some sort of weather app just to use them aha!

OutThisLife 12y ago

[class*="wi-"] could save you from having to define `wi` on every icon.

arseniclifeform 12y ago
However, this is not as performant. Font Awesome switched away from this to an extra `fa` class for that reason.
- OutThisLife 12y ago
  True.
eflowers 12y ago
I followed Font Awesome 4.0 really, I am not really the biggest expert on CSS advanced features like wildcard selectors, but as someone else said, I think there's performance hits. But really, I followed Font Awesomeas I figure Dave knows his shit (also check out blacktie https://www.kickstarter.com/projects/232193852/font-awesome-black-tie https://www.kickstarter.com/projects/232193852/font-awesome-...)

embolalia 12y ago

Why have an icon font for ℃ and ℉ instead of just using ℃ and ℉? There are probably Unicode codepoints for others in this set, too.

ColinCera 12y ago

Very nice. However, the symbol for hurricane is wrong. There is actually a standard symbol for hurricane and it has a solid center. The symbol you're using for hurricane, with an open center, is actually the symbol for a tropical storm. See: http://www.nhc.noaa.gov/gtwo.php?basin=atlc&fdays=2 http://www.nhc.noaa.gov/gtwo.php?basin=atlc&fdays=2

dalke 12y ago
Agreed. See also http://www.opc.ncep.noaa.gov/product_description/keyterm.shtml http://www.opc.ncep.noaa.gov/product_description/keyterm.sht... , which describes their symbols, including hurricane/tropical depression.

arnorb 12y ago

Looks like a stylized version of Climacons http://adamwhitcroft.com/climacons/ http://adamwhitcroft.com/climacons/

adoming3 12y ago

This is awesome man! How did you get the idea for this?

eflowers 12y ago
I wanted to make my own iOS7 style homepage for my phone, so I needed weather icons, And I found the original art from @artill, and then I didn't want to make PNGs so I thought an icon would be good, that was about a year ago. It's improved a lot since then and I lot of people are using it.