Comment changer la couleur d'une icône SVG en CSS

Dernière mise à jour: novembre 2026

Le CSS peut recolorer un SVG inline via fill, stroke et currentColor — mais seulement si l’icône est inline dans le HTML et si ses formes ne verrouillent pas leurs propres couleurs. Voici les trois méthodes qui marchent, états de survol inclus, et les solutions quand rien ne change.

Règle zéro : l'icône doit être inline

Les sélecteurs CSS s'arrêtent à la frontière d'une image. Une icône chargée par une balise <img> ou en arrière-plan CSS s'affiche dans son propre document scellé : aucune règle fill de votre feuille de style ne peut atteindre ses tracés. Pour recolorer en CSS, collez le balisage SVG en inline (ou servez-le en sprite <use> dans le même document, en acceptant que seules les propriétés héritées traversent dans le shadow tree). Chaque méthode ci-dessous suppose que les tracés vivent dans votre HTML.

currentColor : le thème en une règle

Les jeux d'icônes bien construits peignent leurs formes avec fill="currentColor" (ou stroke="currentColor" pour les icônes en ligne). Le mot-clé signifie « la couleur CSS héritée par cet élément » : une seule règle suffit donc à thématiser l'icône — définissez color sur le bouton ou le lien, et l'icône suit, état normal, survol et mode sombre confondus. La plupart des bibliothèques de ce catalogue suivent la convention ; depuis n'importe quelle page d'icône ici, copiez le code inline et pilotez-le avec la seule couleur.

Cibler fill et stroke directement

Quand les formes portent de simples attributs de présentation (fill="#333"), une règle CSS l'emporte sur l'attribut : .icon path { fill: #2563eb } les recolore, car les attributs siègent au bas de la cascade. Deux choses battent la règle : un attribut style sur le tracé (les styles inline battent les feuilles de style — retirez-le ou surchargez avec une règle plus spécifique) et les illustrations multicolores, où chaque tracé a une couleur délibérément différente ; là, recolorez tracé par tracé avec des classes, ou acceptez la palette et ne thématisez qu'un fond d'enveloppe.

Survol et changements d'état

Associez les techniques ci-dessus aux sélecteurs d'état. Avec des icônes currentColor, c'est une ligne : a:hover { color: #dc2626 } fait transitionner l'icône avec son texte. En ciblage direct, animez la propriété définie — transition: fill .15s ease — et souvenez-vous que transform et opacity s'animent à moindre coût que les remplissages si l'icône bouge aussi. Gardez un indice d'état non chromatique (soulignement, graisse, fond) pour que le changement ne repose pas sur la seule teinte.

Quand rien ne change

Descendez cette liste : l'icône est un <img> ou un arrière-plan (inlinez-la) ; les tracés ont des attributs style (retirez-les ou montez en spécificité) ; le SVG utilise currentColor mais vous définissez fill au lieu de color (définissez color) ; ou l'illustration est vraiment multicolore et n'a jamais été thématisable (passez à un jeu monochrome, comme une variante outline ou pleine du même concept — le même concept existe en général dans plusieurs bibliothèques ici).

← Guides Pratiques et Tutoriels SVG