Types
Use .icon-* or .icon-soft-* classes to change the visual style of the icon.
<span class="icon icon-primary">
<i class="bi-house"></i>
</span>
<span class="icon icon-soft-primary">
<i class="bi-house"></i>
</span>
Color variants
Predefined solid color button styles.
<span class="icon icon-primary">
<i class="bi-house"></i>
</span>
<span class="icon icon-secondary">
<i class="bi-house"></i>
</span>
<span class="icon icon-success">
<i class="bi-house"></i>
</span>
<span class="icon icon-danger">
<i class="bi-house"></i>
</span>
<span class="icon icon-warning">
<i class="bi-house"></i>
</span>
<span class="icon icon-info">
<i class="bi-house"></i>
</span>
<span class="icon icon-light">
<i class="bi-house"></i>
</span>
<span class="icon icon-dark">
<i class="bi-house"></i>
</span>
Soft icons
Use .icon-soft-*
<span class="icon icon-soft-primary">
<i class="bi-house"></i>
</span>
<span class="icon icon-soft-secondary">
<i class="bi-house"></i>
</span>
<span class="icon icon-soft-success">
<i class="bi-house"></i>
</span>
<span class="icon icon-soft-danger">
<i class="bi-house"></i>
</span>
<span class="icon icon-soft-warning">
<i class="bi-house"></i>
</span>
<span class="icon icon-soft-info">
<i class="bi-house"></i>
</span>
<span class="icon icon-soft-light">
<i class="bi-house"></i>
</span>
<span class="icon icon-soft-dark">
<i class="bi-house"></i>
</span>
Sizes
Fancy larger or smaller buttons? Add .icon-lg, .icon-sm or .icon-xs for additional sizes.
<span class="icon icon-lg icon-primary">
<i class="bi-house"></i>
</span>
<span class="icon icon-primary">
<i class="bi-house"></i>
</span>
<span class="icon icon-sm icon-primary">
<i class="bi-house"></i>
</span>
<span class="icon icon-xs icon-primary">
<i class="bi-house"></i>
</span>
Circle
Use the .icon-circle modifier class to make icons circled.
<span class="icon icon-lg icon-primary icon-circle">
<i class="bi-house"></i>
</span>
<span class="icon icon-primary icon-circle">
<i class="bi-house"></i>
</span>
<span class="icon icon-sm icon-primary icon-circle">
<i class="bi-house"></i>
</span>
<span class="icon icon-xs icon-primary icon-circle">
<i class="bi-house"></i>
</span>