Icon
Base .icon class (1em × 1em, inherits currentColor for fill + stroke) plus sizes and modifiers.
Sizes
xs
sm
md
lg
xl
2xl
<svg class="icon icon--lg" viewBox="0 0 24 24">…</svg>Stroke variant
<svg class="icon icon--xl icon--stroke" viewBox="0 0 24 24">
<path d="…"/>
</svg>Spin (loader)
Loading…
<svg class="icon icon--xl icon--stroke icon--spin">…</svg>Inside a button
<button class="btn"><svg class="icon icon--sm icon--stroke">…</svg> Add</button>Modifiers
| Class | Effect |
|---|---|
.icon | Base. 1em × 1em, fill + stroke = currentColor, vertical-align −0.125em. |
.icon--xs / sm / md / lg / xl / 2xl | 0.75 / 0.875 / 1 / 1.25 / 1.5 / 2 em. |
.icon--stroke | fill: none; stroke-width: 1.5; round line cap/join. |
.icon--spin | Applies the spin keyframe. |