# Icon

An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.

```ehtml Example
import { Icon } from "@elements/ui/icon";
import { Button } from "@elements/ui/button";

<Icon name="x" />
<Icon name="alert" label="Warning" />
<Button variant="secondary"><Icon name="mail" /> Email</Button>
```

## Parts

| Part | What it is |
|---|---|
| `.icon` | The `<svg>`: a 24 by 24 grid, 2px strokes in currentColor, width and height from size. Templates size icons inside them from --icon-size. |
| `iconMarkup(name, size, label, class)` | The same `<svg>` as a string, for code that builds HTML strings. |

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `name` | `IconName` | (required) | One of the names below. |
| `size` | `number` | `16` | Width and height in pixels. |
| `label` | `string` | `""` | Accessible name: the icon becomes an image (role=img, aria-label). Without one it is decorative (aria-hidden). |
| `class` | `string` | `""` | Extra classes on the `<svg>`. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-icon` | the name | .icon |

## Accessibility

- Decorative by default: aria-hidden="true" and focusable="false", so a button's name comes from its text or label, not from the icon.
- With label the icon is an image with that name.

## Names

`x`, `check`, `minus`, `plus`, `chevron-down`, `chevron-up`, `chevron-left`, `chevron-right`, `chevrons-up-down`, `arrow-left`, `arrow-right`, `search`, `circle`, `dot`, `more-horizontal`, `more-vertical`, `mail`, `trash`, `pencil`, `settings`, `user`, `calendar`, `copy`, `download`, `upload`, `info`, `alert`, `external-link`, `loader`, `heart`, `star`, `bold`, `italic`, `superscript`, `subscript`, `underline`, `folder`, `file`, `home`, `slash`, `check-circle`, `alert-circle`, `corner-down-left`, `bell`, `image`, `music`, `shield`, `user-plus`, `cloud`, `inbox`, `chevrons-left`, `chevrons-right`, `grip-vertical`, `grip-horizontal`, `panel-left`, `panel-right`, `layout-dashboard`, `pause`, `play`, `monitor`, `smartphone`, `trending-up`, `trending-down`, `paperclip`, `file-text`, `video`, `globe`, `arrow-down`, `arrow-up`, `square`, `refresh-cw`, `thumbs-up`, `thumbs-down`, `share`, `mic`, `sparkles`, `at-sign`, `message-square`, `move-horizontal`, `eye`, `eye-off`, `pipette`, `waves`, `clock`, `undo`, `redo`, `strikethrough`, `code`, `link`, `unlink`, `list`, `list-ordered`, `list-checks`, `quote`, `square-code`, `separator-horizontal`, `align-left`, `align-center`, `align-right`, `align-justify`, `highlighter`, `pilcrow`, `heading`, `heading-1`, `heading-2`, `heading-3`, `heading-4`, `parentheses`, `braces`, `variable`, `type`, `hash`, `key`, `wrap-text`, `case-sensitive`, `whole-word`, `regex`, `replace`, `replace-all`, `image-plus`, `maximize-2`, `minimize-2`, `scissors`, `clipboard`, `eraser`, `arrow-left-to-line`, `arrow-right-to-line`

## See also

- [Button](button): A button or a link that looks like one, in six variants and four sizes.
- [Badge](badge): A small label for a status, a count or a category, built on the pill.
- [Card](card): A surface with a header, body and footer, built on the base card styles.
- [Alert](alert): A callout that draws attention to a message, with an icon, a title and an action.
- [Kbd](kbd): A keyboard key or shortcut, as text.
- [Separator](separator): A horizontal or vertical rule between content, semantic or decorative.