Icons

IconClassDescription
monster-icon-primary-1-infoInfo icon
monster-icon-primary-1-positivPositiv icon
monster-icon-primary-1-negativNegativ icon
monster-icon-primary-1-warningWarning icon
monster-icon-primary-1-neutralNeutral icon
monster-icon-primary-1-questionQuestion icon
monster-icon-primary-1-plusPlus icon
monster-icon-primary-1-dashDash icon
monster-icon-primary-1-gearGear icon
monster-icon-primary-1-homeHome icon
monster-icon-primary-1-counterclockwiseCounterclockwise icon
monster-icon-secondary-1-infoInfo icon
monster-icon-secondary-1-positivPositiv icon
monster-icon-secondary-1-negativNegativ icon
monster-icon-secondary-1-warningWarning icon
monster-icon-secondary-1-neutralNeutral icon
monster-icon-secondary-1-questionQuestion icon
monster-icon-secondary-1-plusPlus icon
monster-icon-secondary-1-dashDash icon
monster-icon-secondary-1-gearGear icon
monster-icon-secondary-1-homeHome icon
monster-icon-secondary-1-counterclockwiseCounterclockwise icon
monster-icon-tertiary-1-infoInfo icon
monster-icon-tertiary-1-positivPositiv icon
monster-icon-tertiary-1-negativNegativ icon
monster-icon-tertiary-1-warningWarning icon
monster-icon-tertiary-1-neutralNeutral icon
monster-icon-tertiary-1-questionQuestion icon
monster-icon-tertiary-1-plusPlus icon
monster-icon-tertiary-1-dashDash icon
monster-icon-tertiary-1-gearGear icon
monster-icon-tertiary-1-homeHome icon
monster-icon-tertiary-1-counterclockwiseCounterclockwise icon
monster-icon-success-1Success icon
monster-icon-success-2Success icon
monster-icon-success-3Success icon
monster-icon-success-4Success icon
monster-icon-warning-1Warning icon
monster-icon-warning-2Warning icon
monster-icon-warning-3Warning icon
monster-icon-warning-4Warning icon
monster-icon-error-1Error icon
monster-icon-error-2Error icon
monster-icon-error-3Error icon
monster-icon-error-4Error icon

Usage

This is an <span class="monster-icon-primary-1-info"></span>-Icon.

Create own icon with mixin

@import "@schukai/monster/source/components/style/mixin/icon.pcss";

@mixin icon my-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' " +
        "width='16' height='16' fill='currentColor' class='bi bi-dash-circle' " +
        "viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0" +
        "1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4 8a.5.5 0 0 1 " +
        ".5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}