Documentation and examples for using the icon components and their multiple options, like shape, colors, svgs and much more.
You will find below that the
.icon component has lots of options and it is extremely customizable. Play with the modifier classes to obtain multiple shapes, colors, sizes ans so on.
.icon components works very well with the already included Font Awesome 5 library and also with SVGs. Check out the Styleguide section from the menu and see all the icon and SVG options you have.
Shaped icons come with their own set of colors prefixed by the
.icon- class followed by the color name set in your
$theme-colors variables (e.g:
Simply add the ‘.rounded-circle’ modifier class in order to get the fully rounded shape.
If you want to use the default background colors you can directly use the
.bg-* utilities in combination with the
Or maybe you like gradients more? Apply the gradient background colors using the
.bg-gradient-* utilities in combination with the
.icon-xl for changing the icon’s size to small, large or extra large.
Same rules apply for the shaped version also.