Page MenuHome

Limited Two-Color Icons Proof of Concept

Authored by Harley Acheson (harley) on Feb 10 2019, 5:56 AM.



I am fine with the new monochrome icons that can be drawn in any single color, for most of the interface. Most of the time it is nice to have icons that are not "in your face" and distracting.

However, there are times when higher contrast is important. Most importantly when we use them to highlight an alert, warning, or error.

The following image illustrates this well. The first row shows what alert messages look like currently using the text color and having no impact at all toward alerting the user. The second row shows the same icons but drawn in an alternative color. But using just a single color has limitations, as you can see with the question and cancel icons.

The third row is what they look like with this (experimental) patch. It is drawing one icon with a single color, then another icon on top in a second color. You should that in these cases the extra contrast helps to illustrate the importance of the situation.

The reason this is a "proof of concept" is just to illustrate that drawing two icons on top of one another in two colors is possible and can be of assistance at times.

Personally I would not do this all over the interface. In fact, if we just wanted these three icons to be color we could just leave them in color in the source SVG and exported PNG files.

But where this technique could shine is for the three edit-mode "component selection icons". For these three we could break the icons into two pieces so we could draw the majority of it in TH_TEXT as usual, but then draw the second icon (showing the selected part) in TH_VERTEX_SELECT. This way they would better highlight the selected part, have them look like they did in 2.79, and still be able to change both colors in theme settings.

Diff Detail

rB Blender

Event Timeline

I have a few thoughts here.

I have nothing particular against the result. For me that looks fine.

My main worry has more to do with maintenance and creation of the icons. The simple glyphs we have now are a lot more maintainable and extendable than the previous icons we had before, which really only one person could create. If we go down this route, icons will become a lot more visually complex, and complex to make a maintain.

Second, I think we haven't really pushed the system we have in place already. We have a system to theme icon colors in the UI, but we aren't really using it yet. Using a combination of the glyph colors + colored background already makes it possible to make the various warning icons stand out with diferent colored backgrounds, eg:

We have a task on here somewhere about making the background colors in the warnings stay visible to make them clearer.

So, while the result looks ok, I'm not sure it's really worth the added complexity and overhead, for something you only want to use for three icons. We already have the ability to mark icons as icon_color, which lets us add fixed-color icons into the set if we really want to, without all this complexity.

I would rather start by adding more icon color categories for the Properties tabs, and also finish the theming for the toolbar icons, which are already split apart with different materials for the different colors to make them themable.

For me it looks like these (two-color) icons are from another set,
they do not fit into the overall monochrome design.

@Yevgeny Makarov (jenkm) This is a nice example of an alternative, that reaches the same goal but in a different way that doesn't mean adding this complex way of designing and drawing icons. I think something like that could be nice to do instead.

No worries, just playing with the idea.

Mostly because there were so many howls about the edit component selection icons. This idea could get us versions like the ones we had before yet having all color under theme control:

In fact, there may be cases where two-color icons would be useful,
such as "selection icons" above, or something in the future.

But why all these complications with the coding?

If necessary, take the icon from the svg file with its original colors.
Making two versions of an icon (for a dark and light theme) much easier than coding like this...