# Icons

Every Feitio icon, drawn by hand. Search by name, in Portuguese or English, and tap to copy the code.

## All icons

Filter icons

-   
-   
-   
-   
-   
-   
-   
-   
-   
-   
-   
-   

No icon by that name. Need a new one? See how to ask, below.

Tap an icon to copy its code.

## How to use

All icons live in one file, `icons/sprite.svg`. Each is called by name, inherits the surrounding text color and the font size.

```html
<button type="button" class="feitio-button">
  <svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-plus"/></svg>
  Novo agendamento
</button>
```

-   With a word next to it, the icon gets `aria-hidden="true"`: the word explains.
-   On its own, its container carries the name: `aria-label` on the button or link.
-   Size comes from the text (`1em`); for another size, change the surrounding font size or the `inline-size`.

## A new icon

A new icon gets drawn, following the [Iconography and illustration](/en/design/desenho/#como-se-desenha) rules: two strokes at every joint, tilted, in the text color. The file goes in `icons/<name>.svg`, and `bun run build` rebuilds the sprite; Feitio’s test checks the rules.