.icon,
.icon svg{
    width: 24px;
    height: 24px;
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: var(--transition);
}
.icon.lg,
.icon.lg svg{
    width: 28px;
    height: 28px;
}
.icon.xl,
.icon.xl svg{
    width: 32px;
    height: 32px;
}
.icon.sm,
.icon.sm svg{
    width: 20px;
    height: 20px;
}
.icon.xs,
.icon.xs svg{
    width: 16px;
    height: 16px;
}

.iconMenuGrey {
    background-image: url(../image/icon-menu-grey.svg);
}
.iconSearch{
    background-image: url(../image/icon-search.svg);
}
.iconSearchWhite{
    background-image: url(../image/icon-search-white.svg);
}
.iconSearchPrimary{
    background-image: url(../image/icon-search-primary.svg);
}
.iconHomeWhite{
    background-image: url(../image/icon-home-white.svg);
}
.iconLogin{
    background-image: url(../image/icon-login.svg);
}
.iconLogout{
    background-image: url(../image/icon-logout.svg);
}
.iconOutlinkWhite{
    background-image: url(../image/icon-outlink-white.svg);
}
.iconPhonePrimary{
    background-image: url(../image/icon-phone-primary.svg);
}
.iconArrowRightWhite{
    background-image: url(../image/icon-arrow-right-white.svg);
}
.iconCalendarGrey{
    background-image: url(../image/icon-calendar-grey.svg);
}
.iconMenuBookGrey{
    background-image: url(../image/icon-menu-book-grey.svg);
}
.iconBookGrey{
    background-image: url(../image/icon-book-grey.svg);
}
.iconPauseWhite{
    background-image: url(../image/icon-pause-white.svg);
}
.iconPlayWhite{
    background-image: url(../image/icon-play-white.svg);
}
.iconChevronBoldRightWhite{
    background-image: url(../image/icon-chevron-bold-right-white.svg);
}
.iconChevronBoldLeftWhite{
    background-image: url(../image/icon-chevron-bold-left-white.svg);
}
.iconChevronRightWhite{
    background-image: url(../image/icon-chevron-right-white.svg);
}
.iconChevronLeftWhite{
    background-image: url(../image/icon-chevron-left-white.svg);
}
.iconChevronRightPrimary{
    background-image: url(../image/icon-chevron-right-primary.svg);
}
.iconChevronLeftPrimary{
    background-image: url(../image/icon-chevron-left-primary.svg);
}
.iconChevronRightGreen{
    background-image: url(../image/icon-chevron-right-green.svg);
}
.iconChevronLeftGreen{
    background-image: url(../image/icon-chevron-left-green.svg);
}
.iconChevronDownGrey{
    background-image: url(../image/icon-chevron-down-grey.svg);
}
.iconChevronLeftGrey{
    background-image: url(../image/icon-chevron-left-grey.svg);
}
.iconChevronRightGrey{
    background-image: url(../image/icon-chevron-right-grey.svg);
}
.iconPlusWhite{
    background-image: url(../image/icon-plus-white.svg);
}
.iconPlusCirclePrimary{
    background-image: url(../image/icon-plus-circle-primary.svg);
}
.iconResetGrey{
    background-image: url(../image/icon-reset-grey.svg);
}
.iconReset2Grey{
    background-image: url(../image/icon-reset2-grey.svg);
}
.iconScaleGrey{
    background-image: url(../image/icon-scale-grey.svg);
}
.iconSendWhite{
    background-image: url(../image/icon-send-white.svg);
}
.iconAi{
    background-image: url(../image/icon-ai.svg);
}
.iconCloseGrey{
    background-image: url(../image/icon-close-grey.svg);
}
.iconDoubleChevronRightGrey{
    background-image: url(../image/icon-double-chevron-right-grey.svg);
}
.iconDashboardGreen{
    background-image: url(../image/icon-dashboard-green.svg);
}
.iconQ1{
    background-image: url(../image/chat-q-icon1.svg);
}
.iconQ2{
    background-image: url(../image/chat-q-icon2.svg);
}
.iconQ3{
    background-image: url(../image/chat-q-icon3.svg);
}
.iconQ4{
    background-image: url(../image/chat-q-icon4.svg);
}
.iconChatEdu1{
    background-image: url(../image/chat-edu-icon1.svg);
}
.iconChatEdu2{
    background-image: url(../image/chat-edu-icon2.svg);
}
.iconChatEdu3{
    background-image: url(../image/chat-edu-icon3.svg);
}
.iconSettingGrey{
    background-image: url(../image/icon-setting-grey.svg);
}
.iconThumbUp{
    background-image: url(../image/icon-thumb-up.svg);
}
.iconThumbDown{
    background-image: url(../image/icon-thumb-down.svg);
}
.thumbBtn.active .iconThumbUp{
    background-image: url(../image/icon-thumb-up-active.svg);
}
.thumbBtn.active .iconThumbDown{
    background-image: url(../image/icon-thumb-down-active.svg);
}
@media screen and (min-width: 1201px){
    .thumbBtn:hover .iconThumbUp{
        background-image: url(../image/icon-thumb-up-active.svg);
    }
    .thumbBtn:hover .iconThumbDown{
        background-image: url(../image/icon-thumb-down-active.svg);
    }
}