Custom brand icons for Home Assistant
At the moment I have integrated only the main icons of Philips Hue products!
Icon | Name |
---|---|
snake |
We recommend installing Akentner brand icons card via Home Assistant Community Store
- Add the folowing to the
frontend
section of yourconfiguration.yaml
frontend:
extra_module_url:
- /local/community/hass-akentner-icons/hass-akentner-icons.js
- (optional) Or add the following to your lovelace configuration using the Raw Config editor under Configure UI or ui-lovelace.yaml if using YAML mode.
resources:
- type: js
url: /local/community/hass-akentner-icons/hass-akentner-icons.js
To add custom repositories please follow this guide. Set URL to https://github.com/akentner/hass-akentner-icons
and category to Lovelace
.
-
Download
hass-akentner-icons.js
file from the latest release. -
Copy the
hass-akentner-icons.js
file into<config>/www/
the directory where yourconfiguration.yaml
resides. -
Add the folowing to the
frontend
section of yourconfiguration.yaml
frontend:
extra_module_url:
- /local/hass-akentner-icons.js
Or add the following to your lovelace configuration using the Raw Config editor under Configure UI or ui-lovelace.yaml if using YAML mode.
resources:
- type: js
url: /local/hass-akentner-icons.js
Restart home-assistant.
you can use icons by entering the prefix akentner:
Example of integration in the card
entities:
- entity: light.lampada_entrance
icon: 'akentner:snake'
name: Snake
show_header_toggle: false
title: Custom brand icons
type: entities
In case you want to create your own perfix you can edit the last line of the hass-akentner-icons.js
window.customIconsets["yourprefix"] = getIcon;
It probably depends on the cache. Open Home assistant from an incognito window and check that the icon loads if yes then it depends on the cache, otherwise double check the installation
Attention I remind you that the icons must be in svg format
If you like, you can help me expand the number of icons available. Just add to the variable var icons
let's take the first string for example:
"Bollard": [0, 0, 32.0, 32.0, "string"]
-
Bollard
= icon name -
0, 0, 32.0, 32.0
= this data can be recovered from the svg filetransform="scale(0, 0, 32.0, 32.0)
If this data is not present in the file you can leave the one indicated by me -
String
= this data can be recovered from the svg file<path d="M21,12.5 C21,13.33 18.76,...."