Custom Component Integration Icon

Development
1

I have a Custom Component and have created the necessary integration control flow. Is there any way to set the Icon that HA uses in the frontend. It defaults to an icon image that says “icon not available”.
Is it a setting in the manifest file that I’m missing perhaps?

2

I am guessing that if you have a custom component you have a python class representing your sensor/entity? In that case you can add the following property for icon (just like you would have for state):

@property
def icon(self):
    return self._icon // You can use things like "mdi:calendar" etc
3

I’m sorry, perhaps I wasn’t clear enough. I create several entities/sensors and each have their own icon.

I want to be able to set the icon that appears on the integrations page. Select Configuration → Integrations. For the inbuilt integrations HA uses the “collections of logos and icons” here. What can I use for a custom integration?

1 Like
4

I’d be interested as well, and here is another request Brands images for custom integrations.
Jkw

5

Aha, I misunderstood, sorry! It is not possible yet. When looking through the source code of the frontend the image source for an integration is defined like this: https://brands.home-assistant.io/{integration}/icon.png. For instance the custom integration hacs gets the icon https://brands.home-assistant.io/hacs/icon.png which returns a page not found, and the image in homeassistant is just blank.

6

See blog post here - https://developers.home-assistant.io/blog/

1 Like
7

Thanks, my pull request worked out and my integration ICS shows an icon now :+1:

8

Thanks, I added appropriate icons and logos for my custom integration to the github repo and it looks brilliant.

9

The solution scrolled off the referenced blog page, but I found it here:

1 Like
10

Is there a step by step tutorial on how to do this ? If I try to upload files on github directly it says upload are not allowed.

Would be great if the doc page was giving details on how to do that for newbies :wink:

1 Like
11

I’ve just run into this problem too. It looks like integration icons in the frontend are all linked out to “brands.home-assistant.io”.

The thing is, my integration might not have an appropriate name at the moment, or it might not have enough of a user base or…etc - the problem is the icon has to be named after the domain you’re dealing with, which occupies the whole global namespace for it.

2 Likes
12

I have programmed a costum integration and would now like to add a icon. I came across your posts

but I don’t understand how I can make a request for a new logo here (GitHub - home-assistant/brands: 🎨 Brands for Home Assistant). Can you help me? Thank you

13

I’m unclear as to what you’re specifically asking for, it can be read as either needing to know how to contribute to someone elses git repo or how to contribute to this one specifically. I’ll try to answer both:

  1. How to contribute to someone else’s git repo:
    1a. Open a terminal and run git pull origin {repo url}
    1b. Create a branch off of main
    1c. Make your changes and commit them
    1d. Make a PR by going to the repo on github and using the GUI. In most cases, there will be instructions in a README.md telling you what sorts of formatting is expected as well as what you’re allowed to do or change

  2. How to contribute to that repo specifically:
    2a. git pull origin https://github.com/home-assistant/brands
    2b. Go to custom_integrations and make a folder named after the project/brand you’re adding images for
    2c. If you want a full size banner-style image, add it as logo.png. If you’ve
    got a favicon-style square icon you want to show up in the HACS store,
    name it icon.png and place it in your folder
    2d. Make a PR and request review from frenck

Further, for that repo specifically there’s all number of both open and closed PRs you can look at as examples of what to do or not do if you prefer a more hands on / visual example approach to knowing what to do

1 Like
14

Hi Steven,

Thank you very much for your reply. I am new to Github and did not know the Pull Request procedure before.

My output was that I programmed the following integration GitHub - xHecktor/brands: 🎨 Brands for Home Assistant myself. However, no icon was displayed in Settings > Devices & services in Home Assistant.

That’s why I came across the home-assistant/brands page. In the meantime I have understood that I first have to create a fork of the Brands page (to have admin rights to upload the icon) and then insert it back into the main via a pull request. A logo for an integration is now displayed in HACS.

However, there is still no logo in Settings > Devices & services for my integration light_group_dimmer.

Do you know why? Thank you very much

15

They there, the problem solved itself. Seems that it just need some time :wink: