Skip to main content
Solved

How to change the color of SVG icons?


Forum|alt.badge.img+14

We are moving to SVG icons. Now I'm trying to change the color of SVG icons, based on the blog.

"The Windows and Web GUI will now adjust the color of SVG icons to the theme color of the corresponding label.

I tried several theme color changes, without result. The used icon is copied from the SF and has no color.   

What theme colors do I need to change when I want a default color for all subject, task, and report icons?   

Best answer by Jasper

The color of the corresponding label is indeed the regular (or inactive) font color of the component, for example:   

 

In the Universal GUI, we recolor these icons based on the dark or light mode using default colors. The only way to deviate from these colors is to change the icon color itself, but this can't be done per mode. Feel free to create an idea for this. 

View original
Did this topic help you find an answer to your question?
This topic has been closed for comments

3 replies

Jasper
Superhero
  • 678 replies
  • April 12, 2023

Hi Andre, 

The Windows and Web GUI automatically recolor elements in SVG images that have no color set to the color of the corresponding label:
 

 

If you want your SVG icons to have a different color then you need to explicitly set the color of the SVG elements yourself. You can do this using a text editor or by using an online service, for example.

Does this answer your question?


Forum|alt.badge.img+14
  • Author
  • Captain
  • 110 replies
  • April 13, 2023

Hi Jasper,

That is as described in the blog. What do you exactly mean by ‘the color of the corresponding label’? The font color active/inactive/mouse over?

Wouldn't it be easier to have this separatly modelled in the theme? For instance colors for different toolbars as suggested in guidelines for user interface design?

 


Jasper
Superhero
  • 678 replies
  • Answer
  • April 13, 2023

The color of the corresponding label is indeed the regular (or inactive) font color of the component, for example:   

 

In the Universal GUI, we recolor these icons based on the dark or light mode using default colors. The only way to deviate from these colors is to change the icon color itself, but this can't be done per mode. Feel free to create an idea for this. 


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings