2

According to https://www.google.com/design/spec/style/icons.html#icons-system-icons, icon size should be 24dp.

This size is pretty elegant looking, yet doesn't make icon recognition difficult, as material styled icons are minimalist design. There isn't much detail inside the icon body.

But, is this rule applicable, if our used icon (like country flags) has significant detail inside the icon body?

Will this make icon recognition difficult? Does user need to stretch his eye ball, in order to know what does the icon represent?

I post the following examples. Is 24dp icon more difficult to be read/seen/recognized compared with 32dp?

24dp

enter image description here

32dp

enter image description here

  • 1
    nice question here – Fattie Sep 28 '15 at 20:10
  • From a quick scan, all the country flags in the 24dp version are easily recognizable and can be used if you follow their standards. The 32dp version seems to flow better though and there's also sufficient room on your list view to put in the larger icon. I would lean towards selecting the larger set. – nightning Sep 28 '15 at 20:42
  • Specifications are guidelines...not laws. Treat them as a place to start, but do what you need to do to meet your needs. If your icons aren't legible at that size, make them bigger. – DA01 Sep 28 '15 at 21:35
2

I think the issue you're having is because you're sticking to guidelines as laws on one side, and you're misunderstanding things a little bit (I admit Google Material is not clear about this, it's more like inference after viewing, studying and working on lots of Material design apps). A clue is given on the same page you're linking:

A system icon, or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash, print, and save.

The design of system icons is simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, with every idea edited to its essence. The designs ensure readability and clarity even at small sizes.

As you can see, Material Design only considers System Icons (which your flags are not).

So this leaves us with the question: what to do then?

For small illustrations with details (like flags), you should take a look to UI Integration chapter and scroll to Thumbnails and Avatars. From that page:

Avatars and thumbnails represent entities or content, either literally through photography or conceptually through illustration. Generally, they are tap targets that lead to a primary view of the entity or content.

Avatars can be used to represent people. For personal avatars, offer personalization options. As users may choose not to personalize an avatar, provide delightful defaults. When used with a specific logo, avatars can also be used to represent brand.

Thumbnails allude to more information—letting the user peek into content—and assist navigation. Thumbnails let you include imagery in tight spaces.

See? We got out of System Icons and dive straight into entities or taxonomies (which your flags actually stand for!)

See an example below: enter image description here

it's easy to see you can replace those avatars with flags.

Now see the recommended metrics on the above elements:

enter image description here

As you can see by the metrics the avatar is 40dp (72-16-16), which is bigger than 24dp, and even bigger than 32!

Conclusion

To answer your specific question: not at all, but be careful because Material Design elements are quite unorganized so you need to read everything to find out which element to use on every case (in your case, avatars or thumbnails)

1

I think the thing to remember here is that the material design guidelines are just that, guidelines - and good design and common sense should always override them.

In your example - whilst most flag designs are recognisable when small, the 32dp clearly flows better and the larger size does not obstruct your design.

The only other suggestion i have is to ensure all of the flags are the same shape. Whilst they may all be 32dp wide, the square belgian flag is clearly taller than the rectangular canadian flag. Consistency here would improve the design.

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.