Pourquoi SVG est le format idéal pour les icônes web

Les icônes SVG (Scalable Vector Graphics) sont des images vectorielles codées en XML. Contrairement aux PNG ou JPEG, elles restent nettes à toute taille — du favicon 16×16 à un écran 4K — et pèsent beaucoup moins lourd. Une icône SVG typique fait 500 octets à 2 Ko. La même icône en PNG haute résolution fait 5 à 20 Ko.

Les avantages concrets des SVG pour le web :

Netteté parfaite sur tous les écrans (Retina, 4K, mobile, desktop)
Taille de fichier minimale — crucial pour les performances en Afrique de l’Ouest où la bande passante est limitée
Stylables en CSS : vous pouvez changer la couleur, la taille et ajouter des animations directement en CSS
Accessibles : vous pouvez ajouter des titres et des descriptions pour les lecteurs d’écran

Méthode 1 : Créer des icônes dans Figma (gratuit)

Setup de la grille

Créez une frame de 24×24 pixels (taille standard pour les icônes web)
Ajoutez une grille de 24 colonnes et 24 lignes (chaque cellule = 1px) via le panneau de droite > Layout Grid
Activez « Snap to grid » pour que vos tracés s’alignent précisément sur la grille

Dessiner une icône simple (exemple : icône de panier)

Utilisez l’outil Pen (P) pour tracer le contour du panier
Maintenez Shift pour tracer des lignes droites horizontales et verticales
Réglez le Stroke à 2px, pas de Fill (icône en ligne/outline)
Arrondissez les coins avec Stroke > Round Cap et Round Join
Pour les cercles (poignées du panier), utilisez l’outil Ellipse (O)

Exporter en SVG optimisé

Sélectionnez la frame de l’icône
Panneau de droite > Export > choisissez SVG
Cliquez sur l’icône « … » et cochez « Include ‘id’ attribute »
Exportez

Méthode 2 : Coder des icônes SVG à la main

Pour des icônes simples, coder directement le SVG est plus rapide que d’ouvrir un outil de design. Le SVG est du XML lisible par un humain.

Structure de base

<svg xmlns="http://www.w3.org/2000/svg" 
     width="24" height="24" 
     viewBox="0 0 24 24" 
     fill="none" 
     stroke="currentColor" 
     stroke-width="2" 
     stroke-linecap="round" 
     stroke-linejoin="round">
  <!-- Contenu de l'icône ici -->
</svg>

Les attributs importants :

viewBox="0 0 24 24" : définit le système de coordonnées interne (24×24 unités)
fill="none" : pas de remplissage (icône en ligne)
stroke="currentColor" : la couleur du trait hérite de la couleur CSS du parent — changez la couleur avec color en CSS
stroke-width="2" : épaisseur du trait en unités du viewBox

Les éléments SVG de base

<!-- Ligne -->
<line x1="0" y1="12" x2="24" y2="12" />

<!-- Rectangle -->
<rect x="3" y="3" width="18" height="18" rx="2" />

<!-- Cercle -->
<circle cx="12" cy="12" r="10" />

<!-- Chemin (path) — le plus puissant -->
<path d="M12 2 L22 12 L12 22 L2 12 Z" />

<!-- Polyligne (trait continu passant par plusieurs points) -->
<polyline points="4 12 10 18 20 6" />

Exemples d’icônes courantes codées à la main

<!-- Icône Coche (check) -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" 
     stroke="currentColor" stroke-width="2">
  <polyline points="20 6 9 17 4 12"></polyline>
</svg>

<!-- Icône Croix (close) -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" 
     stroke="currentColor" stroke-width="2">
  <line x1="18" y1="6" x2="6" y2="18"></line>
  <line x1="6" y1="6" x2="18" y2="18"></line>
</svg>

<!-- Icône Flèche droite -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" 
     stroke="currentColor" stroke-width="2">
  <line x1="5" y1="12" x2="19" y2="12"></line>
  <polyline points="12 5 19 12 12 19"></polyline>
</svg>

<!-- Icône Recherche (loupe) -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" 
     stroke="currentColor" stroke-width="2">
  <circle cx="11" cy="11" r="8"></circle>
  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>

Intégrer les SVG dans votre site web

