i {

    &[class^="sp-icon--"] {
        position: relative;

        &::after {
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            background-color: var(--sp-text-color);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-image: url(../images/icons/add.svg);
            mask-size: contain;
        }
    }

    &.sp-icon--add {

        &::after {
            mask-image: url(../images/icons/add.svg);
        }
    }

    &.sp-icon--more {

        &::after {
            mask-image: url(../images/icons/more.svg);
        }
    }

    &.sp-icon--arrow-left {

        &::after {
            mask-image: url(../images/icons/arrow-left.svg);
        }
    }

    &.sp-icon--arrow-right {

        &::after {
            mask-image: url(../images/icons/arrow-right.svg);
        }
    }

    &.sp-icon--arrow-play {

        &::after {
            mask-image: url(../images/icons/play.svg);
        }
    }

    &.sp-icon--arrow-pause {

        &::after {
            mask-image: url(../images/icons/pause.svg);
        }
    }

    &.sp-icon--arrow-mute {

        &::after {
            mask-image: url(../images/icons/volume-slash.svg);
        }
    }

    &.sp-icon--arrow-unmute {

        &::after {
            mask-image: url(../images/icons/volume-high.svg);
        }
    }

    &.sp-icon--image-edit {

        &::after {
            mask-image: url(../images/icons/image-edit.svg);
        }
    }

    &.sp-icon--video {

        &::after {
            mask-image: url(../images/icons/video-play.svg);
        }
    }

    &.sp-icon--text {

        &::after {
            mask-image: url(../images/icons/text.svg);
        }
    }

    &.sp-icon--trash {

        &::after {
            mask-image: url(../images/icons/trash.svg);
        }
    }

    &.sp-icon--link {

        &::after {
            mask-image: url(../images/icons/link.svg);
        }
    }

    &.sp-icon--arrow-up {

        &::after {
            mask-image: url(../images/icons/arrow-up.svg);
        }
    }

    &.sp-icon--arrow-down {

        &::after {
            mask-image: url(../images/icons/arrow-down.svg);
        }
    }
}