Weather Icons

Basic Usage

The App Weather API returns icon identifiers that correspond to the open-source licensed Weather Icons font set.

Download Weather Icons

To use the Weather Icons on a website, download and extract the zip file linked above. Save the “css” and “font” folders to your website source directory. IMPORTANT: the “css” and “font” folders must exist as siblings within the same directory. Add a Weather Icons CSS file stylesheet link to the <head> section for your website :

    <link rel="stylesheet" type="text/css" href="path/to/css/weather-icons.min.css">

To place a weather icon on your webpage, add:

    <i class="wi {{icon}}"></i>

Replace {{icon}} with the icon string returned by the App Weather API (i.e. “wi-day-sunny”), and format as desired via CSS.

Icon Identifiers

The App Weather API returns the following weather icon identifiers:

  • wi-day-cloudy
  • wi-day-cloudy-gusts
  • wi-day-cloudy-windy
  • wi-day-light-wind
  • wi-day-rain
  • wi-day-showers
  • wi-day-snow
  • wi-day-sprinkle
  • wi-day-sunny
  • wi-day-sunny-overcast
  • wi-day-windy
  • wi-night-alt-cloudy
  • wi-night-alt-cloudy-gusts
  • wi-night-alt-cloudy-windy
  • wi-night-alt-partly-cloudy
  • wi-night-alt-rain
  • wi-night-alt-showers
  • wi-night-alt-snow
  • wi-night-alt-sprinkle
  • wi-night-clear
  • wi-rain
  • wi-showers
  • wi-snow
  • wi-sprinkle
  • wi-strong-wind
  • wi-windy