Utiliser les icônes de fermeture
Une × ferme les boîtes de dialogue, supprime les notifications et vide les champs de saisie ; donnez au bouton un état de focus visible et un aria-label.
Toutes les icônes ici suivent currentColor, elles prennent donc la couleur de texte de l'élément dans lequel elles se trouvent : un seul SVG fonctionne sur fonds clairs et sombres, dans les liens comme dans les boutons. Définissez explicitement width et height (ou dimensionnez-les en CSS avec 1em) pour que la mise en page ne se décale pas pendant le chargement de la page.
Icônes accessibles
Si l'icône est décorative ou se trouve à côté d'un texte visible, ajoutez aria-hidden="true". Si elle est le seul contenu d'un bouton ou d'un lien, donnez à cet élément un aria-label tel que « Fermer ».
Licences
Ces icônes de fermeture proviennent de Lucide, Tabler, Iconoir, Fluent UI, Material Symbols, Material Design Icons et Carbon : ce sont des jeux open source sous licences MIT, ISC ou Apache 2.0, qui autorisent l'usage personnel et commercial. Besoin d'autre chose ? Recherchez parmi plus de 70 000 icônes dans le SVG Icon Finder.
Chercheur d'icônes SVG
Recherchez parmi plus de 70 000 icônes SVG open source — Lucide, Tabler, Heroicons, Phosphor, Bootstrap, Material et bien d'autres.