.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.icon--arrow-right {
  -webkit-mask-image: url('../img/icons/arrow-right.webp');
          mask-image: url('../img/icons/arrow-right.webp');
}
.icon--bell {
  -webkit-mask-image: url('../img/icons/bell.webp');
          mask-image: url('../img/icons/bell.webp');
}
.icon--briefcase {
  -webkit-mask-image: url('../img/icons/briefcase.webp');
          mask-image: url('../img/icons/briefcase.webp');
}
.icon--calendar {
  -webkit-mask-image: url('../img/icons/calendar.webp');
          mask-image: url('../img/icons/calendar.webp');
}
.icon--chart {
  -webkit-mask-image: url('../img/icons/chart.webp');
          mask-image: url('../img/icons/chart.webp');
}
.icon--check-badge {
  -webkit-mask-image: url('../img/icons/check-badge.webp');
          mask-image: url('../img/icons/check-badge.webp');
}
.icon--cloud {
  -webkit-mask-image: url('../img/icons/cloud.webp');
          mask-image: url('../img/icons/cloud.webp');
}
.icon--form-alert {
  -webkit-mask-image: url('../img/icons/form-alert.webp');
          mask-image: url('../img/icons/form-alert.webp');
}
.icon--form-check {
  -webkit-mask-image: url('../img/icons/form-check.webp');
          mask-image: url('../img/icons/form-check.webp');
}
.icon--linkedin {
  -webkit-mask-image: url('../img/icons/linkedin.webp');
          mask-image: url('../img/icons/linkedin.webp');
}
.icon--mail {
  -webkit-mask-image: url('../img/icons/mail.webp');
          mask-image: url('../img/icons/mail.webp');
}
.icon--map-pin {
  -webkit-mask-image: url('../img/icons/map-pin.webp');
          mask-image: url('../img/icons/map-pin.webp');
}
.icon--monitor {
  -webkit-mask-image: url('../img/icons/monitor.webp');
          mask-image: url('../img/icons/monitor.webp');
}
.icon--phone {
  -webkit-mask-image: url('../img/icons/phone.webp');
          mask-image: url('../img/icons/phone.webp');
}
.icon--plug {
  -webkit-mask-image: url('../img/icons/plug.webp');
          mask-image: url('../img/icons/plug.webp');
}
.icon--receipt {
  -webkit-mask-image: url('../img/icons/receipt.webp');
          mask-image: url('../img/icons/receipt.webp');
}
.icon--search {
  -webkit-mask-image: url('../img/icons/search.webp');
          mask-image: url('../img/icons/search.webp');
}
.icon--settings {
  -webkit-mask-image: url('../img/icons/settings.webp');
          mask-image: url('../img/icons/settings.webp');
}
.icon--shield {
  -webkit-mask-image: url('../img/icons/shield.webp');
          mask-image: url('../img/icons/shield.webp');
}
.icon--users {
  -webkit-mask-image: url('../img/icons/users.webp');
          mask-image: url('../img/icons/users.webp');
}
.icon--x {
  -webkit-mask-image: url('../img/icons/x.webp');
          mask-image: url('../img/icons/x.webp');
}
.icon--youtube {
  -webkit-mask-image: url('../img/icons/youtube.webp');
          mask-image: url('../img/icons/youtube.webp');
}
.icon--zap {
  -webkit-mask-image: url('../img/icons/zap.webp');
          mask-image: url('../img/icons/zap.webp');
}