### Select Language

### Activity

- Team
- Projects
- Schedule

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

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

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