I’d like to have custom icon sauna instead of text
couldn’t figure out how to do this %(
There are a few different ways to accomplish this. I’m familiar with three of them:
-
You can find an MDI icon that looks close enough to the task. The closest one that I can find is mdi:hot-tub, but a full list of the icons is available at Material Design Icons
-
There is an integration in HACS called simpleicons that might have something closer.
-
If you want to make your own icons and embed them, the process requires some programming skills, as you have to create a library file and load it in the right folder, etc. I started with a collection called hass-bha-icons as a template, and created two more collections of my own. You are welcome to them, but they don’t contain a sauna! :-/
Anyway, to make your own icons, you need a text editor (I use Notepad++) and an SVG editor (I use Inkscape). Each icon must be in SVG format, and it’s native size can’t exceed 24px x 24px, so most icons available on the web will need to be scaled down. Many times, I start with a PNG file, import it, and then trace the outline. (Inkscape can do both the scaling and the tracing.)
The tricky part is to import the SVG path into the collection, without leaving out anything, or including too much data. There isn’t a simple way to import the SVG, and if there is anything wrong with the final process, the result will be a blank icon with no other error messages. You will likely have to erase your browser cache after loading a new collection, too.
I don’t have a DIY written down, and there are a few steps. If you just want a sauna icon, send me a PM; I’d be happy to create one for you and load it into a library.
Regards,
-BW
1 Like
Hi Drawbars, do you have the library published in GitHub to clone and add several icons that I need 
Hey @drawbars,
Sorry to dig up a year old post, but I was wondering if you ever got around to writing more details about how to make your own icon library for Home Assistant?
I’m interested in making custom icons for my devices and stumbled upon this post which is the closest I’ve gotten to a guide on how to do it myself.
Thanks!
No worries. I still haven’t a) created a DIY or b) posted the libraries to GitHub. Sorry. The reasons are a) too many things to do/general laziness; and b) problems with my GitHub account. Let’s try to fix those things (really badly) here …
DIY VERSION
The basis for my work is still hass-bha-icons, and credit is still due for that work.
-
To import icons into HA, they need to be a) single-path and b) of native size 24 x 24px. This precludes using multicolor images or quickly adding a few bits on a new path.
-
If the image has several paths, you can see this in the Objects section of Inkscape. If so, Select All and use the Path menu to combine them. Generally, Union works best, but sometimes Difference or Exclusion provides better results. Experiment and use Undo to see what I mean.
-
Once you have an image that looks right, scale the entire object to 24x24 pixels (or smaller). Be sure to check the Document Properties to make sure that the Custom Size is also 24x24 pixels.
-
Generally, I find that the easiest starting point is to find or create a 2-color image of about 256 x 256 pixels in a graphics program. I use PaintShop Pro, but there are many alternatives. Look for a simple, clean image, because small details will disappear at 24px x 24px; and square or near-square images work best.
-
Import the image to Inkscape, then trace the bitmap and delete the original. Now, you have a vector version of the logo/element as a single layer. Scale the image to 24 x 24 pixels. Save the new icon as an SVG.
-
Open the SVG in a text editor. Scroll to an area that begins with
<path d=". There will be a long series of characters that begins with ‘M’ or ‘m’, and ends with ‘Z’ or ‘z’ – a space after the Z doesn’t matter. Copy that string into the clipboard as a single line, with no Enter or other characters added. -
Open your icon library file in the text editor. In the section that starts with
const, create a line that contains the name of the icon in quotes, followed by a colon. Create a second line that contains the string in your paste buffer from Step 6, with quotes around it, and a comma afterwards unless it’s the last entry. [Note: the 2nd line in my example below is supposed to be indented 2sp, and the 3rd line indented 4sp. I can’t get the editor to comply.]
const BAW_ICONS_MAP = {
"chair-lounge":
"M 6,7 C 6,5.89 6.89,5 8,5 h 8 c 1.1,0 … -2.34,-1.97 z",
etc.
- Count up the number of icons in the map and set iconset.size to that number.
That’s it! 
SAMPLE LIBRARIES
I have a library that I use, baw-icons.js. I am willing to share it with anyone in the HA community, but I can’t post it to GitHub. (Short version: my GitHub account uses an email address that no longer exists; I’ve been unsuccessful contacting the admin to fix this. And I don’t want to create a new account.) I will make it available to anyone who is interested; just PM me and I’ll provide a link.
Regards,
-BW
2 Likes
FWIW, here are the icons that I have in my library hass-baw-icons.js. They are heavily music- and holiday-oriented, due to my immediate needs. hass-bha-icons already has a good selection of modern lighting and appliance needs, and I saw no reason to import them and claim they were ‘mine’:
- chair-lounge – similar to MDI sofa
- floodlight-tree – the kind that DJs and bands use
- nhra-tree – standard drag race ‘christmas tree’
- rolling-rack – pro audio equipment rack with casters
- sandbox – pail and shovel
- sofa-variant – split cushion
- speaker-powered – similar to the standard speaker, but with a horn tweeter
- speaker-pa – multiple icon for speaker-powered
- speaker-powered-left – powered speaker with arrow pointing left
- speaker-powered-right
- steam-train – vintage locomotive
- steam-train2
- steam-train2-smoke
- subwoofer – speaker symbol, but pointing down
- village – old-world style
- village-night
- van – an alternative, stocky version of an auto
- man-with-hat – because I wear one!
- keyboard-nord – ads text logo
- keyboard-studiologic
- pine-tree-decorated – for Christmas
- sp-garage-closed – old-style with horizontal folding doors
- sp-garage-open
- sp-auto – '30s style open roadster
- sp-auto-variant – '20s style cabriolet
- speaker-left – facing the other way from standard, Alnico style
- speaker-right
- sofa-old – more Art Deco variety
- chair-lounge-old
- bender – from Futurama
- bender-variant
- dog-paw
- stove-kamado – Big Green Egg, etc.
- stove-kamado-variant
- laptop-rack – slant-top space for computer in rack
I also have a second library of corporate logos and such, but do to licensing issues, I’m not going to release them to the world. They were all imported in the manner of the DIY I posted.
Regards,
-BW
1 Like
Wow, thank you so much! I appreciate the fast, detailed reply. Ill definitely give this a try!
If you want, I can post it by u!
@jalejandro0211 Thank you, but I don’t think it’s necessary right now. If the demand grows significantly, I might bundle it up with instructions and see if I can get GitHub to pay attention to me.
If anyone wants the file – with no other support beyond this forum thread – it’s available at –
Bruce’s website
– Moved to GitHub (see thread below) –
[If anyone here has inroads to GitHub and can help me, here is my situation: I created a GitHub account several years ago, using my business email. I’m retired now, the company is gone, and the email no longer works. My login credentials no longer seem to work; and I can’t reset my password because GitHub wants to send an email to the old account. SOLVED
I tried contacting GitHub support 2-3x to fix this but never received a reply. Maybe my PMs are blocked? Maybe 1-on-1 support is no longer available? If you have a suggestion, please PM me.]
Regards,
-BW
Hi All,
I finally got around to releasing my library on GitHub:
https://github.com/drawbars37/BAWicons
Regards,
-BW
2 Likes