Is it right to use the <i> tag for icons and not italics?


Viewed 9,696 times


Currently we have noticed that many people have been using the tag <i> for icons and not for italics. If we were still in the pre-HTML5 era this would be totally wrong.

According to the specification of the tag <i> HTML5, now it is used for the text of an "alternate voice", such as transliterated foreign words, technical terms and typographies.

So if we use Icon Fonts, which are image typographies, the code will remain semantically correct, right?

9 answers


In HTML4, the tag <i> meant italic. Over the past decade, the web standards movement has struggled for developers to separate style structure, which is the responsibility of CSS. But it would be difficult to remove this tag. Even if it were removed from the specification, no browser manufacturer in their right mind would eliminate the support, as this would break several existing websites. So they gave "a little twist": a new meaning for the element.

Translating from w3c Markup guide:

Element i represents an excerpt of text detached from its context without conveying additional emphasis or importance, and for which the presentation typographical convention is text in italics; for example, a term of a taxonomy, a technical term, an idiom of another language, a thought or the name of a ship.

It does not say whether or not it should be used for icons, as bootstrap does. In the field of semantic marking, there are always controversies.

  • 1

    In short: it is not right, but as there is no other way to do...

  • 3

    Actually there is yes: how about a span? The choice of i was by saving characters, I think.

  • 3

    <span> will not add semantics to the page. But I agree that no semantics is better than a wrong semantics.

  • Why not use <img> ?

  • 3

    But we’re not talking about icons that are symbol font characters? <img> would not work, are not images.

  • It’s true, my fault. I ran out of context.

  • 1

    Semantically speaking, it is wrong use <i></i> and <b></b>. Bootstrap developers have stated that they use it solely for character reduction. Ideally the closest would be to use it even <span></span>, but no one is obliged to do so.

Show 2 more comments



The first time I realized the use of tag <i></i> to apply icons, more properly those contained in a font (font), was through Bootstrap.

Some examples are the Fontawesome and the Glyphish that use fonts to provide icons.

I can’t say I agreed with the idea, but at the time, I wasn’t even out of line. It was a "victory" for them in terms of performance (performance):

  • i as an icon abbreviation;
  • tag with a super small size compared to other.

However, at present, even Bootstrap has left this practice and uses the tag <span></span> to display icons.


By what can be read on W3C website, the tag <i></i> has a well-defined objective:

Although Previous versions of HTML defined the i element only in presentational Terms, the element has now been Given the specific semantic purpose of Representing text "offset from its surrounding content without Conveying any extra emphasis or importance, and for which the Conventional typographic Presentation is Italic text".

Which translates into:

Although earlier versions of HTML have defined element i only in terms of presentation, the element now has a specific semantic purpose of representing text "displacement of its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographical presentation is italicized text ".

Answer to the question

So if we use Icon Fonts, which are image typographies, the code will remain semantically correct, right?

Technically there is no text inside the tag, so nothing will be read from it, what exists in the particular case of using this tag to display icons is a visual representation of an image that is being applied via CSS.

Semantically wrong because the tag is not representing text.

  • So today the best option for icons is even <span> ?

  • Why not use <img> ?

  • 3

    @Jeanlucasdecarvalho Saying "best option" is a bit of a game of opinions, but it seems to me to be a good alternative, when we talk about icons coming from sources. The tag img is supposed to display an image through your src, at least the browser expects it...

  • yes. My fault with the <img> tag. I skipped the context. I forgot that my question was limited to icons coming from sources.

  • <i> and <span> are used because property backgroud CSS is defined as the image. Use <img> unadjusted src as if it were <i> would be even worse, semantically speaking and even cause appearance bugs in different browsers. HTML code will not even be validated


According to W3C, the tags <i> and <b> not necessarily used as Italic and Bold.

See a coherent explanation and I believe that you will know how to use the best way:

That other explains how you use for icons:

  • Yes, I know how to use them for icons. The question really is: is this correct?

  • has no problem using <i> it only for icones, w3c recommends using it to highlight a part of the text, or maybe a text in another language, but it is a block element as well as span!

  • @alexandesigner whenever possible it is good to translate some conreudo of external links, for the answer to be more complete and to help others looking in Portuguese.

  • 1

    @Sergio Ok Sérgio, thanks for the tip.. I am experimenting and I intend to contribute and learn a lot!

  • One remark: "but it is a block element as well as span!" - No, <i> by default is an element inline as well as <span>, and not block.


Semantically speaking, the tag <i> is used to represent text. If what we want to display is only an image and not text, then the tag <img> is best suited for this purpose. Normally icons appear in the document for the sake of presentation only, and therefore being a purely presentation artifact, should be inserted with CSS.

Of course this is all very nice in theory, but in practical terms <i> turns out to be handy for putting icons.


I’ve seen the use of <i> for icons, but I don’t consider semantics.

Icons do not fit the tag usage description <i>, therefore I still consider more appropriate the use of some element without semantic value. In this case the <span>


The ideal would be to put all the formatting in the CSS and leave only the basics in the HTML. Then italics would only be font:Italic And indicate icons.


The <em> applies text in phase (italics) in HTML5. But I think it’s easier for you to edit a <span> with the CSS, than using the tag. The <i> hasn’t been discontinued yet, I think it’s best to stop using it


According to W3C, the tag <i>, should be used to highlight part of the text inline (in the same line). The default is to format the text in italics.

Is being used to insert icons instead of tag <img> by pure typing economy and is not considered a good practice, because it does not improve the performance and confuses the understanding of the code.


The same is right to use for italic text, but I usually use to create icons on my websites.

Some tags I call universal tags, like span, Section and mainly the div tag, I use these tags for anything in html. It is not mandatory for you to follow the pattern, at the end you choose.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.