.pixel-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    /* background-color provides the icon color via CSS mask */
    background-color: currentColor;
    /* Override any Bootstrap bg-* or decorative backgrounds */
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    -webkit-mask-image: var(--pixel-icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--pixel-icon-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
    /* Ensure no padding/margin from other element styles */
    padding: 0;
}

.pixel-icon-2x {
    width: 2em;
    height: 2em;
}

.pixel-icon-3x {
    width: 3em;
    height: 3em;
}

.pixel-icon-spin {
    animation: pixel-icon-spin 1s linear infinite;
}

@keyframes pixel-icon-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}