[class*="icon-"] {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: $fhi-core-space-4;
    width: $fhi-core-space-4;
}

// generate classes with prefix .icon- using the $icons map, eg. .icon-chevron-expand
.icon {
    @include icon-classes-generator(); // (mixin)
}

// icon sizes
.icon-sm {
    height: $fhi-core-px * 16;
    width: $fhi-core-px * 16;
}

.icon-md {
    height: $fhi-core-px * 24;
    width: $fhi-core-px * 24;
}

.icon-lg {
    height: $fhi-core-px * 32;
    width: $fhi-core-px * 32;
}

.icon-xl {
    height: $fhi-core-px * 40;
    width: $fhi-core-px * 40;
}

// color filters
.icon-white {
    filter: brightness(1000%); // sic
}

.icon-red {
    filter: $fhi-core-red-filter;
}

.icon-green {
    filter: $fhi-core-green-filter;
}