Use custom svg as Entity Icon

[henfri (Hendrik Friedel)]

Hello,

I have a rather simple need:
I would like to add three distinct svg files to the list of Icons that I can choose in the HA GUI when selecting an Entity-Icon.

For this, I have copied the files to /config/www:

ls -l /config/www/*.svg
-rwxrwxrwx    1 hassio   hassio         689 Dec  3 23:07 /config/www/fts_window_1w.svg
-rwxrwxrwx    1 hassio   hassio        1830 Dec  3 23:07 /config/www/fts_window_1w_open.svg
-rwxrwxrwx    1 hassio   hassio         872 Dec  3 23:07 /config/www/fts_window_1w_tilt.svg

And I have restarted HA.
I would now expect to find these icons when scolling down the list of Icons of an Entity. But I do not.
I have set the debug level of the frontent to debug homeassistant.components.frontend: debug, but I see no related errors in the Log.

What am I doing wrong?

I understand that there is also entity_picture. But I would expect that the above should also work, shouldn’t it?

Greetings,
Hendrik

[Montreal666]

The easiest way I found to add custom icons is to use Fontawesome
Check under “custom icons”
Very easy to set up.

GitHub - thomasloven/hass-fontawesome: 🔹 Use icons from fontawesome in...

[Ildar_Gabdullin]

Tried to use a custom icon:

1. Created a “custom_icons” dir in “/config”.
2. Placed a “ha-legacy.svg” file.
3. Trying to use:

type: entities
entities:
  - entity: sun.sun
    icon: fapro:ha-legacy

with no success.

Do I miss smth?
Installed FontAwesome as integration.

[henfri (Hendrik Friedel)]

Uff, it is surprising, that this does not work without an Add-On. But I will check.

[Montreal666]

Is the icon not showing at all or not displaying correctly?
Did you refresh browser/clear cache?

[petro]

You have to restart after you add an icon. You can’t reload. At least that’s what I’ve been doing.

[petro]

That’s not an addon, that’s an integration. You can use custom icons in custom fields if you know the HTML anywhere in the UI that supports html. If you want them specifically on your entity, you need to use the integration.

[Ildar_Gabdullin]

@petro

You have to restart after you add an icon

Thanks a lot!
Restarted.
Unfortunately, there is still an issue - the custom icon is displayed as a rectangle instead of a lovely icon:

      - type: entities
        entities:
          - entity: sun.sun
            icon: fas:icons
          - entity: sun.sun
            icon: fapro:ha-legacy

The icon is

Will ask in fontawesome repo…

[petro]

typically, I create my svgs as svg optimized and I make sure there’s no offsets in the SVG.

[Ildar_Gabdullin]

@petro

no offsets in the SVG.

What do you mean?

[petro]

SVG files can change your view into the contained elements. Some SVG software adds bogus x/y offsets in the file which trip up the icons presented in HA.

If you use inkscape and export your svg file as SVG Optimized, it will remove all the extra fluff that’s not really needed. SVG Optimized is also best for websites because the files are smaller than regular SVGs.

[Ildar_Gabdullin]

@petro

SVG Optimized

Tried to use this tool:

Optimize SVG Images Online

as it came 1st in Google.

Replaced the original svg file with an optimized one.
Restarted HA - but still a solid rectangle instead of a HA icon.
Cleared Chrome cache - now see this:

Seems to be a part of the icon.
The svg file contains

<svg width="500" height="500" 

Shall I edit to 24px?
Believed that icons are fit automatically…

[petro]

Yes, set it to 24 x 24, you can check out the contents of my SVG files here

Petro31/home-assistant-config/blob/9f5bf91e5966e349bcf39585652e3161414ab254/custom_icons/laser.svg?short_path=e8abb70

[Ildar_Gabdullin]

I see:

<svg width="24" height="24" version="1.1" viewBox="0 0 24 24"

thank you again.

Anyway, is it normal to NOT fit svg icons to standard “–mdc-icon-size”?

Assume a person creates a card with increased STANDARD icons by changing “–mdc-icon-size” - and icons are properly resized.
So it is strange that custom icons should be initially resized first.

[petro]

it’s the height and width of the viewbox though. without that context, SVG’s have no idea what the scale is for the path.

[henfri (Hendrik Friedel)]

I have the same problem (rectangle only).

I have tried an optimized version - no improvement.

<svg width="24" height="24" version="1.1" viewBox="0 0 24 24"><g fill="none" stroke="#000" stroke-width="10"><path d="M267.826 263.303c0 3.91-3.156 7.082-7.05 7.082l-157.885.021c-3.894 0-7.05-3.171-7.05-7.083v-157.5c0-3.911 3.156-7.083 7.05-7.083l157.885-.021c3.894 0 7.05 3.172 7.05 7.083v157.501z"/><path d="M267.826 103.208c0 2.485-2.711 4.5-6.053 4.5l-159.88.021c-3.342 0-6.052-2.015-6.052-4.5v-9c0-2.485 2.71-4.5 6.052-4.5l159.88-.021c3.342 0 6.053 2.015 6.053 4.5v9zM265.732 265.178c.584 2.887-1.629 5.228-4.942 5.228H103.457c-3.313 0-6.474-2.341-7.058-5.228L75.24 130.633c-.584-2.887 1.628-5.228 4.942-5.228h157.333c3.313 0 6.474 2.34 7.058 5.228l21.159 134.545z"/></g><path d="M247.194 199.667h6.639c2.726 0 5-2.274 5-5s-2.274-5-5-5h-6.639c-2.726 0-5 2.274-5 5s2.275 5 5 5z"/></svg>

I do not quite understand the size aspect - should the beauty of an SVG not be that HA can size it as needed?

Greetings,
Hendrik

[Montreal666]

The “rectangle only” issue is simply due to the fact that your original image background is not processed and seen as an element of the image, rendered in the same color as the rest.

When I started with HA, I combed the HA forum for solutions, tried a number of tools, but didn’t find anything simple and efficient. Maybe I missed something but after further research on the web, I ended up trying Adobe Illustrator, which is by far the most efficient way I found to process and add your own icons in HA.

No need to resize to a specific height/width, you just load your image, trace, ungroup, clean and save as SVG.

Literally took me 2min to process your image.

Give it a try if you have access to a license. Works like a charm.

[Ildar_Gabdullin]

@Montreal666

The “rectangle only” issue is simply due to the fact that your original image background is not processed and seen as an element of the image, rendered in the same color as the rest.

This is unclear for me.
The “rectangle” icon was displayed before a so-called “optimization” performed by this tool.
Then I saw only an image which seems to be a top-left corner of the icon - and this could be explained by “target box = 24х24, source svg = 500x500”.

As for a particular SW like Adobe Illustrator - thanks for the advice, but what I need is an understanding of the issue.

Even after a manual edit of SVG file

I still see after HA reboot & clearing a browser cache

The SVG file contains a path.
I believed that this path is defined in relative coordinates - i.e. no need to edit the path for a different viewport.

[Montreal666]

Will keep an eye on the thread as I’d also be interested to better understand where the issue comes from.

It’s a personal preference, but the reason I chose to go the Illustrator route was to avoid all of the 3rd party optimization, image size concerns, path edition, etc…

Take an image you like and convert it with one piece of software. no coding. WYSIWYG. period.

Managing custom svg icons / vector images shouldn’t be more difficult than managing png’ , jpg’ or gif’ and that’s what I get with Illustrator.

Always open to better ways to do things so will be watching

cheers

[henfri (Hendrik Friedel)]

Hi,

I am also a bit lost…
What do you mean by

Take an image you like and convert it with one piece of software. WYSIWYG. period.

What shall I convert?
I am using this image:
https://docu.smartvisu.de/2.7/icons/sw/fts_window_1w_open.svg

Which is working well as it is in… that Visualization Software. It is equally displayed in a browser.
I am happy to use one software (e.g. Inkscape) to convert it. But what do I need to change?

Thanks for your patience

Greetings,
Hendrik