5

Is there a correct size, or relative size, to use on an icon within a button with/without text?

I've seen this being used a lot of times but didn't found any source about choosing the proper icon size.

  • Should the icon be the same size of the text?
  • Should it be smaller so user can focus on what's written?
  • Should it even be bigger to be more intuitive and remove the need to read the text, and only use the text as complementary information?

Or even a better question (maybe) should I even use an icon within a button? Keep in mind I'm talking about these specs to use either on the web or app.

The only source I could found something about was on Google Material Specs, but it's more about the button guidelines than what's inside.

enter image description here

On the FAB guidelines they do talk about this, to use a 24dp icon, but this is a different use case, since it's the icon alone.

enter image description here

The same applies to the tabs, but then again, different use case.

enter image description here

The button may have different uses and even indicate status, for example:

  • Save an editing form
  • Indicate a current progress, with a circular animated icon
  • Cancel some action
  • CTA Buttons
  • And others...

Currently I'm following the guidelines from Google and using 24dp (or 24px), is this the way to go? Or is there any other things I should consider when choosing the font size?


Edit: As suggested in the comments, since the question isn't very specific, I'll try to fit it within the project I'm working now and facing this issue. I have a lot of different buttons to do specific actions, for example: Add item to cart, Remove item from cart, checkout, Payment method, whishlist, favorite, etc.

Because of the product type (food and/or related) and the initial research, we got these 2 points very clear:

  • Almost 100% of users will access the web/app from home;
  • A little more than 70% prefer access from tablets or computer, so we can focus on bigger screens.

All of these buttons are a combination of text plus an icon, see image below for examples.

enter image description here

These buttons are used either alone or within the product card.

closed as too broad by Devin, Mayo, Evil Closet Monkey, JohnGB May 11 '16 at 0:51

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • How do you define "correct size"? For what display? What physical environment? What environmental constraints? What user scenarios? To cut the questions short... there are far too potential constraints based on any individual requirement set. – Evil Closet Monkey May 10 '16 at 16:17
  • @EvilClosetMonkey I tried to say that when I said from web to app (or at least responsive web app). It's for general use i suppose, this doubt came to my mind on this current project, an order web app for a restaurant, where there is a buch of options, like delivery, payment with credit cart, money, checkout, add item, etc.. So basically this is it. Is it better now? – CelsomTrindade May 10 '16 at 17:58
  • I think what better describes your scope would be something akin to "consumer desktop app" or "mobile app to be used by someone running from the zombie horde". My point being that even a "mobile web app" isn't the best description -- if I'm sitting on the bus using a mobile app, buttons can be much more compact to be usable then if I'm running away from the undead and trying to call the army. – Evil Closet Monkey May 10 '16 at 18:57
  • @EvilClosetMonkey I understood what you said and made a better research on the topic. I updated my question, hope this helps to better understand my scenario. Thanks for the hints – CelsomTrindade May 12 '16 at 14:40
2

Icons are meant to be readily recognizable visual metaphors for actions or features. Once the user becomes familiar with the meaning, it's faster to decode (a good) symbol than to read text.

Other advantages include conservation of space. Some functions can be quite verbose when written out - especially in certain languages. (On that note, if I was designing for markets where the language is expressed as logograms, e.g. Mandarin, I'd want to research whether users consider those characters to do double-duty. But I'm ignorant on that subject)!

As far as guidelines go, there may be specific ones, such as the OP mentioned, such as the Material specs. In general:

  • Always provide a textual alternative or supplement, e.g. text beneath the icon, a tool-tip, title attribute for HTML elements (except alt for an image used in an INPUT tag). This is especially important for visually-impaired users. And, for anyone using an app or site infrequently, a good reminder
  • Keep icons to a uniform size in a collection
  • Simple designs are easier, familiar icons are better
  • Padding should be enough to differentiate icons spatially, look pleasing to the eye and provide both a large-enough and separate target for fingers. I've most often found total padding equal to the size of the icon works, e.g. a 24px-wide icon would have 12px on either side:

icon with spacing

0

I think there's no right or wrong answer here. The Google Material guidelines are great and in-depth, but it's very much 'Google's' design principles and mightn't necessarily translate.

For example, if you're using an icon as the primary way of distinguishing between options, you'd want them to be relatively big, perhaps bigger than the text. Here the bottom menu bar in iOS is a good example.

Facebook Menu Bar

The icon's are relatively large when compared to the font size. Facebook's users are generally habitual users and therefore recognise what the icons mean and the text is less important. As a new user, yes, you can read the text relatively easily, but the icons are the primary navigation tool.

There's also the classic example of text vs icon is the hamburger menu. Plenty of testing has been done with whether to use just an icon, or icon with text and how that's labelled. Here's just one. The outcome - it depends. The results seem to vary depending on context.

I think the solution comes down to one main thing:

Are the users already familiar with the app/website? Is it mostly returning users? If so, they'll likely 'learn' the meanings of the icons up front and you can make the icons larger than the text (potentially).

There's definitely other factors at play. When you're talking about paddings etc. I think the website style guide could come into play. If you're website's fonts are all quite small and the icons you use are large, it could really upset the balance.

Hope that helps.

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