Comment utiliser des icônes SVG en HTML, CSS, React et Vue

Les icônes SVG sont de petits fichiers vectoriels : elles restent nettes à toutes les tailles, pèsent quelques centaines d'octets et se recolorent en CSS. Il existe quatre façons courantes de les placer dans une page. Le bon choix dépend de votre besoin de styliser l'icône, du nombre d'icônes sur la page et du framework que vous utilisez.

1. Lier le SVG avec une balise <img>

La méthode la plus simple : traiter l'icône comme n'importe quelle image. Chaque icône de Iconyz possède une URL SVG publique, affichée dans son panneau.

<img src="https://iconyz.com/api/public/svg/lucide/house.svg"
     width="24" height="24" alt="Accueil">

Le navigateur met le fichier en cache et l'icône ne bloque jamais l'affichage du HTML. L'inconvénient : le CSS n'agit pas à l'intérieur d'une image, donc les styles color et :hover n'ont aucun effet. Pour les icônes monochromes, vous pouvez indiquer la couleur dans l'URL : ajoutez ?color=%23e11d48 (#e11d48 encodé pour une URL). Tous les détails sont dans le guide de l'API SVG.

En production, pensez à télécharger le SVG et à le servir depuis votre propre site, pour que vos pages ne dépendent pas d'une URL externe.

2. Coller le SVG en ligne

Ouvrez une icône, choisissez SVG et copiez le code directement dans votre HTML :

<button class="btn">
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
       aria-hidden="true">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…"/>
  </svg>
  Accueil
</button>

Le SVG en ligne fait partie de la page : le CSS le contrôle entièrement (couleur, taille, survol, transitions, et même chaque tracé). Les collections monochromes utilisent currentColor, donc l'icône reprend automatiquement la couleur de texte de son parent. C'est l'option la plus souple, sans aucune requête HTTP supplémentaire.

Le prix à payer est le poids du HTML. Chaque icône en ligne ajoute ses tracés à toutes les pages qui l'utilisent, ce qui compte si vous répétez la même icône des centaines de fois, par exemple dans un long tableau.

3. Utiliser l'icône depuis le CSS

Un masque CSS transforme n'importe quel SVG monochrome en forme remplie par background-color : l'icône suit la couleur du texte sans que son balisage soit dans le HTML.

.icon-home {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
          mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
}

<span class="icon-home" aria-hidden="true"></span>

L'onglet CSS du panneau de chaque icône génère cette règle avec le SVG intégré en data URI, sans aucune requête externe. N'utilisez les masques qu'avec des icônes monochromes : le masque garde la forme et ignore les couleurs de l'icône. Pour les icônes multicolores, utilisez background-image.

4. React et les autres frameworks JSX

JSX exige des attributs en camelCase (strokeWidth et non stroke-width) et transmet les props. L'onglet React du panneau de chaque icône produit un composant prêt à l'emploi :

export function HouseIcon(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
         viewBox="0 0 24 24" {...props}>
      <path fill="none" stroke="currentColor" strokeWidth={2} d="…" />
    </svg>
  );
}

// Utilisation
<HouseIcon className="text-blue-600" style={{ fontSize: 20 }} aria-hidden="true" />

Comme la taille vaut 1em, l'icône suit le font-size, et comme la couleur vaut currentColor, les classes utilitaires comme text-* de Tailwind la recolorent. Gardez un fichier par icône, ou regroupez les icônes dans un module, pour que votre bundler élimine celles que vous n'importez pas (tree-shaking). Le même composant fonctionne avec Preact, et l'onglet Solid fournit la variante Solid.

5. Vue et Svelte

Avec Vue, enregistrez l'icône comme composant monofichier. Les attributs transmis, comme class, sont appliqués au <svg> racine :

<!-- HouseIcon.vue -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…" />
  </svg>
</template>

Svelte fonctionne de la même façon : un fichier .svelte contenant le SVG avec {...$$props} sur l'élément racine. Les deux sont disponibles sous forme d'onglets dans le panneau de l'icône.

Taille et couleur

• Utilisez 1em pour la taille. Avec une largeur et une hauteur de 1em, l'icône s'aligne sur le texte voisin. Modifiez font-size pour la redimensionner.
• Conservez le viewBox. Le viewBox définit le système de coordonnées du dessin. Le supprimer casse le redimensionnement ; jouez plutôt sur la largeur et la hauteur.
• Respectez la grille. Une icône dessinée sur une grille de 24 px est plus nette à 24 px, 48 px ou d'autres multiples. À 18 ou 20 px, les traits fins peuvent sembler un peu flous.
• Colorez les icônes monochromes avec color. Avec currentColor, une seule règle CSS gère l'état normal, le survol et le mode sombre.
• Les icônes multicolores gardent leur palette. Les emojis, drapeaux et logos ont leurs couleurs intégrées. Ne les recolorez que si la licence autorise les modifications, et ne modifiez jamais un logo de marque.

Accessibilité

Déterminez si l'icône porte un sens. Les icônes décoratives placées à côté d'un libellé doivent être masquées aux lecteurs d'écran ; les icônes seules ont besoin d'une alternative textuelle :

<!-- Décorative : le bouton a déjà un libellé -->
<button><svg aria-hidden="true" …>…</svg> Enregistrer</button>

<!-- Bouton avec icône seule : nommez le bouton, masquez l'icône -->
<button aria-label="Fermer"><svg aria-hidden="true" …>…</svg></button>

<!-- Image porteuse de sens -->
<img src="…/triangle-alert.svg" alt="Avertissement">

Vérifiez aussi le contraste : selon les WCAG 2.2, une icône qui transmet une information doit avoir un rapport de contraste d'au moins 3:1 avec son arrière-plan.

Quelle méthode choisir ?

Prêt à commencer ? Cherchez dans toutes les collections ou parcourez des collections populaires comme Lucide, Tabler Icons et Material Design Icons. Avant de publier, vérifiez la licence de la collection ; le guide des licences d'icônes explique ce que chacune exige.