phu:
phu:
phu:eggs
phu:chicken
Want an icon? Open a custom icon request or contribute to the project.
IGNORING THIS SIMPLE REQUEST WILL RESULT IN YOUR REQUEST BEING IGNORED AND CLOSED
(if you can not be bothered to spend a few minutes doing this, why should we spend time looking for it and making it).custom-brand-icons.js
into configuration.yaml
or ui-lovelace.yaml
All icons are available in the framework Iconify. You can use icons using the prefix cbi
. Anyone who uses this icon set via the framework is reminded to comply with the license. For commercial purposes you can contact us
To view all the available icons you can go to the following address
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 your configuration.yaml
resides.
Add the following to the frontend
section of your configuration.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.
phu:
phu:
phu:eggs
phu:chicken
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
Some addons (including official) have had some cache issues since 2024.1.1, here are a few work arounds to try
first go to settings, dashboard and 3 dots click resorces, add resource
/hacsfiles/custom-brand-icons/custom-brand-icons.js?hacstag=366862031202420
Add this second resource too
/local/community/custom-brand-icons/custom-brand-icons.js
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 ๐๐
svg
iconsvg
icons are set properly by using text editor of your choice (Notepad++, Notepad, or Visual Studio Code).svg
code must contain viewbox. No transform, translate, or scale.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>
custom-brand-icons.js
fileAdd 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 for phu:
0, 0, 24.0, 24.0
= this data can be recovered from the svg file viewBox="0 0 24 24"
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"
.
(Optional) In case you want to create your own prefix you can edit the last line of the custom-brand-icons.js
window.customIconsets["yourprefix"] = getIcon;
README.md
README.md
file by inserting the icon's path and the name for phu:
.After adding your svg icon in icon-svg
, modifying custom-brand-icons.js
, and updating README.md.
Open pull requests on the dev branch.