https://github.com/elax46/custom-brand-icons
Custom brand icons for Home Assistant
https://github.com/elax46/custom-brand-icons
custom-icons hacs home-assistant homeassistant icons icons-pack iconset ikea philips-hue xiaomi
Last synced: 12 days ago
JSON representation
Custom brand icons for Home Assistant
- Host: GitHub
- URL: https://github.com/elax46/custom-brand-icons
- Owner: elax46
- License: other
- Created: 2021-05-12T21:48:11.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-13T11:35:51.000Z (6 months ago)
- Last Synced: 2024-10-29T17:28:32.706Z (6 months ago)
- Topics: custom-icons, hacs, home-assistant, homeassistant, icons, icons-pack, iconset, ikea, philips-hue, xiaomi
- Homepage: https://elax46.github.io/custom-brand-icons/
- Size: 37.7 MB
- Stars: 846
- Watchers: 9
- Forks: 93
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://github.com/hacs/integration)
[](https://github.com/elax46/custom-brand-icons/releases/latest)
[![CC BY-NC-SA 4.0][cc-by-nc-sa-shield]][cc-by-nc-sa]
[cc-by-nc-sa]: http://creativecommons.org/licenses/by-nc-sa/4.0/
[cc-by-nc-sa-image]: https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png
[cc-by-nc-sa-shield]: https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg
# Custom brand icons
#### Custom brand icons use the prefix `phu:`
#### Append Name (of the icon) after `phu:`
- Example: `phu:eggs` 
- Example: `phu:chicken` 
# Icon Requests
Want an icon? Open a [custom icon request](https://github.com/elax46/custom-brand-icons/issues/new?assignees=elax46&labels=icon-request&template=insertion-of-new-icons.md&title=Custom+Icon+request) or [contribute to the project](#developer-workflow).
- 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](#developer-workflow), open pull requests on the **[dev branch](https://github.com/elax46/custom-brand-icons/pulls)**.
### Make sure to [install](#installation-methods) `custom-brand-icons.js` into `configuration.yaml` or `ui-lovelace.yaml`
## Iconify
All icons are available in the [framework Iconify](https://github.com/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
- 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 the available icons you can go to the following address
- [Icon Finder](https://elax46.github.io/custom-brand-icons/)
# Installation Methods
#### HACS
We recommend installing Custom brand icons card via [Home Assistant Community Store](https://hacs.xyz)
[](https://my.home-assistant.io/redirect/hacs_repository/?owner=elax46&repository=custom-brand-icons&category=frontend)
After installing through HACS:
1. Add the following lines to your `configuration.yaml`
```yaml
frontend:
extra_module_url:
- /local/community/custom-brand-icons/custom-brand-icons.js
```
2. (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](https://hacs.xyz/docs/faq/custom_repositories/). Set URL to `` and category to `Lovelace`.
1. Download `custom-brand-icons.js` file from the [latest release](/releases/latest).
2. Copy the `custom-brand-icons.js` file into `/www/` the directory where your `configuration.yaml` resides.
3. Add the following to the `frontend` section of your `configuration.yaml`
```yaml
frontend:
extra_module_url:
- /local/custom-brand-icons.js
```
4. (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
```
5. 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]([https://](https://github.com/elax46/custom-brand-icons/issues/560)), here are a few work arounds to try
1. first go to settings, dashboard and 3 dots click resorces, add resource
```yaml
/hacsfiles/custom-brand-icons/custom-brand-icons.js?hacstag=366862031202420
```
2. 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
1. From left sidebar, select on *HACS*.
2. Select on *Integrations*.
3. From the top header bar (Integrations, Frontend), select *Frontend*.
4. Search *custom-brand-icons* on the search bar.
5. Select *Custom brand icons*.
6. From the top right, select the 3 vertical dots which opens a dropdown menu.
7. Select *Redownload*.
8. **Hard reload** browser.
#### Reinstall Integration
1. Open the dropdown menu from **Step 6** of **Redownload Integration**.
2. Select *Remove*, then select *Remove* again on the popup.
3. This should bring you back to /hacs/frontend
4. From the top right, select the 3 vertical dots which opens a dropdown menu.
5. Select on *Custom repositories*.
6. Find *Custom brand icons* and select it.
7. On the bottom right, select the big blue *Download* icon.
8. **Hard reload** browser.
# Thanks for your support
Thanks, as always, to the precious contribution to [@rchiileea](https://github.com/rchiileea) for the creation of the required icons!
Do you like these icons? Support the project with a pizza 🍕🍕
[](https://www.buymeacoffee.com/elax46)
## StarGazers
[](/stargazers)
---
# 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](https://inkscape.org/).
- Verify `svg` icons are set properly by using text editor of your choice ([Notepad++](https://notepad-plus-plus.org/), 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:
```svg
```
### Modify `custom-brand-icons.js` file
Add the following entry to the `var icons` variable (list) of the `custom-brand-icons.js` file
Example entry:
```js
"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"`
- ***If this data is not present, you can leave the one indicated by me.***
- `string` = this data can be recovered from the svg file `