- Tweet
- Follow @Erik_UX

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!

### Flip, Scale, Transform

Easily modify the icon look with built-in utility classes for fixed-width, flip horizontal, flip vertical, and rotating 90, 180, or 270 degrees.

### Popular Weather API Classes

Build in API compatibility with Yahoo Weather, OpenWeatherMaps, Forecast.io, Weather Underground, and World Meteorological Organization. View the list of API mappings here.

### Specialty Icons

Included are 28 moon phases, 12 hours of clock, the Beaufort wind force scale, maritime wind warnings,

### 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>`

View the project on GitHub

Please make requests or report any issues to the main repository on GitHub.

### 25 New 2.0 Icons!

- day-cloudy-high
- day-light-wind
- day-sleet
- day-haze
- night-cloud-high
- night-alt-partly-cloudy
- sleet

- moonrise
- moonset
- night-sleet
- night-alt-sleet
- raindrop
- barometer
- humidity

- na (no report)
- flood
- sandstorm
- tsunami
- earthquake
- fire

- volcano
- train
- small-craft-advisory
- gale-warning
- storm-warning
- hurricane-warning

Daytime

wi-day-sunny
f00d

wi-day-cloudy
f002

wi-day-cloudy-gusts
f000

wi-day-cloudy-windy
f001

wi-day-fog
f003

wi-day-hail
f004

wi-day-haze
f0b6

wi-day-lightning
f005

wi-day-rain
f008

wi-day-rain-mix
f006

wi-day-rain-wind
f007

wi-day-showers
f009

wi-day-sleet
f0b2

wi-day-sleet-storm
f068

wi-day-snow
f00a

wi-day-snow-thunderstorm
f06b

wi-day-snow-wind
f065

wi-day-sprinkle
f00b

wi-day-storm-showers
f00e

wi-day-sunny-overcast
f00c

wi-day-thunderstorm
f010

wi-day-windy
f085

wi-solar-eclipse
f06e

wi-hot
f072

wi-day-cloudy-high
f07d

wi-day-light-wind
f0c4
Nighttime

wi-night-clear
f02e

wi-night-alt-cloudy
f086

wi-night-alt-cloudy-gusts
f022

wi-night-alt-cloudy-windy
f023

wi-night-alt-hail
f024

wi-night-alt-lightning
f025

wi-night-alt-rain
f028

wi-night-alt-rain-mix
f026

wi-night-alt-rain-wind
f027

wi-night-alt-showers
f029

wi-night-alt-sleet
f0b4

wi-night-alt-sleet-storm
f06a

wi-night-alt-snow
f02a

wi-night-alt-snow-thunderstorm
f06d

wi-night-alt-snow-wind
f067

wi-night-alt-sprinkle
f02b

wi-night-alt-storm-showers
f02c

wi-night-alt-thunderstorm
f02d

wi-night-cloudy
f031

wi-night-cloudy-gusts
f02f

wi-night-cloudy-windy
f030

wi-night-fog
f04a

wi-night-hail
f032

wi-night-lightning
f033

wi-night-partly-cloudy
f083

wi-night-rain
f036

wi-night-rain-mix
f034

wi-night-rain-wind
f035

wi-night-showers
f037

wi-night-sleet
f0b3

wi-night-sleet-storm
f069

wi-night-snow
f038

wi-night-snow-thunderstorm
f06c

wi-night-snow-wind
f066

wi-night-sprinkle
f039

wi-night-storm-showers
f03a

wi-night-thunderstorm
f03b

wi-lunar-eclipse
f070

wi-stars
f077

wi-storm-showers
f01d

wi-thunderstorm
f01e

wi-night-alt-cloudy-high
f07e

wi-night-cloudy-high
f080

wi-night-alt-partly-cloudy
f081
Neutral

wi-cloud
f041

wi-cloudy
f013

wi-cloudy-gusts
f011

wi-cloudy-windy
f012

wi-fog
f014

wi-hail
f015

wi-rain
f019

wi-rain-mix
f017

wi-rain-wind
f018

wi-showers
f01a

wi-sleet
f0b5

wi-snow
f01b

wi-sprinkle
f01c

wi-storm-showers
f01d

wi-thunderstorm
f01e

wi-snow-wind
f064

wi-smog
f074

wi-smoke
f062

wi-lightning
f016

wi-raindrops
f04e

wi-raindrop
f078

wi-dust
f063

wi-snowflake-cold
f076

wi-windy
f021

wi-strong-wind
f050

wi-sandstorm
f082

wi-earthquake
f0c6

wi-fire
f0c7

wi-flood
f07c

wi-meteor
f071

wi-tsunami
f0c5

wi-volcano
f0c8

wi-hurricane
f073

wi-tornado
f056

wi-small-craft-advisory
f0cc

wi-gale-warning
f0cd

wi-storm-warning
f0ce

wi-hurricane-warning
f0cf

wi-wind-direction
f0b1
Miscellaneous

wi-alien
f075

wi-celsius
f03c

wi-fahrenheit
f045

wi-degrees
f042

wi-thermometer
f055

wi-thermometer-exterior
f053

wi-thermometer-internal
f054

wi-cloud-down
f03d

wi-cloud-up
f040

wi-cloud-refresh
f03e

wi-horizon
f047

wi-horizon-alt
f046

wi-sunrise
f051

wi-sunset
f052

wi-moonrise
f0c9

wi-moonset
f0ca

wi-refresh
f04c

wi-refresh-alt
f04b

wi-umbrella
f084

wi-barometer
f079

wi-humidity
f07a

wi-na
f07b

wi-train
f0cb
Moon Phases

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.

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

wi-wind.towards-0-deg
f0b1
wi-wind.towards-23-deg
f0b1
wi-wind.towards-45-deg
f0b1
wi-wind.towards-68-deg
f0b1
wi-wind.towards-90-deg
f0b1
wi-wind.towards-113-deg
f0b1
wi-wind.towards-135-deg
f0b1
wi-wind.towards-158-deg
f0b1
wi-wind.towards-180-deg
f0b1
wi-wind.towards-203-deg
f0b1
wi-wind.towards-225-deg
f0b1
wi-wind.towards-248-deg
f0b1
wi-wind.towards-270-deg
f0b1
wi-wind.towards-293-deg
f0b1
wi-wind.towards-313-deg
f0b1
wi-wind.towards-336-deg
f0b1
wi-wind.from-180-deg
f0b1
wi-wind.from-203-deg
f0b1
wi-wind.from-225-deg
f0b1
wi-wind.from-248-deg
f0b1
wi-wind.from-270-deg
f0b1
wi-wind.from-293-deg
f0b1
wi-wind.from-313-deg
f0b1
wi-wind.from-336-deg
f0b1
wi-wind.from-0-deg
f0b1
wi-wind.from-23-deg
f0b1
wi-wind.from-45-deg
f0b1
wi-wind.from-68-deg
f0b1
wi-wind.from-90-deg
f0b1
wi-wind.from-113-deg
f0b1
wi-wind.from-135-deg
f0b1
wi-wind.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.

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.

### Flip

`wi-flip-horizontal`

`wi-flip-vertical`

### Rotate

`wi-rotate-90`

`wi-rotate-180`

`wi-rotate-270`

### Fixed Width

`wi-fw`