Weather Icons

215 Weather Themed Icons and CSS
Alternatives To Weather Icons
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Weather Icons6,622213202 months ago1March 30, 2015101CSS
215 Weather Themed Icons and CSS
Mahapps.metro.iconpacks1,468214398 months ago94October 18, 202119mitC#
Awesome icon packs for WPF and UWP in one library
142 years ago15April 05, 202027mitSwift
🎢Swift Library for Font Icons - ★ this library
Weather Icons448
2 months ago9May 06, 202115mitHTML
Free to use animated weather icons.
6 months ago3Dart
一款简约风格的 flutter 天气项目,提供实时、多日、24 小时、台风路径以及生活指数等服务,支持定位、删除、搜索等操作。
Weather Card383
a month ago92mit
Weather Card with animated icons for Home Assistant Lovelace
7 years agoCSS
Collection of iconfonts
Aaf Easydiary349
21 hours ago50gpl-3.0Kotlin
:blue_book: A diary application optimized for user experience.
5 days ago6gpl-3.0Java
A privacy friendly weather app for Android with built in rain radar
203 years ago2October 25, 20151apache-2.0Java
Weather Icon View for Android applications
Alternatives To Weather Icons
Select To Compare

Alternative Project Comparisons

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!

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

API Usage

This set includes companion CSS files for popular weather service API. Presently there are mappings for, 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).


Popular Icon Projects
Popular Weather Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Weather Icons