Make sure to install custom-brand-icons.js
into configuration.yaml
or ui-lovelace.yaml
- Custom brand icons
- Custom brand icons use the prefix
phu:
- Append Name (of the icon) afterphu:
- Icons Available
- Alexa
- Apple
- Aqara
- Battery Status
- Blink Cameras
- Car Manufacturers
- Christmas Decorations
- Doors
- Duco Ventilation
- Dyson
- Elgato
- Eufy
- Fritz
- Garbage Collection
- HA Addons
- House Rooms
- IKEA
- LG
- Meross
- Miscellany of Icons
- Modem/Router ISP
- Moes
- Netgear
- Networking
- Philips Hue Official
- Philips Hue Custom
- Reolink
- Ring
- Roku
- Schneider Electric
- Shutter Percentage of Opening
- Sonoff
- Sonos
- Stage DMX Lights
- Tesla
- Television
- TP-Link
- Ubiquiti
- Umage Lamps
- Pedastal
- Window and Roller Shutter
- Vacuum Parts
- Delivery Services
- Bose
- Solar
- Video Game Systems
- Cryptocurrency
- Yeelight
- SleepIQ / SleepNumber
- Installation Methods - HACS - Manual Installation
- User Manual
- Custom brand icons use the prefix
phu:
- Append Name (of the icon) afterphu:
- Don't see the icon? - Hard Reload (browser cache issue) - Redownload Integration - Reinstall Integration
- Icon Requests
- Thanks for your support
- Developer Workflow
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 |
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 | homekit | ||
homepod | homepod-mini | ||
imac |
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
battery-charged | battery-critical | ||
battery-full | battery-good | ||
battery-half | battery-low |
Icon | Name | Icon | Name |
---|---|---|---|
mini-camera | sync-module | ||
xt2-camera |
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
christmas-lights | christmas-tree-v2 | ||
christmas-tree | christmas-wreath |
Icons made by @rchiileea
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
duco-auto | duco-logo | ||
duco-1 | duco-2 | ||
duco-3 |
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
dyson-desk | dyson-floor |
Icon | Name | Icon | Name |
---|---|---|---|
elgato-key-light-air | elgato-key-light | ||
elgato-ring-light |
Icons made by @gtt1229
Icon | Name |
---|---|
eufy-doorbell |
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
fritz-repeater | fritzbox-7530 |
Icons made by @sandrybridge
Icon | Name | Icon | Name |
---|---|---|---|
garbage-plastic | garbage-organic | ||
garbage-residual | garbage-glass-alu | ||
garbage-cardboard |
Icon | Name | Icon | Name |
---|---|---|---|
google-home | google-wifi-router | ||
nest-wifi-repeater | nest-wifi-router | ||
nest-mini | next-mini-alt | ||
nest-audio | nest-hub | ||
pixelwatch | google-pixel | ||
chromecast | chromecast-alt | ||
google-logo-circle |
Icons made by @sandrybridge
Icon | Name | Icon | Name |
---|---|---|---|
cloudflare | mosquitto | ||
nginx | duckdns | ||
nut | adguard | ||
samba | esphome | ||
nodered | vaultwarden | ||
letsencrypt |
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 | cloakroom | ||
kitchen-alt | table-lighting | ||
table-lighting-alt |
Icons made by @rchiileea and @Gtt1229
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
lg-air-purifier | lg-aircon | ||
lg-cooker | lg-fridge | ||
lg-oled55 | lg-signiture | ||
lg |
Icon | Name | Icon | Name |
---|---|---|---|
fastgate | nexxt | ||
opnsense |
Icon | Name | Icon | Name |
---|---|---|---|
moes-switch-dual | moes-switch-single | ||
moes-switch-triple |
Icons made by @sandrybridge
Icon | Name | Icon | Name |
---|---|---|---|
pfsense-logo | openwrt-logo |
These are the official icons from the Philips Hue Developer Channel.
Icons made by @rchiileea
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
reolink-510 | reolink-811 | ||
reolink-820 | reolink-842 | ||
reolink-argus | reolink-e1 | ||
reolink-go | reolink-trackmix |
Icons made by @gtt1229
Icon | Name |
---|---|
reolink-doorbell |
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 |
Icon | Name |
---|---|
roku-ultra |
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 |
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 |
Icon | Name | Icon | Name |
---|---|---|---|
bridge | mini | ||
smart-camera | smart-plug-sonoff | ||
usb-smart-adaptor | window-sensor | ||
nspro-panel |
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 | ||
sonos-play-3 | sonos-port |
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 |
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 |
Icons made by @pinky007 @rchiileea @simpleicons
Icons made by @rchiileea
Icon | Name |
---|---|
tp-link-tapo |
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
ubiquiti-ap | ubiquiti-logo | ||
ubiquiti-usg-p3 | ubiquiti | ||
unifi | unifi-protect | ||
ubiquiti-udm-pro | ubiquiti-cam-instant | ||
ubiquiti-cam-flex |
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
umage | umage-carmina | ||
umage-acorn |
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
pedastal-fan | pedastal-fan-hollow | ||
fan-blade |
Icons made by @rchiileea
Icons made by @rchiileea
Icon | Name | Icon | Name |
---|---|---|---|
vac_filter | vac_mbrush | ||
vac_mop | vac_sbrush |
Icon | Name | Icon | Name |
---|---|---|---|
royalmail | fedex | ||
dhl | usps | ||
ups-dlv |
Icon | Name | Icon | Name |
---|---|---|---|
bose-soundtouch | boses-oundwave |
Icon | Name | Icon | Name |
---|---|---|---|
solar-battery-5 | solar-battery-10 | ||
solar-battery-15 | huawei-solar-inverter |
Icon | Name | Icon | Name |
---|---|---|---|
n64 | sega | ||
gamecube | dreamcast | ||
sega-saturn | genesis-vgs |
Icon | Name | Icon | Name |
---|---|---|---|
trx | zen | ||
rvn | etc | ||
btg |
Icon | Name | Icon | Name |
---|---|---|---|
yeelight-beside-lamp | yeelight-bulb | ||
yeelight-bulb-group | yeelight-ceiling | ||
yeelight-desklamp | yeelight-strip |
Icon | Name | Icon | Name |
---|---|---|---|
sleep-iq |
Icon | Name | Icon | Name |
---|---|---|---|
co2 | air-presure | ||
voc | pm2-5 | ||
radon | moisture |
Icon | Name | Icon | Name |
---|---|---|---|
pool-filter | pool-depth | ||
pool-salinty | pool-clorine | ||
pool-electric-lvl | pool-disolved |
We recommend installing Custom brand icons card via Home Assistant Community Store
After installing through HACS:
-
Add the following lines to your
configuration.yaml
frontend: extra_module_url: - /local/community/custom-brand-icons/custom-brand-icons.js
-
(Optional) YAML mode users. Add the following to your lovelace configuration using the Raw Config editor under Configure UI or ui-lovelace.yaml.
resources: - type: js url: /local/community/custom-brand-icons/custom-brand-icons.js
To add custom repositories please follow this guide. Set URL to `` 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 following to the
frontend
section of yourconfiguration.yaml
frontend: extra_module_url: - /local/custom-brand-icons.js
-
(Optional) YAML mode users. Add the following to your lovelace configuration using the Raw Config editor under Configure UI or ui-lovelace.yaml.
resources: - type: js url: /local/custom-brand-icons.js
-
Restart Home Assistant.
Example of custom brand icons a lovelace 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
- Reload browser by holding CTRL and pressing F5.
- For Mac, hold β CMD and β§ SHIFT, then press R.
- From left sidebar, select on HACS.
- Select on Integrations.
- From the top header bar (Integrations, Frontend), select Frontend.
- Search custom-brand-icons on the search bar.
- Select Custom brand icons.
- From the top right, select the 3 vertical dots which opens a dropdown menu.
- Select Redownload.
- Hard reload browser.
- Open the dropdown menu from Step 6 of Redownload Integration.
- Select Remove, then select Remove again on the popup.
- This should bring you back to /hacs/frontend
- From the top right, select the 3 vertical dots which opens a dropdown menu.
- Select on Custom repositories.
- Find Custom brand icons and select it.
- On the bottom right, select the big blue Download icon.
- Hard reload browser.
Want an icon? Open a custom icon request or contribute to the project.
- Provide a svg file along with your request.
- For those who made their own icons, open pull requests on the dev branch.
Thanks, as always, to the precious contribution to @rchiileea for the creation of the required icons! Do you like these icons? Support the project with a pizza ππ
- To make an icon in svg format you can use different programs starting from illustrator, inkview, or Inkscape.
- Verify
svg
icons are set properly by using text editor of your choice (Notepad++, Notepad, or Visual Studio Code). - The size of the icons must be 24px by 24px.
- The
svg
code must contain viewbox. No transform, translate, or scale. - Make sure to add color: #44739e. Every custom brand icon uses this color.
- Once done, add the svg file in the folder
icon-svg
found in the root of the repo.
Example svg file below:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<!-- path d="..." is unique for each icon -->
<svg
width="24"
height="24"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<path
style="fill:#44739e"
d="..."
\>
</svg>
Add the following entry to the var icons
variable (list) of the custom-brand-icons.js
file
Example entry:
"Bollard": [0, 0, 24.0, 24.0, "string"]
Bollard
= svg icon name used forphu:
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, 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.
(Optional) 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;
- Remember to also update the
README.md
file by inserting the icon's path and the name forphu:
.
After adding your svg icon in icon-svg
, modifying custom-brand-icons.js
, and updating README.md.
Open pull requests on the dev branch.