Why do the GNOME symbolic icons appear darker in a running application?

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?

• The symbolic icons are created in a chroma-keyed color, gray with full opacity (#bebebeff). They can then be colored based on the fg_color value defined by the theme in settings.ini (GTK3) or gtkrc (GTK2); or on the fg_color defined in the CSS (GTK3).
  • e.g., for Ambiance the foreground color (fg_color) is set to dark gray (#4c4c4c) in /usr/share/themes/Ambiance/gtk-3.0/settings.ini, which is why the symbolic icons appear darker.

• To make custom symbolic icons look the same, you must remove the stroke and use only fill with the RGBA value set to #bebebeff; otherwise, the stroke will always appear as set (i.e., gray or whatever color).

  • In Inkscape, just select the object, open Fill and Stroke, and click on the No Paint (x) icon under "Stroke Paint":

  

• This gives us a nice and even-looking "MyRefresh" symbolic icon:

  

One user indicated that a different, darker icon was being opened instead of the default gnome symbolic icon; as this strace shows, that assertion is incorrect:

Symbolic icons are usually set by the theme using the "color" property, that's their great advantage, they look good on any background. You can however load them with your own color.

Example vala code:

//get the icon theme and lookup the icon we want by name, here at a size of 64px
var info = Gtk.IconTheme.get_default ().lookup_icon ("view-refresh-symbolic", 64, 0);

//now load the icon as a symbolic with a color set in the brackets as RGBA, here as plain red
var pixbuf = info.load_symbolic ({1, 0, 0, 1});

//finally we just put in a GtkImage to render it
var image_widget = new Gtk.Image.from_pixbuf (pixbuf);