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.
Icon
Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons etc.
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-altfas 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 |
|
|
|
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
|
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub
