.icon {
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  text-align: left;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  // all icons default to smallest size for better browser compatibility re background-size.
  width: 16px;
  height: 16px;
}

.icon--24x24 {
  width: 24px;
  height: 24px;
}

.icon--32x32 {
  width: 32px;
  height: 32px;
}

.icon--box {
  border-radius: 2px;
  border: 4px solid rgba($colour-grey-light, 0.5);
  background-color: rgba($colour-grey-light, 0.5);
}

.icon--circle {
  border: 1px solid;
  border-radius: 50%;
  background-size: 50% auto;
}

.icon--circle-light {
  border-color: #fff;
}

.icon--circle-dark {
  border-color: $colour-grey-dark;
}