.icon {
    --icon-size: 1em;
    width: var(--icon-size);
    height: var(--icon-size);
    display: inline-block; 
    vertical-align: middle; 
    flex-shrink: 0; 
    object-fit: contain; 
}

.icon-xs { width: 12px; height: 12px; }

.icon-sm { width: 16px; height: 16px; }

.icon-md { width: 24px; height: 24px; }

.icon-lg { width: 32px; height: 32px; }

.icon-xl { width: 48px; height: 48px; }

.icon-full { width: 100%; height: 100%; } 

.icon-auto { width: auto; height: auto; } 

.icon-primary {
    filter: invert(64%) sepia(95%) saturate(2468%) hue-rotate(343deg) brightness(98%) contrast(90%);
}

.icon-success {
    filter: invert(61%) sepia(64%) saturate(3661%) hue-rotate(97deg) brightness(93%) contrast(80%);
}

.icon-error {
    filter: invert(35%) sepia(75%) saturate(5823%) hue-rotate(356deg) brightness(102%) contrast(92%);
}

.icon-secondary {
    filter: invert(50%) sepia(11%) saturate(410%) hue-rotate(179deg) brightness(95%) contrast(81%);
}

.icon-white {
    filter: brightness(0) invert(1);
}