.icon {
    display: inline-block;
    fill: var(--icon-primary);
    stroke: var(--icon-primary);
}

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

.icon.sm2 {
    width: 20px;
    height: 20px;
}

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

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

.icon.lg2 {
    width: 40px;
    height: 40px;
}

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

.icon.xxxl {
    width: 120px;
    height: 120px;
}

.icon.primary {
    fill: var(--icon-primary) !important;
    stroke: var(--icon-primary) !important;
}

.icon.secondary {
    fill: var(--icon-secondary) !important;
    stroke: var(--icon-secondary) !important;
}

.icon.tertiary {
    fill: var(--tertiary-color) !important;
    stroke: var(--tertiary-color) !important;
}

.icon.accent {
    fill: var(--icon-accent) !important;
    stroke: var(--icon-accent) !important;
}

.icon.error {
    fill: var(--icon-error) !important;
    stroke: var(--icon-error) !important;
}

.icon.disabled {
    fill: var(--icon-disabled) !important;
    stroke: var(--icon-disabled) !important;
}

.icon.white {
    fill: var(--bs-white) !important;
    stroke: var(--bs-white) !important;
}