Skip to content

CSS: icon

.instui-icon — The icon system: .instui-icon sizing plus the shared -icon-<name> painter that masks a glyph (in currentColor) before any element.

Source: icon.css

Accessibility

The glyph is decorative, so mark it aria-hidden="true"; give it a role or label only when the icon conveys meaning on its own.

Usage

css
@import "@pantoken/components/components.css";

Examples

html
<span class="instui-icon -icon-megaphone" aria-hidden="true"></span>

Pseudo-elements

Pseudo-elementDescription
::beforeThe glyph itself: a 1em box masked from --pantoken-glyph and filled with currentColor.

Tokens consumed

TokenTypeValue
--pantoken-glyph<url>