Vertical alignment

This tutorial is part of Iconify SVG Framework tutorial.

When an icon is rendered in text, by default it is aligned at baseline, as any other images.

Emojis and icon fonts are rendered slightly below baseline, like any text.

If you want to render icon in text, you probably want to add vertical-align to each icon to render it slightly below baseline, to make it fit in text, similar to emojis and icon fonts:

SVG in text:

SVG in text with vertical-align: -0.125em:

Inline attribute

To add vertical-align to icon, there are has several options:

• Adding "iconify-inline" to class list (or replacing "iconify" with "iconify-inline").
• Adding data-inline attribute.
• Adding vertical-align style with value -0.125em.

Inline attribute demo:

html<p>
   Inline attribute demo:
   <span
       class="iconify"
       data-inline="true"
       data-icon="line-md:image-twotone"
   ></span>
   <span class="iconify-inline" data-icon="mdi:account-box-outline"></span>
</p>

Important: this attribute does not change display mode for icon. It only adds vertical-align style.