--- title: Icon subtitle: "Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Ionicons, etc." fontawesome4: true ionicons: true mdi: true layout: documentation doc-tab: elements doc-subtab: icon breadcrumb: - home - documentation - elements - elements-icon meta: colors: true sizes: true variables: true --- {% capture icon_example %} {% endcapture %} {% capture icon_text_example %} Home {% endcapture %} {% capture icon_text_train_example %} Paris Budapest Bucharest Istanbul {% endcapture %} {% capture icon_text_in_content_example %}

An invitation to dinner was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in town the following day, and, consequently, unable to accept the honour of their invitation , etc.

Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his arrival in Hertfordshire; and she began to fear that he might be always flying about from one place to another, and never settled at Netherfield as he ought to be.

{% endcapture %} {% capture icon_text_div_example %}
Information

Your package will be delivered on Tuesday at 08:00.

Success

Your image has been successfully uploaded.

Warning

Some information is missing from your profile details.

Danger

There was an error in your submission. Please try again.

{% endcapture %} {% capture icon_color_example %} {% endcapture %} {% capture icon_text_color_example %} Info Success Warning Danger {% endcapture %} {% capture icon_sizes_example %} {% endcapture %} {% capture stacked_medium %} {% endcapture %} {% capture stacked_large %} {% endcapture %}

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.

{% include elements/snippet.html content=icon_example %}
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.

{% include elements/anchor.html name="Icon text" %} {% include elements/new-tag.html version="0.9.2" %}

You can combine an icon with text, using the icon-text wrapper, as long as all text inside is wrapped in its own span element:

{% include elements/snippet.html content=icon_text_example %}

You can combine as many icon elements and text elements as you want:

{% include elements/snippet.html content=icon_text_train_example %}

Since icon-text is an inline-flex element, it can easily be inserted within any paragraph of text.

{% include elements/snippet.html content=icon_text_in_content_example %}

You can also turn the icon-text into a flex element simply by using a <div> tag instead:

{% include elements/snippet.html content=icon_text_div_example %} {% include elements/anchor.html name="Colors" %}

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

{% include elements/snippet.html content=icon_color_example %}

The same applies to the icon-text:

{% include elements/snippet.html content=icon_text_color_example %} {% include elements/anchor.html name="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
{% include elements/anchor.html name="Font Awesome variations" %}

Font Awesome also provides modifier classes for:

Type Font Awesome class Result
Fixed width fas fa-fw
Bordered fas fa-border
Animated fas fa-spinner fa-pulse
Stacked {% highlight html %}{{ stacked_medium }}{% endhighlight %}
{% highlight html %}{{ stacked_large }}{% endhighlight %}
{% include elements/anchor.html name="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:

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

{% include elements/anchor.html name="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
{% include components/variables.html type='element' %}