{% set title = 'Modules › Weather Icon' %} {% set page = 'modules-weather-icon.html' %} {% extends 'layouts/master.html' %} {% block plugins_css %} {% endblock %} {% block content %}

# Weather Icon

We also added 'Weather Icons' to make it easier for you to display weather icons. This library was created by @erikflowers

#### Weather Icons

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
{% endblock %}