Utiliser les icônes cœur
Le cœur signifie « j'aime », « favori » ou « à enregistrer » ; un cœur plein pour l'état actif et un contour pour l'état inactif est le schéma le plus courant.
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 comme 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 placée à 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 « Cœur ».
Licences
Ces icônes cœur proviennent de Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols et Material Design Icons : 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.