---
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
$include-html-icon-bar-classes: $include-html-classes
// 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}}
***
## Semantic Markup with Sass
### Basic
You can use the `icon-bar()` mixin to create your own icon-bar, like so:
{{#markdown}}
```scss
.my-custom-class {
@include icon-bar();
}
```
{{/markdown}}
{{#markdown}}
```html
```
{{/markdown}}
### Advanced
You can further customize your icon bar using the provided options in the `icon bar` mixin:
#### SCSS
{{#markdown}}
```scss
.my-custom-class {
@include icon-bar(
// Set the background color of the icon bar. Default: $icon-bar-bg.
$bar-bg: $icon-bar-bg,
// Set the font color of the icon bar. Default: $icon-bar-font-color.
$bar-font-color: $icon-bar-font-color,
// Set the hover background color for the icon bar. Default: $icon-bar-hover-color.
$bar-hover-color,
// Set the color of the icons for the icon bar. Default: $icon-bar-icon-color
$bar-icon-color: $icon-bar-icon-color,
// Set the background of the color when the icon bar is clicked or tapped on (or items within the icon bar). Default: $icon-bar-active-color.
$bar-active-color,
// Set the padding for icon bar. Default: $icon-bar-item-padding.
$padding,
// Set the font-size of the icon bar. Default: $icon-bar-font-size.
$font-size,
// Set the size of the icons within the icon bar. Default: $icon-bar-icon-size.
$icon-size,
// Set the width of images within the icon bar. Default: $icon-bar-image-width
$image-width,
// Set the height of images within the icon bar. Default: $icon-bar-image-height
$image-height,
// Assign whether or not base styles usually associated with the icon bar to appear the way it usually does should be included. Default: true.
$base-style: true
);
}
```
{{/markdown}}
#### HTML
```html
Items for the Icon Bar goes here.
```
##### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/icon-bar";
```