.kt-ui-icon-wrapper {
    display: inline-flex;
}

.kt-ui-icon {
    position: relative;
    width: var(--wc-icon-size);
    height: var(--wc-icon-size);
    mask: var(--wc-icon-image) center no-repeat;
    -webkit-mask: var(--wc-icon-image) center no-repeat;
    mask-size: var(--wc-icon-size);
    -webkit-mask-size: var(--wc-icon-size);
    background-color: var(--wc-icon-color);
}

.kt-ui-icon-xl {
    --wc-icon-size: var(--wc-icon-size-xl);
}

.kt-ui-icon-lg {
    --wc-icon-size: var(--wc-icon-size-lg);
}

.kt-ui-icon-md {
    --wc-icon-size: var(--wc-icon-size-md);
}

.kt-ui-icon-sm {
    --wc-icon-size: var(--wc-icon-size-sm);
}

.kt-ui-icon-xs {
    --wc-icon-size: var(--wc-icon-size-xs);
}