7

I was wondering, in material design, what should be the icon size for navigation drawer.

I had gone through https://www.google.com/design/spec/patterns/navigation-drawer.html# , but they didn't mentioned on icon size.

Some had mentioned the size should be 24dp - https://stackoverflow.com/questions/28118325/what-sizes-should-an-image-in-an-navigation-drawer-be, but doesn't provide reference source to support his answer.

I had created both 32dp & 24dp version (Please to left side icon. I didn't did any change on right side icon)

32dp

enter image description here

24dp

enter image description here

I was wondering, which is the correct spec?

Improve this question

1 Answer 1

Reset to default
8

This is mentioned in the Metrics and Key-lines Documentation page on Material Design Guidelines.

The Icons need to be smaller than the Avatar.

Avatar needs to be 40DP along with an additional 8DP of touch target area.

Similarly, the icon needs to be 24x24, with an additional 24dp of touch target area.

enter image description here

See it here: http://www.google.com.br/design/spec/layout/metrics-keylines.html#metrics-keylines-touch-target-size

So yes, 24DP however, with a 48dp total touch target area.

Use the Keyline Pushing app to test if you're following the correct metrics.

Improve this answer

Your Answer

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

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