Icon

Width Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<aparte-icon name="check"></aparte-icon>

The icon. Every glyph the library draws carries this class.

The glyph does NOT carry its own size. It used to — width="14", width="16", width="20" baked into the markup — and that is precisely what kept the same drawing from being shared: an ✕ sized for a remove button could not also be the ✕ of a tool call, so the library ended up with three of them, on three grids, at three stroke widths. Size is a property of the PLACE an icon sits in, so it is declared by the container and inherited down.

--aparte-icon-size is therefore the one knob, and it inherits: set it on any ancestor and every glyph below follows. A container with a rule of its own (.aparte-action-button svg, .aparte-tool-icon svg) still wins on specificity — those already expressed size in CSS and are left alone.

Classes

.aparte-icon · .aparte-icon--lg · .aparte-icon--sm · .aparte-icon--xl · .aparte-icon-spin

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.