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