Design & UX

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

12 دقائق للقراءة

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

  1. Créez une frame de 24×24 pixels (taille standard pour les icônes web)
  2. Ajoutez une grille de 24 colonnes et 24 lignes (chaque cellule = 1px) via le panneau de droite > Layout Grid
  3. 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)

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

Exporter en SVG optimisé

  1. Sélectionnez la frame de l’icône
  2. Panneau de droite > Export > choisissez SVG
  3. Cliquez sur l’icône « … » et cochez « Include ‘id’ attribute »
  4. 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

Etape 1 : Choisir un editeur SVG adapte au projet

Pour creer une icone SVG personnalisee, vous avez le choix entre trois familles d’outils. Inkscape (gratuit, multiplateforme) est la reference open source, parfait pour un freelance a Dakar ou Abidjan qui veut produire des picto pour un site WordPress sans abonnement. Figma (gratuit jusqu’a trois fichiers, sinon environ 10 000 FCFA par mois et par editeur, soit 15 EUR) est l’outil collaboratif moderne. Adobe Illustrator (environ 16 500 FCFA par mois, soit 25 EUR) reste le standard agence.

Pour ce tutoriel, nous prenons Inkscape 1.4 (sortie 2025). Telechargez-le sur https://inkscape.org. L’installation prend deux minutes sous Windows, macOS ou Ubuntu. Verifiez la version dans Aide, A propos.

Etape 2 : Definir une grille pixel-perfect 24×24

La majorite des frameworks (Material, Bootstrap Icons, Lucide, Heroicons) utilisent une grille 24×24 pixels. Ouvrez Inkscape, puis Fichier, Proprietes du document. Reglez la largeur et la hauteur sur 24 px et l’unite par defaut sur px. Activez la grille (Affichage, Grille de page) avec un pas de 1 px.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <!-- contenu de l icone -->
</svg>

Le viewBox est l’attribut critique : il decouple la taille interne (coordonnees) de la taille d’affichage. Une icone bien construite reste nette de 16 px (favicon) a 256 px (page d’accueil).

Etape 3 : Dessiner la forme avec l outil Bezier

Selectionnez l’outil Bezier (raccourci B). Cliquez pour poser des points d’ancrage, double-cliquez pour terminer. Pour une fleche simple vers la droite : trois points formant un triangle plus une barre horizontale. Maintenez Ctrl pour contraindre les angles a 15 degres.

Le but n’est pas la prouesse artistique mais la lisibilite a petite taille. Une icone qui fonctionne en 16 px se reconnait par sa silhouette, pas par ses details. Bannissez les traits de moins de 1,5 px d’epaisseur, ils disparaissent au rendu.

Etape 4 : Aligner les contours sur la grille pixel

Sans alignement, votre icone sera floue. Selectionnez chaque chemin et utilisez Objet, Aligner et distribuer pour caler sur les pixels entiers. Activez aussi Fichier, Preferences, Outils, Geometrie : Coordonnees entieres uniquement. Inkscape arrondira automatiquement les positions.

# Verifier la sortie SVG : aucune coordonnee a virgule
grep -E "[0-9]+\.[0-9]+" mon-icone.svg
# Resultat attendu : aucune ligne (toutes les coordonnees sont entieres)

Si la commande retourne des lignes, ouvrez le SVG dans un editeur texte et arrondissez manuellement, ou retraitez avec SVGO (etape 7).

Etape 5 : Choisir style outline ou solid

Deux familles dominent en 2026. Outline (Heroicons, Lucide, Tabler Icons) : trait de 2 px, fond transparent, look moderne et leger. Solid (Material, Font Awesome) : forme pleine sans contour, look dense et affirme. Pour un blog tech francophone, l’outline est generalement plus elegant et fatigue moins l’oeil.

Dans Inkscape, ouvrez Objet, Fond et contour. Pour l’outline : aucun fond, contour noir 2 px, raccord arrondi (stroke-linejoin round). Pour le solid : fond noir, aucun contour. Ne jamais melanger les deux dans une meme serie d’icones.

Etape 6 : Exporter en SVG optimise

Fichier, Enregistrer sous, choisissez SVG optimise (.svg). Inkscape propose plusieurs options : decochez Conserver les donnees Inkscape, cochez Reduire les espaces, Convertir CSS en attributs. Le fichier passera de 5-8 Ko a 1-2 Ko.

# Comparer les tailles avant/apres optimisation
ls -lh mon-icone.svg mon-icone-optim.svg
# Resultat attendu : optim 60 a 80 % plus petit

