@mixin icon {

vertical-align: middle;
display: inline-block;
line-height: 1%; // Makes inline SVGs behave more like text characters
svg {
  // vertical-align: middle;
  overflow: visible;
  fill: none;
  stroke: none;
  .fill {
    fill: $colorBrand;
  }
  .stroke {
    stroke: $colorBrand;
    stroke-width: $borderWeight;
    stroke-linecap: $iconLinecap;
    stroke-miterlimit: 10;
  }
}
.icon-block & {
  display: block !important;
}

}

.icon {

@include icon();

} .icon-small .icon {

@include icon();
svg {
  height: $baseIconSize/2;
  width: $baseIconSize/2;
  .stroke {
    stroke-width: $borderWeight*2;
  }
}

} .icon-large .icon {

@include icon();
svg {
  height: $baseIconSize*2;
  width: $baseIconSize*2;
  .stroke {
    stroke-width: $borderWeight/2;
  }
}

}