Icons

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

Colors Yes
Sizes Yes
Variables Yes

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.

<span class="icon">
  <i class="fa fa-home"></i>
</span>
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.


Colors #

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

<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>

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

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
<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>
<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>

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



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

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

Variables #

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$icon-dimensions 1.5rem
$icon-dimensions-small 1rem
$icon-dimensions-medium 2rem
$icon-dimensions-large 3rem

Made with Bulma
This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!