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

Animations

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