# Icônes

Chaque icône Feitio, dessinée à la main. Recherchez par nom, en portugais ou en anglais, et touchez pour copier le code.

## Toutes les icônes

Filtrer les icônes

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

Aucune icône avec ce nom. Besoin d'en créer une nouvelle ? Voyez comment demander, ci-dessous.

Touchez une icône pour copier son code.

## Comment les utiliser

Toutes les icônes vivent dans un seul fichier, `icons/sprite.svg`. Chaque icône est appelée par nom, hérite de la couleur du texte environnant et de la taille de police.

```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>
```

-   Avec un mot à côté, l'icône obtient `aria-hidden="true"` : le mot explique.
-   Par lui-même, son conteneur porte le nom : `aria-label` sur le bouton ou le lien.
-   La taille provient du texte (`1em`) ; pour une autre taille, modifiez la taille de police environnante ou la `inline-size`.

## Un nouvel icône

Un nouvel icône est dessinée, en suivant les règles de [Iconographie et illustration](/fr/design/desenho/#como-se-desenha) : deux traits à chaque jointure, penchés, dans la couleur du texte. Le fichier va dans `icons/<name>.svg`, et `bun run build` reconstruit le sprite ; les tests de Feitio vérifient les règles.