Solved

How to change the color of SVG icons?

  • 7 April 2023
  • 3 replies
  • 112 views

Userlevel 4
Badge +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?   

icon

Best answer by Jasper 13 April 2023, 09:29

View original

This topic has been closed for comments

3 replies

Userlevel 7
Badge +11

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?

Userlevel 4
Badge +14

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?

 

Userlevel 7
Badge +11

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.