Icon

Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, 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
`icon is-small`	`1rem x 1rem`	`fas`	`1em`
`icon`	`1.5rem x 1.5rem`	`fas`	`1em`
`icon`	`1.5rem x 1.5rem`	`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>`
Stacked	`<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
`icon is-small`	`1rem x 1rem`	`mdi`	`1em`
`icon`	`1.5rem x 1.5rem`	`mdi mdi-18px`	`18px`
`icon`	`1.5rem x 1.5rem`	`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`

Ionicons #

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

Container class	Container size	Ionicon class	Icon size
`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`