--- title: Icon fontawesome4: true iconic: true ionicons: true mdi: true layout: documentation doc-tab: elements doc-subtab: icon breadcrumb: - home - documentation - elements - elements-icon meta: colors: true sizes: true variables: true --- {% capture icon_example %} {% endcapture %} {% capture icon_color_example %} {% endcapture %} {% capture icon_sizes_example %} {% endcapture %} {% capture stacked_medium %} {% endcapture %} {% capture stacked_large %} {% endcapture %}

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

{% include snippet.html content=icon_example %}
The yellow background is only here for demonstration purposes, to highlight the icon container's area.

By default, the icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.

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

Since icon fonts are simply text, you can use the text color modifiers to change the icon's color.

{% include snippet.html content=icon_color_example %} {% include anchor.html name="Sizes" %}

The Bulma icon container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome 5 icons use a font-size of 1em by default (since it inherits the font size), but provides additional sizes.

Container class Container size Font Awesome 5 class Icon size Result
icon is-small 1rem x 1rem fas 1em
icon 1.5rem x 1.5rem fas 1em
fas fa-lg 1.33em
icon is-medium 2rem x 2rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em
icon is-large 3rem x 3rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em
fas fa-3x 3em
{% include anchor.html name="Font Awesome variations" %}

Font Awesome also provides modifier classes for:

Type Font Awesome class Result
Fixed width fas fa-fw
Bordered fas fa-border
Animated fas fa-spinner fa-pulse
Rotated & flipped fas fa-shield-alt
fas fa-shield-alt data-fa-transform="rotate-90"
fas fa-shield-alt data-fa-transform="rotate-180"
fas fa-shield-alt data-fa-transform="rotate-270"
fas fa-shield-alt data-fa-transform="flip-h"
fas fa-shield-alt data-fa-transform="flip-v"




Stacked {% highlight html %}{{ stacked_medium }}{% endhighlight %}
{% highlight html %}{{ stacked_large }}{% endhighlight %}
{% include anchor.html name="Material Design Icons" %}

Here is how the icon container can be used with Material Design Icons.

Container class Container size MDI class Icon size Result
icon is-small 1rem x 1rem mdi 1em
icon 1.5rem x 1.5rem mdi mdi-18px 18px
mdi mdi-24px 24px
icon is-medium 2rem x 2rem mdi 1em
mdi mdi-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
icon is-large 3rem x 3rem mdi 1em
mdi mdi-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
mdi mdi-48px 48px

MDI also provides modifier classes for:

Type Material Design Icon class Result
Light color mdi mdi-light
Dark color mdi mdi-dark
Light inactive color mdi mdi-light mdi-inactive
Dark inactive color mdi mdi-dark mdi-inactive
Flipped mdi mdi-flip-h
mdi mdi-flip-v
Rotated mdi mdi-rotate-45
mdi mdi-rotate-90
mdi mdi-rotate-180

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

Here is how the icon container can be used with Open Iconic.

Container class Container size Iconic class Icon size Result
icon is-small 1rem x 1rem oi [data-glyph=puzzle-piece] 1em
icon 1.5rem x 1.5rem oi [data-glyph=puzzle-piece] 1em
icon is-medium 2rem x 2rem oi [data-glyph=puzzle-piece] 1em
icon is-large 3rem x 3rem oi [data-glyph=puzzle-piece] 1em
{% include anchor.html name="Ionicons" %}

Here is how the icon container can be used with Ionicons.

Container class Container size Ionicon class Icon size Result
icon is-small 1rem x 1rem ion-ionic 1em
icon 1.5rem x 1.5rem ion-ionic 1em
icon is-medium 2rem x 2rem ion-ionic 1em
icon is-large 3rem x 3rem ion-ionic 1em
{% include variables.html type='element' %}