# Icon size and appearance

**URL:** <https://discourse.nodered.org/t/icon-size-and-appearance/99602>\
**Category:** Dashboard\
**Created:** [5 November 2025 19:22 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602 "2025-11-05T19:22:58Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [5 November 2025 19:22 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/1 "2025-11-05T19:22:58Z")

</div>

Hello,  
i am trying to do my first steps with dashboard 2.0.  
I need different icons shown with different inputs.  
All i could find are icons with switches or buttons.  
Next thing is to change the size of the icons.

Thx in advance  
Olmuk

---

<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:** [5 November 2025 20:51 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/2 "2025-11-05T20:51:37Z")

</div>

> [@Olmuk](#):
>
> I need different icons shown with different inputs.  
> All i could find are icons with switches or buttons.

What dashboard widgets do you want to use icons with?  
Do you need the icon size to change dynamically or do you just want to change the default size?

---

<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:** [5 November 2025 21:01 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/3 "2025-11-05T21:01:33Z")

</div>

You will probably have to think about jbudds' question but here is a simple example of an icon. If you change `iconLarge` to `iconSmall` the size and position of the icon will change. (the icon is just displayed in the Group backdrop)

```auto
<template>
    <div class="iconLarge">
        <span class="mdi mdi-weather-sunny"></span>
    </div>
</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {

            }
        },
        watch: {
            // watch for any changes of "count"
 
        },
        computed: {
            // automatically compute this variable
            // whenever VueJS deems appropriate
 
        },
        methods: {
            // expose a method to our <template> and Vue Application

        },
        mounted() {
            // code here when the component is first loaded
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>
<style>
    /* define any styles here - supports raw CSS */
    .iconLarge {
        font-size: 100px;
        justify-content: right;
        align-items: center;
        text-align: center;
    }

	.iconSmall {
		font-size: 45px;

	}
</style>

```

---

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [5 November 2025 22:10 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/4 "2025-11-05T22:10:40Z")

</div>

Thanks for your answers.  
That is my problem because i don‘t really know where to put im the code.  
I guess the template ?  
Is it possible to show me that with the flows ?

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [5 November 2025 23:02 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/5 "2025-11-05T23:02:18Z")

</div>

Nowadays in Dashboard 2 im using [VUE features](https://vuetifyjs.com/en/components/icons/#usage), you can use their website even for live-testing of your code in their [Vue-Playground](https://play.vuetifyjs.com/#eNq9VMFuwjAM/ZUoZ1IGaIehDoltf0E5pIlHs6ZJlKaFCfXfl66MBsEmYGy3PNu137NdL7Z4bkxUV4CnOHZQGEkdzBKFUMxFjZikZfmYYAcbRxgoBzbBn+4uYPf0oCapU18I7T8sKBknOLBrqa23GysKat971z4TQnPGwLge+9yC6SA5Qi1us3NBWAYsT/WG+Hw5cMKEZRLCmgiB4j2cxcMuYU/eGzx7j6+VY4GflPICTAoFZ2uhioH8F+4ByZ85FUJV5cmulo7aYEzH3BB67gQdce1Qt0A32CZtqVoB4e0GqKtUUmv1mkh4dRdrfKIsv90mmcqaw0YHLNcWFMsCeb+vJxQXK/1NPSZ1xUllpKbhfv/ZHFNZAZFilbnDMR6QcllVpJ5U6K6pFVS53aW6aYP8r30mJa7X6kJSYf/6VzzcX2I8wP6A5GX0Vmrlb/Q2wawsEzxdLBvvE4XR1vnTZ4KAztgGbZsGNwM8ie6j8ciHT6LRXfSAB85WsPwAtgqrZg==). It helped me a lot to learn the capabilites of Node-red ui-Templates.

you will not need a flow to test the in Node-Red.... just an UI-Template and copy-paste the code.... there are good examples/demos in the [Node-Red-Tutorials](https://dashboard.flowfuse.com/nodes/widgets/ui-template)

---

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [7 November 2025 17:52 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/6 "2025-11-07T17:52:27Z")

</div>

@jbudd : i am trying to change the icon dynamically with a value.  
I can't find / understand the way to show the icon without the node button or switch, because  
my change of the value will come from outside ( opc ua ).  
If i am useing a template node to set the icon apperance i don#t know whcih node to use for  
the showing at the dasboard.  
Sorry about my missing knowledge but i watched many videos and books, but ??

---

<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:** [7 November 2025 18:07 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/7 "2025-11-07T18:07:22Z")

</div>

Thanks for your reply.

It would help us understand what you are trying to achieve if you can show us a picture of the dashboard (a screen capture or even a sketch of the data to display)

Also more detail of precisely what you want to change when your OPC-UA message arrives (for example, you might want to change to a different icon, it's size, color, or a combination of any of those)

---

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [7 November 2025 18:39 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/8 "2025-11-07T18:39:37Z")

</div>

Sorry, i have to show my usecase.  
I didn't want the " i have a problem, please give me a complete solution".  
Ok, i want to show the state of 3 different boolean at 5 machines.  
The simulation via slider change the clor and text of the boxes because the opc ua is not established now.

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/a/6a16f35f4af8949ed8bc0ed0582ed1e27756dc19.png)  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/e/2e4e6c21d393a97c8962678c2e88126c503a4e28.png)

---

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [7 November 2025 18:40 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/9 "2025-11-07T18:40:53Z")

</div>

With a switch node i can change a icon ( too small ) :  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/9/f93b8a881c0fcf128292eb5d1dc7637bbdb296a1.png)  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a8fd4412368d1b4b10e6da6704a0eef46d56397e.png)

---

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [7 November 2025 18:41 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/10 "2025-11-07T18:41:26Z")

</div>

the flow :

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/f/ffa00b2b2d7163c5b971fce7abfce11dbde1a51c.png)

