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>

        <div class="buttons">
            <b-button
                label="Finish"
                type="is-dark"
                icon-left="check" />
            <b-button
                label="Finish"
                type="is-warning"
                icon-left="check" />
        </div>
    </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>

        <div class="buttons">
            <b-button
                label="Finish"
                type="is-dark"
                icon-pack="fas"
                icon-left="check" />
            <b-button
                label="Finish"
                type="is-warning"
                icon-pack="fas"
                icon-left="check" />
            <b-button type="is-warning">
                <b-icon
                    pack="fas"
                    icon="sync-alt"
                    custom-class="fa-spin">
                </b-icon>
                <span>Refresh</span>
            </b-button>
        </div>
    </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

Since0.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

Since0.8.3

You can also add your own custom font.

ionicons

unicons

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">
            <p>
                <a href="https://ionicons.com" target="_blank">ionicons</a>
            </p>
            <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>

            <div class="buttons">
                <b-button
                    label="Finish"
                    type="is-dark"
                    icon-pack="ionicons"
                    icon-left="checkmark" />
                <b-button
                    label="Finish"
                    type="is-warning"
                    icon-pack="ionicons"
                    icon-left="checkmark" />
                <b-button
                    label="Refresh"
                    type="is-warning"
                    icon-pack="ionicons"
                    icon-left="refresh" />
            </div>
        </div>

        <div class="block">
            <p>
                <a href="https://iconscout.com/unicons" target="_blank">unicons</a>
            </p>
            <div class="block">
                <b-icon
                    pack="uil"
                    icon="user"
                    size="is-small">
                </b-icon>
                <b-icon
                    pack="uil"
                    icon="home"
                    size="is-small">
                </b-icon>
                <b-icon
                    pack="uil"
                    icon="apps"
                    size="is-small">
                </b-icon>
            </div>
            <div class="block">
                <b-icon
                    pack="uil"
                    icon="user">
                </b-icon>
                <b-icon
                    pack="uil"
                    icon="home">
                </b-icon>
                <b-icon
                    pack="uil"
                    icon="apps">
                </b-icon>
            </div>
            <div class="block">
                <b-icon
                    pack="uil"
                    icon="user"
                    size="is-medium">
                </b-icon>
                <b-icon
                    pack="uil"
                    icon="home"
                    size="is-medium">
                </b-icon>
                <b-icon
                    pack="uil"
                    icon="apps"
                    size="is-medium">
                </b-icon>
            </div>
            <div class="block">
                <b-icon
                    pack="uil"
                    icon="user"
                    size="is-large"
                    type="is-success">
                </b-icon>
                <b-icon
                    pack="uil"
                    icon="home"
                    size="is-large"
                    type="is-info">
                </b-icon>
                <b-icon
                    pack="uil"
                    icon="apps"
                    size="is-large"
                    type="is-primary">
                </b-icon>
            </div>

            <div class="buttons">
                <b-button
                    label="Finish"
                    type="is-dark"
                    icon-pack="uil"
                    icon-left="check" />
                <b-button
                    label="Finish"
                    type="is-warning"
                    icon-pack="uil"
                    icon-left="check" />
                <b-button
                    label="Refresh"
                    type="is-warning"
                    icon-pack="uil"
                    icon-left="refresh" />
            </div>
        </div>

        <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': '',
                    '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',
                    'close-circle': 'close-circle-outline'
                }
            },
            'uil': {
                sizes: {
                    'default': 'is-size-5',
                    'is-small': '',
                    'is-medium': 'is-size-3',
                    'is-large': 'is-size-1'
                },
                iconPrefix: 'uil-',
                internalIcons: {
                    'check': 'check',
                    'information': 'information',
                    'check-circle': 'checkmark-circle',
                    'alert': 'exclamation',
                    'alert-circle': 'exclamation-circle',
                    'arrow-up': 'arrow-up',
                    'chevron-right': 'angle-right',
                    'chevron-left': 'angle-left',
                    'chevron-down': 'arrow-down',
                    'eye': 'eye',
                    'eye-off': 'eye-slash',
                    'menu-down': 'angle-down',
                    'menu-up': 'angle-up',
                    'close-circle': 'times-circle'
                }
            }
        }
    }
    export default {
        created() {
            this.$buefy.config.setOptions(customIconConfig)
        }
    }
</script>

<style scoped>
    @import "https://unpkg.com/[email protected]/dist/css/ionicons.min.css";
    @import "https://unicons.iconscout.com/release/v2.1.11/css/unicons.css";
</style>

# API

Name
Description
Type
Values
Default
typeType (color) of the icon, optionalString, Objectis-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 useStringmdi, fa, fas, far, fad, falmdi
iconIcon nameString
sizeIcon size, optionalStringis-small, is-medium, is-large
custom-sizeOverrides icon font size, optionalStringDepends 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 classesString

# 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