# Switch SVG icon based on msg

**URL:** <https://discourse.nodered.org/t/switch-svg-icon-based-on-msg/724>\
**Category:** Dashboard\
**Created:** [9 June 2018 23:11 UTC](https://discourse.nodered.org/t/switch-svg-icon-based-on-msg/724 "2018-06-09T23:11:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dilepa](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@dilepa](https://discourse.nodered.org/u/dilepa)\
**Post date:** [9 June 2018 23:11 UTC](https://discourse.nodered.org/t/switch-svg-icon-based-on-msg/724/1 "2018-06-09T23:11:05Z")

</div>

Hi,

I am trying to switch svg icons depending on the status of the msg properties. I want to make use of UI template, but unsure of how to select the svg icons based on input.

Its mostly for home automation with icons showing door opened or door closed.

SVG door open

Door open

any examples to see how to proceed.

also if i need to keep the .svg files on the pi3, where exactly would be the location?

Thanks

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [10 June 2018 01:20 UTC](https://discourse.nodered.org/t/switch-svg-icon-based-on-msg/724/2 "2018-06-10T01:20:53Z")

</div>

Have you seen this flow example?

[https://flows.nodered.org/flow/90341d0d81f59762fe1cf8d753723636](https://flows.nodered.org/flow/90341d0d81f59762fe1cf8d753723636)

---

<div class="post-metadata">

**Author:** ![dilepa](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@dilepa](https://discourse.nodered.org/u/dilepa)\
**Post date:** [10 June 2018 05:51 UTC](https://discourse.nodered.org/t/switch-svg-icon-based-on-msg/724/3 "2018-06-10T05:51:48Z")

</div>

Hi Anderi,

Yes, but it is for fa icon, if i have a custom icons, any idea where i need to place it?

my system is a pi3.

Thanks

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [10 June 2018 07:26 UTC](https://discourse.nodered.org/t/switch-svg-icon-based-on-msg/724/4 "2018-06-10T07:26:27Z")

</div>

You’d need to place them in a folder relative to wherever you have defined your httpstatic entry in your settings.js file [https://nodered.org/docs/configuration](https://nodered.org/docs/configuration)

---

<div class="post-metadata">

**Author:** ![dilepa](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@dilepa](https://discourse.nodered.org/u/dilepa)\
**Post date:** [10 June 2018 09:48 UTC](https://discourse.nodered.org/t/switch-svg-icon-based-on-msg/724/5 "2018-06-10T09:48:13Z")

</div>

Thanks for the info… still learning my way with node red