Show HN: Weather Icons – Icon font with 123 weather-themed icons | Hacker News Reader

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

github.com

184 pointseflowers35 comments

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/) and they looked great!

Your web app looks nice.

That's really cool, and a novel idea. Never thought about plotting weather across a long trip, really clever.

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.

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!

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

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.

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.

They look really great. That's been a project I've wanted to try for fun but have lacked the time.

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?

It's a font, so single color. Multi-level (thus multi-color) fonts are possible, but are not heavily adopted.

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.

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

So someone made the wrong choice - font vs image.

Who's using NOAA? Aren't they intended to be used primarily by weather services?

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

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

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

> Icon font with 123 weather-themed icons

Everything an aspiring app designer needs for his right of passage on Dribbble.

They look nice. You should let icomoon.io know, they also presently have Meteoicons from Alessio Atzeni:

http://www.alessioatzeni.com/meteocons/#about

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.

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

However, this is not as performant. Font Awesome switched away from this to an extra `fa` class for that reason.

True.

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-...)

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

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?

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.

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

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

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.

Please weather.gov use this

I don't know. I use noaa's forecast site a lot, and I kind of like the images they use for the conditions.

Like this for sunny: http://forecast.weather.gov/images/wtf/medium/few.png

Why are there clouds? I mean, its suppose to be sunny.

wi-meteor

I pray we never see this in the forecast.

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.

Reply on news.ycombinator.com