Based on the amazing work from Custom Brand Icons by @elax46
With this repository, you will be able to add custom icons from your own icon set into Home Assistant and use them on the Lovelace dashboard:
Mandatory:
- you must have Python 3 installed on your computer
- your icons must be in SVG format
- the
svg
node must contain aviewBox
property only. Any other property liketransform
,translate
, orscale
will be ignored - the
svg
must contain one or several of the following elements:path
,circle
,ellipse
,polygon
,polyline
orrect
- shapes can be inside a
g
node, but any properties from theg
node are ignored
Recommended:
- your icons are square: the viewBox property will be something like
viewBox="0 0 128 128"
- your icons are centered horizontally & vertically inside the viewBox
- your icons contain only one SVG element (ideally one
path
) OR only elements of the same type: you can use this online converter to do this
Limitations:
style
orfill
properties are ignored: icons can be monochrome only. Home Assistant will manage icons color based on theme and entity state.
To make or edit an icon in svg format you can use different programs starting from illustrator, inkview, or Inkscape.
If you fork this repository it will be public on Github and cannot be changed. If you don't want to share your icons publicly, download this repository instead of forking.
Add all your SVG icons to the icon-svg
folder. The name of the file will be the icon name in Home Assistant.
You can remove SVG files already present for demo purposes.
Use python svg-to-js.py
to convert your SVG icons to Home Assistant format. This script will create a custom-icons.js
file containing all your icons.
See script output if some icons have not been processed. Fix the SVG the relaunch the script.
This method is only available if you forked this repository, or if you copied its content to another Github public repository.
- Commit the generated
custom-icons.js
file to your repository main branch - Make sure HACS is installed.
- Go to HACS > Frontend > Three dots > Custom repositories.
- Add your Github repository URL as a custom repository (category: lovelace).
- Install "My Custom Icons" that appeared in your Interface tab. You can customize the name by editing
hacs.json
.
After installing through HACS:
-
Add the following lines to your
configuration.yaml
:frontend: extra_module_url: - /local/community/homeassistant-custom-icons/custom-icons.js
(Replace
homeassistant-custom-icons
by your Github repository name if you changed it) -
Restart Home Assistant.
-
Hard Reload the homepage from your browser by holding CTRL and pressing F5. For Mac, hold ⌘ CMD and ⇧ SHIFT, then press R.
-
Copy the generated
custom-icons.js
file into<config>/www/
folder.<config>
is the directory where yourconfiguration.yaml
resides. -
Add the following lines to your
configuration.yaml
:frontend: extra_module_url: - /local/custom-icons.js
-
(Optional) YAML mode users: Go to Home Assistant Settings > Dashboards > Three dots > Resources > Add Resource
- URL:
/local/custom-icons.js
- Resource Type: JavaScript module
- URL:
-
Restart Home Assistant.
-
Hard Reload the homepage from your browser by holding CTRL and pressing F5. For Mac, hold ⌘ CMD and ⇧ SHIFT, then press R.
Custom icons are available in all Home Assistant under the prefix custom:
, as opposed to Home Assistant icons that use the prefix hass:
or mdi:
- Example:
custom:my_icon1
for an icon that was namedmy_icon1.svg
- 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 My Custom Icons on the search bar.
- Select My Custom 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.
Some icons may look different in Home Assistant. This is because the SVG content needs to be adapted to the Home Assistant format.
The Home Assistant format accept a unique path
element, so every other SVG elements like circle
, rect
... must be converted to the path
format then concatenated. This may lead to some visual differences.
This can also be caused by an SVG with multiple content. The superposition might be different after elements are converted and concatenated to a unique path
.
Try to rework your SVG to use only path
elements if possible.
You can convert your SVG using tools like https://thednp.github.io/svg-path-commander/convert.html or https://github.com/elrumordelaluz/path-that-svg