@layer {
  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    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.icon-arrow-left {
    mask-image: url("/assets/icons/arrow-left.svg");
    -webkit-mask-image: url("/assets/icons/arrow-left.svg");
  }

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

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

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

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

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

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

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

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

  .icon.icon-video-play {
    mask-image: url("/assets/icons/video-play.svg");
    -webkit-mask-image: url("/assets/icons/video-play.svg");
  }

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