# icon
The markup of every demo on , extracted from that
page. It is generated, so it cannot disagree with what the page renders.
Load the framework from the origin and read first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.
## size
One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.
```html
```
## size
Varies: the `icon-*` ladder over 5 rungs, `xs` to `xl`.
```html
```
## rotation
Varies: 8 specimens.
```html
```
## color
The same specimen repeated on each ground Kuiper paints. The point is what you do NOT write: the ink, the border and the placeholder follow the ground through the `--foreground-*` tokens, so no color class appears on the specimen itself.
Varies: `text-*` over 12 color roles.
Shown 2 times on the page, on different grounds. The markup is
identical: the ground is a class on the panel around it.
```html
```
## with text
The icon beside running text, which is the case the cap-height correction exists for: `vertical-align: calc((0.711em - box) / 2)` puts the box on the band an eye actually reads, not on the x-height that `middle` targets.
Varies: the `text-*` ladder over 5 rungs, `xs` to `xl`.
```html
```
## with text
Varies: 6 specimens.
```html
```
## with text
Varies: the `hero-*` ladder over 5 rungs, `xs` to `xl`.
```html
```
## in button
The icon inside a button. This is the one context where the correction is not used at all: a button's icon is a FLEX ITEM, where `vertical-align` is ignored by specification and the flex centring already lands within a pixel of the cap band.
Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.
```html
```
## in button
Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.
```html
```
## in button
Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.
```html
```
## in button
Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.
```html
```
## in button
Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.
```html
```
## in button
Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.
```html
```
## in button
Varies: the `button-*` ladder over 5 rungs, `xs` to `xl`.
```html
```