Icon

Icons take an important role of any application

Buefy is compatible with both Material Design Icons , FontAwesome 4 and FontAwesome 5. They adapt to most elements background automatically — but you can also override their colors.

Material Design Icons

<template>
    <section>
        <div class="block">
            <b-icon
                icon="account"
                size="is-small">
            </b-icon>
            <b-icon
                icon="home"
                size="is-small">
            </b-icon>
            <b-icon
                icon="view-dashboard"
                size="is-small">
            </b-icon>
        </div>

        <div class="block">
            <b-icon icon="account"></b-icon>
            <b-icon icon="home"></b-icon>
            <b-icon icon="view-dashboard"></b-icon>
        </div>

        <div class="block">
            <b-icon
                icon="account"
                size="is-medium">
            </b-icon>
            <b-icon
                icon="home"
                size="is-medium">
            </b-icon>
            <b-icon
                icon="view-dashboard"
                size="is-medium">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                icon="account"
                size="is-large"
                type="is-success">
            </b-icon>
            <b-icon
                icon="home"
                size="is-large"
                type="is-info">
            </b-icon>
            <b-icon
                icon="view-dashboard"
                size="is-large"
                type="is-primary">
            </b-icon>
        </div>

        <button class="button is-dark">
            <b-icon icon="check"></b-icon>
            <span>Finish</span>
        </button>

        <button class="button is-warning">
            <b-icon icon="check"></b-icon>
            <span>Finish</span>
        </button>
    </section>
</template>

Using far or fad while having FontAwesome free tier might have missing icons.
You can set the defaultIconComponent constructor option to render icons with the vue-fontawesome component.

FontAwesome

<template>
    <section>
        <div class="block">
            <b-icon
                pack="fas"
                icon="user"
                size="is-small">
            </b-icon>
            <b-icon
                pack="fas"
                icon="home"
                size="is-small">
            </b-icon>
            <b-icon
                pack="fas"
                icon="tachometer-alt"
                size="is-small">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="fas"
                icon="user">
            </b-icon>
            <b-icon
                pack="fas"
                icon="home">
            </b-icon>
            <b-icon
                pack="fas"
                icon="tachometer-alt">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="fas"
                icon="user"
                size="is-medium">
            </b-icon>
            <b-icon
                pack="fas"
                icon="home"
                size="is-medium">
            </b-icon>
            <b-icon
                pack="fas"
                icon="tachometer-alt"
                size="is-medium">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="fas"
                icon="user"
                size="is-large"
                type="is-success">
            </b-icon>
            <b-icon
                pack="fas"
                icon="home"
                size="is-large"
                type="is-info">
            </b-icon>
            <b-icon
                pack="fas"
                icon="tachometer-alt"
                size="is-large"
                type="is-primary">
            </b-icon>
        </div>

        <button class="button is-dark">
            <b-icon pack="fas" icon="check"></b-icon>
            <span>Finish</span>
        </button>

        <button class="button is-warning">
            <b-icon pack="fas" icon="check"></b-icon>
            <span>Finish</span>
        </button>

        <button class="button is-warning">
            <b-icon
                pack="fas"
                icon="sync-alt"
                custom-class="fa-spin">
            </b-icon>
            <span>Refresh</span>
        </button>
    </section>
</template>

Object syntax

New! 0.7.0

You can also use object syntax for type props just like Vuejs class.

<template>
    <section>
        <b-checkbox v-model="isGreen">Green color</b-checkbox>

        <div class="block">
            <b-icon :type="{ 'is-success': isGreen }" icon="account"></b-icon>
            <b-icon :type="{ 'is-success': isGreen }" icon="home"></b-icon>
            <b-icon :type="{ 'is-success': isGreen }" icon="view-dashboard"></b-icon>
        </div>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isGreen: true
            }
        }
    }
</script>

API

Name
Description
Type
Values
Default
typeType (color) of the icon, optional String, Object is-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sass
packIcon pack to use String mdi, fa, fas, far, fad, falmdi
iconIcon name String
sizeIcon size, optional String is-small, is-medium, is-large
custom-sizeOverrides icon font size, optional String Depends on library: null (smallest), fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, mdi-18px, mdi-24px, mdi-36px, mdi-48pxDepends on size prop
custom-classAdd class to icon font (<i> tag), optional. See here for MDI, here for FontAwesome 4 and here for FontAwesome 5 custom classes String

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub