# I don't understand how to change a nodes' icon to one beyond the default icon set

**URL:** <https://discourse.nodered.org/t/i-dont-understand-how-to-change-a-nodes-icon-to-one-beyond-the-default-icon-set/49664>\
**Category:** General\
**Created:** [12 August 2021 16:17 UTC](https://discourse.nodered.org/t/i-dont-understand-how-to-change-a-nodes-icon-to-one-beyond-the-default-icon-set/49664 "2021-08-12T16:17:41Z")\
**Posts on this page:** 9\
**Page:** 1

<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:** [12 August 2021 16:17 UTC](https://discourse.nodered.org/t/i-dont-understand-how-to-change-a-nodes-icon-to-one-beyond-the-default-icon-set/49664/1 "2021-08-12T16:17:41Z")

</div>

1,5 years ago, a mod made a [comment](https://discourse.nodered.org/t/home-automation-icons-how-can-additional-icons-be-installed-and-used/20115/3) where he provided some code that's supposed to show a node with a washing machine icon provided by [icofont.com](http://icofont.com)

Unfortunately, importing that code into my current node-red installation (running as a HA addon) didn't load said washing machine icon and I couldn't get it to work after some fiddling around either.

Can someone help me out with this?  
Also, can't you somehow change an individual nodes' color from within the node-red UI?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [12 August 2021 16:44 UTC](https://discourse.nodered.org/t/i-dont-understand-how-to-change-a-nodes-icon-to-one-beyond-the-default-icon-set/49664/2 "2021-08-12T16:44:28Z")

</div>

Can you post the code of your node and a picture of what it currently looks like?

Where do you want to change the colour, in the editor or on a dashboard? Again a photo would be helpful.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [12 August 2021 17:45 UTC](https://discourse.nodered.org/t/i-dont-understand-how-to-change-a-nodes-icon-to-one-beyond-the-default-icon-set/49664/3 "2021-08-12T17:45:21Z")

</div>

> [@ars4l4n](#):
>
> importing that code into my current node-red installation (running as a HA addon) didn't load said washing machine icon

Various icons are now "pre-loaded" so you just need to use the name in the associated icon label of the node (along with initial colours)

- [Angular Material Icons](https://klarsys.github.io/angular-material-icons/)
- [Font Awesome Icons](https://fontawesome.com/v4.7/icons/)
- [weather-icons-lite/css\_mappings.md at master · Paul-Reed/weather-icons-lite · GitHub](https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/51e8884559de5fe8f57d5332117024b8a59a1e9d.png)

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

Changing the colours programmatically has been covered lots, even recently. You can search for the various ways in the forum.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [12 August 2021 18:02 UTC](https://discourse.nodered.org/t/i-dont-understand-how-to-change-a-nodes-icon-to-one-beyond-the-default-icon-set/49664/4 "2021-08-12T18:02:33Z")

</div>

If you are referring to a Tabs icon (in the dashboard) then the same use of icon name applies

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/6/c6190fc13d3947fe73aed22c003b36d6b67fa9af.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/182b073623d53efc7099950deadb8484161a5989.png)

---

<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:** [12 August 2021 18:45 UTC](https://discourse.nodered.org/t/i-dont-understand-how-to-change-a-nodes-icon-to-one-beyond-the-default-icon-set/49664/5 "2021-08-12T18:45:09Z")

</div>

There is a whole section in the dashboard readme [node-red-dashboard (node) - Node-RED](https://flows.nodered.org/node/node-red-dashboard) about icons available or loadable in the dashboard.

If you really mean a node and not the dashboard then no you can’t change its colour (unless it’s a sunflower) as that is a hint as to the actual type of node so is kept constant to aid “readability” of the flow.

---

<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:** [12 August 2021 19:31 UTC](https://discourse.nodered.org/t/i-dont-understand-how-to-change-a-nodes-icon-to-one-beyond-the-default-icon-set/49664/6 "2021-08-12T19:31:41Z")

</div>

I was referring to node icons and colors and failed to realize that your comment was about dashboard icons.  
Didn't realize that there actually was a dashboard since I can't see one in my node-red HomeAssistant Addon.

And you can't just change a nodes' icon to one from [icofront.com](http://icofront.com) either?

---

<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:** [12 August 2021 19:48 UTC](https://discourse.nodered.org/t/i-dont-understand-how-to-change-a-nodes-icon-to-one-beyond-the-default-icon-set/49664/7 "2021-08-12T19:48:25Z")

</div>

For individual nodes then [Node appearance : Node-RED](https://nodered.org/docs/creating-nodes/appearance)  
For an existing node you can change the icon in the appearance tab of the config panel

---

<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:** [13 August 2021 22:48 UTC](https://discourse.nodered.org/t/i-dont-understand-how-to-change-a-nodes-icon-to-one-beyond-the-default-icon-set/49664/8 "2021-08-13T22:48:31Z")

</div>

I had taken a look at that page before but as far as I understand, a nodes' color changes have to be made from somewhere within the node-red folder instead of from within the UI which I find impractical. Or do you perhaps know a mod or the like that allows the latter?

The same goes for icons and I don't know how to change those beyond the couple hundreds that are available by default in the UI.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [12 October 2021 22:48 UTC](https://discourse.nodered.org/t/i-dont-understand-how-to-change-a-nodes-icon-to-one-beyond-the-default-icon-set/49664/9 "2021-10-12T22:48:56Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.