Skip to content
On this page


Icons take an important role of any application


Oruga is compatible with both Material Design Icons and FontAwesome 5 but you can also add your own custom icon pack.


Show code

Custom icon pack

You can also add it during Oruga import as default config.


Take a look at below example code (click on "Show code") to know all internal icons to replace with the releated icons of your custom icon pack

Show code

Override icon pack

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

Custom icon component


You can set the `iconComponent` config option to render icons with the vue-fontawesome component (it should work with other Vue icon components as well).

Class props

'Classes applied to the element'
How does the Class props inspector work?
Class propDescriptionPropsSuffixes
clickableClassClass of the icon when clickable.clickable
rootClassClass of the root element.
sizeClassClass of the icon size.sizesmall
spinClassClass of the element when spin.spin
variantClassClass of the icon variant.variantprimary

Icon component



Prop nameDescriptionTypeValuesDefault
clickableWhen true makes icon clickableboolean-
componentIcon component namestring-
customClassAdd class to icon font, optional. See here for MDI, here for FontAwesome 4 and here for FontAwesome 5 custom classesstring-
customSizeOverrides 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-48px
iconIcon namestring-
packIcon pack to usestringmdi, fa, fas and any other custom icon pack
rotationRotation 0-360number|string-
sizeIcon size, optionalstringsmall, medium, large
spinEnable spin effect on iconboolean-
variantColor of the icon, optionalstring|objectprimary, info, success, warning, danger, and any other custom color

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault

See ➜ 📄 Full scss file

Released under the MIT License.