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!

The Freedom of CSS

Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more!

Use In Graphic Apps

Weather Icons come with OTF and TTF files, so you can use this page to copy icons and paste them right into your favorite design apps like Photoshop, Illustrator, Sketch!

Specialty Icons

Less and Sass Support

Use Less or Sass preprocessors to integrate the Weather Icons right into your existing builds.

Getting Started

To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type <i class="wi wi-night-sleet"></i>

The moons are split into 28 icons, to correspond neatly with the 28 day moon cycle. There is a primary set and alternate set. The primary set is meant to be interpreted as: where there are pixels, that is the illuminated part of the moon. The alternate set is meant to be interpreted as: where there are pixels, that is the shadowed part of the moon.



wi-moon-new

f095



wi-moon-waxing-crescent-1

f096



wi-moon-waxing-crescent-2

f097



wi-moon-waxing-crescent-3

f098



wi-moon-waxing-crescent-4

f099



wi-moon-waxing-crescent-5

f09a



wi-moon-waxing-crescent-6

f09b



wi-moon-first-quarter

f09c



wi-moon-waxing-gibbous-1

f09d



wi-moon-waxing-gibbous-2

f09e



wi-moon-waxing-gibbous-3

f09f



wi-moon-waxing-gibbous-4

f0a0



wi-moon-waxing-gibbous-5

f0a1



wi-moon-waxing-gibbous-6

f0a2



wi-moon-full

f0a3



wi-moon-waning-gibbous-1

f0a4



wi-moon-waning-gibbous-2

f0a5



wi-moon-waning-gibbous-3

f0a6



wi-moon-waning-gibbous-4

f0a7



wi-moon-waning-gibbous-5

f0a8



wi-moon-waning-gibbous-6

f0a9



wi-moon-third-quarter

f0aa



wi-moon-waning-crescent-1

f0ab



wi-moon-waning-crescent-2

f0ac



wi-moon-waning-crescent-3

f0ad



wi-moon-waning-crescent-4

f0ae



wi-moon-waning-crescent-5

f0af



wi-moon-waning-crescent-6

f0b0



wi-moon-alt-new

f0eb



wi-moon-alt-waxing-crescent-1

f0d0



wi-moon-alt-waxing-crescent-2

f0d1



wi-moon-alt-waxing-crescent-3

f0d2



wi-moon-alt-waxing-crescent-4

f0d3



wi-moon-alt-waxing-crescent-5

f0d4



wi-moon-alt-waxing-crescent-6

f0d5



wi-moon-alt-first-quarter

f0d6



wi-moon-alt-waxing-gibbous-1

f0d7



wi-moon-alt-waxing-gibbous-2

f0d8



wi-moon-alt-waxing-gibbous-3

f0d9



wi-moon-alt-waxing-gibbous-4

f0da



wi-moon-alt-waxing-gibbous-5

f0db



wi-moon-alt-waxing-gibbous-6

f0dc



wi-moon-alt-full

f0dd



wi-moon-alt-waning-gibbous-1

f0de



wi-moon-alt-waning-gibbous-2

f0df



wi-moon-alt-waning-gibbous-3

f0e0



wi-moon-alt-waning-gibbous-4

f0e1



wi-moon-alt-waning-gibbous-5

f0e2



wi-moon-alt-waning-gibbous-6

f0e3



wi-moon-alt-third-quarter

f0e4



wi-moon-alt-waning-crescent-1

f0e5



wi-moon-alt-waning-crescent-2

f0e6



wi-moon-alt-waning-crescent-3

f0e7



wi-moon-alt-waning-crescent-4

f0e8



wi-moon-alt-waning-crescent-5

f0e9



wi-moon-alt-waning-crescent-6

f0ea

Time



wi-time-1

f08a



wi-time-2

f08b



wi-time-3

f08c



wi-time-4

f08d



wi-time-5

f08e



wi-time-6

f08f



wi-time-7

f090



wi-time-8

f091



wi-time-9

f092



wi-time-10

f093



wi-time-11

f094



wi-time-12

f089

Directional Arrows



wi-direction-up

f058



wi-direction-up-right

f057



wi-direction-right

f04d



wi-direction-down-right

f088



wi-direction-down

f044



wi-direction-down-left

