.icon {
    mask-repeat: no-repeat;
    mask-size: contain;
    display: flex;
    background-color: currentColor;
    min-width: 24px;
    min-height: 24px;
    background-size: cover;
    opacity: 0.5;
    transition: opacity 0.3s;
}

    .icon:hover {
        opacity: 0.9;
        transition: opacity 0.3s;
    }

.icon-right {
    left: 6px;
}

.icon-blue {
    color: blue;
}

.icon-mini {
    min-width: 18px;
    min-height: 18px;
    max-height: 18px;
    max-width: 18px;
}

.icon-45 {
    transform: rotate(45deg);
    min-width: 28px;
    min-height: 28px;
}

.icon-paperclip {
    mask-image: url("../img/svg/paperclip.svg");
}

.icon-mic {
    mask-image: url("../img/svg/mic.svg")
}

.icon-send {
    mask-image: url("../img/svg/send.svg")
}

.icon-x {
    mask-image: url("../img/svg/x.svg")
}

.icon-record {
    mask-image: url("../img/svg/record-circle.svg")
}

.icon-emoji {
    mask-image: url("../img/svg/emoji-smile.svg")
}

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

.icon-phone {
    mask-image: url("../img/svg/telephone.svg");
}

.icon-camera {
    mask-image: url("../img/svg/camera-video.svg");
}

.icon-gear {
    mask-image: url("../img/svg/gear.svg");
}

.icon-person-plus {
    mask-image: url("../img/svg/person-plus.svg");
}

.icon-at {
    mask-image: url("../img/svg/at.svg");
}

.icon-key {
    mask-image: url("../img/svg/key.svg");
}

.icon-check {
    mask-image: url("../img/svg/check.svg");
}

.icon-check-all {
    mask-image: url("../img/svg/check-all.svg");
}

.icon-clock {
    mask-image: url("../img/svg/clock.svg");
}