Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

Components

Icon Box

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>