.icon {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.icon--menu {
  mask-image: url("./menu.svg");
  -webkit-mask-image: url("./menu.svg");
}

.icon--close {
  mask-image: url("./x.svg");
  -webkit-mask-image: url("./x.svg");
}

.icon--chevron-left {
  mask-image: url("./chevron-left.svg");
  -webkit-mask-image: url("./chevron-left.svg");
}

.icon--chevron-right {
  mask-image: url("./chevron-right.svg");
  -webkit-mask-image: url("./chevron-right.svg");
}