Time Warner – Weather Icons

Many designers have taken the initiative to design their own weather icons. There have been numerous iterations of icon collections on dribbble and behance and deviant art, and they’re all wonderful. These unsolicited re-designs allow designers to create solutions to the problem of making sure weather information has been expressed in the clearest manner possible. I was fortunate enough to have been tasked with doing this for the TWC News organization as part of my current position.

When I was first approached with this task, It was discussed that I was to come up with an font based icon system. I knew going into this project that an SVG sprite sheet would be the way to go. After I pleaded the case for SVG sprites rather than a font, and a lot of back-and-forth with the development team, we decided this would be the superior way to go.

SVGs are the way the web is shifting towards when it comes to handling icons. They’re scalable, which makes them great for retina displays, as well as load-times. Their code can be used inline, or in CSS. That code can also be dynamically controlled by code. They also don’t have the same accessibility limitations that font based icon systems have. Oh, did I mention you can use more than one color and transparencies?

SVGs are great.