Implement some custom icons I've created?

I’ve started creating some custom icons to ‘fill in the gaps’ where Material Design Icons doesn’t already have something suitable. I’m using the template from here to create the icons, but I’m not sure how to implement them in my Home Assistant config.

I tried

entity_picture: /local/my-custom-icon.png

but Home Assistant blew the image size up and made it larger than all the other icons, & it seems that Home Assistant automatically colours the icons?

Is there a specific (proper) way to use custom icons locally? (that haven’t been added to Material Design Icons )

1 Like

I set my png files for 600x600 and then stored them in the www folder off the root of my HA installation. (If you don’t have one you can create it, but make sure the perms are correct).

I call them in customize like this:

  friendly_name: Washer Power Switch
  entity_picture: /local/washer.png
  friendly_name: Dryer Power Switch
  entity_picture: /local/dryer.png

And this was the result:

1 Like

I just made pictures of icons following the color and style of the material design one, then I included them like @rpitera showed.

The icons were a bit big so I made the picture bigger while keeping the icon the same size in the middle (more empty space around edges). Adjust as needed until the icon looks like the right size.

Here’s the icons used in my example above:


@jono, @stunts1337, could you make them available for download?
Maybe someone could use them too.

I’ve only got 2 (one for google home, one for philips hue), just amature picture editing in They don’t really look great so not worth sharing :stuck_out_tongue:


Thanks but as I already wrote, I tried the ‘normal’ method of ‘entity_picture’, but the canvas is bigger than the regular material design icons.

I guess I could add the padding (spacing) myself, and with trial and error try to make them fit it with the other icons.

I don’t mind sharing them when I’ve finished them, but what I was really looking for is a way to use these icons in the same way that the material design icons are used. I guess I’m looking for specific dimensions on the icons, resolutions, and the ‘proper’ way to use them in the config (instead of ‘entity_picture’ which doesn’t use the same size as the normal icons).

1 Like

As I said above, I have two pngs that were 600x600 and I didn’t have to do anything. HA resized them as appropriate for the space as you can see. I think the key to this is they have to be the same dimensions width and height.

But if you are looking for instructions to make them the exact same size as the MDI icons, there are none. Entity picture is currently the only way to do this unless you want to rewrite the CSS for HA (and then stow and replace each time you update as it will break git).

Thanks I’ve ended up doing that, & managed to get them looking pretty crisp.

Here’s how they look.

The ceiling light icon isn’t mine, but the rest are.


Those look great - I love your fireplace mantle! I’m just using the flame icon from MDI.

1 Like

Thanks :slight_smile:

…BTW, I forgot to ask. How do you show that your devices are online? (or not)

I noticed you have it setup in your screenshot, & looks pretty handy.

Im using a netgear router so I just use the netgear component in home assistant to see if things are connected to the internet or not. I think you can do the same thing with nmap or ping components, or if you have one of the router brands that home assistant has components for:

1 Like

Great, thanks for that!

Would love to have access to these if you’re willing to share? Custom Icon section might be a good addition to the forums, actually.


May I ask how your TV control tab looks like?

Yes, I’ll share them. I’m going to create a few more first, and then I’ll make them available :slight_smile:

Great job. Why not submit them to MDI? You can submit with 5 or more icons.

1 Like

I have an idea to have an index of HA related icons. i.e. with category, usage, name etc.
I started working on a list already but I’m not sure the best way to render the list for consumption
Seems that MDI icons cannot be used on the github managed HA docs pages…(love to be corrected if I am wrong)

I think it would be really nice to have an iframe in HA with icon reference.

Yes, here it is