bulma/docs/documentation/elements/icon.html

---
title: Icon
iconic: true
ionicons: true
mdi: true
layout: documentation
doc-tab: elements
doc-subtab: icon
---

{% capture icon_example %}
<span class="icon">
  <i class="fa fa-home"></i>
</span>
{% endcapture %}

{% capture icon_color_example %}
<span class="icon has-text-info">
  <i class="fa fa-info-circle"></i>
</span>
<span class="icon has-text-success">
  <i class="fa fa-check-square"></i>
</span>
<span class="icon has-text-warning">
  <i class="fa fa-warning"></i>
</span>
<span class="icon has-text-danger">
  <i class="fa fa-ban"></i>
</span>
{% endcapture %}

{% capture icon_sizes_example %}
<span class="icon">
  <i class="fa fa-camera-retro fa-lg"></i>
</span>
<span class="icon">
  <i class="fa fa-camera-retro fa-2x"></i>
</span>
<span class="icon">
  <i class="fa fa-camera-retro fa-3x"></i>
</span>
<span class="icon">
  <i class="fa fa-camera-retro fa-4x"></i>
</span>
<span class="icon">
  <i class="fa fa-camera-retro fa-5x"></i>
</span>
{% endcapture %}

{% include subnav-elements.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Icons</h1>
    <h2 class="subtitle">
      Bulma is compatible with <strong>all icon font libraries</strong>: <a href="http://fontawesome.io/">Font Awesome</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.
    </h2>
    {%
      include meta.html
      colors=true
      sizes=true
      variables=true
    %}

    <hr>

    <div class="content">
      <p>
        The <code>icon</code> element is a <strong>container</strong> for any type of <strong>icon font</strong>. Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a reliable square container that will prevent the page to "jump" on page load.</p>
    </div>

    <div class="block bd-icon-size">
      {% include snippet.html content=icon_example %}
    </div>

    <div class="message is-info">
      <div class="message-body">
        The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's area.
      </div>
    </div>


    <div class="content">
      <p>
        By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome icons will <strong>inherit</strong> the font size.</p>
    </div>

    {% include anchor.html name="Colors" %}

    <div class="content">
      <p>
        Since icon fonts are simply <strong>text</strong>, you can use the <a href="/documentation/modifiers/typography-helpers/#colors">text color modifiers</a> to change the icon's color.
      </p>
    </div>

    {% include snippet.html content=icon_color_example %}

    {% include anchor.html name="Sizes" %}

    <div class="content">
      <p>
        The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be <em>slightly bigger</em> than the icon it contains. For example, Font Awesome icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="http://fontawesome.io/examples/">additional sizes</a>.
      </p>
    </div>

    <table class="table is-bordered">
      <thead>
        <tr>
          <th>Container class</th>
          <th>Container size</th>
          <th>Font Awesome class</th>
          <th>Icon size</th>
          <th>Result</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <code>icon is-small</code>
          </td>
          <td>
            <code>1rem x 1rem</code>
          </td>
          <td>
            <code>fa</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-small">
              <i class="fa fa-home"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td rowspan="2">
            <code>icon</code>
          </td>
          <td rowspan="2">
            <code>1.5rem x 1.5rem</code>
          </td>
          <td>
            <code>fa</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="fa fa-home"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>fa fa-lg</code>
          </td>
          <td>
            <code>1.33em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="fa fa-lg fa-home"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td rowspan="3">
            <code>icon is-medium</code>
          </td>
          <td rowspan="3">
            <code>2rem x 2rem</code>
          </td>
          <td>
            <code>fa</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-medium">
              <i class="fa fa-home"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>fa fa-lg</code>
          </td>
          <td>
            <code>1.33em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-medium">
              <i class="fa fa-lg fa-home"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>fa fa-2x</code>
          </td>
          <td>
            <code>2em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-medium">
              <i class="fa fa-2x fa-home"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td rowspan="4">
            <code>icon is-large</code>
          </td>
          <td rowspan="4">
            <code>3rem x 3rem</code>
          </td>
          <td>
            <code>fa</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <i class="fa fa-home"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>fa fa-lg</code>
          </td>
          <td>
            <code>1.33em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <i class="fa fa-lg fa-home"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>fa fa-2x</code>
          </td>
          <td>
            <code>2em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <i class="fa fa-2x fa-home"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>fa fa-3x</code>
          </td>
          <td>
            <code>3em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <i class="fa fa-3x fa-home"></i>
            </span>
          </td>
        </tr>
      </tbody>
    </table>

    {% include anchor.html name="Font Awesome variations" %}

    <div class="content">
      <p>
        Font Awesome also provides modifier classes for:
      </p>
      <ul>
        <li>
          fixed width icons
        </li>
        <li>
          bordered icons
        </li>
        <li>
          animated icons
        </li>
        <li>
          rotated &amp; flipped icons
        </li>
        <li>
          stacked icons
        </li>
      </ul>
    </div>

    <table class="table is-bordered">
      <thead>
        <tr>
          <th>Type</th>
          <th>Font Awesome class</th>
          <th>Result</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            Fixed width
          </td>
          <td>
            <code>fa fa-fw</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="fa fa-home fa-fw"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            Bordered
          </td>
          <td>
            <code>fa fa-border</code>
          </td>
          <td>
            <span class="icon">
              <i class="fa fa-home fa-border"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            Animated
          </td>
          <td>
            <code>fa fa-refresh fa-spin</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="fa fa-refresh fa-spin"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            Rotated &amp; flipped
          </td>
          <td>
            <code>fa fa-shield</code><br>
            <code>fa fa-shield fa-rotate-90</code><br>
            <code>fa fa-shield fa-rotate-180</code><br>
            <code>fa fa-shield fa-rotate-270</code><br>
            <code>fa fa-shield fa-flip-horizontal</code><br>
            <code>fa fa-shield fa-flip-vertical</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="fa fa-shield"></i>
            </span>
            <br>
            <span class="icon">
              <i class="fa fa-shield fa-rotate-90"></i>
            </span>
            <br>
            <span class="icon">
              <i class="fa fa-shield fa-rotate-180"></i>
            </span>
            <br>
            <span class="icon">
              <i class="fa fa-shield fa-rotate-270"></i>
            </span>
            <br>
            <span class="icon">
              <i class="fa fa-shield fa-flip-horizontal"></i>
            </span>
            <br>
            <span class="icon">
              <i class="fa fa-shield fa-flip-vertical"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td rowspan="2">
            Stacked
          </td>
          <td>
            {% highlight html %}<span class="icon is-medium">
  <span class="fa-stack">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
  </span>
</span>{% endhighlight %}
          </td>
          <td class="bd-icon-size">
            <span class="icon is-medium">
              <span class="fa-stack">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
              </span>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            {% highlight html %}<span class="icon is-large">
  <span class="fa-stack fa-lg">
    <i class="fa fa-camera fa-stack-1x"></i>
    <i class="fa fa-ban fa-stack-2x has-text-danger"></i>
  </span>
</span>{% endhighlight %}
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <span class="fa-stack fa-lg">
                <i class="fa fa-camera fa-stack-1x"></i>
                <i class="fa fa-ban fa-stack-2x has-text-danger"></i>
              </span>
            </span>
          </td>
        </tr>
      </tbody>
    </table>

    {% include anchor.html name="Material Design Icons" %}

    <div class="content">
      <p>
        Here is how the <code>icon</code> container can be used with <a href="https://materialdesignicons.com">Material Design Icons</a>.
      </p>
    </div>

    <table class="table is-bordered">
      <thead>
        <tr>
          <th>Container class</th>
          <th>Container size</th>
          <th>MDI class</th>
          <th>Icon size</th>
          <th>Result</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <code>icon is-small</code>
          </td>
          <td>
            <code>1rem x 1rem</code>
          </td>
          <td>
            <code>mdi</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-small">
              <i class="mdi mdi-bell"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td rowspan="2">
            <code>icon</code>
          </td>
          <td rowspan="2">
            <code>1.5rem x 1.5rem</code>
          </td>
          <td>
            <code>mdi mdi-18px</code>
          </td>
          <td>
            <code>18px</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="mdi mdi-18px mdi-bell"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>mdi mdi-24px</code>
          </td>
          <td>
            <code>24px</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="mdi mdi-24px mdi-bell"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td rowspan="4">
            <code>icon is-medium</code>
          </td>
          <td rowspan="4">
            <code>2rem x 2rem</code>
          </td>
          <td>
            <code>mdi</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-medium">
              <i class="mdi mdi-bell"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>mdi mdi-18px</code>
          </td>
          <td>
            <code>18px</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-medium">
              <i class="mdi mdi-18px mdi-bell"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>mdi mdi-24px</code>
          </td>
          <td>
            <code>24px</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-medium">
              <i class="mdi mdi-24px mdi-bell"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>mdi mdi-36px</code>
          </td>
          <td>
            <code>36px</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-medium">
              <i class="mdi mdi-36px mdi-bell"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td rowspan="5">
            <code>icon is-large</code>
          </td>
          <td rowspan="5">
            <code>3rem x 3rem</code>
          </td>
          <td>
            <code>mdi</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <i class="mdi mdi-bell"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>mdi mdi-18px</code>
          </td>
          <td>
            <code>18px</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <i class="mdi mdi-18px mdi-bell"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>mdi mdi-24px</code>
          </td>
          <td>
            <code>24px</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <i class="mdi mdi-24px mdi-bell"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>mdi mdi-36px</code>
          </td>
          <td>
            <code>36px</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <i class="mdi mdi-36px mdi-bell"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>mdi mdi-48px</code>
          </td>
          <td>
            <code>48px</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <i class="mdi mdi-48px mdi-bell"></i>
            </span>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="content">
      <p>
        MDI also provides modifier classes for:
      </p>
      <ul>
        <li>
          light and dark icons
        </li>
        <li>
          rotated &amp; flipped icons
        </li>
      </ul>
    </div>

    <table class="table is-bordered">
      <thead>
        <tr>
          <th>Type</th>
          <th>Material Design Icon class</th>
          <th>Result</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            Light color
          </td>
          <td>
            <code>mdi mdi-light</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="mdi mdi-signal-4g mdi-light"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            Dark color
          </td>
          <td>
            <code>mdi mdi-dark</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="mdi mdi-signal-4g mdi-dark"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            Light inactive color
          </td>
          <td>
            <code>mdi mdi-light mdi-inactive</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="mdi mdi-signal-4g mdi-light mdi-inactive"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            Dark inactive color
          </td>
          <td>
            <code>mdi mdi-dark mdi-inactive</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="mdi mdi-signal-4g mdi-dark mdi-inactive"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            Flipped
          </td>
          <td>
            <code>mdi mdi-flip-h</code>
            <br>
            <code>mdi mdi-flip-v</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="mdi mdi-signal-4g mdi-flip-h"></i>
            </span>
            <br>
            <span class="icon">
              <i class="mdi mdi-signal-4g mdi-flip-v"></i>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            Rotated
          </td>
          <td>
            <code>mdi mdi-rotate-45</code>
            <br>
            <code>mdi mdi-rotate-90</code>
            <br>
            <code>mdi mdi-rotate-180</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <i class="mdi mdi-signal-4g mdi-rotate-45"></i>
            </span>
            <br>
            <span class="icon">
              <i class="mdi mdi-signal-4g mdi-rotate-90"></i>
            </span>
            <br>
            <span class="icon">
              <i class="mdi mdi-signal-4g mdi-rotate-180"></i>
            </span>
          </td>
        </tr>
      </tbody>
    </table>

    {% include anchor.html name="Open Iconic" %}

    <div class="content">
      <p>
        Here is how the <code>icon</code> container can be used with <a href="https://useiconic.com/open">Open Iconic</a>.
      </p>
    </div>

    <table class="table is-bordered">
      <thead>
        <tr>
          <th>Container class</th>
          <th>Container size</th>
          <th>Iconic class</th>
          <th>Icon size</th>
          <th>Result</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <code>icon is-small</code>
          </td>
          <td>
            <code>1rem x 1rem</code>
          </td>
          <td>
            <code>oi [data-glyph=puzzle-piece]</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-small">
              <span class="oi" data-glyph="puzzle-piece"></span>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>icon</code>
          </td>
          <td>
            <code>1.5rem x 1.5rem</code>
          </td>
          <td>
            <code>oi [data-glyph=puzzle-piece]</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <span class="oi" data-glyph="puzzle-piece"></span>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>icon is-medium</code>
          </td>
          <td>
            <code>2rem x 2rem</code>
          </td>
          <td>
            <code>oi [data-glyph=puzzle-piece]</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-medium">
              <span class="oi" data-glyph="puzzle-piece"></span>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>icon is-large</code>
          </td>
          <td>
            <code>3rem x 3rem</code>
          </td>
          <td>
            <code>oi [data-glyph=puzzle-piece]</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <span class="oi" data-glyph="puzzle-piece"></span>
            </span>
          </td>
        </tr>
      </tbody>
    </table>

    {% include anchor.html name="Ionicons" %}

    <div class="content">
      <p>
        Here is how the <code>icon</code> container can be used with <a href="http://ionicons.com">Ionicons</a>.
      </p>
    </div>

    <table class="table is-bordered">
      <thead>
        <tr>
          <th>Container class</th>
          <th>Container size</th>
          <th>Ionicon class</th>
          <th>Icon size</th>
          <th>Result</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <code>icon is-small</code>
          </td>
          <td>
            <code>1rem x 1rem</code>
          </td>
          <td>
            <code>ion-ionic</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-small">
              <span class="ion-ionic"></span>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>icon</code>
          </td>
          <td>
            <code>1.5rem x 1.5rem</code>
          </td>
          <td>
            <code>ion-ionic</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon">
              <span class="ion-ionic"></span>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>icon is-medium</code>
          </td>
          <td>
            <code>2rem x 2rem</code>
          </td>
          <td>
            <code>ion-ionic</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-medium">
              <span class="ion-ionic"></span>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <code>icon is-large</code>
          </td>
          <td>
            <code>3rem x 3rem</code>
          </td>
          <td>
            <code>ion-ionic</code>
          </td>
          <td>
            <code>1em</code>
          </td>
          <td class="bd-icon-size">
            <span class="icon is-large">
              <span class="ion-ionic"></span>
            </span>
          </td>
        </tr>
      </tbody>
    </table>

    {% include variables.html type='element' %}

  </div>
</section>