# Node Icon cannot be scaled and always fills the entire area

**URL:** https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358
**Category:** Developing Nodes
**Created:** [29 March 2021 11:35 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358 "2021-03-29T11:35:40Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)
#### Post date: [29 March 2021 11:35 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/1 "2021-03-29T11:35:40Z")

</div>

Hello guys,  
I am triying to use an .svg in the `icons` directory of my custom node. Nodered finds and displays the svg correctly but the icon always seems to fill the entire area. the file being an `.svg` isnt affected by scaling and always fills the entire area. is there a workaround for this. I want to be able to scale the icon ?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d02214f8ff207e8386ed34349ba901edbe52df7c.png)

one solution that i can think of is to use a png or jpg which i do not want to do. 🙂

also

1. the docs still say i can use a function to specify an icon file. I followed a previous thread where it was mentioned otherwise. This thread wasnt that old too... so i am not still sure if we can.  
Link: [Change node icon based on config - #2 by knolleary](https://discourse.nodered.org/t/change-node-icon-based-on-config/36266/2)

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [30 March 2021 08:31 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/2 "2021-03-30T08:31:03Z")

</div>

Without seeing the code for your node, it will be hard to help you out.  
Have you read the documentation about icons: [Node appearance : Node-RED](https://nodered.org/docs/creating-nodes/appearance#icon)

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [30 March 2021 08:43 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/3 "2021-03-30T08:43:53Z")

</div>

Hi @Kib

The icon should have an aspect ratio of 2:3 to ensure it scales properly in the node. You should include padding in the svg itself. Have a look at any of the core icons to see what I mean.

> **[node-red/node-red](https://github.com/node-red/node-red/tree/master/packages/node_modules/@node-red/nodes/icons)**
>
> master/packages/node\_modules/@node-red/nodes/icons

---

<div class="post-metadata">

### Author: ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)
#### Post date: [30 March 2021 12:51 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/4 "2021-03-30T12:51:46Z")

</div>

Thanks for the help. 🙂

---

<div class="post-metadata">

### Author: ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)
#### Post date: [8 April 2021 07:53 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/5 "2021-04-08T07:53:14Z")

</div>

Hi @knolleary. This is a followup to the previous question. I have padded the icons via changing the svg itself. but i found some inconsistencies.

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

The icon scales correctly in the node pallet but the node workspace has a different scaling behaviour. Is this intended?

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [8 April 2021 08:10 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/6 "2021-04-08T08:10:26Z")

</div>

> [@Kib](#):
>
> . Is this intended?

None of the core nodes have that issue with their SVG icons.

Have you compared your icon to any of the core ones to see if there are any obvious differences in their size etc.

---

<div class="post-metadata">

### Author: ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)
#### Post date: [8 April 2021 08:29 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/7 "2021-04-08T08:29:44Z")

</div>

Yes, you are correct, i have different sizes of icons when i compare it to core nodes but that shouldnt make a difference with svgs, I assumed.  
But shouldnt the behavious be the same at both places?

I am unclear. I will check with the core nodes and then post back.

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [8 April 2021 08:32 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/8 "2021-04-08T08:32:18Z")

</div>

> [@Kib](#):
>
> But shouldnt the behavious be the same at both places?

Well, we have only tested using the svgs we have. So we _know_ what size svg works. If you have a different size of SVG you have two options:

1. change it to match the core icons which we know to work
2. share your icon with us so we can investigate why they are different.

---

<div class="post-metadata">

### Author: ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)
#### Post date: [8 April 2021 09:18 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/9 "2021-04-08T09:18:13Z")

</div>

Yes. I will share the icon in this post, just so you know, placing the same icon as png works, but partially too.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/18454a13e3836695af570d2924e96aec4edf8bf8.png)

anyways, This is the same icon resized as the core nodes.. - Scales incorrectly.

```auto
<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-function fa-w-20">
 <g>
  <title>Layer 1</title>
  <g stroke="null" class="fa-group" id="svg_1">
   <path stroke="null" class="fa-secondary" fill="currentColor" d="m20.69081,25.23032l-1.16902,-0.97143c-0.33144,-0.27755 -0.84421,-0.23546 -1.10699,0.10316a14.55759,14.22263 0 0 0 0,17.19336c0.26325,0.33861 0.77556,0.37839 1.10699,0.10316l1.16902,-0.97143c0.31202,-0.25951 0.34611,-0.70313 0.1018,-1.02416a11.49608,11.23156 0 0 1 0,-13.40987c0.24479,-0.31965 0.2107,-0.76373 -0.1018,-1.02278zm11.50034,-0.86735c-0.26325,-0.33861 -0.77556,-0.37839 -1.10699,-0.10316l-1.16902,0.97143c-0.31202,0.25951 -0.34611,0.70313 -0.1018,1.02416a11.49702,11.23249 0 0 1 0,13.41034c-0.24479,0.32103 -0.2107,0.76512 0.1018,1.02416l1.16902,0.97143c0.33144,0.27524 0.84421,0.23546 1.10699,-0.10316a14.55854,14.22356 0 0 0 0,-17.19382l0,-0.00139l0,0z" opacity="0.4" id="svg_2"/>
   <path stroke="null" class="fa-primary" fill="currentColor" d="m27.44547,32.95965l2.18085,-2.13067a0.75757,0.74014 0 0 0 0,-1.04683l-1.07101,-1.04637a0.75757,0.74014 0 0 0 -1.07148,0l-2.18085,2.13067l-2.18085,-2.13067a0.75757,0.74014 0 0 0 -1.07148,0l-1.07101,1.04637a0.75757,0.74014 0 0 0 0,1.04683l2.18085,2.13067l-2.18085,2.13067a0.75757,0.74014 0 0 0 0,1.04683l1.07101,1.04637a0.75757,0.74014 0 0 0 1.07148,0l2.18085,-2.13067l2.18085,2.13067a0.75757,0.74014 0 0 0 1.07148,0l1.07101,-1.04637a0.75757,0.74014 0 0 0 0,-1.04683l-2.18085,-2.13067zm-12.74843,-14.80272l-2.2727,0a4.92418,4.81088 0 0 0 -4.92418,4.81088l0,2.96054l-1.89392,0a0.75757,0.74014 0 0 0 -0.75757,0.74014l0,2.22041a0.75757,0.74014 0 0 0 0.75757,0.74014l1.89392,0l0,5.92109a1.13966,1.11344 0 0 1 -1.13635,1.1102l-0.75757,0a0.75757,0.74014 0 0 0 -0.75757,0.74014l0,2.22041a0.75757,0.74014 0 0 0 0.75757,0.74014l0.75757,0a4.92418,4.81088 0 0 0 4.92418,-4.81088l0,-5.92109l1.89392,0a0.75757,0.74014 0 0 0 0.75757,-0.74014l0,-2.22041a0.75757,0.74014 0 0 0 -0.75757,-0.74014l-1.89392,0l0,-2.96054a1.13966,1.11344 0 0 1 1.13635,-1.1102l2.2727,0a0.75757,0.74014 0 0 0 0.75757,-0.74014l0,-2.22041a0.75757,0.74014 0 0 0 -0.75757,-0.74014z" id="svg_3"/>
  </g>
 </g>

</svg>

```

This is the icon i used in the first followup post.

```auto
<svg width="640" height="512" xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-function fa-w-20">

 <g>
  <title>Layer 1</title>
  <g stroke="null" id="svg_1" class="fa-group">
   <path stroke="null" id="svg_2" opacity="0.4" d="m329.8373,194.35253l-16.64701,-12.55558c-4.71969,-3.58731 -12.02171,-3.04323 -15.76375,1.33328a207.30209,183.82563 0 0 0 0,222.22179c3.74878,4.37652 11.04407,4.8907 15.76375,1.33328l16.64701,-12.55558c4.44325,-3.35413 4.9287,-9.08785 1.44962,-13.23717a163.70568,145.16641 0 0 1 0,-173.3208c3.48583,-4.13138 3.00037,-9.87108 -1.44962,-13.21923zm163.76636,-11.21034c-3.74878,-4.37652 -11.04407,-4.8907 -15.76375,-1.33328l-16.64701,12.55558c-4.44325,3.35413 -4.9287,9.08785 -1.44962,13.23717a163.71916,145.17837 0 0 1 0,173.32678c-3.48583,4.14932 -3.00037,9.88901 1.44962,13.23717l16.64701,12.55558c4.71969,3.55741 12.02171,3.04323 15.76375,-1.33328a207.31558,183.83759 0 0 0 0,-222.22777l0,-0.01794z" fill="currentColor" class="fa-secondary"/>
   <path stroke="null" id="svg_3" d="m426.0245,294.25308l31.05553,-27.53857a10.78785,9.56616 0 0 0 0,-13.53013l-15.25133,-13.52415a10.78785,9.56616 0 0 0 -15.25807,0l-31.05553,27.53857l-31.05553,-27.53857a10.78785,9.56616 0 0 0 -15.25807,0l-15.25133,13.52415a10.78785,9.56616 0 0 0 0,13.53013l31.05553,27.53857l-31.05553,27.53857a10.78785,9.56616 0 0 0 0,13.53013l15.25133,13.52415a10.78785,9.56616 0 0 0 15.25807,0l31.05553,-27.53857l31.05553,27.53857a10.78785,9.56616 0 0 0 15.25807,0l15.25133,-13.52415a10.78785,9.56616 0 0 0 0,-13.53013l-31.05553,-27.53857zm-181.53935,-191.32311l-32.36356,0a70.12105,62.18001 0 0 0 -70.12105,62.18001l0,38.26462l-26.96963,0a10.78785,9.56616 0 0 0 -10.78785,9.56616l0,28.69847a10.78785,9.56616 0 0 0 10.78785,9.56616l26.96963,0l0,76.52924a16.22898,14.39108 0 0 1 -16.18178,14.34923l-10.78785,0a10.78785,9.56616 0 0 0 -10.78785,9.56616l0,28.69847a10.78785,9.56616 0 0 0 10.78785,9.56616l10.78785,0a70.12105,62.18001 0 0 0 70.12105,-62.18001l0,-76.52924l26.96963,0a10.78785,9.56616 0 0 0 10.78785,-9.56616l0,-28.69847a10.78785,9.56616 0 0 0 -10.78785,-9.56616l-26.96963,0l0,-38.26462a16.22898,14.39108 0 0 1 16.18178,-14.34923l32.36356,0a10.78785,9.56616 0 0 0 10.78785,-9.56616l0,-28.69847a10.78785,9.56616 0 0 0 -10.78785,-9.56616z" fill="currentColor" class="fa-primary"/>
  </g>
 </g>
</svg>

```

---

<div class="post-metadata">

### Author: ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)
#### Post date: [8 April 2021 10:29 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/10 "2021-04-08T10:29:21Z")

</div>

@knolleary found the issue, accroding to this answer [https://graphicdesign.stackexchange.com/a/71574](https://graphicdesign.stackexchange.com/a/71574) , svg is resolution agnostic and also the size of it doesnt matter, without the `viewBox`. But just specifiying the `viewbox` apparently allows infinite scaling, so i tried adding `viewBox="0, 0, 40, 60"` and also setting the size to `width="40" height="60"` and the scaling works consistently across the palette and the workspace. Thanks for the assistance.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/124bcfb19a46fe8e29e101943cb8ac42f1a3e60d.png)

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [8 April 2021 10:30 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/11 "2021-04-08T10:30:35Z")

</div>

Great - I always forget about viewbox. We should capture that in the docs to help others in the future.

---

<div class="post-metadata">

### Author: ![Kib](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kib/32/27493_2.png) [@Kib](https://discourse.nodered.org/u/Kib)
#### Post date: [8 April 2021 10:54 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/12 "2021-04-08T10:54:05Z")

</div>

@knolleary Yes. That and it would also be nice in the docs if it mentioned that we can not use functions for icons while specifiying the node properties, i had to learn that from a previous answer you gave to a post i linked in the question... I could create a ticket to update if it is okay, or if there are tickets for such small issues. 🙂

---

<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: [8 April 2021 14:36 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/13 "2021-04-08T14:36:51Z")

</div>

A pull request direct to the docs would be even better 🙂

---

<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: [22 April 2021 14:37 UTC](https://discourse.nodered.org/t/node-icon-cannot-be-scaled-and-always-fills-the-entire-area/43358/14 "2021-04-22T14:37:31Z")

</div>

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