Icon

Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, 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="fas 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 5 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="fas fa-info-circle"></i>
</span>
<span class="icon has-text-success">
  <i class="fas fa-check-square"></i>
</span>
<span class="icon has-text-warning">
  <i class="fas fa-exclamation-triangle"></i>
</span>
<span class="icon has-text-danger">
  <i class="fas 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 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

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 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
<span class="icon is-medium">
  <span class="fa-stack">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
  </span>
</span>
<span class="icon is-large">
  <span class="fa-stack fa-lg">
    <i class="fas fa-camera fa-stack-1x"></i>
    <i class="fas 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 Type Default value Computed value
Name Type Default value Computed value
$icon-dimensions size 1.5rem
$icon-dimensions-small size 1rem
$icon-dimensions-medium size 2rem
$icon-dimensions-large size 3rem

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

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!