Hollow Icon vs. Solid Icon: Which Is More Friendly for Recognizing?

Discussion Forum Design & UX Hollow Icon vs. Solid Icon: Which Is More Friendly for Recognizing?
Viewing 3 posts - 1 through 3 (of 3 total)
Jongde Software
In UI design, what scenario should hollow icons and solid icons be applied to? Some believe that the hollow icons are visually more complex than the solid icons, while the solid icons are in fact more recognizable.
The opinions of designers on this topic varies. Some designers think that the hollow icons is made by lines, as a result of which, they are more difficult to recognize. However, they gives users a feeling of ease and exquisiteness. Others deem that the recognizability has nothing to do with this topic, but depends on the shape, color and other factors of the icon.

So what do you think?  Hollow Icon vs. Solid Icon: Which Is More Friendly for Recognizing?

 

 

 

Visual Designer
SAP SE

Hi Annie,

It may also be worth noting the reasons for the technical complexity when it comes to the visual design of icons especially for use in user interfaces. As pointed out in this interesting article, some icons, being complex, are harder for users to recognize when presented as technically outlined shapes. On the other hand, we can also be restricted if we use filled icons because they are more difficult if we have a task to display complexity and still maintain recognition. I agree with this article if I see the examples that tend to have technically outlined overlapping shapes which can obscure the overall shape metaphors. It gets even worse if a UI is displaying complex technically outlined shapes at smaller sizes.

This is the reason why SAP icons is designed as a light weight icon font and not a technically outlined icon set.

The purpose of light icon style should be to present extremely simplified shape metaphors and to help eliminate complexity but also to help balance the UI so that users are not overpowered with shouting actions. Instead we can focus on creating a hierarchy in terms of interaction importance. But this reasoning is also dependent on the designers concepts for each UI application. If you create icons you are forced to simplify the complex user interface and think more about what you want to present to the user. As pointed out towards the end of the article that was shared, the shape of the icons allows users to quickly identify the meaning of the icons, while the colors can become a factor of interference. This forces us to consider not only the metaphor, the shape, the color, the line widths and styling but also the usage and context of the icon within the UI. It makes sense to think in terms of light style instead of technically outlining all the icons which can look strange. Some tiny proximal lines can merge into a filled area that in the overall icon set optically appears as a line. The light icon style is not about blindly outlining all icon shapes, but creating a light weight appearance to the icons, avoiding large filled areas.

Example of outline icon versus a light icon:

Why do we separate technically outlined icons and fill type icons? This is something that may seem logical for style and consistency reasons but in fact leads to inconsistency in terms of good user experience within a given UI. We try to have a balance of outlines and filled icons that makes sense and not try to change everything in only one direction if it does not make sense.

Example:

A favorite/ star toggle button is easier to understand to be not toggled if an outlined star is presented to the user. In this case the outline works because the negative space is larger.

however a filled star shows the user that it has been toggled. This example shows color and shape as a two sense visual accessibility helper for the user.

The SAP icon font has simplified the shapes so that most easy-to-recognize shapes have been outlined only where it makes sense and are adhering to the overall visual language of Fiori. However you will notice that there is a balance of fill and outline depending on the important visual / interaction requirement for the user interface and can be in some cases dependent on the control or application requirements too. This is not only for consistency but also for helping the user experience of our Fiori applications.

The most important aspect of icons is that they should be easily recognizable at all supported sizes within a UI. Beyond that, it is the fine details of how they are drawn that is key to how each shape is fully recognizable at such small sizes. This is the reason why we have introduced a simple grid system for the icon design guidelines in Fiori.

https://experience.sap.com/fiori-design-web/icons/

User Experience Evangelist
SAP SE

Very interesting discussion. Thanks!

Viewing 3 posts - 1 through 3 (of 3 total)
 

You must be logged in to reply to this topic.