[![MIT License][mit-shield]][mit-license]
!GitHub file size in bytes
!GitHub last commit
[mit-license]: https://opensource.org/licenses/MIT
[mit-shield]: https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge
Custom brand icons
!logo
Custom brand icons use the prefix phu:
Append Name (of the icon) after phu:
- Example:
phu:eggs
- Example:
phu:chicken
🇮🇹 Special Note for Italian Users
Are you monitoring your energy costs in Home Assistant? Check out my latest project: Card Bolletta. It’s a custom card specifically designed for the Italian energy market. It helps you estimate your monthly bill in real-time, including taxes (IVA), system charges (Oneri di sistema), and excise duties (Accise). Key features:- Support for F1, F2, F3 price brackets.
- Real-time bill estimation.
- New: Ultra-compact layout for minimalist dashboards.
- Detailed cost breakdown (Energy vs. Transport vs. Taxes).
Icon Requests
Want an icon? Open a custom icon request or contribute to the project.- Provide a svg file and jpg logo of your request (we also are not mind readers and dont know every icon globaly so if no name is present please add it or it will be ignored and a image along with your request.
- links to SVG's or Images will be ignored, you must upload the files into your request and they must be visible in post.
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). - For those who made their own icons, open pull requests on the dev branch.
Make sure to install custom-brand-icons.js into configuration.yaml or ui-lovelace.yaml
!2FA
Iconify
All icons are available in the framework Iconify. You can use icons using the prefixcbi. Anyone who uses this icon set via the framework is reminded to comply with the license. For commercial purposes you can contact us
- For all information visit the website https://iconify.design
- For use visit https://iconify.design/docs/usage/
- Browse Icons https://icon-sets.iconify.design/cbi/
Available Icons
To view all available icons, you can go to the following address. The icon viewer also allows you to generate acustom brand-icons.js with only the icons you want, allowing you to streamline the icon pack and eliminate loading issues.
- Icon Finder
Installation Methods
HACS
We recommend installing Custom brand icons card via Home Assistant Community Store
After installing through HACS:
- Add the following lines to your
configuration.yaml
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.
`yaml
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 and category to Lovelace.
- Download
custom-brand-icons.js file from the latest release.
Copy the custom-brand-icons.js file into the directory where your configuration.yaml resides.
- Add the following to the
frontend section of your configuration.yaml
`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.
`yaml
resources:
- type: js
url: /local/custom-brand-icons.js
`
- Restart Home Assistant.
---
User Manual
Custom brand icons use the prefix
phu:
Append Name (of the icon) after
phu:
- Example:
phu:eggs
Example: phu:chicken
Example of custom brand icons a lovelace card:
`yaml
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
`
---
Don't see the icon?
Cache issue HomeAssistant 2024.1.1
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
`yaml
/hacsfiles/custom-brand-icons/custom-brand-icons.js?hacstag=366862031202420
`
- Add this second resource too
`yaml
/local/community/custom-brand-icons/custom-brand-icons.js
`
Hard Reload (browser cache issue)
- Reload browser by holding CTRL and pressing F5.
- For Mac, hold ⌘ CMD and ⇧ SHIFT, then press R.
Redownload Integration
- 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.
Reinstall Integration
- 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.
Create a smaller version of the icon pack
- Go to icon viewer
- Select all the icons you want to add to your HA instance
- Download the js file and install it manually in Home Assistant
---
Developer Workflow
Make your own
svg icon
- 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).
Rules on Icon size and contraints are (HERE,
The svg code must contain viewbox. No transform, translate, or scale.
Make sure to add color: #44739e. Every custom brand icon uses this color.
all icons must have a nomenclature NOT in camelcase but of the type part1name-part2name
Once done, add the svg file in the folder icon-svg found in the root of the repo.
- the icon must *not be composed of multiple paths but a single one as shown in the example below
Example svg file below:
`svg
`
( optional ) if you want to generate the icon package locally
[!WARNING]
You need to have Node.js installed to use automatic generation.
Go to the local folder where the custom-icons-builder.js file is located and run node custom-icons-builder.cjs The script will generate a new custom brand-icons file with the updated icons.
If everything went well you will see a message like this
`js
✅ Build completed
📁 Generated file: dist/custom-brand-icons.js
🔢 Total icons: XXXX
`
(Optional) In case you want to create your own prefix you can edit the last line of the custom-brand-icons.js
`js
window.customIconsets["yourprefix"] = getIcon;
`
Normalize script
[!WARNING]
You need to have Node.js installed to use.
[!NOTE]
This procedure can be performed locally to verify that the icons meet the required requirements and that they are compliant and minimized as best as possible.
Thanks to the work of @SoulSolistice, a normalize-icons.mjs has been introduced that performs the following operations:
viewBox="0 0 24 24"
geometry scaled to fit within MAX_GEO x MAX_GEO (aspect preserved), default 20x20
geometry centered at viewBox / 2, default 12,12
paths only output, baked coordinates, no transforms
fill color is fixed to BRAND_FILL, default #44739e
--clean: svgo --> normalize --> svgo (because normalization expands path data)
--vrt: ImageMagick montage ... --> script/vrt.png as "Visual Regression Test"
default input/output (when not specified): custom-brand-icons/icon-svg
Installation & use:
- Run
npm i in custom-brand-icons folder to install requirements
Run npm run clean:vrt to clean the current icons (will be overwritten). Also creates vrt.png in the scripts folder as "Visual Regression Test". This needs ImageMagick installed.
Running locally using docker
This repository contains a docker-compose file that performs the two tasks above:
- Runs the
node custom-icons-builder.cjs script using node 22 to generate custom icons.
Builds a local Docker image with node 22 and ImageMagick and then normalizes and cleans up the generated files using npm run clean:vrt.
To perform these tasks, run one of the following commands:
`sh
docker compose up build
docker compose up normalize --build
`
Contributions and Pull Requests
[!IMPORTANT]
Contributions Rules: All Pull Requests must be targeted to the
dev branch.
PRs opened against
main will be automatically closed by our bot.
After adding your svg icon in icon-svg folder . Open pull request on the dev branch. You should create a new feature branch on your fork (e.g., feat/add-new-icon`) and submit your PR from there.