.icon {
  display: block;
}

.icon-directory {
  .icon;
  background: url(/img/Directory.svg) no-repeat;
  width: 36px;
  height: 32px;
}

.icon-file {
  .icon;
  background: url(/img/File.svg) no-repeat;
  width: 30px;
  height: 36px;
}

.icon-plus {
  .icon;
  background: url(/img/Plus.svg) no-repeat;
  width: 24px;
  height: 24px;
}

.icon-view {
  .icon;
  background: url(/img/View.svg) no-repeat;
  width: 24px;
  height: 24px;
}

.icon-refresh {
  .icon;
  background: url(/img/Refresh.svg) no-repeat;
  width: 26px;
  height: 28px;
}

.icon-select {
  .icon;
  background: url(/img/Select.svg) no-repeat;
  width: 32px;
  height: 34px;
}

.icon-more {
  .icon;
  background: url(/img/More.svg) no-repeat;
  width: 6px;
  height: 24px;
}

.icon-search {
  .icon;
  background: url(/img/Search.svg) no-repeat;
  width: 19px;
  height: 27px;
}

.icon-cross {
  .icon-plus;
  transform: rotate(45deg);
  svg * {
    fill: white;
  }
}