I'm creating an application that uses symbolic icons from the default theme.

However, there are a few icons that I need that cannot be represented by those from the default theme, so I'm creating my own ones.

What I did was to simply go to /usr/share/icons/gnome/scalable/actions/, copied a few locally into my app's source tree that could serve as a basis, and started editing them.

So far so good. But I've noticed the following: all symbolic icons are of a light grey color when looking at the original .svg file, but when they are put onto a widget, they become darker.

Here's an example, using the /usr/share/icons/gnome/scalable/actions/view-refresh-symbolic.svg icon from the default theme:

• Here's what it looks like when opening the original with Inkscape:

• And here's what it looks like on a toolbar on a running application:

Notice the icon being much darker at runtime. That happens both with the Ambiance and Radiance themes.

I wouldn't mind much, but I noticed it affects my custom icon, whereby parts of it become darker (the inner fill), whereas parts of it remain the same color as the original (the stroke).

So what causes the default symbolic icons to darken and how should implement that for my custom icons?