215 Weather Themed Icons and CSS

  • By Erik Flowers
  • Last update: Jan 8, 2023
  • Comments: 16

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 https://erikflowers.github.io/weather-icons/!

Icon Preview

Basic Usage

Place the 5 font files and the main weather-icons.min.css file in your project, with the assumption that the fonts are located up ../ from your CSS directory.

The icons are displayed by using an i element and adding the base class wi and then the icon class you want, such as day-sunny. This then looks like <i class="wi wi-day-sunny"></i>.

To add a modifier, include the class you want after the icon name, which looks like <i class="wi wi-day-sunny wi-flip-vertical"></i>. You can flip, rotate, or add a fixed width. See it all at https://erikflowers.github.io/weather-icons/.

API Usage

This set includes companion CSS files for popular weather service API. Presently there are mappings for Forecast.io, 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 weather-icons-wind.min.css along with the default CSS file. To display a wind indicator, you must use the base class wi and wi-wind, and then include the towards/from direction you want, like from-293-deg. 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 <i class="wi wi-wind towards-sse"></i> 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).





  • 1

    Wind Direction

    The wind direction icons are 180 degrees off. It is understandable - unless you are a sailor you wouldn't know.

    A south wind means the wind is coming from the south(pointing south), not blowing in a southerly direction.A northwest wind means the wind is coming from the northwest, not blowing in a northwest direction.

    Etc - through all the wind direction icons.

    Thank you. These are sweet icons.

  • 2

    Vertical Centering

    I was making a UI using large icons to map to the weather condition. I was trying to get horizontal/vertical centering but while wi-day-sunny seems good for this wi-thunderstorm seems to have a bias towards the baseline. I imagine that many icons will be like that.

    Any chance of supporting aligning the icons vertically? I am using these with React-Native so am lacking many CSS features, I could manually mess around with offsets I guess, but perhaps exporting the font icons vertically aligned by centering them on the baseline would work too? Is there a benefit to icons like wi-thunderstorm aligning to the baseline instead of like how wi-day-sunny is aligned vertically?

  • 3

    Moon icons are slightly inaccurate

    The "Gibbous" moon icons are inaccurate - the dark part should be concave, not convex.

    See http://stardate.org/nightsky/moon for details. Compare 2014-09-03 through 2014-09-06 to wi-moon-waxing-gibbous

    Also, why is quarter not a straight line?

    EDIT: derp I can't even use the right words for concave and convex.

  • 4

    Refactor LessCSS, add SASS support, add condition code mappings, add some FontAwesome functionality

    This PR rectifies the following:

    • #7, #24, #53 - Add support for Weather codes
      • Added three weather service code mappings
        • #18 - Yahoo Weather
        • #61, #65 - OpenWeatherMap
        • #56 - Forecast.io
      • Mappings currently do not work in the LessCSS code base due to an issue with with variable interpolation during extend(). As such the bundled CSS is now built using the SASS code base in order to enable code mappings for CSS users.
        • More info: http://lesscss.org/features/#extend-feature-selector-interpolation-with-extend
    • #35, #37, #60 - SASS styling
    • #45 - Beaufort Wind Scale spelling
    • #50 - Fixed width class

    This PR contains the following changes:

    • Added Gulp and corresponding gulpfile.js with the following tasks:
      • sass - compiles SASS source and outputs to ./css/
      • less - compiled LessCSS source and outputs to ./css/
      • mini - minifies ./css/weather-icons.css and outputs to ./css/weather-icons.min.css
    • Taxonomy change to more closely match FontAwesome
    • Add SASS language support
    • Refactor LessCSS code base to match features of SASS code base
      • Condition code mapping does not currently function on the LessCSS code base: http://lesscss.org/features/#extend-feature-selector-interpolation-with-extend
    • Major version bump due to:
      • Breaking changes to rotation class names
      • font-family is no longer customizable and is locked to WeatherIcon
      • Rotation syntax has been simplified from .wi-wind-default_*-deg .wi-rotate-*
      • .wind-beafort-* has been renamed .wind-beaufort-* to rectify a typo
      • Prefixed directional icons with .direction-
        • .down becomes .direction-down
        • .down-left becomes .direction-down-left
        • .down-right becomes .direction-down-right
        • .left becomes .direction-left
        • .right becomes .direction-right
        • .up becomes .direction-up
        • .up-left becomes .direction-up-left
        • .up-right becomes .direction-up-right
  • 5

    Icons doesn't fit their bounds

    First thank you for your work, these icons look absolutely amazing!

    However, i encountered one problem on all platforms, i tried to use them (web and Android): The icons doesn't always fit their calculated bounds. Some examples:

    On the web:

    some extra css to make the problem visible:

        font-size: 100px; 
        background-color: black; 
        border: 1px solid gray; 
        display: inline-block; 
        margin: 10px

    The markup

    <div class="test-container">
        <i class="wi-day-hail test-icon"></i>
    <div class="test-container">
        <i class="wi-day-cloudy test-icon"></i>
    <div class="test-container">
        <i class="wi-day-sunny test-icon"></i>
    <div class="test-container">
        <i class="wi-day-sunny-overcast test-icon"></i>

    which looks like this on firefox & chrome: icon_web

    On the web i can easily solve this problem with a little bit of extra padding, because the rest of the icon (what is not visible on my image) gets rendered at least.

    On (native) Android

    The problem here is far worse. When i simply put these icons in a TextView (if you are not familiar with android, it's the default control, for displaying plain text), it looks like this: icon_and

    So the icon gets cropped, and some of it doesn't even gets rendered.

    So my question is: Is there a way to make the icons fit their bounds? I'm really not familiar with fonts and how they get rendered, or how their bounding rectangle gets calculated, but if you know any hints/links, i would be happy to try and solve this issue!

    And again, thanks for the beautiful icons!

  • 6

    Lookups for WMO4680, Yahoo! and Forecast.io

    I added LESS/CSS variable names with weather condition codes according to World Meteorological Organization's code manual used in weather stations and also the Yahoo API codes made by @aphillipo in #18. Also related #24 #7. The WMO code associations done by me are approximations, I couldn't find 100% fitting icons on some codes. For example codes 00 ("No significant weather observed") and 02 ("State of sky on the whole unchanged during the past hour"), and also some of the gradients (light/medium/heavy rain).

    I put them in separate files so that they can be easily commented out if you wish to compile a file without them, or only require a subset of (this project's) weather icons names OR Yahoo OR WMO4680.

    I'm a LESS novice so there's probably a better way to name or generate them.

    I also added two test tables for Yahoo & WMO4860 codes with their respective descriptions, and a Windows .bat script for quick compiling.

    Screenshot list Yahoo:

    screen shot 2015-01-23 at 19 42 34yahoo

    Screenshot list WMO:

    screen shot 2015-01-23 at 19 42 40wmo

  • 7

    Lookups for Yahoo! Weather API

    Added .wi-condition- to icons and appropriate lookups.

    See https://developer.yahoo.com/weather/#codes for details of the codes.

    You don't have to like it of course or merge it - just making you aware that this might be useful to someone.

  • 8

    add inverse icons for moon

    The new moon icons in 1.2 are great. I'd love to see an addition of these moon icons inverted, with something like wi-moon-alt-waxing-quarter or wi-moon-inverse-old

    When displaying the moon with a light color on a dark background (as in a bright white moon against the black of space), the area which appears illuminated is the opposite of what one would expect. For example, with a style of "color:#fff; background-color:#000" for wi-moon-full, you get a donut, not a disc.

  • 9

    Add ability to override variables in SASS version

    Hey, guys!

    I needed to override the path to fonts directory and found a variable in sources - $wi-path (here). I've tried to override it before importing the main SCSS file of the package but failed. Then I've looked carefully again and found out that it can not be overridden due to missing !default after its value. This applies to all those variables next to $wi-path. I can submit a PR.

  • 10

    bower install weather-icons will install v0.0.1

    `bower info weather-icons bower cached git://github.com/erikflowers/weather-icons.git#0.0.1 bower validate 0.0.1 against git://github.com/erikflowers/weather-icons.git#*

    { name: 'weather-icons', homepage: 'https://github.com/erikflowers/weather-icons', version: '0.0.1' }

    Available versions:

    • 0.0.1 `
  • 11

    Can't spin icons using css

    I can't seem to be able to spin some of the icons without some parts being cut off, looked in the dev console and it looks like when it is spun the width is not wide enough. Have tried some hacks but hasn't worked. Tried to use fontawesome's 'fa-spin' and a css spin i wrote but none fixed it Thanks

  • 12

    Add more font weights

    These icons are really useful, but they don't match the theme of my project. My project is quite minimal and light, and these icons are too thick. Maybe consider making a font weight 300?

  • 13

    openweathermap icon for code 803 should be cloudy and not cloudy-gusts

    Recently, I retrieved the following response for current weather for my location:

    'weather': [{'id': 803, 'main': 'Clouds', 'description': 'broken clouds', 'icon': '04d'}], 'base': 'stations', 'main': {'temp': 282.54, 'feels_like': 282.54, 'temp_min': 279.47, 'temp_max': 285.29, 'pressure': 1018, 'humidity': 85}, 'visibility': 10000, 'wind': {'speed': 0.45, 'deg': 0, 'gust': 1.79}, 'clouds': {'all': 75} [...snip...]

    Note that the wind speed (in m/s) is 0.45 average and 1.79 gust, or 0.9 kts average and 3.5 knots gust. This is not a windy or gusty day. I think a gusty day would be at least 15 kts.

    I suggest instead that the "cloudy" (and day-cloudy/night-cloudy variants) are a better mapping than "cloudy-gusts".

    I could open a pull request with this change but wanted to gather and feedback first. Thank you!

  • 14

    Polar twilight icons

    What about icons symboling polar twilight (Polar twilight occurs in areas that are located at the inner border of the polar circles, where the Sun will be on or below the horizon).

    E.g. similar to the symbols uses by the Yr Icons Api, a horizontal line above the icon: https://api.met.no/weatherapi/weathericon/2.0/documentation

  • 15

    Icon mapping for OpenWeather codes 803 & 804

    The api mapping for OpenWeather doesn't correctly adjust for day/night on codes 803 and 804, instead pointing to same icon as the neutral mapping.


    .wi-owm-803:before {
      content: "\f013";
    .wi-owm-night-804:before {
      content: "\f013";


    .wi-owm-day-803:before {
      content: "\f013";
    .wi-owm-day-804:before {
      content: "\f013";


    .wi-owm-night-803:before {
      content: "\f013";
    .wi-owm-night-804:before {
      content: "\f013";

    I believe day should be using f002 and night should be using f086.

    Additionally, for consistency with the night icon, I believe the mapping for .wi-owm-day-801 should be changed to icon f00c.

  • 16

    Icon request - biggest / optimal size templae


    I dig your icons very much, however I find it slightly difficult to find an optimal size and placement. I think it might be a good idea to make a rectangle icon that would represent the maximum size for all available icons (or maybe at least all weather icons?).

    Anyway, thanks for your great work.