# \[FEATURE-384\] Change color of vessel running, stop, etc

**URL:** <https://forum.inductiveautomation.com/t/feature-384-change-color-of-vessel-running-stop-etc/56983>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 8, 2022, 8:52pm UTC](https://forum.inductiveautomation.com/t/feature-384-change-color-of-vessel-running-stop-etc/56983 "2022-03-08T20:52:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![NII](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nii/32/12920_2.png) [@NII](https://forum.inductiveautomation.com/u/NII)\
**Post date:** [March 8, 2022, 8:52pm UTC](https://forum.inductiveautomation.com/t/feature-384-change-color-of-vessel-running-stop-etc/56983/1 "2022-03-08T20:52:54Z")

</div>

Is it possible to change the color of the vessel component for each state?

![vessel](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/e/de4956f3f0b91a5328083b3cc59a54712b042751.jpeg)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 8, 2022, 9:01pm UTC](https://forum.inductiveautomation.com/t/feature-384-change-color-of-vessel-running-stop-etc/56983/2 "2022-03-08T21:01:39Z")

</div>

Can you edit your post (pencil icon) and add either the _Vision_ or _Perspective_ tag so we know which you’re using?

---

<div class="post-metadata">

**Author:** ![brandon1](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@brandon1](https://forum.inductiveautomation.com/u/brandon1)\
**Post date:** [March 8, 2022, 9:03pm UTC](https://forum.inductiveautomation.com/t/feature-384-change-color-of-vessel-running-stop-etc/56983/3 "2022-03-08T21:03:02Z")

</div>

I’m 99% sure that is a Perspective symbol.

---

<div class="post-metadata">

**Author:** ![NII](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nii/32/12920_2.png) [@NII](https://forum.inductiveautomation.com/u/NII)\
**Post date:** [March 8, 2022, 9:25pm UTC](https://forum.inductiveautomation.com/t/feature-384-change-color-of-vessel-running-stop-etc/56983/4 "2022-03-08T21:25:08Z")

</div>

It is a Perspective symbol component.

---

<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:** [March 9, 2022, 8:29am UTC](https://forum.inductiveautomation.com/t/feature-384-change-color-of-vessel-running-stop-etc/56983/5 "2022-03-09T08:29:24Z")

</div>

Idk what props it all has, but you can always target it with css.

```auto
.ia_symbolComponent--stopped.ia_vesselSymbolComponent > .vessel_cylindricalTank_tank_conical {
fill: red
}
.ia_symbolComponent--running.ia_vesselSymbolComponent > .vessel_cylindricalTank_tank_conical {
fill: green
}

```

–default and --faulted work too, faulted already has a fill animation on the tank tho so might want to use somethign else there

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/4/c45ec7a054f90f8a9ef275550ac2f968a9199da3.png)  
(i tried some of the props to color, but i only seemed to color the water, idk if i missed one tho)

---

<div class="post-metadata">

**Author:** ![NII](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nii/32/12920_2.png) [@NII](https://forum.inductiveautomation.com/u/NII)\
**Post date:** [March 9, 2022, 5:33pm UTC](https://forum.inductiveautomation.com/t/feature-384-change-color-of-vessel-running-stop-etc/56983/6 "2022-03-09T17:33:27Z")

</div>

> [@victordcq](#):
>
> ```auto
> .ia_symbolComponent--running.ia_vesselSymbolComponent > .vessel_cylindricalTank_tank_conical {
> fill: green
> }
> 
> ```

Thanks for the idea!

---

<div class="post-metadata">

**Author:** ![Eric\_Bair](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eric_bair/32/32537_2.png) [@Eric\_Bair](https://forum.inductiveautomation.com/u/Eric_Bair)\
**Post date:** [March 11, 2022, 11:01pm UTC](https://forum.inductiveautomation.com/t/feature-384-change-color-of-vessel-running-stop-etc/56983/7 "2022-03-11T23:01:30Z")

</div>

In the Vessel component props, you can modify the `style` property for `fill` and select a color.

 ![FC8Cb3wuaR](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/3/a36f41851c2fcf90f372a5c8ec99b1869f708b66.png)

However, as [victordcq](https://forum.inductiveautomation.com/u/victordcq) mentioned, some states have animations that will override that `fill` property.

[Here is an existing feature request for adding custom state colors for the Perspective Symbol components](https://inductiveautomation.canny.io/ignition-features-and-ideas/p/perspective-symbol-custom-state-colors).