641

Facebook's HTML and Twitter Bootstrap HTML (before v3) both use the <i> tag to display icons.

However, from the HTML5 spec:

The I element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.

Why are they using <i> tag to display icons? Isn't it a bad practice? Or am I missing something here?

I am using span to display icons and it seems to be working for me until now.

Update:

Bootstrap 3 uses span for icons. Official Doc.

Bootstrap 5 is back to i Official doc

13
  • 5
    Example: The reply arrow below tweets on Twitter: <i class="sm-reply"></i>.
    – Kijewski
    Jun 21, 2012 at 9:33
  • 3
    Why shouldnt <span> be used ?
    – Jashwant
    Apr 17, 2013 at 15:17
  • 7
    Seems to me that for sematics and accessibility, img tag should always be used for icons, with the alt text.
    – nroose
    Mar 10, 2014 at 17:23
  • 13
    @nroose My take on this is that the images used for icons are not part of the content, but of the page's style, (unlike, for example, a picture of a cow on the wikipedia page about cows). Therefore they should be defined in the css, not as an image in an img tag. Oct 11, 2014 at 12:12
  • 15
    I don't think semantic decisions in HTML5 should be considered "opinion-based."
    – Aaron
    Aug 1, 2017 at 13:38

7 Answers 7

665

Why are they using <i> tag to display icons ?

Because it is:

  • Short
  • i stands for icon (although not in HTML)

Is it not a bad practice ?

Awful practice. It is a triumph of performance over semantics.

25
  • 97
    Its my first day to learn twitter's bootstrap and it feels bad that they are not following best practices.
    – Jashwant
    Jun 21, 2012 at 9:35
  • 29
    some people even go further and misuse other elements, like <tt> = tooltip and so on... wanna help me found ATSMOHE? "Against the semantic misuse of HTML-Elements"
    – Christoph
    Jun 21, 2012 at 9:36
  • 21
    These websites have millions of pages viewed each day. If they save 100 bytes of data each time a client request a page with this practice, they save a significant amount of bandwidth.
    – Dalmas
    Jun 21, 2012 at 9:40
  • 71
    To save 100 bytes they would have to include 16 icons and not enable compression.
    – Quentin
    Jun 21, 2012 at 9:41
  • 9
    With the use of ligatures, using the i tag to display icons is semantic. In fact, Google suggests the use of the i tag with ligatures in it's Material icons guide.
    – Aust
    Jul 6, 2015 at 18:10
303

I'm jumping in here a little late, but came across this page when pondering it myself. Of course I don't know how Facebook or Twitter justified it, but here is my own thought process for what it's worth.

In the end, I concluded that this practice is not that unsemantic (is that a word?). In fact, besides shortness and the nice association of "i is for icon," I think it's actually the most semantic choice for an icon when a straightforward <img> tag is not practical.

1. The usage is consistent with the spec.

While it may not be what the W3 mainly had in mind, it seems to me the official spec for <i> could accommodate an icon pretty easily. After all, the reply-arrow symbol is saying "reply" in another way. It expresses a technical term that may be unfamiliar to the reader and would be typically italicized. ("Here at Twitter, this is what we call a reply arrow.") And it is a term from another language: a symbolic language.

If, instead of the arrow symbol, Twitter used <i>shout out</i> or <i>[Japanese character for reply]</i> (on an English page), that would be consistent with the spec. Then why not <i>[reply arrow]</i>? (I'm talking strictly HTML semantics here, not accessibility, which I'll get to.)

