---
title: Icon Bar
---
***
{{> examples_icon_bar_rendered}}
***
Basic
You can create an Icon Bar using minimal markup. Specifying the number of items `one-up` through `six-up` will ensure the items are evenly spaced.
HTML
{{> examples_icon_bar}}
Rendered HTML
{{> examples_icon_bar_rendered}}
***
Vertical Icon Bar
It's easy. Just add a class of `.vertical` to make the Icon Bar stack up.
HTML
{{> examples_icon_bar_vert}}
Rendered HTML
{{> examples_icon_bar_vert_rendered}}
***
### Other Options
The default orientation for the labels are on the bottom. By adding a class of `.label-right` you can have the label on the right and icon on the left.
***
## Customize With Sass
Icon Bar can be easily customized using our provided Sass variables.
SCSS
{{#markdown}}
```scss
// We use these to style the icon-bar and items
$icon-bar-bg: #333
$icon-bar-font-color: #fff
$icon-bar-font-size: 1rem
$icon-bar-hover-color: $primary-color
$icon-bar-icon-color: #fff
$icon-bar-icon-size: 1.875rem
$icon-bar-image-width: 1.875rem
$icon-bar-image-height: 1.875rem
$icon-bar-active-color: $primary-color
$icon-bar-item-padding: 1.25rem
```
{{/markdown}}
##### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/icon-bar";
```