2

I was looking through material design's icons, and I noticed they have four variations of the "add" icon. I don't know when I should select one variation over another.

What is the outline (or lack thereof) of an icon meant to communicate to the user?

Material design's "add" icons

2 Answers 2

1

I haven't used material design and have no experience in the same but I don't think look and feel of buttons have anything to do specifically with material design. So, in the specific example you have shared

  1. first one looks like an icon where I would click to expand (or toggle the visibility) a section or an accordion
  2. Second one looks like a button which would appear at the end of a grid header to add a column.
  3. Third one looks like opposite of 'delete row' icon of iPhone. It looks ideal button for adding a child to a parent node of a hierarchy.
  4. Fourth one is something I have never used and it looks more like a status indicator rather than an action element on which a click event is available.
0

The shapes don't intrinsically signify anything, but when you have a set of icons together, you'll want them to have different shapes so users can more easily distinguish them from each other. This brief article talks about that. (Here's a more in-depth article on other factors of icon design.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.