.icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  font-style: normal;
  position: relative;
  display: inline-block;

  &.icon-back {
    background-image: data-uri('../icon/back.svg');
  }

  &.icon-forward {
    background-image: data-uri('../icon/forward.svg');
  }

  &.icon-bars {
    background-image: data-uri('../icon/bars.svg');
  }

  &.icon-next {
    background-image: data-uri('../icon/next.svg');
  }

  &.icon-prev {
    background-image: data-uri('../icon/prev.svg');
  }

  &.icon-plus {
    width: 24px;
    height: 24px;
    font-size: 0;
    background-image: data-uri('../icon/plus.svg');
  }

}