Weather Icons

222 Weather Themed Icons and CSS

Download Now

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-snow
f01b
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.

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.

Flip

wi-flip-horizontal

wi-flip-vertical

Rotate

wi-rotate-90

wi-rotate-180

wi-rotate-270

Fixed Width

wi-fw