Skip to content
GitLab

Symbolic Icons / SVG Icons that get recoloured cross desktop compatibility

On request, I'm forwarding my email from xdg@lists.freedesktop.org though I'd appreciate it if any spec related discussion happens back on that shared mailing list.

KDE's Plasma supports icons which can be coloured through SVG CSS injection to match the theme. GTK supports icons which can be coloured through SVG css injection to match the theme.

Despite them doing the same thing, they are not compatible:

  • A Qt app even when running on gnome and with the gnome icon set won't get any colouring.

  • A GTK app even when running on KDE with a KDE icon set won't get any colouring.

  • A gnome icon set used on a KDE app in Plasma wouldn't get any colouring.

  • A KDE icon set used in a GTK on Gnome would get some colouring but only for the base colour, not the warning/error.

It seems this should be an avoidable problem. The CSS classes are even similar:

Gnome has: FG, Success, Warning, Error colour properties KDE has: Text, PositiveText, NeutralText, NegativeText colour properties

The exact same idea, but one is semantic, the other explicitly mapping the palette names.

There are a few other subtle differences:

  • We don't change elements in the SVG unless they set a class. GTK mods most elements to the foreground colour.
  • KDE injects the CSS for all SVG icons, not just those ending in -symbolic
  • KDE also has two other CSS colour classes "Background, Highlight"

The GTK code links to a page "http://www.freedesktop.org/wiki/SymbolicIcons" but this page does not exist.

Turning the list of differences into an actionable TODO list the following changes would be needed by both parties to have full compatibility without any feature loss.

GTK changes:

  • 2 new CSS classes "bg", and "highlight"
  • apply SVG CSS injection to include non-symbolic icons. On icons that don't end in "-symbolic" we should set the foreground colour on the .fg class not to all SVG paths

KDE/Qt changes:

  • apply foreground colour to all SVG paths when icon name ends in "-symbolic"
  • rename our class names to use the same semantic names
  • support "!important" in QtSVG

We both need to do some work to achieve compatibility, though so we're on the same page I'm thinking of your GTK4 and our Qt6 timeline.