# Searching for an icon

**URL:** <https://discourse.nodered.org/t/searching-for-an-icon/76644>\
**Category:** General\
**Created:** [16 March 2023 22:08 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644 "2023-03-16T22:08:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [16 March 2023 22:08 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/1 "2023-03-16T22:08:32Z")

</div>

I have a routine that sends out a _Heart beat_ and have icons that suffice to show it is running.

(Don't ask) 😉

Now and then they are stopped. I didn't apply a good notification for this and so am now working on it.

As is, the _heart beat_ icon is used and it toggles between teal and lime colours to show/indicate the _heart_ is beating.

But what about when it is `STOPPED`??!!

For now I have just made the colour `RED` and it doesn't flash/blink.

Probably good enough, but... I'm me.

There isn't a `DEATH` icon floating around anywhere?  
Or - at a stretch: `PIRATE` (Skull and crossbones) icon somewhere?

Just asking.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [16 March 2023 22:40 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/2 "2023-03-16T22:40:51Z")

</div>

> [@Trying\_to\_learn](#):
>
> Skull and crossbones

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/1/414b82ec06cbd9ba3e915be13a2ce7b3db4921b8.png)  
from [Skull and crossbones Icons – Download for Free in PNG and SVG (icons8.com)](https://icons8.com/icons/set/skull-and-crossbones)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [16 March 2023 22:42 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/3 "2023-03-16T22:42:39Z")

</div>

Thanks.

Now I am going to show my stupidity:

How do I use it?  
The `font awesome` (etc) I just call them by name and the magically work.  
I've not done any custom icons before.  
(sorry.)  
~~And - I'm guessing - SVG would be better than PNG~~  
Maybe not. That costs $$ to download.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [16 March 2023 22:49 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/4 "2023-03-16T22:49:36Z")

</div>

Font awesome

```auto
<i class="fa-solid fa-skull-crossbones"></i>

```

The other icon would have to be copied into a static directory and loaded (I think) just like any image.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [16 March 2023 22:51 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/5 "2023-03-16T22:51:35Z")

</div>

Thanks.

But I'm missing something. (Yeah, my problem)

but I'm stuck on the _path_.....

Say I put it in my `node-red/public/pictures/` directory.....  
`fa-skill-crossbones` doesn't really have a _path_ so I don't know where to put the file.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [16 March 2023 23:47 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/6 "2023-03-16T23:47:58Z")

</div>

My bad, the font awesome icon is not available in v4.7, which is what Node-RED uses.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [16 March 2023 23:53 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/7 "2023-03-16T23:53:17Z")

</div>

No problems.

But now I'm confused.

I'll see if I can work out how to use the `png` file to be shown in the `text` node to display the icon.

I vaguely remember I touched on it a long time ago.  
But C.R.A.F.T. disease is painful.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [17 March 2023 00:49 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/8 "2023-03-17T00:49:11Z")

</div>

> [@Trying\_to\_learn](#):
>
> I've not done any custom icons before.

Not strictly true ! 🤔 🤔 🤔

> [@Suggestion for which icons to use](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/10):
>
> If you put this in a template added to head section you can use thousands of iconify icons then. \<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"\>\</script\> Then in switch node use custom icons set to iconify-mdi:fan-auto and iconify-mdi:fan Browse icons at [iconify](https://icon-sets.iconify.design/)

🤣 🤣 🤣

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [17 March 2023 02:36 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/9 "2023-03-17T02:36:41Z")

</div>

Yeah. But C.R.A.F.T. disease is a kicker.

Memory is not what I would like.

I'll look at the thread now.

Ok, but.... (Sorry but....)  
That is when I use existing icons in the set.

This is a new one which is a `.png` file on my machine.  
(Say in `.node-red/public/pictures/`)

I am not seeing a link to this specific case.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [17 March 2023 03:36 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/10 "2023-03-17T03:36:45Z")

</div>

Oh!

Are you saying I could do something like what I did with the:  
`<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>`  
but point it to the new site?

(Thought a bit more about it.)  
Nah, because that new site is for DOWNLOADING more than remote access to their icons.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [17 March 2023 17:13 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/11 "2023-03-17T17:13:27Z")

</div>

Find an icon you like and add to a text node, see example .....

[https://icon-sets.iconify.design/?query=skull](https://icon-sets.iconify.design/?query=skull)

```auto
[{"id":"8bef6a9ca2b58129","type":"ui_text","z":"719a883a54bf61c7","group":"08cb253c5b8e93ae","order":3,"width":0,"height":0,"name":"","label":"Label","format":"<span class=\"iconify icon:fa6-solid:skull-crossbones\"></span>","layout":"row-spread","className":"","x":1355,"y":990,"wires":[]},{"id":"08cb253c5b8e93ae","type":"ui_group","name":"Group","tab":"dc50fb1.77df988","order":null,"disp":true,"width":6},{"id":"dc50fb1.77df988","type":"ui_tab","name":"Home Page","icon":"","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [17 March 2023 19:55 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/12 "2023-03-17T19:55:51Z")

</div>

Thanks.

But **I'm stupid** as I seem to be missing something.

(here's the _rub_ for me.)

The code you posted works. And fair enough. You understand every part of it.  
Down to the pixel level.

So I go to the link you posted above the code.  
Only for the sake of learning I pick ANOTHER icon.  
(And to be clear: I am not really sure WHICH one you picked/used anyway.)  
Page 1, third row, third from the right.  
[https://icon-sets.iconify.design/openmoji/skull-and-crossbones/](https://icon-sets.iconify.design/openmoji/skull-and-crossbones/)

 ![Screenshot from 2023-03-18 06-47-23](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/9/b99db7bb7fb01a24ad5943021e8d4f63a616aab0.png)

That gives me this _link_  
`openmoji:skull-and-crossbones`

I put that in and it does NOT work.

Now: YOUR example is similar but different.

`icon:fa6-solid:skull-crossbones`

So the line I have in the `text` node is:  
`<span class="iconify icon:fa6-openmoji:skull-and-crossbones"></span>`  
compared to  
`<span class=\"iconify icon:fa6-solid:skull-crossbones\"></span>`

I see the `solid` vs `openmoji` is the difference. But I am not seeing the _mechanical_ difference as that icon was from the link you gave me.

So I am missing a crucial part of how things work.

I'm not trying to be difficult. I want to understand (clearly) HOW it works.  
Yes, that is my problem but if I don't ask, I won't get to know.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [17 March 2023 20:18 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/13 "2023-03-17T20:18:04Z")

</div>

(I'm good at digging but I'm not sure it is helping)

There is _another bump_ in things going smooth for me.

The example you gave:  
I can't _translate_ that to anything compatible with the code I have in a `function` node.

First line.

```auto
let msg1 = { payload: '<font color = \"red\"><i class="fa fa-heartbeat fa-2x"></i></font>' };
if (msg.topic === "RESET")
{
    // Detect what the ENABLE command is.
    if (msg.payload === 'ACTIVATE')
    {
        // If it is "true" indicate it is enabled and set 'enable'
        node.status({fill:"yellow",shape:"dot",text:"ENABLED"});
        context.set('enable',1);
    }
    //else
    if (msg.payload === 'DEACTIVATE')
    {
        // Otherwise mark as disabled and reset 'enable'
        context.set('enable',0);
        node.status({fill:"red",shape:"dot",text:"DISABLED"});
        return [null,msg1];
    }
}
// Now act of message which is not the "ENABLE" command.
if (msg.topic != "ENABLE")
{
    // Check if 'enable' is set to 1
    if (context.get('enable') == 1)
    {
        // Pass message through
        node.status({fill:"green",shape:"dot",text:"ENABLED"});
        return msg;
    }
}

```

`let msg1 = { payload: '<font color = \"red\"><i class="fa fa-heartbeat fa-2x"></i></font>' };`

Your line is:  
(and given it is to be put in a `text` node)  
`<span class="iconify icon:fa6-solid:skull-crossbones"></span>`

To me they are two different structures.  
Yes, my fault/problem.

But I am missing something - still.

Oh, the icon _type_.  
I'm GUESSING a CRUCIAL part of the selection is:  
You posted:  
`https://icon-sets.iconify.design/openmoji/`  
When REALLY it should have been:  
`https://icon-sets.iconify.design`  
then pick `Font Awesome Solid`  
Then search for `skull`.

As is I was looking in the `openmoji` _flavour_ - which had me going nowhere fast.  
Anyway... Now I'm stuck on how to change the line so it works in the `function` node.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [17 March 2023 20:39 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/14 "2023-03-17T20:39:54Z")

</div>

I've NEARLY got it working.

## NEARLY being the important word.

`let msg1 = { payload: '<font color = \"red\"><i class="iconify icon:fa6-solid:skull-crossbones" fa-2x"></i></font>' };`

Even if I make it `fa6-2x` it doesn't work/scale up.  
And the SMALL icon kind of takes away from the importance of the message.

I can't find any instructions on how to upscale `fa6-` series icons.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [17 March 2023 22:04 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/15 "2023-03-17T22:04:23Z")

</div>

> [@Trying\_to\_learn](#):
>
> fa-2x

One way is to edit the Group Label style in a ui-template

```auto
<style>
    .nr-dashboard-text .value{
        font-size: 2em;
    }

</style>

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [17 March 2023 22:09 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/16 "2023-03-17T22:09:11Z")

</div>

Now you are talking _black magic_ to me. 😉

WAY WAY above my skill set.

I get what you are saying, but I don't know if that will mess up anything else on any other page/s.

Thanks though, but I am ..... reluctant to do it for the reason I just said.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [17 March 2023 23:06 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/17 "2023-03-17T23:06:38Z")

</div>

> [@Trying\_to\_learn](#):
>
> \<font color = "red"\>\<i class="iconify icon:fa6-solid:skull-cros`sbones" fa-2`x"\>

Try

```auto
<font color = "red"><i class="iconify icon:fa6-solid:skull-crossbones fa-2x"></i></font>

```

You have an extra `"` between bones & fa-2x

fa-1x, fa-2x, fa-3x & fa-4x should all work

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [17 March 2023 23:29 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/18 "2023-03-17T23:29:39Z")

</div>

# {{THANKS}} I'm stupid.

That is me not understanding the structure completely.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [17 March 2023 23:34 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/19 "2023-03-17T23:34:31Z")

</div>

Um.

(oh boy)

It works on THIS machine - the _test bed_.

But when I move it to THE machine.... It doesn't.

I don't see the icon.

I'll check what is being sent.

BRB.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [17 March 2023 23:52 UTC](https://discourse.nodered.org/t/searching-for-an-icon/76644/20 "2023-03-17T23:52:45Z")

</div>

This is the icon name as you see on the web page

> [@Trying\_to\_learn](#):
>
> openmoji:skull-and-crossbones

This is how to use it - note the _ **fa6-solid:** _ bit belongs to the name of the icon I choose. So it is not used for other icons.

```auto
<span class="iconify icon:openmoji:skull-and-crossbones fa-2x"></span>

```

This also works in a template node. But if you want to inject the icon in a message then use

```auto
<span class={{msg.payload}}></span>

```

[Next page](https://discourse.nodered.org/t/searching-for-an-icon/76644.md?page=2)