# 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

Show code

    <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`).

Show code

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

Show code

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

Show code

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

Show code

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

Show code

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

Show code

    <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

Show code

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