Need help with weather-underground-icons?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

manifestinteractive
176 Stars 62 Forks Other 18 Commits 3 Opened issues

Description

Weather Underground Icons ( PNG & SVG )

Services available

!
?

Need anything else?

Contributors list

# 65,866
JavaScr...
PHP
Shell
svg-ico...
15 commits
# 373,520
C
Shell
Objecti...
zwave
1 commit

Buy Me Coffee

Weather Underground Icons

These icons were created by the Graphic Designer Ashley Jager. She released these icons in a beautiful Adobe Illustrator file. This project simply breaks that AI file up into web friendly icons that can be used in your projects.

tstorms

Demo Website

http://peter.build/weather-underground-icons/

Example Application

Here is an Example Application that uses these icons. You can access the Github Repo for source code.

Usage Instructions

Weather Underground has an API where you can fetch data remotely. The API returns an

icon
parameter as part of their JSON response that you can use to load custom icons.

Image Usage Instructions

If you just want to use the image files directly, and not use the CSS file you can just copy over the images directly from the

dist/icons
folder. See the Icon Key below to see which icons will be used.

CSS Usage Instructions

If you wish to use the use the CSS version of this project, you just need to copy this

dist
folder into your project.

Then you can use the icon keys with a

wu-
prefix to load whichever icon you want:

All CSS Icons will default to using SVG files. However, you can use PNG sprites by adding a

no-svg
class to the parent element that contains the weather icons.
no-svg
classnames will be added to your HTML tag automatically if you are using Modernizr and the browser does not support SVG.

Icon Class Colors:

  • wu-black
    icons with
    black
    lines

tstorms

  • wu-white
    icons with
    white
    lines

tstorms

Icon Class Day & Night:

  • Default is to use Day Icons

clear

  • wu-night
    to use Night Icons

clear

Icon Class Sizes:

  • wu-16
    16x16px icons

chancesnow

  • wu-32
    32x32px icons

chancetstorms

  • wu-64
    64x64px icons

clear

  • wu-128
    128x128px icons

cloudy

  • wu-256
    256x256px icons

flurries

Day Icon Key

Here are the

icon
options for each weather option:

ICON

KEY DESCRIPTION
chanceflurries chanceflurries Chance of Flurries
chancerain chancerain Chance of Rain
chancesleet chancesleet Chance Freezing Rain
chancesnow chancesnow Chance of Snow
chancetstorms chancetstorms Chance of Thunderstorms
clear clear Clear
cloudy cloudy Cloudy
flurries flurries Flurries
fog fog Fog
hazy hazy Haze
mostlycloudy mostlycloudy Mostly Cloudy
mostlysunny mostlysunny Mostly Sunny
partlycloudy partlycloudy Partly Cloudy
partlysunny partlysunny Partly Sunny
rain rain Rain
sleet sleet Freezing Rain
snow snow Snow
sunny sunny Sunny
tstorms tstorms Thunderstorms
unknown unknown Unknown

Night Icon Key

Here are the

icon
options for each weather option:

ICON

KEY DESCRIPTION
chanceflurries chanceflurries Chance of Flurries
chancerain chancerain Chance of Rain
chancesleet chancesleet Chance Freezing Rain
chancesnow chancesnow Chance of Snow
chancetstorms chancetstorms Chance of Thunderstorms
clear clear Clear
cloudy cloudy Cloudy
flurries flurries Flurries
fog fog Fog
hazy hazy Haze
mostlycloudy mostlycloudy Mostly Cloudy
mostlysunny mostlysunny Mostly Sunny
partlycloudy partlycloudy Partly Cloudy
partlysunny partlysunny Partly Sunny
rain rain Rain
sleet sleet Freezing Rain
snow snow Snow
sunny sunny Sunny
tstorms tstorms Thunderstorms
unknown unknown Unknown

Day Icon Preview

White Day Icons

Black Day Icons

White Day Icons

Black Day Icons

Night Icon Preview

White Night Icons

Black Night Icons

White Day Icons

Black Day Icons

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.