Icon

Une petite image dessinée à la main qui accompagne un mot. Elle aide à la reconnaissance ; le mot explique.

Sur cette page

Playground

calendar

Icône

Fond

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>

Quand l'utiliser

À côté d'un mot : dans un bouton, un élément de navigation, une balise de statut.
Seul, uniquement lorsque le sens est universel (recherche, fermer) et que le contrôle possède un nom pour les lecteurs d'écran.

Quand ne pas l'utiliser

Pour orner un titre ou un paragraphe.
Pour illustrer une écran vide : utilisez les illustrations (EmptyState).
D'un autre ensemble : pas d'icône prête à l'emploi à côté des dessinées.

Exemples

Trois tailles

Petit (16px), la taille du texte environnant (pas d'attribut) et grand (32px). Toujours en couleur de texte.

Afficher le 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>

Chaque icône, avec sa recherche et son code, se trouve dans le catalogue d'icônes.

Faire et ne pas faire

Calendar

Icône et mot ensemble, en même couleur.

Don’t

General settings

Une icône orange ornant un titre : elle n'aide pas à la reconnaissance et gaspille l'orange.

L'icône est toujours aria-hidden="true" : le mot à côté, ou le aria-label du bouton, donne le nom.
Dans React, le nom de l'icône est vérifié par TypeScript.

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-icon"`	obligatoire	Crayonné à la main, dans la couleur du texte.
`data-size`	none, `"small"`, `"large"`	La taille du texte (pas d'attribut), 16px ou 32px.
`aria-hidden="true"`	toujours	L'icône suit ; le mot donne le nom.
`use href`	`sprite.svg#feitio-<nome>`	Quelle icône.