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:

view-refresh-symbolic on Inkscape

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

view-refresh-symbolic on at runtime

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?

  • How are you loading the icon exactly, in the application?
    – dobey
    Jun 12 '12 at 14:39
  • With Glade, in a toolbar button using the 'Load from icon name' setting. Jun 15 '12 at 7:47
  • Then the most likely answer is that it isn't loading your custom icon at all, but one from an icon theme in the stack, which has a matching name (or fallback name).
    – dobey
    Jun 15 '12 at 13:52
  • 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":

    enter image description here

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

    enter image description here

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:

enter image description here

  • Thanks for the excellent answer! However, there is still one thing I don't quite understand: why can't custom symbolic icons not have a stroke, even if filled with #bebebeff? Jun 23 '12 at 7:18
  • I think that has to do with how Gnome renders (rasterizes) symbolic SVGs, based on the value of fg_color (it uses libRSVG); the engine obviously differentiates between the fills and the strokes, and appears to be coded to apply fg_color only to the fill while leaving the stroke as is. It can do so because SVG is a vectorized (parameterized) format, while for the usual bitmapped icons, it's all just pixels :)
    – ish
    Jun 23 '12 at 7:24

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);
  • Indeed, being recoloured appropriate to the current theme, is almost the main purpose of symbolic icons (the other being to be simpler and more legible, which that also promotes) Nov 2 '16 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.