.icon-white {
    filter: invert(100%) sepia(0%) saturate(7139%) hue-rotate(312deg) brightness(120%) contrast(96%);
}

.icon-off-white {
    filter: invert(100%) sepia(0%) saturate(7139%) hue-rotate(312deg) brightness(120%) contrast(96%);
    opacity: .55;
}

.icon-gray {
    filter: invert(98%) sepia(0%) saturate(4903%) hue-rotate(179deg) brightness(66%) contrast(105%);
}

.icon-black {
    filter: invert(0%) sepia(10%) saturate(989%) hue-rotate(334deg) brightness(98%) contrast(73%);
}

.icon-purple {
    filter: invert(9%) sepia(64%) saturate(6618%) hue-rotate(266deg) brightness(119%) contrast(95%);
}

.icon-off-purple {
    filter: invert(9%) sepia(64%) saturate(6618%) hue-rotate(266deg) brightness(119%) contrast(95%);
    opacity: .55;
}

.icon-red {
    filter: invert(61%) sepia(60%) saturate(7472%) hue-rotate(338deg) brightness(94%) contrast(103%);
}

.icon-orange {
    filter: invert(61%) sepia(56%) saturate(5944%) hue-rotate(360deg) brightness(100%) contrast(103%);
}

.icon-green {
    filter: invert(53%) sepia(92%) saturate(323%) hue-rotate(73deg) brightness(94%) contrast(83%);
}

.icon-red {
    filter: invert(61%) sepia(60%) saturate(7472%) hue-rotate(338deg) brightness(94%) contrast(103%);
}