# Icon

A small hand-drawn picture that goes with a word. It helps recognition; the word explains.

## Playground

```html
<span class="feitio-inline" data-gap="1" style="font-size: var(--feitio-font-size-h3)"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg><span>calendar</span></span>
```

## When to use

-   Next to a word: in a button, a navigation item, a status tag.
-   On its own, only when the meaning is universal (search, close) and the control has a name for screen readers.

## When not to use

-   **To decorate** a heading or a paragraph.
-   **To illustrate** an empty screen: use the illustrations (EmptyState).
-   **From another set:** no ready-made icon next to the drawn ones.

## Examples

### Three sizes

Small (16px), the size of the surrounding text (no attribute) and large (32px). Always in the text color.

Show code

```html
<svg class="feitio-icon" data-size="small" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" data-size="large" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
```

Every icon, with search and its code, is in the [icon catalog](/en/resources/icones/).

## Do and don’t

Do

Calendar

Icon and word together, in the same color.

Don’t

### General settings

An orange icon decorating a heading: it helps no recognition and spends the orange.

## Accessibility

-   The icon is always `aria-hidden="true"`: the word next to it, or the button’s `aria-label`, gives the name.
-   In React, the icon name is checked by TypeScript.

## Attributes

Attribute

Values

What for

`class="feitio-icon"`

required

Hand-drawn stroke, in the text color.

`data-size`

none, `"small"`, `"large"`

The text size (no attribute), 16px or 32px.

`aria-hidden="true"`

always

The icon goes along; the word gives the name.

`use href`

`sprite.svg#feitio-<nome>`

Which icon.