{"id":241528,"date":"2016-05-16T06:01:16","date_gmt":"2016-05-16T13:01:16","guid":{"rendered":"http:\/\/css-tricks.com\/?p=241528"},"modified":"2016-05-16T06:01:16","modified_gmt":"2016-05-16T13:01:16","slug":"tips-aligning-icons-text","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/tips-aligning-icons-text\/","title":{"rendered":"Tips for Aligning Icons to Text"},"content":{"rendered":"<p>Icons. They&#8217;re popular. They help complement content (<a href=\"http:\/\/thomasbyttebier.be\/blog\/the-best-icon-is-a-text-label\" rel=\"noopener\">most of the time<\/a>). And yet they can be a pain in the neck.<\/p>\n<p>Once you&#8217;ve decided on a format (SVG or icon font?) and designed the set, there are still other considerations, many of which pop up while you&#8217;re coding.<\/p>\n<p><!--more--><\/p>\n<p>Here&#8217;s an excellent question that comes up often along those lines:<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/twitter.com\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/smashingconf?src=hash\" rel=\"noopener\">#smashingconf<\/a> any recommendations on how to align <a href=\"https:\/\/twitter.com\/hashtag\/svg?src=hash\" rel=\"noopener\">#svg<\/a> icons to text?<\/p>\n<p>&mdash; Andreas Sahle (@pixelmord) <a href=\"https:\/\/twitter.com\/pixelmord\/status\/656386789628887040\" rel=\"noopener\">October 20, 2015<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>Tricky, right? Aligning icons can be a tough task especially if <a href=\"https:\/\/css-tricks.com\/icons-and-teams\/\">you are not the one charged with designing the icons<\/a>. I have to be honest and say that I thought this would be a simple question to answer and one that could be done in a tweet. However, there&#8217;s much more to finding the perfect alignment between icons and text.<\/p>\n<p>Thankfully, there are a few universal tips we can put to use to ensure our icons always line up beautifully with text.<\/p>\n<h3>Tip 1: Decide on an icon format and stick to it<\/h3>\n<p>I take for granted that there are other ways to do icons other than SVG. There are actually quite a few methods, if you include ones that might be considered old, as in, &#8220;That&#8217;s soooo 2011!&#8221; A few examples:<\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/svg-sprites-use-better-icon-fonts\/\">SVG icons<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/flat-icons-icon-fonts\/\">Icon fonts<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/css-sprites\/\">CSS image sprites<\/a><\/li>\n<li>Inline images<\/li>\n<\/ul>\n<p>Regardless of your preference (cough, SVG, cough!), the format of your icons will have a lot to do with how you align them to text. Let&#8217;s say all your icons are contained in a sprite. That means the icons are pretty much set at fixed dimensions (unless you start large and use <code>background-size<\/code> to scale down) and it would be much easier to adjust the size and <code>line-height<\/code> of your content to match that of your icons.<\/p>\n<p>The beauty of something like SVG is that it is scalable by nature and affords you the  ability to reply more on CSS to help align things rather than the design process.<\/p>\n<p>The lesson here: choose one format for all icons and use that as the basis for how you will approach aligning them to text. Your code will much more maintainable and your designer (or your inner designer) will thank you.<\/p>\n<h3>Tip 2: Use similarly sized icons<\/h3>\n<p>Here&#8217;s an ideal situation: all icons are the exact same size. Let&#8217;s say all the icons in a set are <code>100px<\/code> square. That tells us exactly how much space we&#8217;re dealing with and makes alignment a breeze.<\/p>\n<p>We also know that is not always a practical rule. Icons can take up varying amount of space depending on what we&#8217;re communicating.<\/p>\n<figure id=\"post-241529\" class=\"align-none media-241529\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/05\/aligning-icons-figure-1.jpg\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>The map icon is narrower than the avatar icon which is narrower than the cart icon. If you&#8217;re like me, then you will eliminate the white space around an icon to ensure the smallest file size possible. That&#8217;s great, but now we have icons with different dimensions. That&#8217;s a-ok if we&#8217;re working with SVG but less desirable for non-vector formats, like PNG. We can tell SVG to occupy a fixed amount of space without losing resolution, but non-vector will stretch and distort the image if we are working with inconsistent dimensions.<\/p>\n<p>The right thing to do here is to match your icon design specs to the format being used. If using SVG, then the icon can be any size, but try to use a consistently sized art board in Illustrator (or your design tool of choice). This will help keep future icons in the set to scale.<\/p>\n<p>If using non-vector, then always use the same dimensions. The icons may differ in how much space they occupy, but it will ensure your icons are always crisp and proportional, regardless of the text next to it.<\/p>\n<h3>Tip 3: Match your font-size to the size of the icon set<\/h3>\n<p>Icons ought to be treated a lot like typography. They&#8217;re either used in conjunction with text or in place of it, so setting the size of the icon to the size of the text next to it is important for the same reason we like consistently sized letters: legibility.<\/p>\n<p>This doesn&#8217;t mean icons need to be 16px if your content font size is also 16px. What it means is being aware of the font size and making sure your icons complement it nicely, whether it is larger, the same size, or smaller than the the text.<\/p>\n<p>Here&#8217;s an illustration of the difference between an icon that has been aligned nicely to the size of the content versus one that has not. <\/p>\n<p data-height=\"265\" style=\"height: 265px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"MyxBrQ\" data-default-tab=\"result\" data-user=\"css-tricks\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/MyxBrQ\/\" rel=\"noopener\">MyxBrQ<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>The example on the left is much more consistent with the content font size and has better alignment than the right, despite both examples technically being aligned.<\/p>\n<h3>Tip 4: Use CSS to fine tune the appearance<\/h3>\n<p>When all is said and done, there is a solid and simple recipe for getting icons exactly where you want to line up with text:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.icon {\r\n  position: relative;\r\n  \/* Adjust these values accordingly *\/\r\n  top: 5px;\r\n  left: 5px;\r\n}<\/code><\/pre>\n<p>That is the difference between icons that look in perfect alignment with text and icons that look slightly off.<\/p>\n<p data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"YqBdxx\" data-default-tab=\"result\" data-user=\"css-tricks\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/YqBdxx\/\" rel=\"noopener\">YqBdxx<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Tip 5: Use class names for specific icons<\/h3>\n<p>The example above is great but you may have noticed that the location icon looks so gosh darn narrow and even further from the text labels than the music note. How annoying!<\/p>\n<p>This is where CSS on a per-icon basis can bail us out.<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;ul&gt;\r\n  &lt;li&gt;&lt;svg class=\"icon-user\"&gt;&lt;use xlink:href=\"#icon-user\"&gt;&lt;\/use&gt;&lt;\/svg&gt; Weezer&lt;\/li&gt;\r\n  &lt;li&gt;&lt;svg class=\"icon-location\"&gt;&lt;use xlink:href=\"#icon-location\"&gt;&lt;\/use&gt;&lt;\/svg&gt; Santa Monica&lt;\/li&gt;\r\n  &lt;li&gt;&lt;svg class=\"icon-music\"&gt;&lt;use xlink:href=\"#icon-music\"&gt;&lt;\/use&gt;&lt;\/svg&gt; Discography&lt;\/li&gt;\r\n  &lt;li&gt;&lt;svg class=\"icon-sphere\"&gt;&lt;use xlink:href=\"#icon-sphere\"&gt;&lt;\/use&gt;&lt;\/svg&gt; weezer.com&lt;\/li&gt;\r\n  &lt;li&gt;&lt;svg class=\"icon-cart\"&gt;&lt;use xlink:href=\"#icon-cart\"&gt;&lt;\/use&gt;&lt;\/svg&gt; Artist Store&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">\/* Match any class name that starts with icon *\/\r\n[class^=\"icon\"] {\r\n  width: 50px;\r\n  height: 50px;\r\n  position: relative;\r\n  top: 15px;\r\n  margin-right: 10px;\r\n  fill: #fff;\r\n}\r\n\r\n\/* Reposition the music note icon *\/\r\n.icon-music {\r\n  right: 5px;\r\n}<\/code><\/pre>\n<p>Phew, that&#8217;s much nicer!<\/p>\n<p data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"QNoBVq\" data-default-tab=\"result\" data-user=\"css-tricks\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/QNoBVq\/\" rel=\"noopener\">QNoBVq<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Wrapping Up<\/h3>\n<p>If there&#8217;s a lot more to aligning icons to text than you expected, then you are not alone. The simple answer is that it really depends on what method you choose to create the icons. The CSS is pretty straightforward from there.<\/p>\n<p>The answer to this question inly pertained to text but there are other elements where aligning icons comes into play, such as buttons, form fields, navigation and probably many other things. I mean, what about responsive designs, right?! Regardless of the scenario, I find that the five tips we covered here get me out of the weeds.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Icons. They&#8217;re popular. They help complement content (most of the time). And yet they can be a pain in the neck. Once you&#8217;ve decided on a format (SVG or icon font?) and designed the set, there are still other considerations, many of which pop up while you&#8217;re coding.<\/p>\n","protected":false},"author":2508,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[626,660],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/241528"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=241528"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/241528\/revisions"}],"predecessor-version":[{"id":241653,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/241528\/revisions\/241653"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=241528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=241528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=241528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}