Icons
Use Nova's custom icon styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Examples
Nova includes several predefined button styles, each serving its own semantic purpose.
<i class="nova-bag text-primary"></i>
<i class="nova-android text-secondary"></i>
<i class="nova-bar-chart text-primary-darker"></i>
<i class="nova-bell text-success"></i>
<i class="nova-comment text-danger"></i>
<i class="nova-flickr-alt text-light"></i>
<div class="icon icon-lg bg-primary rounded-circle d-inline-block">
<i class="nova-bag icon-text d-inline-block text-white"></i>
</div>
<div class="icon icon-lg bg-secondary rounded-circle d-inline-block">
<i class="nova-android icon-text d-inline-block text-white"></i>
</div>
<div class="icon icon-lg bg-primary-darker rounded-circle d-inline-block">
<i class="nova-bar-chart icon-text d-inline-block text-white"></i>
</div>
<div class="icon icon-lg bg-success rounded-circle d-inline-block">
<i class="nova-bell icon-text d-inline-block text-white"></i>
</div>
<div class="icon icon-lg bg-danger rounded-circle d-inline-block">
<i class="nova-comment icon-text d-inline-block text-white"></i>
</div>
<div class="icon icon-lg bg-light rounded-circle d-inline-block">
<i class="nova-flickr-alt icon-text d-inline-block text-white"></i>
</div>
Soft icons
<div class="icon icon-lg bg-soft-primary rounded-circle d-inline-block">
<i class="nova-bag icon-text d-inline-block text-primary"></i>
</div>
<div class="icon icon-lg bg-soft-secondary rounded-circle d-inline-block">
<i class="nova-android icon-text d-inline-block text-secondary"></i>
</div>
<div class="icon icon-lg bg-soft-primary-darker rounded-circle d-inline-block">
<i class="nova-bar-chart icon-text d-inline-block text-primary-darker"></i>
</div>
<div class="icon icon-lg bg-soft-success rounded-circle d-inline-block">
<i class="nova-bell icon-text d-inline-block text-success"></i>
</div>
<div class="icon icon-lg bg-soft-danger rounded-circle d-inline-block">
<i class="nova-comment icon-text d-inline-block text-danger"></i>
</div>
<div class="icon icon-lg bg-soft-light rounded-circle d-inline-block">
<i class="nova-flickr-alt icon-text d-inline-block text-light"></i>
</div>
Sizes
Fancy larger or smaller buttons? Add .icon-xs, .icon-sm or .icon-lg for additional sizes.
<div class="icon icon-xs bg-primary rounded-circle d-inline-block">
<i class="nova-bag icon-text icon-text-xs d-inline-block text-white"></i>
</div>
<div class="icon icon-sm bg-primary rounded-circle d-inline-block">
<i class="nova-bag icon-text icon-text-sm d-inline-block text-white"></i>
</div>
<div class="icon bg-primary rounded-circle d-inline-block">
<i class="nova-bag icon-text d-inline-block text-white"></i>
</div>
<div class="icon icon-lg bg-primary rounded-circle d-inline-block">
<i class="nova-bag icon-text d-inline-block text-white"></i>
</div>