Vertical alignment

This tutorial is part of Iconify for React 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, the icon component has several options:

• Swapping Icon component with InlineIcon.
• Adding inline attribute.
• Adding vertical-align style with value -0.125em.

Inline attribute demo:

jsximport React from 'react';
import { Icon, InlineIcon } from '@iconify/react';

export function inlineDemo() {
   return (
       <div>
           <p>
               Inline attribute demo:
               <Icon inline={true} icon="line-md:image-twotone" />
               <InlineIcon icon="mdi:account-box-outline" />
           </p>
       </div>
   );
}

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