Page MenuHome

For Discussion - Icon Outlines and Disabled State

Authored by Harley Acheson (harley) on Apr 10 2019, 11:18 PM.



This is just an illustration of a possible technique we could use to get some extra contrast between icons and their backgrounds. And also to have a "disabled" state that differs more from "off" state.

First there are automatic outlines. There is no configuration as I could find no situation where it caused harm. In a nutshell, every time an icon is drawn there is first a background outline drawn in a contrasting color. The outline is slightly larger than the icon (naturally) but it is sized that it will always fit within existing widgets without looking crowded.

A sample of what this looks like when at 2X scale size:

But it does still look nice at 1X size:

For disabled icon state it is also automatic, so no configuration needed. It is like the outlines, but instead of drawing a larger background outline it draws two copies of the icon, both dim, in contrasting colors, slightly offset from each other.

It looks like the bottom half of each section below:

Diff Detail

rB Blender
arcpatch-D4670 (branched from master)
Build Status
Buildable 3483
Build 3483: arc lint + arc unit

Event Timeline

The automatic outlines I think are valuable, and something we should add to our theming system.

Discussed with @Brecht Van Lommel (brecht) during Homestretch in A'dam and we agree to go ahead with that, albeit in a smarter way that also adds outlines to the inside of icons.

However, I'm not a fan of the embossing effect here. It makes the icons quite hard to read again.

That is awesome news!

I never thought that how I am doing it here would be used. I imagined (someone else) would do it better in a shader in one pass. I just wanted to show how nice the result could be while still staying within the current size limitations. A design exercise that can serve as a reference implentation.

As for the “disabled” state I agree. I think for the limited amount of icons that we might need a disabled state that is separate from “off” we would just have such an icon hand-crafted.

The outline in the patch doesn't work as it should, since it's simple scaling the icon up. It is easy to notice imperfections on icons containing arcs and diagonal lines - some parts of pictograms do not get outlines at all. In a perfect world the outline would be continuous. Now we have icons with local microcontrast strenghtened by outline and other, that lack it. See: Camera, Mesh...

Brecht Van Lommel (brecht) requested changes to this revision.Apr 23 2019, 5:24 PM

I agree we need icon outlines, because using colored icons now is impossible on light themes. That seems to be just an inherent property of monochrome icons, no matter which colors you pick it never looks good enough.

For that we have task T63521: Icon colors for properties editor tabs and light themes. The outlines in this patch are not sufficient for light themes, because there is only an outline on the outside and the inside is still unclear. My current thinking is we can do a gaussian blur of the alpha channel, and composite that as a black shadow under the colored icon. For efficiency this can be implemented on the CPU side before the image is uploaded to the GPU, for the icons that need it.

It won't look amazing, and perhaps there are smarter algorithms. But fundamentally this may be a limitation of the current monochrome icon set for light themes, that we can't make it pixel perfect without manually designing the outline.

So for this patch, while I think it's interesting, outlines need to be done differently.

This revision now requires changes to proceed.Apr 23 2019, 5:24 PM

I think, that a 1 pix blurred black backdrop with 1 pix offset down (with controlable opacity of course) would be more than enough. I mean it to be similar to the way the text shadow is done right now.

@Brecht Van Lommel (brecht): My current thinking is we can do a gaussian blur of the alpha channel...

Yes, a blur would work better to give contrast all over, rather than mostly the edges as this does. The only caveat though is that there is very little space on the outside of the icon. You really only have a single pixel all around extra. Two if at 2X scale obviously, but still not a lot.

this can be implemented on the CPU...

Yes, I never thought my implementation would be used - it is really pretty simple, wasteful, and brutish. This patch was more to give attention that this sort of thing was possible. And to serve as a reference implementation - you have to do at least this good. LOL.


Jeroen Bakker (jbakker) updated this revision to Diff 15058.
  • Merge branch 'master' into arcpatch-D4670
  • Code style

We have different outlines now, I'm assuming we will not add another type of outline anymore.