Méthode 1 : SVG inline (recommandée)

Collez le code SVG directement dans votre HTML. C’est la méthode la plus flexible car vous pouvez styler les icônes en CSS :

<button class="btn-icon">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" 
       stroke="currentColor" stroke-width="2">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
  Rechercher
</button>

Méthode 2 : Sprite SVG

Regroupez toutes vos icônes dans un seul fichier SVG sprite et référencez-les par ID :

<!-- sprite.svg (caché dans le DOM) -->
<svg style="display:none">
  <symbol id="icon-search" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"/>
    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
  </symbol>
  <symbol id="icon-cart" viewBox="0 0 24 24">
    <!-- ... -->
  </symbol>
</svg>

<!-- Utilisation -->
<svg width="24" height="24">
  <use href="#icon-search"></use>
</svg>

Styler les icônes SVG en CSS

/* Changer la couleur */
.icon { color: #2563eb; }         /* fonctionne avec stroke="currentColor" */

/* Changer la taille */
.icon svg { width: 32px; height: 32px; }

/* Animation au survol */
.icon svg {
    transition: transform 0.2s ease, color 0.2s ease;
}
.icon:hover svg {
    transform: scale(1.1);
    color: #1d4ed8;
}

/* Rotation continue (loading) */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.icon-loading svg {
    animation: spin 1s linear infinite;
}

Optimiser les SVG pour le web

Les SVG exportés depuis Figma ou Illustrator contiennent souvent du code inutile (métadonnées, commentaires, précisions décimales excessives). Optimisez-les :

SVGOMG (jakearchibald.github.io/svgomg/) : outil en ligne gratuit. Collez votre SVG, il le nettoie et l’optimise. Réduction de 20 à 60 % de la taille
svgo (npm) : optimisation en ligne de commande pour les workflows automatisés : npx svgo icon.svg -o icon.min.svg

Bibliothèques d’icônes SVG gratuites

Avant de créer vos propres icônes, vérifiez si elles n’existent pas déjà :

Lucide Icons (lucide.dev) : 1500+ icônes, successeur de Feather Icons. Style minimal et cohérent. C’est la bibliothèque utilisée dans ce tutoriel
Heroicons (heroicons.com) : par les créateurs de Tailwind CSS. Outline et Solid. 300+ icônes
Phosphor Icons (phosphoricons.com) : 7000+ icônes en 6 styles (thin, light, regular, bold, fill, duotone)
Tabler Icons (tabler.io/icons) : 5000+ icônes, toutes en stroke. Très complet
Simple Icons (simpleicons.org) : logos de marques et services (Facebook, WhatsApp, Wave, etc.) au format SVG

Comment créer des icônes SVG personnalisées

Pourquoi SVG est le format idéal pour les icônes web

Méthode 1 : Créer des icônes dans Figma (gratuit)

Setup de la grille

Dessiner une icône simple (exemple : icône de panier)

Exporter en SVG optimisé

Méthode 2 : Coder des icônes SVG à la main

Structure de base

Les éléments SVG de base

Exemples d’icônes courantes codées à la main

Intégrer les SVG dans votre site web

Méthode 1 : SVG inline (recommandée)

Méthode 2 : Sprite SVG

Styler les icônes SVG en CSS

Optimiser les SVG pour le web

Bibliothèques d’icônes SVG gratuites

Confiez-nous la Création de Votre Site Web

Pourquoi SVG est le format idéal pour les icônes web

Méthode 1 : Créer des icônes dans Figma (gratuit)

Setup de la grille

Dessiner une icône simple (exemple : icône de panier)

Exporter en SVG optimisé

Méthode 2 : Coder des icônes SVG à la main

Structure de base

Les éléments SVG de base

Exemples d’icônes courantes codées à la main

Intégrer les SVG dans votre site web

Méthode 1 : SVG inline (recommandée)

Méthode 2 : Sprite SVG

Styler les icônes SVG en CSS

Optimiser les SVG pour le web

Bibliothèques d’icônes SVG gratuites

Confiez-nous la Création de Votre Site Web

Articles Similaires

Comment créer des transitions de page fluides

Guide : Le neurodesign — la science au service du design

Tutoriel : Créer des graphiques et charts pour le web