2

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

2
  • 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 '20 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 at 10:50
0

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.

2
  • 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. Jul 17 '20 at 4:02
0

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.
0

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.

0

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.

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.