# Using custom png files with ui-switch node
**URL:** https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489
**Category:** General
**Created:** [21 January 2021 12:48 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489 "2021-01-21T12:48:32Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@khoihosi](https://discourse.nodered.org/u/khoihosi)
#### Post date: [21 January 2021 12:48 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/1 "2021-01-21T12:48:32Z")
Hi all,
Currently I'm using a ui-switch node with standaard fa icons controlling my lights via mqtt
this is the code:
```auto
[{"id":"19f45587.ec299a","type":"mqtt in","z":"48518d4f.6375e4","name":"Olive tree right","topic":"homie/homey-topic/olivetreeright/onoff","qos":"2","datatype":"auto","broker":"d094d3b7.a558a8","x":140,"y":1240,"wires":[["13334208.6e9c9e"]]},{"id":"13334208.6e9c9e","type":"function","z":"48518d4f.6375e4","name":"Convert String to Boolean","func":"if(msg.payload === \"true\"){\n msg.payload = true; \n}else{\n msg.payload = false;\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":390,"y":1240,"wires":[["907f80a.79b7e8"]]},{"id":"907f80a.79b7e8","type":"ui_switch","z":"48518d4f.6375e4","name":"Olive tree right","label":"","tooltip":"","group":"2cc829a5.610f36","order":46,"width":1,"height":1,"passthru":false,"decouple":"false","topic":"homie/homey-topic/olivetreeright/onoff/set","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-3x fa-lightbulb-o","oncolor":"Yellow","offvalue":"false","offvalueType":"bool","officon":"fa-3x fa-lightbulb-o","offcolor":"Black","x":640,"y":1240,"wires":[["acba197a.d27b68"]]},{"id":"acba197a.d27b68","type":"mqtt out","z":"48518d4f.6375e4","name":"MQTT Transmitter","topic":"","qos":"","retain":"","broker":"d094d3b7.a558a8","x":970,"y":1120,"wires":[]},{"id":"d094d3b7.a558a8","type":"mqtt-broker","name":"Homey MQTT","broker":"192.168.178.83","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"2cc829a5.610f36","type":"ui_group","name":"all","tab":"6766858b.dee74c","order":3,"disp":false,"width":"20","collapse":false},{"id":"6766858b.dee74c","type":"ui_tab","name":"Dash","icon":"home","order":1,"disabled":false,"hidden":false}]
```
I would like to use my own custom png files (locally stored on the static root ''/images/bulb-on.png and ''/images/bulb-off.png) Can somebody put me in the right direction?
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [21 January 2021 16:47 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/2 "2021-01-21T16:47:48Z")
Try this
`http://localhost:1880/images/bulb-on.png`
And of course the colors don't work but you still need to define them.
---
### Author:  [@khoihosi](https://discourse.nodered.org/u/khoihosi)
#### Post date: [22 January 2021 08:30 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/3 "2021-01-22T08:30:07Z")
This is not working. This [post](https://discourse.nodered.org/t/change-icon-on-switch/956/2) suggests that it needs to be arranged with an ui-template node.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [22 January 2021 09:15 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/4 "2021-01-22T09:15:42Z")
> [@hotNipi](#):
>
> [http://localhost:1880/images/bulb-on.png](http://localhost:1880/images/bulb-on.png)
If you try to access those png-s directly do you see them? I mean is your static folder configured properly and it works for other usages?
---
### Author:  [@khoihosi](https://discourse.nodered.org/u/khoihosi)
#### Post date: [22 January 2021 09:17 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/5 "2021-01-22T09:17:04Z")
yes i'm using a custom background picture in NR which is in the same folder
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [22 January 2021 09:19 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/6 "2021-01-22T09:19:04Z")
So direct access with browser works?
---
### Author:  [@khoihosi](https://discourse.nodered.org/u/khoihosi)
#### Post date: [22 January 2021 09:24 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/7 "2021-01-22T09:24:03Z")
Oh silly, I made a typo... It works now. Thanks!
Is there anyway i can control the size of it in NR? Or should i just increase the PNG size
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [22 January 2021 09:30 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/8 "2021-01-22T09:30:18Z")
If those icons will be only for that purpose it will be easier to make them proper size.
Sure there is ways to manipulate them with CSS but it may be tricky...
---
### Author:  [@khoihosi](https://discourse.nodered.org/u/khoihosi)
#### Post date: [22 January 2021 09:31 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/9 "2021-01-22T09:31:23Z")
Yes only for that purpose. I will make them the proper size, thanks again
---
### Author:  [@khoihosi](https://discourse.nodered.org/u/khoihosi)
#### Post date: [22 January 2021 14:57 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/10 "2021-01-22T14:57:07Z")
Hi hotNipi,
Changing the size has no effect on the dashboard. It keeps resizing it to a width of 24px. This is also shown in the 'inspect elements' of my browser.
Is there a piece of CSS to overrule that and resize the bulp-on.png image?
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [22 January 2021 18:17 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/11 "2021-01-22T18:17:07Z")
Try this
---
### Author:  [@khoihosi](https://discourse.nodered.org/u/khoihosi)
#### Post date: [22 January 2021 20:41 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/12 "2021-01-22T20:41:55Z")
That worked!
Thank you @hotNipi
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [5 February 2021 20:42 UTC](https://discourse.nodered.org/t/using-custom-png-files-with-ui-switch-node/39489/13 "2021-02-05T20:42:34Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.