Rules of creating buttons with icon

Vadim Zaycev
Aug 8, 2017 · 1 min read

  1. The distance between the right and left icons are the same, the indentation between the icon and the test is also the same. Distance on the right is arbitrary but not less than a from the left.
  2. Icon with text is centered. Distance the right and left are the same.
  3. The icon is aligned on the left edge.The text is centered.
  4. Separate button. The icon is separated by a line, the distance from the left and the right are the same and the text is also the same. A derogation from the right of text is arbitrary but not less than a derogation from the left.
  5. The icon remains as in the previous version, the text aligns in the center.

Vadim Zaycev

Written by

CEO & UI/UX designer at — zaycev.studio

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade