New to UX and confused about size consistency.

I know icons that belong in the same group are supposed to have the same visual weight, but what if there's different groups of icons on the same page or different icons on different pages...how consistent should their sizing be? Are they all supposed to have the same visual weight? As you can see below, my icons have varying heights, but of multiples of 4. Is this OK?

app interface with its icons highlighted

  • I think you already have the important factor covered - to keep consistent size "in the same group" (as you put it). Everything else is fair game - do whatever you think works well for your design! – musefan Jul 16 '20 at 7:30

I would suggest you to do following things

  1. Keep system icons size throughout your application as one size.
  2. For the rest of the icons I believe there are no rules as such, but to make sure on aesthetics of the design, use them based on their purpose.

Refer the below image. This is for Android screens.

enter image description here

source: https://iconhandbook.co.uk/reference/chart/ Visit this site for references to more devices.

PS:I am not promoting any sites. It is only for knowledge purpose.

  • Can you clarify what's a system icon and what isnt one? – cesca Jul 16 '20 at 6:12
  • @cesca System icons are the ones used for common actions like back, collapse, expand etc. – Ashwin Kulkarni Jul 17 '20 at 4:02

Ask yourself question what the icons are used for. If they have a simple informing character they might need to fit with your text. (example: external link)

On the other hand, an interactive icon used for navigation should be bigger to make it easier to tap with your fingers and to give a clear incentive.

Some more interesting thoughts:

  • you could responsively size icons depending on the device.
  • you can optically enlarge smaller icons simply by putting them in a colored circle / square with rounded corners.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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