# Change icon color

**URL:** <https://forum.inductiveautomation.com/t/change-icon-color/80745>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 20, 2023, 7:18am UTC](https://forum.inductiveautomation.com/t/change-icon-color/80745 "2023-10-20T07:18:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [October 20, 2023, 7:18am UTC](https://forum.inductiveautomation.com/t/change-icon-color/80745/1 "2023-10-20T07:18:15Z")

</div>

![a](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/5/15ce10a26e5c4d5e8188d794e6987dacbb7d6ed9.gif)

 ![b](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/5/4521111707575cf864cda8b5fce8e3e9e06f90a8.gif)

I made an expression that changes the color when the icon is activated, but it doesn't work well.

What should I do?

---

<div class="post-metadata">

**Author:** ![nideyijuyidong](https://avatars.discourse-cdn.com/v4/letter/n/7cd45c/32.png) [@nideyijuyidong](https://forum.inductiveautomation.com/u/nideyijuyidong)\
**Post date:** [October 20, 2023, 7:56am UTC](https://forum.inductiveautomation.com/t/change-icon-color/80745/2 "2023-10-20T07:56:50Z")

</div>

Maybe you can use Transform-Map instead. For more complex logic, scripting is easier.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/5/f5561206ea0d1162608d5befb73b910f3d878297.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 20, 2023, 8:01am UTC](https://forum.inductiveautomation.com/t/change-icon-color/80745/3 "2023-10-20T08:01:51Z")

</div>

`color` is a vision expression for java color, not a css color for perspective.  
[https://docs.inductiveautomation.com/display/DOC81/color](https://docs.inductiveautomation.com/display/DOC81/color)

You could use the css string `"rgb(255,0,0)"` instead. or just the hexstring (or hsl if you want to be special). some basic colors work with just a word too (like "red", "blue" "green")

> **[CSS Colors](https://www.w3schools.com/css/css_colors.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 20, 2023, 9:03am UTC](https://forum.inductiveautomation.com/t/change-icon-color/80745/4 "2023-10-20T09:03:50Z")

</div>

Or the built-in color variables: `--error`, `--neutral-90`, etc.

The easiest way I know to get a list of those is to open the dev tools in your browser:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/7/576abd6e31560071ab49453a726517f8bb8b47c3.png)

Or, obviously, your own color variables.