---

<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:** [7 November 2025 19:18 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/11 "2025-11-07T19:18:18Z")

</div>

You can dynamically change the icon size with two CSS classes: bigicon and smallicon. Pass the class at runtime using msg.ui\_update.

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

```auto
[{"id":"dbe4c79ba931c832","type":"ui-switch","z":"8cc56a713c443848","name":"","label":"switch","group":"ecd866dc62e442ac","order":0,"width":"3","height":"1","passthru":false,"decouple":false,"topic":"topic","topicType":"msg","style":"","className":"","layout":"row-spread","clickableArea":"line","onvalue":"true","onvalueType":"bool","onicon":"alert","oncolor":"red","offvalue":"false","offvalueType":"bool","officon":"trumpet","offcolor":"blue","x":400,"y":150,"wires":[[]]},{"id":"e545d0392e213a66","type":"ui-template","z":"8cc56a713c443848","group":"","page":"33031fffa5689f5e","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":".bigicon i.v-icon {\n font-size: 48px;\n}\n.smallicon i.v-icon {\n font-size: 24px;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":425,"y":105,"wires":[[]]},{"id":"48a9a003be080733","type":"inject","z":"8cc56a713c443848","name":"Bigicon","props":[{"p":"ui_update","v":"{\"class\": \"bigicon\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":140,"y":120,"wires":[["dbe4c79ba931c832"]]},{"id":"a1ce2a401f84da41","type":"inject","z":"8cc56a713c443848","name":"Smallicon","props":[{"p":"ui_update","v":"{\"class\": \"smallicon\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":150,"y":165,"wires":[["dbe4c79ba931c832"]]},{"id":"ecd866dc62e442ac","type":"ui-group","name":"demo","page":"33031fffa5689f5e","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"33031fffa5689f5e","type":"ui-page","name":"demo","ui":"e9c974f7c1d080d1","path":"/demo","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"e9c974f7c1d080d1","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"2px","density":"default"}},{"id":"6a9cc62ecb4f4ee1","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/1/7197ae37b1c18a6bae996882f36542980dc98a62.png)

---

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [7 November 2025 19:38 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/12 "2025-11-07T19:38:48Z")

</div>

Great, thank you - i will try it.  
But how can i show the icon without the switch ( because the state comes from outside ) ?

---

<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:** [7 November 2025 19:46 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/13 "2025-11-07T19:46:13Z")

</div>

You can display an icon in a text widget, or in a template widget or a button widget. I don't know offhand how to show it in a text widget but there will no doubt be others here who can give you hints.

I think @Buckskin have you an example of an icon in a template widget? I have not downloaded his example.

---

<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:** [7 December 2025 19:46 UTC](https://discourse.nodered.org/t/icon-size-and-appearance/99602/14 "2025-12-07T19:46:40Z")

</div>

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