
Show HN: Weather Icons – Icon font with 123 weather-themed icons - eflowers
https://github.com/erikflowers/weather-icons
======
thmorton
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!

~~~
hanley
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
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!

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

~~~
phkahler
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?

~~~
eflowers
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
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)

------
ColinCera
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
Agreed. See also
[http://www.opc.ncep.noaa.gov/product_description/keyterm.sht...](http://www.opc.ncep.noaa.gov/product_description/keyterm.shtml)
, which describes their symbols, including hurricane/tropical depression.

------
embolalia
Why have an icon font for ℃ and ℉ instead of just using &#8451; and &#8457;?
There are probably Unicode codepoints for others in this set, too.

------
eps
> Icon font with 123 weather-themed icons

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

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

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

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

~~~
OutThisLife
True.

------
arnorb
Looks like a stylized version of Climacons
[http://adamwhitcroft.com/climacons/](http://adamwhitcroft.com/climacons/)

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

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

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

~~~
eflowers
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.

------
carsonreinke
Please weather.gov use this

~~~
jabits
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
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.

------
stygiansonic
wi-meteor

I pray we never see this in the forecast.

~~~
eflowers
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.

