# Create a Style Class to change the icon color **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [March 22, 2024, 10:12pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-to-change-the-icon-color/87773 "2024-03-22T22:12:34Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Angelica\_Aguilar](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@Angelica\_Aguilar](https://forum.inductiveautomation.com/u/Angelica_Aguilar)\ **Post date:** [March 22, 2024, 10:12pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-to-change-the-icon-color/87773/1 "2024-03-22T22:12:34Z")
Hello, I have this Icon with the following configuration ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/1/41b24521f18c64b3b73cd9deb71afcbf2543bb4b.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/76bdb18b2a44166ce3674170383f959e436a0b06.png) And what I intend with my Style Class is to have three different colors for the icon (base color, hover color and disabled color), I read that the **Fill** option under **Shape** menu should work to replace the **props.color** , but is not working for me, not sure what is missing. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/5/e5497dc1e9808f180962ccf39cf3e703c173b6e4.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/1/d189c27b16aa8a522dc2bdb11ac271e6efec6dee.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e65dec0e19c17bcb00adadea81327273c592a97c.png) ---
**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 22, 2024, 10:26pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-to-change-the-icon-color/87773/2 "2024-03-22T22:26:44Z")
Good question! I did a quick test and I think I have it working in Designer. 1. Instead of specifying the fill color, specify the **text color** for each of the states. 2. Manually add the `style.classes` value property and select your icon style class. (You've already done this.) 3. Important! Delete the `props.color` property. This is overriding the style class. I haven't tested it in a browser. ---
**Author:** ![Josue\_Cuadras](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/josue_cuadras/32/59915_2.png) [@Josue\_Cuadras](https://forum.inductiveautomation.com/u/Josue_Cuadras)\ **Post date:** [March 22, 2024, 10:32pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-to-change-the-icon-color/87773/3 "2024-03-22T22:32:42Z")
Tested in browser, yes the text color style option works for changing the color of the icon! ---
**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 22, 2024, 10:33pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-to-change-the-icon-color/87773/4 "2024-03-22T22:33:58Z")
Good. If you're so inclined you could use the browser's Developer Tools (F12), hit the inspector button in the top left corner and click on the icon. It might give you a clue as to why that works. ---
**Author:** ![Angelica\_Aguilar](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@Angelica\_Aguilar](https://forum.inductiveautomation.com/u/Angelica_Aguilar)\ **Post date:** [March 22, 2024, 11:08pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-to-change-the-icon-color/87773/5 "2024-03-22T23:08:27Z")
Thanks for the answers, I have made the changes, instead of **Fill** I'm using the **Text Color** , but the icon still don't change, it stays black 🙁 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/3/b39a6bc752e015c8107552209b1758e77a489f88.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/e/9e4655c2c4b16d67f0bb9e4d5f699fd40f0e2ae4.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/33afcdb357a8caecc2c4f271e0da15895f05c16f.png) Any other idea why isn't working for me ? Maybe other config i should make or something that is overriding the style. I appreciate the help 🙌 ---
**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 22, 2024, 11:19pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-to-change-the-icon-color/87773/6 "2024-03-22T23:19:33Z")
You've omitted the hex prefix for the CSS colors. ![icon color](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/3/f343a0185619da55ab37da9d2d5beccc132b33b1.png) Add the "#". ---
**Author:** ![Angelica\_Aguilar](https://avatars.discourse-cdn.com/v4/letter/a/8e7dd6/32.png) [@Angelica\_Aguilar](https://forum.inductiveautomation.com/u/Angelica_Aguilar)\ **Post date:** [March 22, 2024, 11:35pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-to-change-the-icon-color/87773/7 "2024-03-22T23:35:45Z")
ughh, of course. Thanks !!! It works now 🙂 ---
**Author:** ![Guillermo\_Piedra](https://avatars.discourse-cdn.com/v4/letter/g/ce73a5/32.png) [@Guillermo\_Piedra](https://forum.inductiveautomation.com/u/Guillermo_Piedra)\ **Post date:** [December 23, 2024, 10:03pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-to-change-the-icon-color/87773/8 "2024-12-23T22:03:10Z")
Thank you for this answer, the "fill" property worked for me instead of using "color"