Icon

Icons take an important role of any application

Buefy is compatible with both Material Design Icons , FontAwesome 4 and FontAwesome 5 but you can also add your custom icon pack.
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.

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

You can set the defaultIconComponent constructor option to render icons with the vue-fontawesome component.
import { library } from '@fortawesome/fontawesome-svg-core';
// internal icons
import { faCheck, faCheckCircle, faInfoCircle, faExclamationTriangle, faExclamationCircle,
    faArrowUp, faAngleRight, faAngleLeft, faAngleDown,
    faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faCheck, faCheckCircle, faInfoCircle, faExclamationTriangle, faExclamationCircle,
    faArrowUp, faAngleRight, faAngleLeft, faAngleDown,
    faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload);
Vue.component('vue-fontawesome', FontAwesomeIcon);

// ...

import Buefy from 'buefy'
Vue.use(Buefy, {
  defaultIconComponent: 'vue-fontawesome',
  defaultIconPack: 'fas',
});

# Object syntax

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

# Custom Icon Pack

Since 0.8.3

You can also add your own custom font (Ionicons is used in this example).

Can also customize some properties of the default icon packs. In this example, default sizes for FontAwesome have been modified.

<template>
    <section>
        <div class="block">
            <b-icon
                pack="ionicons"
                icon="person"
                size="is-small">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="home"
                size="is-small">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="apps"
                size="is-small">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="ionicons"
                icon="person">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="home">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="apps">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="ionicons"
                icon="person"
                size="is-medium">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="home"
                size="is-medium">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="apps"
                size="is-medium">
            </b-icon>
        </div>

        <div class="block">
            <b-icon
                pack="ionicons"
                icon="person"
                size="is-large"
                type="is-success">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="home"
                size="is-large"
                type="is-info">
            </b-icon>
            <b-icon
                pack="ionicons"
                icon="apps"
                size="is-large"
                type="is-primary">
            </b-icon>
        </div>

        <button class="button is-dark">
            <b-icon pack="ionicons" icon="checkmark"></b-icon>
            <span>Finish</span>
        </button>

        <button class="button is-warning">
            <b-icon pack="ionicons" icon="checkmark"></b-icon>
            <span>Finish</span>
        </button>

        <button class="button is-warning">
            <b-icon
                pack="ionicons"
                icon="refresh">
            </b-icon>
            <span>Refresh</span>
        </button>

        <div class="block">
            <p>
                Can also customize some properties of the default icon packs. In this example, default sizes for FontAwesome have been modified.
            </p>
            <b-icon
                pack="fas"
                icon="user"
                size="is-small"
                type="is-success">
            </b-icon>
            <b-icon
                pack="fas"
                icon="user"
                type="is-info">
            </b-icon>
            <b-icon
                pack="fas"
                icon="user"
                size="is-medium"
                type="is-danger">
            </b-icon>
            <b-icon
                pack="fas"
                icon="user"
                size="is-large"
                type="is-primary">
            </b-icon>
        </div>
    </section>
</template>

<script>
    const customIconConfig = {
        customIconPacks: {
            'fas': {
                sizes: {
                    'default': null,
                    'is-small': 'fa-xs',
                    'is-medium': 'fa-lg',
                    'is-large': 'fa-2x'
                }
            },
            'ionicons': {
                sizes: {
                    'default': 'is-size-5',
                    'is-small': '',
                    'is-medium': 'is-size-3',
                    'is-large': 'is-size-1'
                },
                iconPrefix: 'ion-md-',
                internalIcons: {
                    'check': 'checkmark',
                    'information': 'information',
                    'check-circle': 'checkmark-circle-outline',
                    'alert': 'alert',
                    'alert-circle': 'alert',
                    'arrow-up': 'arrow-up',
                    'chevron-right': 'arrow-forward',
                    'chevron-left': 'arrow-back',
                    'chevron-down': 'arrow-down',
                    'eye': 'eye',
                    'eye-off': 'eye-off',
                    'menu-down': 'arrow-dropdown',
                    'menu-up': 'arrow-dropup'
                }
            }
        }
    }
    export default {
        created() {
            this.$buefy.config.setOptions(customIconConfig)
        }
    }
</script>

<style scoped>
    @import "https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css";
</style>

# 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

# Variables

You can use these variables to customize this component.

Name
Default
Bulma variablesLink

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

Improve this page on GitHub