Need help with weather-icons?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

6.1K Stars 781 Forks 167 Commits 98 Opened issues


215 Weather Themed Icons and CSS

Services available


Need anything else?

Contributors list

Weather Icons

222 Weather Themed Icons and CSS

Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons!

Get started at!

Icon Preview

Basic Usage

Place the 5 font files and the main

file in your project, with the assumption that the fonts are located up
from your CSS directory.

The icons are displayed by using an

element and adding the base class
and then the icon class you want, such as
. This then looks like

To add a modifier, include the class you want after the icon name, which looks like

. You can flip, rotate, or add a fixed width. See it all at

API Usage

This set includes companion CSS files for popular weather service API. Presently there are mappings for, Open Weather Map, World Meteorological Organization, Weather Underground, and Yahoo. Check the API List to see the class names.

Wind Usage

To use the wind indicators, you must also use

along with the default CSS file. To display a wind indicator, you must use the base class
, and then include the towards/from direction you want, like
. This ends up looking like . You can use any degree from 0 to 359 in this manner. Note: A "from" class has the point of the arrow at the opposite end of the degree. For example, a "from 90 degrees" icon would point to the 270 degree mark, wheras a "towards 270 degrees" would point at the same 270 degree mark.

Included in the set as well are aliases to point to cardinal directions. They work the same as degrees, for example

would be an arrow pointing to the South by Southeast (roughly 158 degrees).


If you feel so inclined to add icon ideas, icon art, or other fixes/changes to how the package works, feel free to help!


The icon designs are originally by Lukas Bischoff. Icon art for v1.1 forward, HTML, Less, and CSS are by me (Erik).


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.