Hi!
I’ve been working on extracting the weather icons shipped with Home Assistant and provide them as custom icons so they can be used in badges, cards, etc.
The project lives in GitHub - scinos/lovelace-weather-icons: Official weather icons from Home Assistant
The icons provided so far are:
| Name | Icon |
|---|---|
wi:clear-night |
 |
wi:cloudy |
 |
wi:fog |
 |
wi:hail |
 |
wi:lightning-rainy |
 |
wi:lightning |
 |
wi:partlycloudy-night |
 |
wi:partlycloudy |
 |
wi:pouring |
 |
wi:rainy |
 |
wi:snowy-rainy |
 |
wi:snowy |
 |
wi:sunny |
 |
wi:windy-variant |
 |
wi:windy |
 |
Usage
I’m using this to customize the hourly weather card, now that support for custom icons has landed. This is how the card looks like with these icons:
Tech details
As far as I’m aware, this is the first iconset to provide multiple colors. Most sets are monotone and some are duotone, but this one is full color.
From a tech point of view, Home Assistant expects iconset to just be one SVG path. Some iconset (like fontawesome, thanks for the inspiration) provide two paths. I generalized that idea and this iconset is defined as full SVGs, not just path. This should allow injecting any valid SVG, including shapes, gradients…
Check the implementation of src/loader.js to see how it’s done.