As far as I can see, the only part of the spec explicitly violated by icon usage is the "span of text" phrase (when the tag doesn't contain text also). It is clear that the <i> tag is mainly meant for text, but that's a pretty small detail compared with the overall intent of the tag. The important question for this tag is not what format of content it contains, but what the meaning of that content is.

This is especially true when you consider that the line between "text" and "icon" can be almost nonexistent on websites. Text may look like more like an icon (as in the Japanese example) or an icon may look like text (as in a jpg button that says "Submit" or a cat photo with an overlaid caption) or text may be replaced or enhanced with an image via CSS. Text, image - who cares? It's all content. As long as everyone - humans with impairments, browsers with impairments, search engine spiders, and other machines of various kinds can understand that meaning, we've done our job.

So the fact that the writers of the spec didn't think (or choose) to clarify this shouldn't tie our hands from doing what makes sense and is consistent with the spirit of the tag. The <a> tag was originally intended to take the user somewhere else, but now it might pop up a lightbox. Big whoop, right? If someone had figured out how to pop up a lightbox on click before the spec caught up, they still should have used the <a> tag, not a <span>, even if it wasn't entirely consistent with the current definition - because it came the closest and was still consistent with the spirit of the tag ("something will happen when you click here"). Same deal with <i> - whatever type of thing you put inside it, or however creatively you use it, it expresses the general idea of an alternate or set-apart term.

2. The <i> tag adds semantic meaning to an icon element.

The alternative option to carry an icon class by itself is <span>, which of course has no semantic meaning whatsoever. When a machine asks the <span> what it contains, it says, "I don't know. Could be anything." But the <i> tag says, "I contain a different way of saying something than the usual way, or maybe an unfamiliar term." That's not the same as "I contain an icon," but it's a lot closer to it than <span> got!

3. Eventually, common usage makes right.

In addition to the above, it's worth considering that machine readers (whether search engine, screen reader, or whatever) may at any time begin to take into account that Facebook, Twitter, and other websites use the <i> tag for icons. They don't care about the spec as much as they care about extracting meaning from code by whatever means necessary. So they might use this knowledge of common usage to simply record that "there may be an icon here" or do something more advanced like triggering a look into the CSS for a hint to meaning, or who knows what. So if you choose to use the <i> for icons on your website, you may be providing more meaning than the spec does.

Moreover, if this usage becomes widespread, it will likely be included in the spec in the future. Then you'll be going through your code, replacing <span>s with <i>'s! So it may make sense to get on board with what seems to be the direction of the spec, especially when it doesn't clearly conflict with the current spec. Common usage tends to dictate language rules more than the other way around. If you're old enough, do you remember that "Web site" was the official spelling when the word was new? Dictionaries insisted there must be a space and Web must be capitalized. There were semantic reasons for that. But common usage said, "Whatever, that's stupid. I'm using 'website' because it's more concise and looks better." And before long, dictionaries officially acknowledged that spelling as correct.

4. So I'm going ahead and using it.

So, <i> provides more meaning to machines because of the spec, it provides more meaning to humans because we easily associate "i" with "icon", and it's only one letter long. Win! And if you make sure to include equivalent text either inside the <i> tag or right next to it (as Twitter does), then screen readers understand where to click to reply, the link is usable if CSS doesn't load, and human readers with good eyesight and a decent browser see a pretty icon. With all this in mind, I don't see the downside.

26
  • 40
    But there are ways to do this already without abusing <i>: use any text element, including buttons or links, and add an icon using a background graphic and some padding, the same way it is done using <i>. The HTML would look like <a ...>Reply</a>, which is semantic, the styled page shows an icon in addition. If the icon is the only, primary element, it should be an <img src="..." alt="Reply">.
    – deceze
    Jan 28, 2013 at 6:16
  • 43
    @Holly, You took it to completely different side but sorry, I disagree with every single line you said.
    – Jashwant
    Jan 28, 2013 at 6:22
  • 14
    Emptiness (even an icon) is not text, though, and text is what’s specifically written in the spec.
    – Ry-
    Mar 11, 2013 at 1:47
  • 19
    Specifically written in the spec means jack. You know it and everyone else knows it. It's a guide. Nothing more. Do you think IE cares about the spec? They're getting better. Do you think every single browser is out there trying to get the spec perfect? Do you think everyone on the planet is using <code>nav, header, footer, section, aside, ...n</code> correctly? Nope. I go to page after page where aside is a replacement for <code><div class="sidebar"></code> And you know what? The way people continue to use is what's going to define "semantic" in the future.
    – o_O
    Jun 5, 2013 at 15:38
  • 18
    Great arguments, I think you convinced me. Especially convincing is #3, "common usage makes right". Just as with common language, if everyone starts using a word in such a way, that becomes the standard usage. The HTML spec has been an evolving document for a while now, and adhering to it dogmatically is just silly. Adhering to common convention is a more sustainable path, in my opinion. Plus, the <i> element is all but deprecated at this point, so I feel good about giving it a new, semantically rich life! I am curious how the spec will evolve with this usage, as I think it undoubtedly will. Feb 12, 2014 at 22:00
74

Quentin's answer clearly states that i tag should not be used to define icons.

But, Holly suggested that span has no meaning in itself and voted in favor of i instead of span tag.

Few suggested to use img as it's semantic and contains alt tag. But, we should not also use img because even empty src sends a request to server. Read here

I think, the correct way would be,

<span class="icon-fb" role="img" aria-label="facebook"></span>

This solves the issue of no alt tag in span and makes it accessible to vision-impaired users. It's semantic and not misusing ( hacking ) any tag.

11
  • 8
    @GeorgeMauer, all self-respecting html/web designers care about alt tags. the spec is there for a reason. like ramps in buildings, alt, title and aria tags exist for a reason.
    – osiris
    Jul 30, 2015 at 14:47
  • 3
    @osiris now hold on, the specs get changed all the time. I agree its good to follow but you must take the underlying intent into account. That being said, since looking it up, I agree with you as its not just for screenreaders/missing images/tooltips - there is actually a semantic there I was unaware of. MDN: "Omitting this attribute indicates that the image is a key part of the content, but no textual equivalent is available. Setting this attribute to the empty string indicates that this image is not a key part of the content; non-visual browsers may omit it from rendering." Jul 30, 2015 at 17:37
  • 4
    As a side note, I believe the correct aria role for an icon is presentation. Not img. Jan 29, 2016 at 16:14
  • 3
    @SylvainLeroux, I think if icon is used in a button along with text, then role is presentation. But if only icon is used in button ( no text ), then its role is img.
    – Jashwant
    Aug 1, 2017 at 16:46
  • 1
    @Jashwant I afraid you got it wrong concluding that aria-label is correct in this case from reading bad practices. Please see the "Conclusion" section and also a linked article - quote: "If you aim at providing a user experience that is the same for all audiences, you will probably never need aria-label and aria-labelledby. And due to the described peculiarities and side effects, we do not recommend to use them anyway" Feb 25, 2020 at 8:07
12

My guess: Because Twitter sees the need to support legacy browsers, otherwise they would be using the :before / :after pseudo-elements.

Legacy browsers don't support those pseudo-elements I mentioned, so they need to use an actual HTML element for the icons, and since icons don't have an 'exclusive' tag, they just went with the <i> tag, and all browsers support that tag.

They could've certainly used a <span>, just like you are (which is TOTALLY fine), but probably for the reason I mentioned above plus the ones mentioned by Quentin, is also why Bootstrap is using the <i> tag.

It's a bad practice when you use extra markup for styling reasons, that's why pseudo-elements were invented, to separate content from style... but when you see the need to support legacy browsers, sometimes you're forced to do these kind of things.

PS. The fact that icons start with an 'i' and that there's an <i> tag, is completely coincidental.

1
  • 4
    Not really, If you look at there code inside the I is a before element
    – user4563161
    Jul 4, 2016 at 12:40
12

I take a totally different approach to everyone else's answers here altogether. Let me prefix my solution and argue by stating that sometimes standards and conventions are meant to be broken, especially in the context of the standard HTML lexical tag definitions.

There's nothing to stop you from creating custom elements that are self-descriptive to it's very purpose.

Both modern browsers and even IE 6+ (w/ shim) can support things like:

<icon class="plus">

or

<icon-add>

Just make sure to normalize the tag:

 icon { display:block; margin:0; padding:0; border:0; ... }

and use a shim if you need to support IE9 or earlier (see post below).

Check out this StackOverflow Post:

Is there a way to create your own html tag in HTML5

To further my argument, both Google's Angular Directives and the new Polymer projects utilize the concept of custom HTML tags.

2
  • 4
    And then you go to the W3C validator, and enter <!doctype html> <html lang="en"> <head> <title>Hello</title> </head> <body> <icon></icon> </body> </html> and you get a single error, saying Error: Element icon not allowed as child of element body in this context. Dec 1, 2018 at 1:18
  • If you use custom tag with - , then validator.w3.org is not showing any error and youtube seems using <c3-icon> as their icon tag. <!doctype html> <html lang="en"> <head> <title>Hello</title> </head> <body> <c3-icon></c3-icon></body> </html>. but still, react doesn't change classname to class when I use this c3-icon.
    – hangu
    Oct 1, 2021 at 14:17
5

I thought this looked pretty bad - because I was working on a Joomla template recently and I kept getting the template failing W3C because it was using the <i> tag and that had deprecated, as it's original use was to italicize something, which is now done through CSS not HTML any more.

It does make really bad practice because when I saw it I went through the template and changed all the <i> tags to <span style="font-style:italic"> instead and then wondered why the entire template looked strange.

This is the main reason it is a bad idea to use the <i> tag in this way - you never know who is going to look at your work afterwards and "assume" that what you were really trying to do is italicize the text rather than display an icon. I've just put some icons in a website and I did it with the following code

<img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity">

that way I've got all my icons in one class so any changes I make affects all the icons (say I wanted them larger or smaller, or rounded borders, etc), the alt text gives screen readers the chance to tell the person what the icon is rather than possibly getting just "text in italics, end of italics" (I don't exactly know how screen readers read screens but I guess it's something like that), and the title also gives the user a chance to mouse over the image and get a tooltip telling them what the icon is in case they can't figure it out. Much better than using <i> - and also it passes W3C standard.

5
  • 8
    <i> is not deprecated. Sep 16, 2015 at 19:15
  • 3
    The "img" tag doesn't work for font icons. I mean it does, but your browser sends a request to your site every time it is parsed.
    – Navin
    Oct 16, 2015 at 0:49
  • 2
    Instead of <span style="font-style:italic" /> you could have simply used it's newer alternative - <strong />
    – ewino
    Jan 5, 2017 at 13:11
  • 4
    @ewino I believe you mean <em></em> which is the semantic replacement for emphasizing words (rather than just applying italics)
    – amklose
    May 3, 2018 at 14:21
  • You are indeed correct :-)
    – ewino
    May 3, 2018 at 14:36
