Symbolic icons support in GTK+

The design

Discussed as part of the GNOME-Shell design plans, and at the Usability hackfest we had in London earlier this year, we wanted to have icons that would only draw attention to themselves when needed. Unlike what Mark proposed, we wanted to use the theme colours and sizes so as to avoid problems, for users either with or without a visual impairment.

The tricks

To load and theme the icons, we use a CSS style-sheet, with the "!important" keyword, overriding every colour in the SVG file itself. Here's an example of what it might look like.

The second trick is using the tray's colours for GtkStatusIcons. Matthias has more X-fu than me, so using X11 atoms, we export the colours we care about for the icon from the tray, to the out-of-process status icon. Seeing that the shell might not end up using status icons, and that the panel would have the same GTK+ theme as the rest of the desktop, it might not be quite as important for the long term.

Building the icon theme

Jakub updated the instructions on what it took to create the symbolic icon theme, along with some explanations of what's necessary to allow the recolouring.

To test out your created icons, you can also use the SVG snippet above, modify the colours, change the file path for the xi:include, and open the SVG file created with eog, or another gdk-pixbuf powered image viewer.

What does it mean for me, GTK+ theme designer

We chose to only export 3 colours for use by the icons, one warning ("orange"), one error ("red"), and a positive feedback one ("green"). Those are named colours in the GTK+ theme, and you can use Jakub's commit as an example on how to add support for those in your GTK theme.

The main part of the icon (the usually white, or gray-ish bit) will use the text foreground colour for drawing. This means that dark-on-bright and bright-on-dark themes should work out of the box without having two separate icon themes (as was done for Ubuntu's latest release).

What does it mean for me, application writer

Many of the GNOME desktop components already had bugs filed against them, to start using symbolic icons when available. First, review your icons, and see whether they match the use cases mentioned in the design documents. Check whether an icon exists for your application in the gnome-icon-theme-symbolic git repository. Make a patch against your application (example patch), and file it in a bug.

Then, drop by the #usability channel on GIMPNet IRC, or drop a mail to the usability list and ask for your patch to be reviewed.

Testing it out

Just like the famous quatre-quarts, 4 equal quantities of:

• libcroco from git master
• librsvg from git master
• GTK+ from git master
• gnome-icon-theme-symbolic from git master

Sprinkle with your favourite application for testing, or use gtk-demo.

Thanks

Hiroyuki Ikezoe for his librsvg and libcroco fixes, Jakub, Hylke and Lapo for their work on the symbolic icon theme, and Matthias for his original GTK+ patch.