Custom icons loader

Share your Projects! Custom Integrations
1

Tired to be limited to mdi selection of icons to use ? Well I’ve made a custom component allowing to use any custom svg icon !

Available on github and it’s compatible HACS.

Now it still relies on a third-party website to generate the icon packs. I’m open to any suggestion to add new compatibilities other than fontello.
Or better, on how to be able to directly read normal .svg files made by Inkscape by example ; how to simplify their path as a single path so I can use them.

Hope it will please all UI tinkerers !

6 Likes
2

I’ve been looking for something like this for a while.

Select icons you wish to use and/or add your own svg icons. Then download your archive.
Move the archive to the custom_icons folder.

What do you mean by “archive” here? Do I put the zip file from fontello directly in the custom_icons folder or is it a specific file inside the zip?

3

Either. The code needs the .svg file inside the archive.
If you give the .svg file directly, it will be happy.
If you give the .zip file, it will extract the .svg file from the archive by its own

4

I tried this, but unfortunately didn’t work with me. I installed through HACS,l and added an icon (named it) user1.svg in the custom_icons folder (which is located in /config/). I used ‘custom:user1’ as icon with button-card but it simply doesn’t show anything. I have added ‘custom_icons:’ to configurarion.yaml as well btw.

5

@Armaell You are AWESOME! I was finally able to achieve what I described in this feature request. My earliest posts in that topic are from October 2017 so it’s been a long wait! Thank you so much! :bowing_man:

6

Turns out I had forgotten to restart HA after adding the icons. It’s working now, thanks a lot!

7

Did you add it to fontello first and export it or did you place the svg file directly in the folder?

8

I clicked on the icon and hit download. This gave me an archive with folders and fonts and files. I then copied the .svg one to the HA folder and renamed it to ‘user1.svg’

9

Well, what you add then is not a icon, but a icon pack. Even if this icon pack has only one icon.

You need to call your icon with the name of the icon added to the icon pack.
If you don’t know the name of the icons in your file, reload it in Fontello.

yDSnFuelOP

In this example, I have one icon in Fontello. When I’ll download the archive and add it to the custom_cons/ folder, I’ll be able to use this icon with custom:light-bulb. Wathever the name of the archive.

10

Oh, so you need to copy over the archive? Do you need to add is as a folder or .zip file?

Edit: just saw your reply to someone else. I’m gonna try it!

11

Is it possible this is no longer working with the update to 1.11 or the HACS update to 1.1?

I have tried going through this step by step about 6 times today and no what I do it will not let me use the custom icons.

12

Check this issue on GitHub.

13

Looks like this repository was removed from HACS
It stopped working few releases ago (I think 0.110.1 and above)

14

Yes, there was a breaking change in the way icons are loaded in Home Assistant 0.110. I’ve had it working since then without this custom component, and using just a .js file in the www folder. Have a look at this issue on GitHub.

15

What happened to this? When I go the linked github page I get 404. Deleted?

16

I think this project is dead. Sad because I was really hoping to use some major custom icons. On one website I use it allows me to use Fontastic to upload custom icons and make a svg package that the site will allow to pick from those icons. It works great too bad I am not smart enough to figure out how to integrate them into HA.

17

And see this section regarding custom icons: GitHub - thomasloven/hass-fontawesome: 🔹 Use icons from fontawesome in home-assistant

18

@ASNNetworks I have been using the Fontawesome for some time but Fontastic allows you to upload your own icon designs and use them. So if you have a custom icon you want to use you upload and it spits out and SVG files of all your icons. Now I guess you could convert them to png or something like that to use in customize mode but that takes a while.

19

Watch here. It’s very easy to add your creations

hass-bha-icons

20

Or you can just read the link I posted regarding custom icons:

If you have other svg icons you want to use (including but not limited to the Fontawesome Pro set), you can do so by placing the .svg files in <Home Assistant Config>/custom_icons/. You will need to create this directory yourself.

You can then use those icons with the fapro: prefix. E.g. fapro:lamp will get the icon in the file <Home Assistant Config>/custom_icons/lamp.svg.

You can literally use your own svg icons with this.

2 Likes