f043



wi-direction-left

f048



wi-direction-up-left

f087

Wind Degree Examples

The classes for the wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the degree, zero at the top. From points directly away from the degree. This means, if you want the indicator to represent "wind is coming from the south", you can use the towards-0-deg class, or if you prefer to use from, then you would use from-180-deg.

There are 360 classes for each in 1 degree increments for maximum precision.

To make a wind icon appear, you need to add 3 classes, the base icon class, the wind icon class, and then the direction you want it to face: class="wi wi-wind towards-23-deg"

NOTE: You must include the additional stylesheeet, weather-icons-wind.css to use the wind icons and API mappings.

towards-0-deg

f0b1

towards-23-deg

f0b1

towards-45-deg

f0b1

towards-68-deg

f0b1

towards-90-deg

f0b1

towards-113-deg

f0b1

towards-135-deg

f0b1

towards-158-deg

f0b1

towards-180-deg

f0b1

towards-203-deg

f0b1

towards-225-deg

f0b1

towards-248-deg

f0b1

towards-270-deg

f0b1

towards-293-deg

f0b1

towards-313-deg

f0b1

towards-336-deg

f0b1

from-180-deg

f0b1

from-203-deg

f0b1

from-225-deg

f0b1

from-248-deg

f0b1

from-270-deg

f0b1

from-293-deg

f0b1

from-313-deg

f0b1

from-336-deg

f0b1

from-0-deg

f0b1

from-23-deg

f0b1

from-45-deg

f0b1

from-68-deg

f0b1

from-90-deg

f0b1

from-113-deg

f0b1

from-135-deg

f0b1

from-158-deg

f0b1

Wind Cardinal Examples

The classes for the cardinal wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the direction in the class, north at the top. From points directly away from the direction in the class. This means, if you want the indicator to represent "wind is coming from the south", you can use the towards-n class, or if you prefer to use from, then you would use from-s.

The purpose of this is to accommodate applications that prefer to point to where the wind is originating from (arrow points against the wind), or pointing where the wind is blowing (arrow points in direction of wind). You can decide which fits your application best and use the class that matches.

There are 16 classes each for precision when using cardinal directions.

To make a wind icon appear, you need to add 3 classes, the base icon class, the wind icon class, and then the direction you want it to face: class="wi wi-wind wi-from-e"

NOTE: You must include the additional stylesheeet, weather-icons-wind.css to use the wind icons and API mappings.

wi-towards-n

f0b1

wi-towards-nne

f0b1

wi-towards-ne

f0b1

wi-towards-ene

f0b1

wi-towards-e

f0b1

wi-towards-ese

f0b1

wi-towards-se

f0b1

wi-towards-sse

f0b1

wi-towards-s

f0b1

wi-towards-ssw

f0b1

wi-towards-sw

f0b1

wi-towards-wsw

f0b1

wi-towards-w

f0b1

wi-towards-wnw

f0b1

wi-towards-nw

f0b1

wi-towards-nnw

f0b1

wi-from-n

f0b1

wi-from-nne

f0b1

wi-from-ne

f0b1

wi-from-ene

f0b1

wi-from-e

f0b1

wi-from-ese

f0b1

wi-from-se

f0b1

wi-from-sse

f0b1

wi-from-s

f0b1

wi-from-ssw

f0b1

wi-from-sw

f0b1

wi-from-wsw

f0b1

wi-from-w

f0b1

wi-from-wnw

f0b1

wi-from-nw

f0b1

wi-from-nnw

f0b1

Beaufort Wind Scale



wi-wind-beaufort-0

f0b7



wi-wind-beaufort-1

f0b8



wi-wind-beaufort-2

f0b9



wi-wind-beaufort-3

f0ba



wi-wind-beaufort-4

f0bb



wi-wind-beaufort-5

f0bc



wi-wind-beaufort-6

f0bd



wi-wind-beaufort-7

f0be



wi-wind-beaufort-8

f0bf



wi-wind-beaufort-9

f0c0



wi-wind-beaufort-10

f0c1



wi-wind-beaufort-11

f0c2



wi-wind-beaufort-12

f0c3

Utility Classes

Use these special, built-in utility classes to flip, rotate, or assign a fixed width to any icon.