https://github.com/manifestinteractive/weather-underground-icons
Weather Underground Icons ( PNG & SVG )
https://github.com/manifestinteractive/weather-underground-icons
black-icons color-icons css png png-icons svg svg-icons weather-icons weather-underground white-icons
Last synced: 7 months ago
JSON representation
Weather Underground Icons ( PNG & SVG )
- Host: GitHub
- URL: https://github.com/manifestinteractive/weather-underground-icons
- Owner: manifestinteractive
- License: other
- Archived: true
- Created: 2016-08-09T06:25:07.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2021-03-03T11:03:44.000Z (over 4 years ago)
- Last Synced: 2025-03-18T03:51:47.614Z (8 months ago)
- Topics: black-icons, color-icons, css, png, png-icons, svg, svg-icons, weather-icons, weather-underground, white-icons
- Language: HTML
- Homepage: http://peter.build/weather-underground-icons/
- Size: 4.73 MB
- Stars: 271
- Watchers: 17
- Forks: 99
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - manifestinteractive/weather-underground-icons - Weather Underground Icons ( PNG & SVG ) (css)
README
[](https://www.paypal.me/manifestinteractive)
Weather Underground Icons
======
These icons were created by the Graphic Designer [Ashley Jager](http://www.ajager.com/#/weather-underground/). She released these icons in a beautiful [Adobe Illustrator](https://dribbble.com/shots/1879422-Weather-Underground-Icons) file. This project simply breaks that AI file up into web friendly icons that can be used in your projects.
Demo Website
---
[http://peter.build/weather-underground-icons/](http://peter.build/weather-underground-icons/)
Example Application
---
Here is an [Example Application](https://peter.build/wu/) that uses these icons. You can access the [Github Repo](https://github.com/manifestinteractive/weather-underground-app) for source code.
Usage Instructions
---
[Weather Underground](https://www.wunderground.com/) has an [API](https://www.wunderground.com/weather/api/d/docs) 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:
```html
```
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](https://modernizr.com/) and the browser does not support SVG.
### Icon Class Colors:
* `wu-black` icons with `black` lines
```html
```
* `wu-white` icons with `white` lines
```html
```
### Icon Class Day & Night:
* Default is to use Day Icons
```html
```
* `wu-night` to use Night Icons
```html
```
### Icon Class Sizes:
* `wu-16` 16x16px icons
```html
```
* `wu-32` 32x32px icons
```html
```
* `wu-64` 64x64px icons
```html
```
* `wu-128` 128x128px icons
```html
```
* `wu-256` 256x256px icons
```html
```
Day Icon Key
---
Here are the `icon` options for each weather option:
ICON | KEY | DESCRIPTION
---- | --- | -----------
 | chanceflurries | Chance of Flurries
 | chancerain | Chance of Rain
 | chancesleet | Chance Freezing Rain
 | chancesnow | Chance of Snow
 | chancetstorms | Chance of Thunderstorms
 | clear | Clear
 | cloudy | Cloudy
 | flurries | Flurries
 | fog | Fog
 | hazy | Haze
 | mostlycloudy | Mostly Cloudy
 | mostlysunny | Mostly Sunny
 | partlycloudy | Partly Cloudy
 | partlysunny | Partly Sunny
 | rain | Rain
 | sleet | Freezing Rain
 | snow | Snow
 | sunny | Sunny
 | tstorms | Thunderstorms
 | unknown | Unknown
Night Icon Key
---
Here are the `icon` options for each weather option:
ICON | KEY | DESCRIPTION
---- | --- | -----------
 | chanceflurries | Chance of Flurries
 | chancerain | Chance of Rain
 | chancesleet | Chance Freezing Rain
 | chancesnow | Chance of Snow
 | chancetstorms | Chance of Thunderstorms
 | clear | Clear
 | cloudy | Cloudy
 | flurries | Flurries
 | fog | Fog
 | hazy | Haze
 | mostlycloudy | Mostly Cloudy
 | mostlysunny | Mostly Sunny
 | partlycloudy | Partly Cloudy
 | partlysunny | Partly Sunny
 | rain | Rain
 | sleet | Freezing Rain
 | snow | Snow
 | sunny | Sunny
 | tstorms | Thunderstorms
 | unknown | Unknown
Day Icon Preview
---
Night Icon Preview
---
