Inline icons

This tutorial is part of Iconify for React tutorial.

Icons have 2 modes: inline and block. Difference between modes is vertical-align that is added to inline icons.

Inline icons are aligned slightly below baseline, so they look centred compared to text, like glyph fonts.

Block icons do not have alignment, like images, which aligns them to baseline by default.

Alignment option was added to make icons look like continuation of text, behaving like glyph fonts. This should make migration from glyph fonts easier.

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

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

   );
}
Stylesheet:
p {
   position: relative;
   font-size: 24px;
   line-height: 32px;
}

// Borders above and below text to highlight icon alignment
p:after,
p:before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   border-bottom: 1px dotted #ccc;
}
p:before {
   top: 6px;
}
p:after {
   bottom: 7px;
}
Demo:

Block:

Inline:

Syntax

By default, icon is treated as block icon. It has no custom vertical-align, so you can add it as necessary in a stylesheet.

You can change that behaviour by:

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

Example:

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

export function inlineDemo() {
   return (
       <div>
           <p>
               Block:
               <InlineIcon icon="mdi:home" inline={false} />
               <InlineIcon icon="emojione-v1:bird" style={{ verticalAlign: 0 }} />
               <Icon icon="uim:scenery" />
           </p>
           <p>
               Inline:
               <Icon icon="mdi:home" inline={true} />
               <Icon icon="emojione-v1:bird" style={{ verticalAlign: '-0.125em' }} />
               <InlineIcon icon="uim:scenery" />
           </p>
       </div>

   );
}
Demo:

Block:

Inline: