--- title: Icon layout: documentation doc-tab: elements doc-subtab: icon variables: - name: $icon-dimensions value: 1.5rem - name: $icon-dimensions-small value: 1rem - name: $icon-dimensions-medium value: 2rem - name: $icon-dimensions-large value: 3rem --- {% capture icon_example %} {% endcapture %} {% include subnav-elements.html %}

Icons

Bulma is compatible with Font Awesome icons.

{% include meta.html colors=false sizes=true variables=true %}

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 container:

{{icon_example}}
{% highlight html %}{{icon_example}}{% endhighlight %}

The icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized at 21px.

{% include anchor.html name="Sizes" %}

Font Awesome icons use a font-size of 28px by default, and are best rendered when using multiples of 7.

The Bulma icon container is always slightly bigger than the font-size used:

Class Font-size Container size
icon is-small 14px 1rem x 1rem
icon 21px 1.5rem x 1.5rem
icon is-medium 28px 2rem x 2rem
icon is-large 42px 3rem x 3rem
{% include variables.html %}