Custom brand icons
Custom brand icons for Home Assistant
Icons/Brands Available
- Amazon echo
- Apple
- Aqara
- Battery
- Blink
- Car manufacturer
- Christmas decorations
- Doors
- Elgato
- Fritz
- House Rooms
- Ikea
- LG
- Meross
- Miscellany of icons
- Modem/Router ISP
- Moes
- Netgear
- Philips Hue
- Reolink
- Ring
- Schneider Electric
- Sonoff
- Sonos
- Stage DMX Lights
- Tesla
- Tp-link
- Ubiquiti
- Window and Roller Shutter
- Dyson
- Duco Ventilation
- HA Addons
- Networking
- Shutter percentage of opening
- Umage Lamps
Philips Hue
These are the official icons from the philips developer channel
Hue made by @rchiileea
Miscellany of icons
Sonoff device
Icon | Name | Icon | Name |
---|---|---|---|
bridge | mini | ||
smart-camera | smart-plug-sonoff | ||
usb-smart-adaptor | window-sensor |
Moes device
Icon | Name | Icon | Name |
---|---|---|---|
moes-switch-dual | moes-switch-single | ||
moes-switch-triple |
Modem/Router ISP
Icon | Name | Icon | Name |
---|---|---|---|
fastgate | nexxt |
Meross device
Battery status
Icon | Name | Icon | Name |
---|---|---|---|
battery-charged | battery-critical | ||
battery-full | battery-good | ||
battery-half | battery-low |
Netgear device
Alexa device
Icon | Name | Icon | Name |
---|---|---|---|
echo-dot-4-group | echo-dot-gen-3 | ||
echo-dot-gen-4-clock | echo-dot-gen-4 | ||
echo-gen-2 | echo-plus | ||
echo-show-5-gen-2 | echo-show-5-group | ||
echo-show-8-gen-2 | echo-show-8-group | ||
echo-spot |
Sonos device
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
sonos-arc | sonos-beam | ||
sonos-bookshelf-horizontal | sonos-bookshelf-vertical | ||
sonos-move | sonos-one | ||
sonos-playbar | sonos-sub |
Apple device
Icon | Name | Icon | Name |
---|---|---|---|
apple-airpods-pro | apple-airpods | ||
apple-ipad-pro | apple-iphone | ||
apple-tv-box | apple-tv | ||
apple-watch-alt | apple-watch | ||
apple-tv-gen2-remote | homepod-mini | ||
homepod | imac |
Blink Cameras
Icon | Name | Icon | Name |
---|---|---|---|
mini-camera | sync-module | ||
xt2-camera |
Elgato
Icon | Name | Icon | Name |
---|---|---|---|
elgato-key-light-air | elgato-key-light | ||
elgato-ring-light |
Icon | Name | Icon | Name |
---|---|---|---|
google-home | google-wifi-router | ||
home-max | home-mini | ||
nest-wifi-repeater | nest-wifi-router |
Window and Roller Shutter
Icons made by @rchiileea
Doors
Icons made by @rchiileea
Ring
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
ring-alarm-panel | ring-alarm | ||
ring-doorbell-pro | ring-doorbell | ||
ring-floodlight | ring-smart-lighting | ||
ring-spotlight-cam | ring-stick-up-cam |
Christmas decorations
Icon | Name | Icon | Name |
---|---|---|---|
christmas-lights | christmas-tree-v2 | ||
christmas-tree | christmas-wreath |
Ikea
Icons made by @rchiileea and @Gtt1229
Icon | Name | Icon | Name |
---|---|---|---|
desk-sit-alt | desk-sit | ||
desk-stand-alt | desk-stand | ||
ikea-5-spot | ikea-blind-closed | ||
ikea-blind-open | regolit-arc-lamp | ||
symfonisk-lampe | ikea-hektar3 |
Schneider Electric
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
apc-ups-basic | apc-ups-upright | ||
wiser-heating-ctl-off | wiser-heating-ctl-on | ||
wiser-thermostat-off | wiser-thermostat-on |
Reolink
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
reolink-510 | reolink-811 | ||
reolink-820 | reolink-842 | ||
reolink-argus | reolink-e1 | ||
reolink-go |
Tesla
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
model-s-charge-side | model-s-charge | ||
model-s-side | model-s | ||
model-x-charge | model-x-open | ||
tesla-icon |
Tp-Link
Icons made by @rchiileea
Icon | Name |
---|---|
tp-link-tapo |
Ubiquiti
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
ubiquiti-ap | ubiquiti-logo | ||
ubiquiti-usg-p3 | ubiquiti |
Fritz
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
fritz-repeater | fritzbox-7530 |
LG
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
lg-air-purifier | lg-aircon | ||
lg-cooker | lg-fridge | ||
lg-oled55 | lg-signiture |
Car manufacturer icon
Icons made by @rchiileea
Aqara icon
Icons made by @rchiileea
Stage DMX Lights
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
stage-backlight | stage-light-group | ||
stage-light | stage-spot-light | ||
stage-uplight | stagel-light-2-group | ||
stagel-light-2 |
House Rooms
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
bathroom | bedroom | ||
driveway | garage-alt-open | ||
garage-alt-shut | garden | ||
kids-room | kitchen | ||
living-room | office | ||
outside |
Dyson
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
dyson-desk | dyson-floor |
Duco Ventilation
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
duco-auto | duco-logo | ||
duco-1 | duco-2 | ||
duco-3 |
HA Addons
Icons made by @sandrybridge
Icon | Name | Icon | Name |
---|---|---|---|
cloudflare | mosquitto | ||
nginx | duckdns | ||
nut | adguard | ||
samba | esphome |
Networking
Icons made by @sandrybridge
Icon | Name | Icon | Name |
---|---|---|---|
pfsense-logo | openwrt-logo |
Shutter percentage of opening
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
shutter-0 | shutter-10 | ||
shutter-20 | shutter-30 | ||
shutter-40 | shutter-50 | ||
shutter-60 | shutter-70 | ||
shutter-80 | shutter-90 | ||
shutter-100 |
Umage Lamps
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
umage | umage-carmina | ||
umage-acorn |
Install
HACS
We recommend installing Custom brand icons card via Home Assistant Community Store
- Add the folowing to the
frontend
section of yourconfiguration.yaml
frontend:
extra_module_url:
- /local/community/custom-brand-icons/custom-brand-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/custom-brand-icons/custom-brand-icons.js
Manual Installation
To add custom repositories please follow this guide. Set URL to https://github.com/elax46/custom-brand-icons
and category to Lovelace
.
-
Download
custom-brand-icons.js
file from the latest release. -
Copy the
custom-brand-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/custom-brand-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/custom-brand-icons.js
Restart home-assistant.
Use
you can use icons by entering the prefix phu:
Example of integration in the card
entities:
- entity: light.lampada_entrance
icon: 'phu:go'
name: Go
- entity: light.monitor_2_right
icon: 'phu:play'
name: play 1
- entity: light.monitor_2_left
icon: 'phu:play'
name: play 2
show_header_toggle: false
title: Custom brand icons
type: entities
Help me insert more icons!
Attention I remind you that the icons must be in svg format
If you want, you can help me expand the number of icons available. Just add the following string to the var icons
variable of the custom-brand-icons.js
file
let's take the first string for example:
"Bollard": [0, 0, 24.0, 24.0, "string"]
-
Bollard
= icon name -
0, 0, 24.0, 24.0
= this data can be recovered from the svg fileviewBox="0 0 24 24"
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,...."
In particular you will have to enter only the part of the vector code"M21,12.5 C21,13.33 18.76"
For an example take a look at the icons already inserted -
When you open a pull request do it on the dev branch
-
In addition to inserting the icon in the
icon-svg
folder and updating thecustom-brand-icons.js
file, remember to also update theREADME.md
file by inserting the new icon
Don't see the icon?
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
Make icon
To make an icon in svg format you can use different programs starting from illustrator or inkview. The size of the icons must be 24x24 and the svg code must not contain transform, translate, scale but only viewbox
Icon Requests?
The icon is not there? open a custom icon request The icons to integrate must be in svg format
Customize the prefix
In case you want to create your own perfix you can edit the last line of the custom-brand-icons.js
window.customIconsets["yourprefix"] = getIcon;
Pulls requests
If you want to integrate icons or change errors in the documentation do not hesitate to open a pull request remember to open it on the dev branch
Thanks
Thanks, as always, to the precious contribution to @rchiileea for the creation of the required icons!
Support the project
Do you like these icons? Support the project with a pizza