Icons

Documentation and examples for using the icon components and their multiple options, like shape, colors, svgs and much more.

Examples

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.

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

Simple

<div class="icon text-primary">
    <i class="far fa-cloud"></i>
</div>
<div class="icon text-secondary">
    <i class="far fa-cloud"></i>
</div>
<div class="icon text-success">
    <i class="far fa-cloud"></i>
</div>
<div class="icon text-danger">
    <i class="far fa-cloud"></i>
</div>
<div class="icon text-warning">
    <i class="far fa-cloud"></i>
</div>
<div class="icon text-info">
    <i class="far fa-cloud"></i>
</div>
<div class="icon text-dark">
    <i class="far fa-cloud"></i>
</div>

Rounded

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: .icon-success, .icon-danger).

<div class="icon icon-primary icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-secondary icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-success icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-danger icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-warning icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-info icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-dark icon-shape">
    <i class="far fa-award"></i>
</div>

Circle

Simply add the ‘.rounded-circle’ modifier class in order to get the fully rounded shape.

<div class="icon icon-primary rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-secondary rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-success rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-danger rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-warning rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-info rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon icon-dark rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>

Options

Colors

If you want to use the default background colors you can directly use the .bg-* utilities in combination with the .text-* utilities.

<div class="icon bg-primary text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-secondary text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-success text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-danger text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-warning text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-info text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-dark text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>

Or maybe you like gradients more? Apply the gradient background colors using the .bg-gradient-* utilities in combination with the .text-* utilities.

<div class="icon bg-gradient-primary text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-gradient-secondary text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-gradient-success text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-gradient-danger text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-gradient-warning text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-gradient-info text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-gradient-dark text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>

Sizing

Use .icon-sm, .icon-lg and .icon-xl for changing the icon’s size to small, large or extra large.

<div class="icon text-primary icon-sm">
    <i class="far fa-cloud"></i>
</div>
<div class="icon text-primary">
    <i class="far fa-cloud"></i>
</div>
<div class="icon text-primary icon-lg">
    <i class="far fa-cloud"></i>
</div>
<div class="icon text-primary icon-xl">
    <i class="far fa-cloud"></i>
</div>

Same rules apply for the shaped version also.

<div class="icon bg-gradient-primary text-white rounded-circle icon-sm icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-gradient-info text-white rounded-circle icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-gradient-warning text-white rounded-circle icon-lg icon-shape">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-gradient-danger text-white rounded-circle icon-xl icon-shape">
    <i class="far fa-award"></i>
</div>

Animations

<div class="icon bg-gradient-primary text-white rounded-circle icon-shape hover-scale-110">
    <i class="far fa-award"></i>
</div>
<div class="icon bg-gradient-primary text-white rounded-circle icon-shape hover-rotate-360">
    <i class="far fa-award"></i>
</div>
Summary