4

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

Improve this question
4
  • 1
    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, 2020 at 7:30
  • We use a multiple of 8 system and it makes everything look very consistent. Which weight the icon has on different sizes has to be looked at individually and increased/decreased accordingly (because some icons might look too thin in bigger sizes if you keep the same weight).
    – Big_Chair
    Aug 11, 2021 at 10:50
  • Why 40pt? Why 36pt? Why 32pt, 28pt , 24pt? The point being, rather than ask if all icons ought to be the same size, start with a size and make larger or smaller if doing so supports user experience.
    – bloodyKnuckles
    Nov 8, 2022 at 13:31
  • The camera icon's size isn't just 36pt since it's rectangular, not square. (BTW, is it really pt, not px?) However, the "longer" side is most probably equal to the "shorter" considering transparent background. And then the icon is definitely bigger than 36 pt, comparing it to the 40 pt of the ( + ).
    – Gerold Broser
    Mar 5 at 21:30

5 Answers 5

Reset to default
1

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.

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

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.
Improve this answer
1

As long as the icons related to certain functions are consistent in size you're fine. I'm a little more concerned about the colors though.

Here's the pattern you appear to have established:

  1. Green = Shows user where they are (i.e. the current breadcrumb step)

  2. Teal = Lets user know they can interact (i.e. the camera icon and "i" icon)

  3. Grey = Lets user know they can't interact until they do something (i.e. the greyed out Choose a category button)

However, you're violating this pattern in a few ways:

  1. The "x" icons in the field are grey, but I'm assuming you can click them when a value is in the field and you want to clear it out. If they are active they should be teal according to the pattern you've established.

  2. The active "Choose a category" button is the same green color as the current step in the breadcrumb. It should be teal because that's the pattern you established.

  3. Are the plus and checkmark icons on the second screen interactive or just for display? If the user can click on them to do something they should also be teal. If they are just for display then maybe consider a different color than the same grey you're using to indicate the "Choose a category" button is inactive until you've done something. The user might think they have to do something to make the plus and checkmark icons turn teal so they can click them to do something.

Improve this answer
1

Icon sizes are like other elements on the page - they're sized according to context and visual hierarchy. Small input fields should have small "clear" icons. Prominent nav items should have appropriately larger icons. There should be consistency among items that are contextually similar, even across screens.

Keeping them in multiples of 4 is a good idea, as icons are often aligned to grids of 8 or 12px.

Improve this answer
1

Visually of course, they serve to communicate information. If just purely visual elements, then certainly you have some freedom to use different sizes.

However if they are buttons and clickable, they should all be the same size. Consistency in UI is part of overall design and UX. Consistency in size and style teaches the user what is a button, and what is not a button. Consistency allows users to consistently click icon buttons. Buttons that are smaller slow the user down and require then to more carefully position the cursor to click. And if part of a touch interface, small buttons can be very difficult to click.

You can see an example of how Material Design specifies general button sizes rather explicitly at https://material.io/components/buttons#specs and floating action buttons at https://material.io/components/buttons-floating-action-button#specs

For some reading about the importance of consistency in UI, you might check out https://uxdesign.cc/design-principle-consistency-6b0cf7e7339f

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.