How do I add a custom mdi icon?

I’m currently putting my solar heating system on my Lovelace dashboard, and all is going well, except I can’t figure out how to use my own custom icon. So far I’ve used the “entity picture” option in and put my png in the WWW folder, and my custom image does show, but being an image I can’t make its colour change based on state, so I need to make it an icon. And I also don’t want to have to create a different png for all the different colours required, that will get out of hand once I start really customising my dashboard.

Here’s the current png showing my solar tube collector, all boring and black and unable to change colour :pensive:


So over to you guys: how do I add my own icon to Home Assistant?

Something to read. :slightly_smiling_face:

Not sure i this works in the latest versions. There was a change about icons a few versions ago.

Jeez that was a rabbit hole! Ended up about 5 layers of links in and crosseyed :joy:

So if I understood it correctly, I need to find a way to convert my PNG into an SVG string somehow and then put that string in a JavaScript file and add it as a module?

That’s correct. I saw a custom card that looked like the Tesla power wall might be what you want.

I have used Inkscape to draw SVG files. With the late HA change to how Icons are loaded into HA, it takes a bit of work to convert/hand-edit the SVG file so that the string being referred to above can be used with the new js loading scheme.

And you can even convert PNG graphics via Path → Trace Bitmap to SVG in Inkscape.

I recommend to Path → Union your icon before saving as Optmized SVG.