Page MenuHome

Render border around icons
Closed, ResolvedPublic


Based on the discussion in D4670

this task implement a border around the image icons so it can have high contrast when used in light and dark themes.

This file I used to experiment the algorithm it will implement.

The filter will be done per icon so the corners will not contain the effect


Differential Revisions
D4787: Draw Border Around Icons
To Do

Event Timeline

Jeroen Bakker (jbakker) updated the task description. (Show Details)
Jeroen Bakker (jbakker) claimed this task.
Jeroen Bakker (jbakker) triaged this task as Confirmed, High priority.

These look so much nicer than my experiment that yours look like magic. Well done!

Looks promising. Is there a possibility to control the outlines thickness and opacity? 1 pix should be enough. Providing possibility to offset the shadow (similar way as the text drop shadow works) woud add some nice depth.

Brecht Van Lommel (brecht) closed this task as Resolved.May 9 2019, 7:56 PM

Instead of opacity wouldn't it be better to choose a solid color? This way we could also select a light rim for dark backgrounds giving a sort of glow to icons. Opacity instead forces us to have only a shadow. In case the user doesn't want a rim it should be enough to set it to the same color of the background to make it "disappear"

I still think that, visually, the current solution does not look good. Besides, originally the icons are made as polygons. Instead envolving bitmap operations, all you need to do is assign a contour line to each vector polygon and you get an outline effect with much higher quality and precision. It can be made by hand or automagically.
So, anyway, ordinary contour makes the details blurred and the icons begin to look blocky. Curved lines and diagonal lines are overwhelmed by the outline and lose their readability.
A much, much better visually and more legible solution will be simply displaying black coloured icons (or other colour, controlled via preferences) as a backdrop and moving them 1 pix down and possibly to the right (the shift should be controlled by the user and associated with the shadow under the text). Offseting edges of the backdrop can help, but ain't that much necesarry.

Judge for yourself:

  1. icons with edges offseted by 1pix, 75% opacity, no shift (Icons crude, illegible, no detail)

  1. icons with edges offseted by 0,5pix, 75% opacity, shifted 1 pix down (way better than above, but overall space consumed by icon with its backdrop is bigger)

  1. icons with no edge offset, 75% opacity, shifted 1 pix down and 1 pix right (Icon with its backdrop fits within 16x16 pix space. Pictograms are clean, legible, detailed and well readible against the light background - local contrast can be raised up with higher opacity)

  1. no backdrop at all - just for sake of comparison

I don't think the shadows provide enough contrast. I find it hard to read many of the shapes at a glance, and there are users with worse vision than me.

I think what we have now is OK. Mostly, themes should try and use enough contrast anyway (avoid white-on-white or black-on-black) and these outlines just provide a little extra possible contrast if needed. This could easily become a never-ending rabbit hole.

Regarding white icons on almost white background - I exaggerated the effect of similar brightness of icon and background colour. Anyway, current way of handling the issue is not qualitatively comparable with the rest of the GUI. Actually, it increases the local contrast in the case of a dark background, however, when the difference in background and outline brightness exceeds 50%, things start to look unacceptable. Dirty, blocky and clunky shapes it becomes.

Probably, my reserve against the current solution comes from incorrectly chosen icon / background contrasts. The quality of the automatically generated backdrop is certainly partly to blame. As I have already noted, making a backdrop in a vector form and converting it into a bitmap leads to much better results. To get the vector base, all is needed is to simply assign the contour line with a thickness of 2 pix to all of icons. It may be made in no time by hand (a backdrop on separate layer) and it shouldn't be hard to make it by a script. This way all transparencies will be taken into account, leading to more subtle and detailed output.

  1. Current backdrop

  1. Vector backdrop

The difference is subtle but noticeable (at least for my eyes).