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="fas fa-cloud"></i>
</div>
<div class="icon text-secondary">
    <i class="fas fa-cloud"></i>
</div>
<div class="icon text-success">
    <i class="fas fa-cloud"></i>
</div>
<div class="icon text-danger">
    <i class="fas fa-cloud"></i>
</div>
<div class="icon text-warning">
    <i class="fas fa-cloud"></i>
</div>
<div class="icon text-info">
    <i class="fas fa-cloud"></i>
</div>
<div class="icon text-dark">
    <i class="fas 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="fas fa-award"></i>
</div>
<div class="icon icon-secondary icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon icon-success icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon icon-danger icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon icon-warning icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon icon-info icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon icon-dark icon-shape">
    <i class="fas 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="fas fa-award"></i>
</div>
<div class="icon icon-secondary rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon icon-success rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon icon-danger rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon icon-warning rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon icon-info rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon icon-dark rounded-circle icon-shape">
    <i class="fas 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="fas fa-award"></i>
</div>
<div class="icon bg-secondary text-white rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-success text-white rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-danger text-white rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-warning text-white rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-info text-white rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-dark text-white rounded-circle icon-shape">
    <i class="fas 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="fas fa-award"></i>
</div>
<div class="icon bg-gradient-secondary text-white rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-gradient-success text-white rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-gradient-danger text-white rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-gradient-warning text-white rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-gradient-info text-white rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-gradient-dark text-white rounded-circle icon-shape">
    <i class="fas 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="fas fa-cloud"></i>
</div>
<div class="icon text-primary">
    <i class="fas fa-cloud"></i>
</div>
<div class="icon text-primary icon-lg">
    <i class="fas fa-cloud"></i>
</div>
<div class="icon text-primary icon-xl">
    <i class="fas 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="fas fa-award"></i>
</div>
<div class="icon bg-gradient-info text-white rounded-circle icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-gradient-warning text-white rounded-circle icon-lg icon-shape">
    <i class="fas fa-award"></i>
</div>
<div class="icon bg-gradient-danger text-white rounded-circle icon-xl icon-shape">
    <i class="fas fa-award"></i>
</div>

Animations

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