Display
Icon
Svg with a 1.5 stroke in the text color, in three sizes.
Example
<svg class="u-i u-i--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<svg class="u-i u-i--lg" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>Installation
Icon ships in the full package, in unslop.css:
curl -fsSL unslop.leallabs.dev/i | shNo build It's just CSS: with unslop.css on the page, the classes already work.
Classes and variants
| Class | What it does |
|---|---|
u-i | 18px, no fill, stroke in currentColor. |
u-i--sm | 16px. |
u-i--lg | 22px. |
Accessibility and keyboard
State and roles
| Where | Attribute | What it says |
|---|---|---|
aria-hidden="true" | on the svg | Icons are decoration. The name goes in the text or the button's aria-label. |
The system's own chevron, arrow, check, search and other icons come from Unslop.icon(name), used by the JS components.