Un SVG optimise se charge instantanement meme en 3G a Saint-Louis ou Korhogo, ce qui est critique pour vos visiteurs hors fibre.

Etape 7 : Compresser avec SVGO en ligne de commande

SVGO (https://github.com/svg/svgo) va plus loin que l’export Inkscape. Installation via Node.js 22 LTS. Creez un fichier svgo.config.js pour controler les passes (preserver le viewBox, supprimer les commentaires, fusionner les chemins).

# Installation et utilisation
npm install -g svgo
svgo mon-icone-optim.svg -o mon-icone-final.svg

Sortie attendue : Done in X ms! 1.2 KiB – 38.4% = 0.74 KiB. Vous gagnez encore 30 a 40 % sur la taille finale, sans perte visible. Versionnez le fichier final dans Git pour suivre les variations.

Etape 8 : Integrer l icone en inline SVG dans WordPress

Trois methodes selon le contexte. Inline (recommande) : copier-coller le contenu <svg>…</svg> directement dans le bloc HTML Gutenberg. Avantage : controle CSS total via fill: currentColor, hover, animation. Inconvenient : verbosite si l’icone est repetee.

<button class="btn-icon">
  <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
    <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none"/>
  </svg>
  Suivant
</button>

L’astuce currentColor fait heriter la couleur du texte parent. Une seule icone sert pour le mode clair, le mode sombre, et chaque variante de bouton.

Etape 9 : Creer une sprite SVG pour mutualiser plusieurs icones

Si vous avez 20+ icones, regroupez-les dans un sprite. Un seul fichier HTTP, reference partout via <use>. Creez sprites.svg contenant chaque icone dans un <symbol id= »… »>.

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="arrow-right" viewBox="0 0 24 24">
    <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none"/>
  </symbol>
</svg>
<svg width="20" height="20"><use href="#arrow-right"/></svg>

Sortie attendue : un seul download de 8 Ko pour 20 icones, contre 20 requetes HTTP de 1 Ko. Sur une connexion 3G ouest-africaine, le gain perceptible est de 1 a 2 secondes au premier chargement.

Etape 10 : Tester l accessibilite et le contraste

Une icone n’est pas qu’un visuel : elle porte un sens. Ajoutez toujours un attribut accessible. Pour une icone decorative : aria-hidden= »true ». Pour une icone porteuse d’info : role= »img » et <title>Description</title> dans le SVG.

# Tester le contraste avec axe-core en CLI
npm install -g @axe-core/cli
axe https://votre-site.com

Resultat attendu : aucune violation contrast. Pour du texte ou icone informative, vise un ratio de 4,5:1 minimum (norme WCAG AA). Pour creuser ce sujet, consultez notre tutoriel Wi-Fi securise et notre guide Wazuh SIEM.

Bonus : animer une icone SVG en CSS pur

Une icone animee attire l’oeil sans alourdir la page (pas de JS, pas de Lottie). Utilisez stroke-dasharray et stroke-dashoffset pour dessiner progressivement le trace, ou rotate pour un loader. Reservez l’animation aux elements interactifs (bouton, etat de chargement) et desactivez-la pour les utilisateurs qui ont active prefers-reduced-motion dans leur OS.

.btn-icon svg path{
  stroke-dasharray:30;stroke-dashoffset:30;
  transition:stroke-dashoffset .4s ease;
}
.btn-icon:hover svg path{stroke-dashoffset:0}
@media (prefers-reduced-motion: reduce){
  .btn-icon svg path{transition:none;stroke-dashoffset:0}
}

Resultat attendu : au survol, la fleche se dessine en 400 ms. Sur un smartphone d’entree de gamme vendu a 60 000 FCFA dans une boutique de Treichville, l’animation reste fluide car aucun calcul JavaScript n’est implique.

Bonus : maintenir une bibliotheque d icones cohérente

Une fois 30 a 50 icones produites, organisez-les dans un repo Git dedie. Structure recommandee : un dossier src/ pour les SVG bruts Inkscape, un dossier dist/ pour les versions optimisees SVGO, un fichier preview.html qui affiche toutes les icones avec leur nom. Ajoutez un script npm build qui regenere le dist a chaque commit.

# package.json
{"scripts":{"build":"svgo -f src -o dist","preview":"open preview.html"}}

Sortie attendue : npm run build optimise les 30 fichiers en moins de 2 secondes. Cette discipline evite la derive visuelle (epaisseurs differentes, alignements decales) au fil des projets.

مشاركة
#icônes #svg #vectoriel