svg.icon {
    display: inline-block;
    fill: currentColor;
    pointer-events: none;
    stroke: currentColor;
    stroke-width: 0;
    vertical-align: middle;
}
svg.icon--12,
svg.icon--12-fit {
    height: 12px;
    width: 12px;
}
svg.icon--16,
svg.icon--16-fit {
    height: 16px;
    width: 16px;
}
svg.icon--18,
svg.icon--18-fit {
    height: 18px;
    width: 18px;
}
svg.icon--20,
svg.icon--20-fit {
    height: 20px;
    width: 20px;
}
svg.icon--24,
svg.icon--24-fit {
    height: 24px;
    width: 24px;
}
svg.icon--30,
svg.icon--30-fit {
    height: 30px;
    width: 30px;
}
svg.icon--32,
svg.icon--32-fit {
    height: 32px;
    width: 32px;
}
svg.icon--40,
svg.icon--40-fit {
    height: 40px;
    width: 40px;
}
svg.icon--48,
svg.icon--48-fit {
    height: 48px;
    width: 48px;
}
svg.icon--64,
svg.icon--64-fit {
    height: 32px;
    width: 64px;
}
svg.icon--12-colored {
    height: 12px;
    width: fit-content;
}
svg.icon--16-colored {
    height: 16px;
    width: fit-content;
}
svg.icon--18-colored {
    height: 18px;
    width: fit-content;
}
svg.icon--20-colored {
    height: 20px;
    width: fit-content;
}
svg.icon--24-colored {
    height: 24px;
    width: fit-content;
}
svg.icon--30-colored {
    height: 30px;
    width: fit-content;
}
svg.icon--32-colored {
    height: 32px;
    width: fit-content;
}
svg.icon--48-colored {
    height: 48px;
    width: fit-content;
}
svg.icon--64-colored {
    height: 64px;
    width: fit-content;
}
svg.icon--disabled {
    filter: var(--color-media-disabled-filter);
}
svg.icon--attention-filled {
    color: var(--color-foreground-attention);
}
svg.icon--confirmation-filled {
    color: var(--color-foreground-success);
}
svg.icon--information-filled {
    color: var(--color-foreground-accent);
}