Vertical position of icons in buttons

Question

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

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

Answer 1

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:

Answer 2

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

Chrome Bookmarks Bar

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.