1

I also found this to be useful when i wanted to place an icon with absolute positioning inside a link <a> tag.

I thought about the <img> tag first, but default styling of those tags inside links typically have border styling and/or shadow effects. Plus, it feels wrong to use an <img> tag without defining an "src" attribute whereas i'm using a background-image style sheet declaration so that the image doesn't ghost and drag.

At this point you're thinking of tags like <span> or <i> - in which case <i> makes so much sense as this type of icon.

All in all i think its benefit besides being intuitive is that it requires minimal style sheet adjustments to make this tag work as an icon.

2
  • Ok Here's why I think it is bad practice. Historically <B> was for Bold and <I> was for itallic. So if you used <i> you create an empty itallic tag which is not what it is for. These were replaced with <strong> and <em> So for the purpose of I guess ancient browsers you would not want to be marking up a page with empty itallic tags, and what about screen readers for blind, should not those icons inside the link be say TEXT. So <span> is a better choice as you can make the font-size zero and have the icon as well. Sep 30, 2016 at 19:44
  • 1
    @user1712691 It's a common myth that <b> and <i> were replaced with <strong> and <em> respectively. But the truth is, <b> and <i> are not deprecated, and have taken on new semantic meanings. Read the official specs to learn more.
    – chharvey
    Nov 4, 2018 at 20:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.