{"id":13552414,"url":"https://github.com/manifestinteractive/weather-underground-icons","last_synced_at":"2025-04-03T03:31:41.336Z","repository":{"id":54203460,"uuid":"65268721","full_name":"manifestinteractive/weather-underground-icons","owner":"manifestinteractive","description":"Weather Underground Icons ( PNG \u0026 SVG )","archived":true,"fork":false,"pushed_at":"2021-03-03T11:03:44.000Z","size":4964,"stargazers_count":271,"open_issues_count":5,"forks_count":99,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-18T03:51:47.614Z","etag":null,"topics":["black-icons","color-icons","css","png","png-icons","svg","svg-icons","weather-icons","weather-underground","white-icons"],"latest_commit_sha":null,"homepage":"http://peter.build/weather-underground-icons/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manifestinteractive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-09T06:25:07.000Z","updated_at":"2025-02-17T17:57:01.000Z","dependencies_parsed_at":"2022-08-13T09:10:23.812Z","dependency_job_id":null,"html_url":"https://github.com/manifestinteractive/weather-underground-icons","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manifestinteractive%2Fweather-underground-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manifestinteractive%2Fweather-underground-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manifestinteractive%2Fweather-underground-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manifestinteractive%2Fweather-underground-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manifestinteractive","download_url":"https://codeload.github.com/manifestinteractive/weather-underground-icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246933434,"owners_count":20857048,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["black-icons","color-icons","css","png","png-icons","svg","svg-icons","weather-icons","weather-underground","white-icons"],"created_at":"2024-08-01T12:02:03.627Z","updated_at":"2025-04-03T03:31:36.293Z","avatar_url":"https://github.com/manifestinteractive.png","language":"HTML","funding_links":["https://www.paypal.me/manifestinteractive"],"categories":["HTML","css"],"sub_categories":[],"readme":"[![Buy Me Coffee](https://peterschmalfeldt.com/buy-me-coffee.png)](https://www.paypal.me/manifestinteractive)\n\nWeather Underground Icons\n======\n\nThese 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.\n\n![tstorms](dist/icons/black/png/256x256/tstorms.png \"tstorms\")\n\nDemo Website\n---\n\n[http://peter.build/weather-underground-icons/](http://peter.build/weather-underground-icons/)\n\nExample Application\n---\n\nHere 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.\n\nUsage Instructions\n---\n\n[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.\n\nImage Usage Instructions\n---\n\nIf 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.\n\nCSS Usage Instructions\n---\n\nIf you wish to use the use the CSS version of this project, you just need to copy this `dist` folder into your project.\n\nThen you can use the icon keys with a `wu-` prefix to load whichever icon you want:\n\n```html\n\u003ci class=\"wu wu-white wu-64 wu-chanceflurries\"\u003e\u003c/i\u003e\n```\n\nAll 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.\n\n### Icon Class Colors:\n\n* `wu-black` icons with `black` lines\n\n```html\n\u003ci class=\"wu wu-black wu-32 wu-chanceflurries\"\u003e\u003c/i\u003e\n```\n\n![tstorms](dist/icons/black/png/32x32/tstorms.png \"tstorms\")\n\n* `wu-white` icons with `white` lines\n\n```html\n\u003ci class=\"wu wu-white wu-32 wu-chancerain\"\u003e\u003c/i\u003e\n```\n\n![tstorms](dist/icons/white/png/32x32/tstorms.png \"tstorms\")\n\n### Icon Class Day \u0026 Night:\n\n* Default is to use Day Icons\n\n```html\n\u003ci class=\"wu wu-black wu-32 wu-clear\"\u003e\u003c/i\u003e\n```\n\n![clear](dist/icons/black/png/32x32/clear.png \"clear\")\n\n* `wu-night` to use Night Icons\n\n```html\n\u003ci class=\"wu wu-white wu-32 wu-clear wu-night\"\u003e\u003c/i\u003e\n```\n\n![clear](dist/icons/white/png/32x32/nt_clear.png \"clear\")\n\n### Icon Class Sizes:\n\n* `wu-16` 16x16px icons\n\n```html\n\u003ci class=\"wu wu-black wu-16 wu-chancesnow\"\u003e\u003c/i\u003e\n```\n\n![chancesnow](dist/icons/black/png/16x16/chancesnow.png \"chancesnow\")\n\n* `wu-32` 32x32px icons\n\n```html\n\u003ci class=\"wu wu-black wu-32 wu-chancetstorms\"\u003e\u003c/i\u003e\n```\n\n![chancetstorms](dist/icons/black/png/32x32/chancetstorms.png \"chancetstorms\")\n\n* `wu-64` 64x64px icons\n\n```html\n\u003ci class=\"wu wu-black wu-64 wu-clear\"\u003e\u003c/i\u003e\n```\n\n![clear](dist/icons/black/png/64x64/clear.png \"clear\")\n\n* `wu-128` 128x128px icons\n\n```html\n\u003ci class=\"wu wu-black wu-128 wu-cloudy\"\u003e\u003c/i\u003e\n```\n\n![cloudy](dist/icons/black/png/128x128/cloudy.png \"cloudy\")\n\n* `wu-256` 256x256px icons\n\n```html\n\u003ci class=\"wu wu-black wu-256 wu-flurries\"\u003e\u003c/i\u003e\n```\n\n![flurries](dist/icons/black/png/256x256/flurries.png \"flurries\")\n\nDay Icon Key\n---\n\nHere are the `icon` options for each weather option:\n\nICON | KEY | DESCRIPTION\n---- | --- | -----------\n![chanceflurries](dist/icons/black/png/32x32/chanceflurries.png \"chanceflurries\") | chanceflurries | Chance of Flurries\n![chancerain](dist/icons/black/png/32x32/chancerain.png \"chancerain\") | chancerain | Chance of Rain\n![chancesleet](dist/icons/black/png/32x32/chancesleet.png \"chancesleet\") | chancesleet | Chance Freezing Rain\n![chancesnow](dist/icons/black/png/32x32/chancesnow.png \"chancesnow\") | chancesnow | Chance of Snow\n![chancetstorms](dist/icons/black/png/32x32/chancetstorms.png \"chancetstorms\") | chancetstorms | Chance of Thunderstorms\n![clear](dist/icons/black/png/32x32/clear.png \"clear\") | clear | Clear\n![cloudy](dist/icons/black/png/32x32/cloudy.png \"cloudy\") | cloudy | Cloudy\n![flurries](dist/icons/black/png/32x32/flurries.png \"flurries\") | flurries | Flurries\n![fog](dist/icons/black/png/32x32/fog.png \"fog\") | fog | Fog\n![hazy](dist/icons/black/png/32x32/hazy.png \"hazy\") | hazy | Haze\n![mostlycloudy](dist/icons/black/png/32x32/mostlycloudy.png \"mostlycloudy\") | mostlycloudy | Mostly Cloudy\n![mostlysunny](dist/icons/black/png/32x32/mostlysunny.png \"mostlysunny\") | mostlysunny | Mostly Sunny\n![partlycloudy](dist/icons/black/png/32x32/partlycloudy.png \"partlycloudy\") | partlycloudy | Partly Cloudy\n![partlysunny](dist/icons/black/png/32x32/partlysunny.png \"partlysunny\") | partlysunny | Partly Sunny\n![rain](dist/icons/black/png/32x32/rain.png \"rain\") | rain | Rain\n![sleet](dist/icons/black/png/32x32/sleet.png \"sleet\") | sleet | Freezing Rain\n![snow](dist/icons/black/png/32x32/snow.png \"snow\") | snow | Snow\n![sunny](dist/icons/black/png/32x32/sunny.png \"sunny\") | sunny | Sunny\n![tstorms](dist/icons/black/png/32x32/tstorms.png \"tstorms\") | tstorms | Thunderstorms\n![unknown](dist/icons/black/png/32x32/unknown.png \"unknown\") | unknown | Unknown\n\n\nNight Icon Key\n---\n\nHere are the `icon` options for each weather option:\n\nICON | KEY | DESCRIPTION\n---- | --- | -----------\n![chanceflurries](dist/icons/black/png/32x32/nt_chanceflurries.png \"chanceflurries\") | chanceflurries | Chance of Flurries\n![chancerain](dist/icons/black/png/32x32/nt_chancerain.png \"chancerain\") | chancerain | Chance of Rain\n![chancesleet](dist/icons/black/png/32x32/nt_chancesleet.png \"chancesleet\") | chancesleet | Chance Freezing Rain\n![chancesnow](dist/icons/black/png/32x32/nt_chancesnow.png \"chancesnow\") | chancesnow | Chance of Snow\n![chancetstorms](dist/icons/black/png/32x32/nt_chancetstorms.png \"chancetstorms\") | chancetstorms | Chance of Thunderstorms\n![clear](dist/icons/black/png/32x32/nt_clear.png \"clear\") | clear | Clear\n![cloudy](dist/icons/black/png/32x32/nt_cloudy.png \"cloudy\") | cloudy | Cloudy\n![flurries](dist/icons/black/png/32x32/nt_flurries.png \"flurries\") | flurries | Flurries\n![fog](dist/icons/black/png/32x32/nt_fog.png \"fog\") | fog | Fog\n![hazy](dist/icons/black/png/32x32/nt_hazy.png \"hazy\") | hazy | Haze\n![mostlycloudy](dist/icons/black/png/32x32/nt_mostlycloudy.png \"mostlycloudy\") | mostlycloudy | Mostly Cloudy\n![mostlysunny](dist/icons/black/png/32x32/nt_mostlysunny.png \"mostlysunny\") | mostlysunny | Mostly Sunny\n![partlycloudy](dist/icons/black/png/32x32/nt_partlycloudy.png \"partlycloudy\") | partlycloudy | Partly Cloudy\n![partlysunny](dist/icons/black/png/32x32/nt_partlysunny.png \"partlysunny\") | partlysunny | Partly Sunny\n![rain](dist/icons/black/png/32x32/nt_rain.png \"rain\") | rain | Rain\n![sleet](dist/icons/black/png/32x32/nt_sleet.png \"sleet\") | sleet | Freezing Rain\n![snow](dist/icons/black/png/32x32/nt_snow.png \"snow\") | snow | Snow\n![sunny](dist/icons/black/png/32x32/nt_sunny.png \"sunny\") | sunny | Sunny\n![tstorms](dist/icons/black/png/32x32/nt_tstorms.png \"tstorms\") | tstorms | Thunderstorms\n![unknown](dist/icons/black/png/32x32/nt_unknown.png \"unknown\") | unknown | Unknown\n\n\nDay Icon Preview\n---\n\n![White Day Icons](dist/icons/white/icon-preview.png \"White Icons\")\n\n![Black Day Icons](dist/icons/black/icon-preview.png \"Black Icons\")\n\n![White Day Icons](dist/icons/solid-white/icon-preview.png \"White Icons\")\n\n![Black Day Icons](dist/icons/solid-black/icon-preview.png \"Black Icons\")\n\n\nNight Icon Preview\n---\n\n![White Night Icons](dist/icons/white/icon-preview-nt.png \"White Icons\")\n\n![Black Night Icons](dist/icons/black/icon-preview-nt.png \"Black Icons\")\n\n![White Day Icons](dist/icons/solid-white/icon-preview-nt.png \"White Icons\")\n\n![Black Day Icons](dist/icons/solid-black/icon-preview-nt.png \"Black Icons\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanifestinteractive%2Fweather-underground-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanifestinteractive%2Fweather-underground-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanifestinteractive%2Fweather-underground-icons/lists"}