Icon Box
Huro icon boxes let you display icons in a fancy and colore way. Box sizes can be controled with css classes. Available modifier classes are is-small, is-medium, is-large, is-big and is-xl. See code for more details about usage.
<div class="h-icon is-small is-primary">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-primary is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-primary">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-large is-primary is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-big is-primary">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-xl is-primary is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
Box Colors
Huro icon boxes let you display icons in a fancy and colore way. Box sizes can be controled with css classes. You can change the box colors by using one of the following classes: is-primary, is-success, is-info, is-warning, is-danger, is-purple, is-blue, is-yellow, is-orange, is-red, is-green. See code for more details about usage.
<div class="h-icon is-medium is-primary">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-info">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-success">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-warning">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-danger">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-purple">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-blue">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-yellow">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-orange">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-green">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-red">
<i class="lnil lnil-vector-pen"></i>
</div>
Squared Border
Huro icon boxes let you display icons in a fancy and colore way. Box sizes can be controled with css classes. You can add a colored border around the box by adding the is-bordered class to the h-icon element. See code for more details about usage.
<div class="h-icon is-medium is-primary is-bordered">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-info is-bordered">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-success is-bordered">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-warning is-bordered">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-danger is-bordered">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-purple is-bordered">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-blue is-bordered">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-yellow is-bordered">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-orange is-bordered">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-green is-bordered">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-red is-bordered">
<i class="lnil lnil-vector-pen"></i>
</div>
Rounded Box
Huro icon boxes let you display icons in a fancy and colore way. Box sizes can be controled with css classes. You can make the box rounded by adding the is-rounded class to the h-icon element. See code for more details about usage.
<div class="h-icon is-medium is-primary is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-info is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-success is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-warning is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-danger is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-purple is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-blue is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-yellow is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-orange is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-green is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-red is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
Rounded Border
Huro icon boxes let you display icons in a fancy and colore way. Box sizes can be controled with css classes. You can add a colored border around the box by adding the is-bordered class to the h-icon element. See code for more details about usage.
<div class="h-icon is-medium is-primary is-bordered is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-info is-bordered is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-success is-bordered is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-warning is-bordered is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-danger is-bordered is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-purple is-bordered is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-blue is-bordered is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-yellow is-bordered is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-orange is-bordered is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-green is-bordered is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
<div class="h-icon is-medium is-red is-bordered is-rounded">
<i class="lnil lnil-vector-pen"></i>
</div>
Feather Icons
Huro icon boxes work also very well with Feather Icons icon set. Use the same markup and just replace the existing icons with some from Feather Icons.
<div class="h-icon is-medium is-primary is-rounded">
<i data-feather="award"></i>
</div>
<div class="h-icon is-medium is-info is-rounded">
<i data-feather="chrome"></i>
</div>
<div class="h-icon is-medium is-success is-rounded">
<i data-feather="clock"></i>
</div>
<div class="h-icon is-medium is-warning is-rounded">
<i data-feather="coffee"></i>
</div>
<div class="h-icon is-medium is-danger is-rounded">
<i data-feather="home"></i>
</div>
<div class="h-icon is-medium is-purple is-rounded">
<i data-feather="lock"></i>
</div>
<div class="h-icon is-medium is-yellow is-rounded">
<i data-feather="moon"></i>
</div>
<div class="h-icon is-medium is-orange is-rounded">
<i data-feather="phone"></i>
</div>
<div class="h-icon is-medium is-green is-rounded">
<i data-feather="paperclip"></i>
</div>
<div class="h-icon is-medium is-red is-rounded">
<i data-feather="smile"></i>
</div>
<div class="h-icon is-medium is-blue is-rounded">
<i data-feather="shield"></i>
</div>
Font Awesome
Huro icon boxes work also very well with Font Awesome icon set. Use the same markup and just replace the existing icons with some from Font Awesome.
<div class="h-icon is-medium is-primary is-rounded">
<i class="fas fa-atom"></i>
</div>
<div class="h-icon is-medium is-info is-rounded">
<i class="fas fa-birthday-cake"></i>
</div>
<div class="h-icon is-medium is-success is-rounded">
<i class="fas fa-leaf"></i>
</div>
<div class="h-icon is-medium is-warning is-rounded">
<i class="fas fa-bolt"></i>
</div>
<div class="h-icon is-medium is-danger is-rounded">
<i class="fas fa-ankh"></i>
</div>
<div class="h-icon is-medium is-purple is-rounded">
<i class="fas fa-bell"></i>
</div>
<div class="h-icon is-medium is-yellow is-rounded">
<i class="fab fa-bitcoin"></i>
</div>
<div class="h-icon is-medium is-orange is-rounded">
<i class="fas fa-bowling-ball"></i>
</div>
<div class="h-icon is-medium is-green is-rounded">
<i class="fas fa-fan"></i>
</div>
<div class="h-icon is-medium is-red is-rounded">
<i class="fas fa-envelope-open"></i>
</div>
<div class="h-icon is-medium is-blue is-rounded">
<i class="fas fa-briefcase-medical"></i>
</div>