weather-icons

Weather Icons is a collection of 222 weather-related icons packaged as an icon font with accompanying CSS files. An icon font works like a regular text font but instead of letters, each character slot contains a small graphic, which means the icons scale to any size without losing quality and can be styled using standard CSS color and size rules.

Using the icons in a web project requires copying five font files and a single minified CSS file into your project folder. From there, you add an icon to any webpage by writing a short HTML tag with two class names: the base class wi and then the specific icon name, such as wi-day-sunny or wi-rain. Optional modifier classes let you flip or rotate an icon, or set it to a fixed width.

A separate CSS file handles wind direction indicators. Wind icons take a degree value from 0 to 359 to point in any compass direction. Shorthand names for cardinal and intercardinal directions are also available, so you can use labels like sse or nw instead of numeric degrees.

The project also includes companion CSS files that map icon names to the condition codes returned by several weather data services, including Forecast.io, Open Weather Map, the World Meteorological Organization, Weather Underground, and Yahoo Weather. If you are pulling weather data from one of those APIs, the companion file lets you display the matching icon without writing your own mapping logic.

The icon designs were originally created by Lukas Bischoff. The CSS, Less files, and subsequent icon art were produced by Erik Flowers. The icons are licensed under the SIL Open Font License, the code under the MIT License, and the documentation under Creative Commons Attribution 3.0.