# Home automation icons - how can additional icons be installed and used?

**URL:** https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115
**Category:** Dashboard
**Created:** [9 January 2020 14:21 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115 "2020-01-09T14:21:37Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [9 January 2020 14:21 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/1 "2020-01-09T14:21:37Z")

</div>

My Question: how to install and use additional Icons to the dashboard (for offline use)

Since a while I have trouble finding nice icons.

Out of the 2019 survey: Node-RED is used for Home automation by 75.7% of the participants. So there should be many users looking for suitable icons to identify:

- rooms (I found only a bed and knife and fork)
- electric installation (lightbulb, switches ...)
- a/v equipment (tv, speaker, amplifier ...)
- household equipment (oven, mixer, coffee machine...)
- mechanical and plumbing (valves, fans, water hoses....)
- bathroom equipment (shower, bathtub)
- garden equipment (pumps, sprinkler ...)
- and many others

I know there are many Creative Commons licensed (or similar free licenses) icons available ... but how can they be selected, compiled and used the same or similar way as fa or material icons.

---

<div class="post-metadata">

### Author: ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)
#### Post date: [9 January 2020 17:12 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/2 "2020-01-09T17:12:29Z")

</div>

+1 ... coincidence ... I was just about to check available icons. Few usable available via supported icon themes.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [10 January 2020 16:51 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/3 "2020-01-10T16:51:38Z")

</div>

hmm - been a while - but Paul used to load external icons (for weather) like this - [https://flows.nodered.org/flow/d65756991da6df708400b9d9819ed9b7](https://flows.nodered.org/flow/d65756991da6df708400b9d9819ed9b7) - we stopped having to do this when he created a nice subset that was small enough to load all the time).

I then added support for icofont ([https://icofont.com/](https://icofont.com/) ) fonts that could be loaded via a template in a similar manner but if loaded in the head could then be used more widely within dashboard by using `icofont-` as a prefx (like fa- fonts are). So you can go to their site and create your own collection of icons to load.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/ab7d21391ed9bd44374e737da9ce2dad4a67c772.png)

```auto
[{"id":"f8da13db.bf715","type":"ui_template","z":"c4f68fc3.2dd88","group":"68d7ee81.54ea9","name":"","order":0,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"/icofont.css\">","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":300,"y":300,"wires":[[]]},{"id":"df12003.e1dbe","type":"ui_button","z":"c4f68fc3.2dd88","name":"","group":"68d7ee81.54ea9","order":1,"width":"5","height":"2","passthru":false,"label":"Washing machine","tooltip":"","color":"","bgcolor":"","icon":"icofont-washing-machine icofont-2x","payload":"","payloadType":"str","topic":"","x":370,"y":360,"wires":[[]]},{"id":"68d7ee81.54ea9","type":"ui_group","z":"","name":"Examples","tab":"4301b423.548afc","order":1,"disp":true,"width":"12","collapse":false},{"id":"4301b423.548afc","type":"ui_tab","z":"c4f68fc3.2dd88","name":"Test","icon":"school","order":4,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [10 January 2020 17:38 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/4 "2020-01-10T17:38:39Z")

</div>

I have to say that I tend to search out individual SVG images that might be useful and then keep them on hand. I would always want to control loading of images like this and do it from local source. It also saves loading a large library or a webfont when you only need a few images.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [10 January 2020 18:26 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/5 "2020-01-10T18:26:23Z")

</div>

as long as you can find them in icofont then that allows you to create your own custom package with just the icons you want in it. (so yes can be very small)

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [10 January 2020 23:14 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/6 "2020-01-10T23:14:16Z")

</div>

> [@dceejay](#):
>
> widely within dashboard

I think many users like me will be happy to use home automation icons all over the dashboard in an easy way. Weather icons are only a small subset normally used in home automation.

“A picture says more than thousand words” and a icon take less space then a few words.

Thank you for the hints I will see how I can implement this (without the limiting it to the template node)

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [10 January 2020 23:19 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/7 "2020-01-10T23:19:24Z")

</div>

You are right, most of the icons available are useless in a particular dashboard. But always the one you have in mind is missing.  
I have no idea how to implement it in an efficient but user friendly way ... I have to do some investigation. So call it a challenge and everybody how is more experienced than me is welcome to participate 🤗

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [10 January 2020 23:34 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/8 "2020-01-10T23:34:06Z")

</div>

Only the font is loaded via the template - the picture above is just a standard button (but with a washing-machine icon from icofont).

PS you can also use fontello if you wish - but must call the font icofont - so it get picked up correctly.

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [10 January 2020 23:44 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/9 "2020-01-10T23:44:01Z")

</div>

Thanks for the clarification. I’m not able to test it right now but definitely give it a try. I took a quick look into icofont 2.100 icons sound impressive but after a quick search no pump no fan or heater and only one lightbulb and everything in only one state.  
If I can’t find a suitable collection perhaps I have to collect and perhaps remix (in example different states) my own one.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [10 January 2020 23:46 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/10 "2020-01-10T23:46:33Z")

</div>

Several tutorials out there of course... [https://rafaltomal.com/how-to-create-and-use-your-own-icon-fonts/](https://rafaltomal.com/how-to-create-and-use-your-own-icon-fonts/)

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [10 January 2020 23:57 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/11 "2020-01-10T23:57:16Z")

</div>

creating good icons is of course a skill in itself - one which I do not have - so I am happy to leave that to those that can.

---

<div class="post-metadata">

### Author: ![drmibell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmibell/32/8424_2.png) [@drmibell](https://discourse.nodered.org/u/drmibell)
#### Post date: [11 January 2020 00:41 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/12 "2020-01-11T00:41:24Z")

</div>

> [@dceejay](#):
>
> as long as you can find them in icofont then that allows you to create your own custom package with just the icons you want in it.

At the risk of being reminded that the editor is not a dashboard... is there a way to include such a package in a node's Appearance dialog in same way that the fa icons are listed? It might be fun to have `inject` or `ui_switch` nodes with icons of the devices they control.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [11 January 2020 08:14 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/13 "2020-01-11T08:14:13Z")

</div>

Not without them being built in, and as far as we know there is no decent small set that would cover everything.

I suppose you could create a dummy node that included all the icons you wanted as the appearance list does let nodes "borrow" from each other.

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [11 January 2020 12:24 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/14 "2020-01-11T12:24:16Z")

</div>

I think the best way would be to compile/remix one or many (see bullet points) icon fonts for the dashboard and then we can see further.  
As you noted, it will not be an easy task. I can remember times when I “draw” bitmap icons pixel by pixel and every pixel counted. Preferable as minimalistic as possible to go with existing material design.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [11 January 2020 14:34 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/15 "2020-01-11T14:34:54Z")

</div>

Good luck. I shall await the results with interest.

---

<div class="post-metadata">

### Author: ![ars4l4n](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ars4l4n/32/45296_2.png) [@ars4l4n](https://discourse.nodered.org/u/ars4l4n)
#### Post date: [3 August 2021 03:16 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/16 "2021-08-03T03:16:14Z")

</div>

Can someone elaborate on how to use this?  
I imported, deployed and fiddled around with it but couldn't get it to show the washing machine icon.  
I'd be happy to change every nodes' icons

---

<div class="post-metadata">

### Author: ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)
#### Post date: [3 August 2021 11:14 UTC](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/17 "2021-08-03T11:14:18Z")

</div>

I never had time to work on this . as many IOT icons are available directly as angular icons I use them (even if they need a internet connection which I can expect from all of my devices)

> **[Google Fonts](https://fonts.google.com/icons?icon.query=wash)**
>
> Making the web more beautiful, fast, and open through great typography

or here you find an entire section of 378 Icons many community designed:

[https://materialdesignicons.com/tag/home-automation](https://materialdesignicons.com/tag/home-automation)

Never had time to compile them to a subset easy to implement locally
