Yes, set it to 24 x 24, you can check out the contents of my SVG files here
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.
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.
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
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.
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.
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 
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
This is what I mean:
your file as downloaded here:
your file saved as SVG with Illustrator, nothing to change.
Your image is already a vector image - SVG.
See below, the black part is your vector image and the white part is just the “art board” or canvas. compare this to the HA example above. You don’t have the extra white background elements which need to be removed when you are converting from a png or jpg.
I’m no expert but much easier to do this the visual way than trying to figure out what’s wrong with the underlying code.
If you dig deeper, you’ll probably find why Home Assistant likes Illustrator’s SVG coding. There’s clearly some parameters that make it right. But to be honest, I don’t care. I have more than enough HA projects on the drawing board and already marked this one as “done” =)
Well, assume there is an SVG icon taken from somewhere.
Let it be a HA legacy logo from here.
User may download this SVG file - then he puts it into “custom_icons” folder and sees not what is expected.
Assume someone told him: the SVG should be 24x24.
Then a user have 2 options:
– either he should edit the SVG file manually - and NOBODY here confirmed that this is possible; my attempts to edit to
width="24" height="24" viewBox="0 0 24 24"
successfully failed, seems that a path should be edited too;
– or user may take some Software, select “save to 24x24” and get a final 100% working file.
Since nobody can comment the 1st option - then the question is “what SW can save SVG to 24x24”? Can Adobe Illustrator do it?
The 1st Google result for “svg resize” gives this tool which I tried with HA logo and the output file is a solid rectangle.
I did go through many custom SVG threads on the forum and tried a number of these options, including the infamous “resize to 24x24”, with less than conclusive results.
As I said earlier, and for some reason beyond the time I want to invest understanding it, Illustrator SVG format doesn’t care about the SVG dimensions; I can save it in 24x24, 200x100, 1000x1000, it always work when added to the custom-icons folder.
When you think about it, this does make sense as vector based images do not use a grid of pixels and can be scaled to any size.
I did check the SVG HA Legacy logo contents and manually moved the elements so you can see better.
the reason you see the full rectangle is because of the blue background.
HA icons are monochrome, so no matter which converter or size you will use, the background will always blend unless you remove it.
This is the benefit of seeing what you are actually doing.
Brilliant guess))) Will check it)).
That is why I believed that a “path” part in SVG file is not supposed to be changed if you need to resize the SVG image, you only need to edit width, height, viewBox.
Glad I could help 
Still a newbie and learned a lot from users on this forum;
but this one was originally a dead end for me so happy to give back.
Once I grasped why a lot of people were getting the “dark rectangle” it all made sense.
Especially if you want to convert png or jpg which end up with a set of backgound elements. An easy fix with Illustrator though. And you now have access to millions of icons from the web.
added bonus: by playing with the “artboard” (canvas) you can manage “padding” around the image and image ratio.
And all of this because I couldn’t find a “sauna” icon.
Now back to other rabbit holes… 
1 Like
One last thing:
if you still want to use some no frills online converter, I must have tried 50 of them and the only one returning some decent results is :
https://www.adobe.com/express/feature/image/convert/svg
(makes sense I guess)
but it suffers from the same issue where the background is not removed in the process and you end up with the evil “dark rectangle”
It did work maybe 20-30% of the time…
Finally.
As I believed, a path defined in SVG file is “universal” - it is same for 500x500 & 24x24.
What I did is:
- Take HA legacy logo from here - https://github.com/home-assistant/assets/tree/master/logo. Let it be “home-assistant-icon-outline-black.svg”:
- Open the SVG file in text editor. Delete a part related to a frame:
-
Two remained paths are a definition of the icon.
-
To check it - copy some path (a part between <"> quotes) to clipboard and then paste it in any path editor (Google proposed SVG Path Editor); do it for both paths (separate by a whitespace):
-
So, the remained paths are needed. No need to edit “500, 500” to “24, 24” - the system should fit the content to the destination area.
-
Save the SVG file.
-
Result (incl. card-modded):
Also, it is possible to fix a glitch on a bottom part of the logo in that SVG Path Editor:
Then remove the upper path’s part & paste the edited path here:
Save the file as SVG.
Result (compare with a previous result):
Similarly with “home-assistant-icon-flat.svg”:
The SVG file contains a “background” part - delete it:
Result:
So, if I understand you well, in my image everything seems ok, as I do not have a white background, right? So, what’s wrong then? Can you upload here the version saved by Illustrator?
Do you have any suggestion for me, how to get it to work? I do not have Illustrator, unfortunately.
Greetings,
Hendrik
here is the version saved by Illustrator.
I was already using the Adobe suite so I felt Illustrator was more intuitive to use.
I know some people use Inkscape, you can give it a try.
Hope this helps,
