.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}

.icon-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
    flex-shrink: 0;
    vertical-align: middle;
}

.icon-logo {
    --path: url('/assets/images/svg/logo.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-language {
    --path: url('/assets/images/svg/language.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-menu {
    --path: url('/assets/images/svg/menu.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-user {
    --path: url('/assets/images/svg/user.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-blog {
    --path: url('/assets/images/svg/blog.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-catalog {
    --path: url('/assets/images/svg/catalog.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-theme {
    --path: url('/assets/images/svg/theme.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-about-us {
    --path: url('/assets/images/svg/about_us.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-close {
    --path: url('/assets/images/svg/close.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-radio-select {
    --path: url('/assets/images/svg/radio_select.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-system-theme {
    --path: url('/assets/images/svg/system_theme.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-light-theme {
    --path: url('/assets/images/svg/light_theme.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-dark-theme {
    --path: url('/assets/images/svg/dark_theme.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-my-wishes {
    --path: url('/assets/images/svg/my_wishes.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-back-to-top {
    --path: url('/assets/images/svg/back_to_top.svg');
    -webkit-mask-image: var(--path);
    mask-image: var(--path);
}

.icon-flag-kr {
    --path: url('/assets/images/svg/flags/kr.svg');
    background-image: var(--path);
}

.icon-flag-pl {
    --path: url('/assets/images/svg/flags/pl.svg');
    background-image: var(--path);
}

.icon-flag-us {
    --path: url('/assets/images/svg/flags/us.svg');
    background-image: var(--path);
}

.icon-flag-gb {
    --path: url('/assets/images/svg/flags/gb.svg');
    background-image: var(--path);
}

.icon-flag-ua {
    --path: url('/assets/images/svg/flags/ua.svg');
    background-image: var(--path);
}