What it does
Weather Icons provides a weather-themed icon font with CSS helpers. It includes condition symbols, moon phases, wind indicators and documented service-code mappings.
Weather Icons covers more than sun and rain: the catalog includes moon phases, the Beaufort wind scale and maritime warnings. Download Now provides the project archive. Put its CSS and font folders in the documented relative locations, then use a class such as wi wi-day-sunny on an icon element.
Wind indicators also need weather-icons-wind.min.css. A direction combines wi wi-wind with a bearing class such as from-293-deg. The distinction matters: from-90-deg and towards-270-deg point the same way. Choose the convention that matches the wind data you display.
The companion stylesheets map named weather-service codes to icons; compare those mappings with your provider’s current codes when connecting live data. For graphic work, the supplied OTF and TTF fonts let you copy characters from the catalog into a design application. The font uses SIL OFL 1.1, the code MIT, and the documentation CC BY 3.0.
Strengths
- Includes wind, moon-phase and maritime symbols.
- Supports CSS styling and desktop use through OTF and TTF fonts.
Watch out for
- Wind indicators require an additional stylesheet.
Best for
- Forecast cards.
- Weather dashboards with wind information.
Sources
- Weather Icons: Weather Themed Icons and CSS (Oct 27, 2026)
- Weather Icons (Oct 27, 2026)