Mobile Application Developer Interview Question:

Please explain what is the best practice when it comes to designing icons for a mobile product? Which are better for scanning? What is the difference between a filled or outlined icon?

Submitted by: Muhammad

Iconography is a visual language used to represent functionality or content. Icons are used when we don't have enough space to display textual content. Therefore, icons are meant to be simple visual elements that are recognized and understood immediately.

In practice, we will encounter both version of these icons. They can appear outlined or filled, but the whole icon set needs to be consistent and employ the same stroke. However, this is something that is more related to visual design. When it comes to UX, one thing is sure. If we use the outlined icons for the normal state, then we should probably use the filled icon for the active state of the button. It's important to indicate which section is currently active by highlighting the icon in a specific way. Although we could change the color of the outline, this approach is not ideal when we are dealing with a light background, so it's better to use the filled/outline approach. This makes recognition of active tabs and controls more straightforward. Icons at the end are here to serve as navigation to other section of the app.
Submitted by: Muhammad