.icon {
  display: inline-block;
  width: var(--icon-size, 16px);
  height: var(--icon-size, 16px);
  background-color: currentColor;
  mask: var(--icon) no-repeat center / contain;
  -webkit-mask: var(--icon) no-repeat center / contain;
  flex: 0 0 auto;
}

.icon-plus {
  --icon: url("../icons/plus.svg");
}

.icon-close {
  --icon: url("../icons/close.svg");
}

.icon-phone {
  --icon: url("../icons/phone.svg");
}

.icon-video {
  --icon: url("../icons/video.svg");
}

.icon-mic {
  --icon: url("../icons/mic.svg");
}

.icon-camera {
  --icon: url("../icons/camera.svg");
}

.icon-screen {
  --icon: url("../icons/screen.svg");
}

.icon-headset {
  --icon: url("../icons/headset.svg");
}

.icon-gear {
  --icon: url("../icons/gear.svg");
}

.icon-expand {
  --icon: url("../icons/expand.svg");
}

.icon-hangup {
  --icon: url("../icons/hangup.svg");
}

.icon-reply {
  --icon: url("../icons/reply.svg");
}

.icon-edit {
  --icon: url("../icons/edit.svg");
}

.icon-trash {
  --icon: url("../icons/trash.svg");
}

.icon-check {
  --icon: url("../icons/check.svg");
}

.icon-check-double {
  --icon: url("../icons/check-double.svg");
}

.icon-copy {
  --icon: url("../icons/copy.svg");
}

.icon-download {
  --icon: url("../icons/download.svg");
}

.icon-search {
  --icon: url("../icons/search.svg");
}

.icon-play {
  --icon: url("../icons/play.svg");
}

.icon-pause {
  --icon: url("../icons/pause.svg");
}

.icon-mixer {
  --icon: url("../icons/mixer.svg");
}

.icon-more {
  --icon: url("../icons/more.svg");
}

.icon-info {
  --icon: url("../icons/info.svg");
}

.icon-chevron-down {
  --icon: url("../icons/chevron-down.svg");
}

.icon-dots-horizontal {
  --icon: url("../icons/dots-horizontal.svg");
}

.icon-user-plus {
  --icon: url("../icons/user-plus.svg");
}

.icon-user-minus {
  --icon: url("../icons/user-minus.svg");
}

.icon-passkey {
  --icon: url("../icons/passkey.svg");
}

.icon-shield-lock {
  --icon: url("../icons/shield-lock.svg");
}

.icon-key-change {
  --icon: url("../icons/key-change.svg");
}

.icon-devices {
  --icon: url("../icons/devices.svg");
}

.icon-palette {
  --icon: url("../icons/palette.svg");
}

.icon-sun {
  --icon: url("../icons/sun.svg");
}

.icon-moon {
  --icon: url("../icons/moon.svg");
}

.icon-star {
  --icon: url("../icons/star.svg");
}

.icon-star-outline {
  --icon: url("../icons/star-outline.svg");
}

.icon-crown {
  --icon: url("../icons/crown.svg");
}

.icon-mobile {
  --icon: url("../icons/mobile.svg");
}

.icon-bell-off {
  --icon: url("../icons/bell-off.svg");
}

.icon-desktop {
  --icon: url("../icons/desktop.svg");
}

.icon-list {
  --icon: url("../icons/list.svg");
}

.icon-button,
.attach-button,
.modal-close,
.call-control,
.message-action,
.call-icon {
  --icon-size: 16px;
}

.call-control {
  --icon-size: 18px;
}

.attach-button {
  --icon-size: 18px;
}

.message-action {
  --icon-size: 12px;
}

.modal-close {
  --icon-size: 14px;
  display: grid;
  place-items: center;
}

.call-icon {
  --icon-size: 16px;
}

.call-icons .icon {
  --icon-size: 12px;
}