--- title: Icon iconic: true ionicons: true mdi: true layout: documentation doc-tab: elements doc-subtab: icon --- {% capture icon_example %} {% endcapture %} {% capture icon_color_example %} {% endcapture %} {% capture icon_sizes_example %} {% endcapture %} {% include subnav-elements.html %}

Icons

Bulma is compatible with all icon font libraries: Font Awesome, Material Design Icons, Open Iconic, Ionicons etc.

{% include meta.html colors=true sizes=true variables=true %}

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 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 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 class Icon size Result
icon is-small 1rem x 1rem fa 1em
icon 1.5rem x 1.5rem fa 1em
fa fa-lg 1.33em
icon is-medium 2rem x 2rem fa 1em
fa fa-lg 1.33em
fa fa-2x 2em
icon is-large 3rem x 3rem fa 1em
fa fa-lg 1.33em
fa fa-2x 2em
fa fa-3x 3em
{% include anchor.html name="Font Awesome variations" %}

Font Awesome also provides modifier classes for:

  • fixed width icons
  • bordered icons
  • animated icons
  • rotated & flipped icons
  • stacked icons
Type Font Awesome class Result
Fixed width fa fa-fw
Bordered fa fa-border
Animated fa fa-refresh fa-spin
Rotated & flipped fa fa-shield
fa fa-shield fa-rotate-90
fa fa-shield fa-rotate-180
fa fa-shield fa-rotate-270
fa fa-shield fa-flip-horizontal
fa fa-shield fa-flip-vertical




Stacked {% highlight html %} {% endhighlight %}
{% highlight html %} {% 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:

  • light and dark icons
  • rotated & flipped icons
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' %}