Skip to content

thomasdg/custom-brand-icons

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

hacs_badge GitHub release (latest by date) CC BY-NC-SA 4.0 GitHub file size in bytes GitHub last commit

Custom brand icons

logo

Custom brand icons use the prefix phu:

Append Name (of the icon) after phu:

  • Example: phu:eggs Preview
  • Example: phu:chicken Preview

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 and a image along with your request.
  • links to SVG's or Images will be ignored you must upload the files into your request, ignoring this will result in request being ignored. (if you can not be bothered to spend a few minutes doing this, why should we spend time 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 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

Available Icons

To view all the available icons you can go to the following address

Installation Methods

HACS

We recommend installing Custom brand icons card via Home Assistant Community Store Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

After installing through HACS:

  1. Add the following lines to your configuration.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.

    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.

  1. Download custom-brand-icons.js file from the latest release.

  2. Copy the custom-brand-icons.js file into <config>/www/ the directory where your configuration.yaml resides.

  3. Add the following to the frontend section of your configuration.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.

    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 Preview
  • Example: phu:chicken Preview

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

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

  1. first go to settings, dashboard and 3 dots click resorces, add resource

    /hacsfiles/custom-brand-icons/custom-brand-icons.js?hacstag=366862031202420
  2. Add this second resource too

    /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 for the creation of the required icons! Do you like these icons? Support the project with a pizza πŸ•πŸ•

coffee

StarGazers

Stargazers repo roster for @elax46/custom-brand-icons


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).
  • 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>

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:

"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 <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 perfix you can edit the last line of the custom-brand-icons.js

window.customIconsets["yourprefix"] = getIcon;

Update README.md

  • Remember to also update the README.md file by inserting the icon's path and the name for phu:.

Contributions and Pull Requests

After adding your svg icon in icon-svg, modifying custom-brand-icons.js, and updating README.md. Open pull requests on the dev branch.