.mc-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    mask-repeat: no-repeat;
    background-color: var(--gray-600);

    &.icon-6px {
        width: 6px;
        height: 6px;
        mask-size: 6px 6px;
    }

    &.icon-8px {
        width: 8px;
        height: 8px;
        mask-size: 8px 8px;
    }

    &.icon-14px {
        width: 14px;
        height: 14px;
        mask-size: 14px 14px;
    }

    &.icon-16px {
        width: 16px;
        height: 16px;
        mask-size: 16px 16px;
    }

    &.icon-18px {
        width: 18px;
        height: 18px;
        mask-size: 18px 18px;
    }

    &.icon-20px {
        width: 20px;
        height: 20px;
        mask-size: 20px 20px;
    }

    &.icon-24px {
        width: 24px;
        height: 24px;
        mask-size: 24px 24px;
    }

    &.icon-28px {
        width: 28px;
        height: 28px;
        mask-size: 28px 28px;
    }

    &.icon-30px {
        width: 30px;
        height: 30px;
        mask-size: 30px 30px;
    }

    &.icon-32px {
        width: 32px;
        height: 32px;
        mask-size: 32px 32px;
    }

    &.icon-45px {
        width: 45px;
        height: 45px;
        mask-size: 45px 45px;
    }


    &.accomplishment-nav {
        mask-image: url("/static/icons/accomplishments_nav.svg");
    }
    &.accomplishment-outline {
        mask-image: url("/static/icons/accomplishments-outline.svg");
    }
    &.alert {
        mask-image: url("/static/icons/alert.svg");
    }
    &.arrow-circle-left {
        mask-image: url("/static/icons/arrow-circle-left.svg");
    }
    &.arrow-down {
        mask-image: url("/static/icons/arrow-down.svg");
    }
    &.arrow-right {
        mask-image: url("/static/icons/arrow-right.svg");
    }
    &.arrow-up {
        mask-image: url("/static/icons/arrow-up.svg");
    }
    &.certificate {
        mask-image: url("/static/icons/certificate.svg");
    }
    &.clock {
        mask-image: url("/static/icons/clock.svg");
    }
    &.course-nav {
        mask-image: url("/static/icons/courses_nav.svg");
    }
    &.course-outline {
        mask-image: url("/static/icons/course-outline.svg");
    }
    &.dot {
        mask-image: url("/static/icons/dot.svg");
    }
    &.dot-transparent {
        mask-image: url("/static/icons/dot-transparent.svg");
    }
    &.download {
        mask-image: url("/static/icons/download.svg");
    }
    &.listening {
        mask-image: url("/static/icons/listening.svg");
    }
    &.message {
        mask-image: url("/static/icons/message.svg");
    }
    &.microphone {
        mask-image: url("/static/icons/microphone.svg");
    }
    &.reading {
        mask-image: url("/static/icons/reading.svg");
    }
    &.review-nav {
        mask-image: url("/static/icons/review_nav.svg");
    }
    &.stats {
        mask-image: url("/static/icons/stats.svg");
    }
    &.subtitles {
        mask-image: url("/static/icons/subtitles.svg");
    }
    &.telescope {
        mask-image: url("/static/icons/telescope.svg");
    }
    &.video {
        mask-image: url("/static/icons/video.svg");
    }
    &.sun {
        mask-image: url("/static/icons/sun.svg");
    }
    &.moonsun {
        mask-image: url("/static/icons/moonsun.svg");
    }
    &.moon {
        mask-image: url("/static/icons/moon.svg");
    }
    &.calendar {
        mask-image: url("/static/icons/calendar.svg");
    }
    &.filter {
        mask-image: url("/static/icons/filter.svg");
    }
    &.checkmark {
        mask-image: url("/static/icons/checkmark.svg");
    }
}