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.
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.
The same applies to the
tabs, but then again, different use case.
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
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.
These buttons are used either alone or within the product card.