2

Software interface design: What is the correct vertical position of an icon in a button?

vertical position of icons in buttons

Either at the bottom line to the text or centered with the text?

  • This is more of a visual, graphic design question. I don't know of any studies that have evaluated this. – Mayo Mar 19 '15 at 10:19
2

Generally, icons should be sized and aligned relative to capitalized font.

Text should also be vertically centered in the button using capitalized height.

This is because icons and leading capital letters in captions have the most visual mass so the eye reading left-to-right will be most comfortable for those elements are vertically centered.

Here are android layout guidelines illustrating the principle:

enter image description here

1

I am going to say the second option. Any text that uses a standard font has a constant baseline. Our eyes use that baseline to perceive and make sense of the information conveyed using that baseline. It gives the important base for the content.

Icons need not have such baseline. Icons like settings, hearts, tick marks, crosses are perceived as a whole. Your example has a floppy icon which has a discernible flat base, not all of them have such baselines. It would not be wise to enforce those baselines where there are none.

I prefer to see the page we are designing as a blank paper and not ruled one, so I find no need to fit everything on a common baseline.

Here are some examples of how web is currently doing it.

Twitter

enter image description here

Chrome Bookmarks Bar

enter image description here

These example clearly depict what I meant by lack of baseline.

Needless to say, you will need to consider alignments of the page separately and make sure that those icons are aligned properly.

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.