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

Open Iconic #

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

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