I wanted to start a thread for links to animated SVG icons. If you know of some free ones, just reply with the link. Here’s one I’ve been using from another thread.
1 Like
How are you using them in HA?
Yeah but I mean are they specified as bitmaps using the picture: or icon:?
Here’s an example using Dark Sky weather and a binary_sensor. You just have to name the files appropriately and put them in the www. I used a sub directory called “animated” folder. But I’d like to do for more than just weather, if I could find more icons for alarms, scenes etc.
binary_sensor:
- platform: template
sensors:
weather_icon:
friendly_name: Current Conditions
entity_id:
- sensor.dark_sky_icon
value_template: >-
{% if is_state("sensor.dark_sky_icon", "clear-day")%}on
{% else %}on
{% endif %}
entity_picture_template: >-
{% set weather = (states.sensor.dark_sky_icon.state) %}
{% set path = "/local/animated/" %}
{% set ext = ".svg"%}
{{[path,weather,ext]|join("")}}
2 Likes
Thanks, exactly what I was looking for.
need to bump this, sorry.
My weather sensor needs some mapping of the states to be able to use the animated weather icons.
{% set map =
{ 'clear-night': 'day',
'cloudy': 'cloudy',
'fog': 'cloudy',
'hail': 'rainy-7',
'lightning': 'thunder',
'lightning-rainy': 'thunder',
'Mostly Cloudy': 'cloudy',
'partlycloudy': 'cloudy-day-3',
'pouring': 'rainy-6',
'rainy': 'rainy-5',
'snowy': 'snowy-6',
'snowy-rainy': 'rainy-7',
'sunny': 'day',
'windy': 'cloudy',
'windy-variant': 'cloudy-day-3'} %}
{% set state = states('sensor.rsd_current') %}
{% set weather = map[state] %}
{% set path = '/local/weather/animated/' %}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')|lower}}
i must be missing something because all i get is:
/local/weather/animated/.svg
while {{states('sensor.rsd_current')}} is Mostly Cloudy
please take the loupe for me?
{% set map =
{ 'clear-night': 'day',
'cloudy': 'cloudy',
'fog': 'cloudy',
'hail': 'rainy-7',
'lightning': 'thunder',
'lightning-rainy': 'thunder',
'Mostly Cloudy': 'cloudy',
'Partly Cloudy': 'cloudy',
'partlycloudy': 'cloudy-day-3',
'pouring': 'rainy-6',
'rainy': 'rainy-5',
'snowy': 'snowy-6',
'snowy-rainy': 'rainy-7',
'sunny': 'day',
'windy': 'cloudy',
'windy-variant': 'cloudy-day-3'} %}
{% set state = states('sensor.rsd_current') %}
{% set weather = map[state] %}
{% set path = '/local/weather/animated/' %}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')|lower}}
Partly Cloudy works fine…??
the icons work fine:
Can it be that sensor.rsd_current does not return exactly Mostly Cloudy but instead perhaps with a leading or trailing whitespace?
What does <{{states('sensor.rsd_current')}}> return? (note the <>)
not sure, could be, must have another look, good catch
no spaces…
for security changed it into:
entity_picture_template: >
{% set map =
{ 'clear-night': 'night',
'clear-day': 'day',
'cloudy': 'cloudy',
'fog': 'cloudy',
'hail': 'rainy-7',
'lightning': 'thunder',
'lightning-rainy': 'thunder',
'Mostly Cloudy': 'cloudy',
'Partly Cloudy': 'cloudy-day-3',
'partlycloudy': 'cloudy-day-3',
'pouring': 'rainy-6',
'Rain': 'rainy-4',
'rainy': 'rainy-5',
'Showers': 'rainy-6',
'snowy': 'snowy-6',
'snowy-rainy': 'rainy-7',
'sunny': 'day',
'windy': 'cloudy',
'windy-variant': 'cloudy-day-3'} %}
{% set state = states('sensor.rsd_current') %}
{% set weather = map[state] if state in map else 'weather' %}
{% set path = '/local/weather/animated/' %}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')|lower}}
First: You shouldn’t use the word ‘map’ as a variable. That is a method already, and you will overwrite it in that environment. That’s why I always use ‘mapper’.
Second: what are your states coming out of sensor.rsd_current? You need to find all strings that come out of that and map them properly. Also, you may want to make everything the same case. Right now, your map values have lower and upper case items. Make your map only contain lower case entities and then convert the state to lowercase. Also, you may want to replace the ‘-’ symbol with spaces as well. Maps only work when the key exists in the map. If the key differs in any way, it will not work.
Third: Fix your spacing.
Forth: I know you like shortening code, so here goes:
{% set mapper =
{ 'clear night': 'day',
'cloudy': 'cloudy',
'fog': 'cloudy',
'hail': 'rainy-7',
'lightning': 'thunder',
'lightning rainy': 'thunder',
'mostly cloudy': 'cloudy',
'partly cloudy': 'cloudy',
'partlycloudy': 'cloudy-day-3',
'pouring': 'rainy-6',
'rainy': 'rainy-5',
'snowy': 'snowy-6',
'snowy rainy': 'rainy-7',
'sunny': 'day',
'windy': 'cloudy',
'windy variant': 'cloudy-day-3'} %}
{% set state = states('sensor.rsd_current').lower().replace('-',' ') %}
{{ '/local/weather/animated/{}.svg'.format(mapper[state]) }}
and i thought you would have been proud of me…
mapper: check!
keys /states:
Uppercase with spaces:
I know I havent got the right keys yet, and they’re mixed up. Thats because I took them out of the custom_weather card, which also uses these svg weather icons.
Oddly enough both that card and this sensor use Yahoo weather. The sensor states are uppercase with spaces, the card sees only the lower case with dashes… If I change all to lower case in the mapper, the correct state isn’t found and the ‘else’ calls, and weather.svg is made:
So yes, will have to find the appropriate keys, and, as you’ve explained elsewhere, added the ‘else’ so there always is an icon.
spaces: check, hmmm, which exactly, my code is not correct?
shortening: yep, made that too. But for the exercise and code-syntax, also tried the @Jer78 code. Also, I now still need the ‘else’, how would you do that in your shorter version?
Thanks!
think found the yahoo condition codes on https://developer.yahoo.com/weather/?guccounter=1 though they’re not all there…
Uppercase spaces:
Partly Cloudy
Mostly Sunny
Breezy
Cloudy
Rain
Showers
Scattered Showers
a standard Dutch week 
here;'s the official doc: https://developer.yahoo.com/weather/documentation.html#codes
lower case, spaces…
{
"query": {
"count": 1,
"created": "2018-09-13T12:32:02Z",
"lang": "nl-nl",
"results": {
"channel": {
"units": {
"distance": "mi",
"pressure": "in",
"speed": "mph",
"temperature": "F"
},
"title": "Yahoo! Weather - Nome, AK, US",
"link": "http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-2460286/",
"description": "Yahoo! Weather for Nome, AK, US",
"language": "en-us",
"lastBuildDate": "Thu, 13 Sep 2018 04:32 AM AKDT",
"ttl": "60",
"location": {
"city": "Nome",
"country": "United States",
"region": " AK"
},
"wind": {
"chill": "48",
"direction": "23",
"speed": "4"
},
"atmosphere": {
"humidity": "90",
"pressure": "1025.0",
"rising": "0",
"visibility": "16.1"
},
"astronomy": {
"sunrise": "8:18 am",
"sunset": "9:35 pm"
},
"image": {
"title": "Yahoo! Weather",
"width": "142",
"height": "18",
"link": "http://weather.yahoo.com",
"url": "http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif"
},
"item": {
"title": "Conditions for Nome, AK, US at 03:00 AM AKDT",
"lat": "64.499474",
"long": "-165.405792",
"link": "http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-2460286/",
"pubDate": "Thu, 13 Sep 2018 03:00 AM AKDT",
"condition": {
"code": "29",
"date": "Thu, 13 Sep 2018 03:00 AM AKDT",
"temp": "48",
"text": "Partly Cloudy"
},
"forecast": [
{
"code": "30",
"date": "13 Sep 2018",
"day": "Thu",
"high": "55",
"low": "47",
"text": "Partly Cloudy"
},
{
"code": "39",
"date": "14 Sep 2018",
"day": "Fri",
"high": "53",
"low": "52",
"text": "Scattered Showers"
},
{
"code": "11",
"date": "15 Sep 2018",
"day": "Sat",
"high": "53",
"low": "51",
"text": "Showers"
},
{
"code": "12",
"date": "16 Sep 2018",
"day": "Sun",
"high": "52",
"low": "50",
"text": "Rain"
},
{
"code": "11",
"date": "17 Sep 2018",
"day": "Mon",
"high": "50",
"low": "47",
"text": "Showers"
},
{
"code": "39",
"date": "18 Sep 2018",
"day": "Tue",
"high": "50",
"low": "46",
"text": "Scattered Showers"
},
{
"code": "12",
"date": "19 Sep 2018",
"day": "Wed",
"high": "50",
"low": "48",
"text": "Rain"
},
{
"code": "26",
"date": "20 Sep 2018",
"day": "Thu",
"high": "51",
"low": "47",
"text": "Cloudy"
},
{
"code": "23",
"date": "21 Sep 2018",
"day": "Fri",
"high": "48",
"low": "40",
"text": "Breezy"
},
{
"code": "34",
"date": "22 Sep 2018",
"day": "Sat",
"high": "42",
"low": "36",
"text": "Mostly Sunny"
}
],
"description": "<![CDATA[<img src=\"http://l.yimg.com/a/i/us/we/52/29.gif\"/>\n<BR />\n<b>Current Conditions:</b>\n<BR />Partly Cloudy\n<BR />\n<BR />\n<b>Forecast:</b>\n<BR /> Thu - Partly Cloudy. High: 55Low: 47\n<BR /> Fri - Scattered Showers. High: 53Low: 52\n<BR /> Sat - Showers. High: 53Low: 51\n<BR /> Sun - Rain. High: 52Low: 50\n<BR /> Mon - Showers. High: 50Low: 47\n<BR />\n<BR />\n<a href=\"http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-2460286/\">Full Forecast at Yahoo! Weather</a>\n<BR />\n<BR />\n<BR />\n]]>",
"guid": {
"isPermaLink": "false"
}
}
}
}
}
}getting there, changed the entity_id (took it out) and, though the dummy value_template was new to me, and noted for future use, changed that for the true state of the weather sensor in use. Gives a more meaningful state than ‘On’…
weather_rsd_icon:
friendly_name: Weather in Rsd
value_template: >
{{states('sensor.rsd_current')}}
# {% if is_state('sensor.weather_rsd_icon', 'clear-day')%}on
# {% else %}on
# {% endif %}
entity_picture_template: >
{% set mapper =
{ 'Breezy': 'cloudy',
'Clear Night': 'night',
'Clear': 'day',
'Clear Day': 'day',
'Cloudy': 'cloudy',
'Fog': 'cloudy',
'Hail': 'rainy-7',
'Lightning': 'thunder',
'Mostly Cloudy': 'cloudy',
'Partly Cloudy': 'cloudy-day-3',
'Rain': 'rainy-4',
'Scattered Showers': 'rainy-3',
'Showers': 'rainy-6',
'Snow': 'snowy-6',
'Mostly Sunny': 'day',
'Sunny': 'day',
'Windy': 'cloudy'} %}
{% set state = states('sensor.rsd_current') %}
{% set weather = mapper[state] if state in mapper else 'weather' %}
{% set path = '/local/weather/animated/' %}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')|lower}}
thx for the inspiration!
1 Like
made one especially for you:
device_tracker.hassio:
templates:
entity_picture: >
return '/local/homeassistant/ha_animated_' + state + '.gif';
# if (state === 'home) return '/local/homeassistant/ha_animated.gif';
# return '/local/homeassistant/ha_animated_offline.gif';
theme: >
if (state === 'home') return 'green';
return 'red';
_stateDisplay: >
if (state === 'home') return 'Online';
return 'Offline';
3 Likes
Hi,
I try something similar with switch template, but not working.
Anyone who has more experience, please help.
There is a link:
https://community.home-assistant.io/t/custom-icon-in-switch-template-wont-show/89119/8
Hi, maybe someone can help me.
I am trying to use an animated SVG icon in lovelace custom button card.
It is not working but I can see the icon.
I searched here on the forum as well as google but nobody seems to have this problem…
To be sure I tried the wheater animate icons mentioned in this topic to be sure if my icon is ok.
Both icons work as expected both in windows explorer as in browser (safari, firefox, edge) but NOT in HomeAssistant.
I also tried a normal button card; same problem.
I have fontawsome installed; thats why I use the ‘fapro:’ prefix for the icon.
This is the setup
name: Boiler
show_name: true
show_icon: true
size: 50px
type: custom:button-card
tap_action:
action: toggle
entity: switch.dingtian_relay0_switch0_all_on_off
icon: fapro:boiler_filling
with the animated weather icons, (and any other picture not being an icon) you need to set the entity_picture, and not the icon option.
for that, you also need to set it to show:
show_entity_picture: true
Ahaaaa, how stupid.
Does that imply the color will not work?
Gladly noticed ‘size’ still does.
I wonder though, why it does not work like an icon since it is made exactly like the ‘official’ icons; difference is it is animated…
Anyway,many thanks for your reply!!!
yes, if it does not conform to the MDI specifications of an icon, to wont work (like an icon). I have my own fork of custom icons an use many of them, but they all are static. and can be used in the icon field.
If you want to go beyond that, either use entity pictures or gifs (like in the post of 4/5 years ago
or head over to the a ‘different take’ topic, where many animated icons are handmade.