Icônes SVG pour le design UI : le guide complet 2026

Pourquoi les icônes SVG sont le seul choix sérieux pour une UI en production

Les icon fonts ont eu leur moment. Les sprites PNG aussi. Les deux sont des faiblesses dans tout design system devant s'adapter à différents breakpoints, thèmes de couleur et exigences d'accessibilité. Les icônes SVG sont le seul choix architecturalement solide pour les équipes livrant des interfaces en production.

Une icône SVG est un nœud DOM de première classe. Elle réagit aux propriétés CSS custom, participe à l'arbre d'accessibilité, s'adapte sans perte de qualité et s'anime avec des transitions CSS standard. Les icon fonts détournent la zone Private Use d'Unicode, cassent sous les politiques de blocage de polices et n'offrent qu'une seule couleur par glyphe.

"

Les icônes sont le vocabulaire d'une interface utilisateur. Si le vocabulaire est faux, chaque phrase que le produit prononce devient confuse.

Principes de design d'icônes : grille, trait et cohérence optique

Le standard de grille 24×24

Chaque icône d'un système cohérent commence sur le même canevas. La grille de 24×24 pixels se divise uniformément aux tailles courantes (12, 16, 20, 48) et s'aligne sur une sous-grille de 1 px, éliminant les désalignements optiques lorsque les icônes côtoient du texte ou des boutons.

Cohérence du trait et poids visuel

Un trait de 2 px à 24×24 s'adapte de façon prévisible : à 16 px il devient ~1,33 px (net sur les écrans 2x), à 48 px il devient 4 px. L'erreur que font les équipes est de mélanger des traits de 1,5, 2 et 3 px dans un même set.

• Une seule épaisseur de trait par set. Choisissez 1,5 px ou 2 px et appliquez-le globalement.
• Styles d'extrémité et de jointure cohérents. Les extrémités arrondies vont avec les jointures arrondies. Ne jamais mélanger.
• Correction optique pour les courbes. Un cercle de 20 px semble plus petit qu'un carré de 20 px — ajustez à 20,5 px.

Architecture d'un système d'icônes SVG

Quatre modèles dominants existent pour délivrer des icônes SVG au navigateur. Chacun a ses compromis selon votre framework, budget de poids et stratégie de cache.

Pattern SVG Sprite

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-check" viewBox="0 0 24 24">
    <polyline points="20,6 9,17 4,12" fill="none"
      stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>

<!-- Référence n'importe où -->
<svg width="24" height="24" aria-hidden="true">
  <use href="#icon-check"/>
</svg>

Pattern Composant React

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number;
  label?: string;
}

export function CheckIcon({ size = 24, label, ...props }: IconProps) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={2}
      role={label ? 'img' : undefined}
      aria-label={label} aria-hidden={label ? undefined : true}
      {...props}>
      <polyline points="20,6 9,17 4,12" />
    </svg>
  );
}

Exigences d'accessibilité

Chaque icône SVG est soit décorative soit signifiante. Chacune a une implémentation non négociable.

Décorative (à côté d'un texte visible — masquer des lecteurs d'écran) :

<button>
  <svg aria-hidden="true" focusable="false"><!-- icône --></svg>
  Enregistrer le document
</button>

Signifiante (seul élément interactif — doit s'annoncer) :

<button aria-label="Fermer la boîte de dialogue">
  <svg role="img" aria-labelledby="close-title" focusable="false">
    <title id="close-title">Fermer</title>
    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

Mode sombre et thématisation avec les propriétés CSS custom

Un système d'icônes bien architecturé se thématise automatiquement. Le mécanisme est currentColor combiné aux propriétés CSS custom :

:root {
  --icon-color-primary: #1a1a2e;
  --icon-color-success: #059669;
  --icon-size-md: 24px;
  --icon-stroke: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --icon-color-primary: #e5e7eb;
    --icon-color-success: #34d399;
  }
}

.icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: var(--icon-color-primary);
  stroke-width: var(--icon-stroke);
  transition: stroke 0.2s ease;
}

Passer en mode sombre est un changement zéro code icône. Les tokens se mettent à jour et chaque icône suit. Pour le multi-branding, ajoutez une classe .theme-brand-b qui surcharge les mêmes propriétés.

Optimisation des performances

Passez chaque icône dans l'optimiseur SVG de VectoSolve ou SVGO avant de commiter. Une icône 24×24 typique devrait peser entre 200 et 500 octets après optimisation.

• SVG inline pour les icônes critiques au-dessus de la ligne de flottaison (navigation, CTA hero). Zéro surcoût réseau.
• Sprite sheet externe pour les icônes sous la ligne de flottaison. Une seule requête, cache long.
• import() dynamique pour les icônes rarement vues (panneaux admin, états d'erreur).

Définissez toujours width et height explicites sur les éléments SVG pour éviter le Cumulative Layout Shift (CLS) — une pénalité Core Web Vitals.

Workflow d'export Figma-vers-SVG

1. Organiser dans Figma. Page dédiée aux icônes. Chaque icône dans un cadre 24×24 nommé icon/check, icon/alert-triangle, etc.
2. Aplatir et vectoriser. Aplatissez les groupes booléens et vectorisez les traits avant export pour éviter les différences de rendu.
3. Exporter en SVG. Utilisez l'export natif de Figma avec "Outline text" activé et "Include id" désactivé.
4. Optimiser. Passez dans l'optimiseur VectoSolve pour supprimer les métadonnées et réduire la précision.
5. Valider. Confirmez que les tracés s'affichent correctement à 16, 24 et 48 px.
6. Générer les composants. Utilisez SVGR ou un script custom pour convertir les SVG en composants framework. Commitez les fichiers .svg et les composants générés.

Animation d'icônes et micro-interactions

L'animation subtile transforme les icônes statiques en feedback réactif. Les meilleures animations d'icônes durent moins de 300 ms et communiquent un changement d'état clair.

Animation de tracé

.icon-check polyline {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}
.checkbox:checked + .icon-check polyline {
  stroke-dashoffset: 0;
}

Rotation et morphing

.icon-loading { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

Construisez votre système d'icônes aujourd'hui

Un système d'icônes SVG de qualité production est un investissement dans chaque interface que votre équipe livre. Commencez par la grille. Imposez le trait. Automatisez le pipeline.

VectoSolve fournit des outils pour convertir, optimiser et éditer des icônes SVG à chaque étape — de la conversion raster vers vecteur à l'optimisation SVG et l'édition SVG en direct. Votre système d'icônes est le vocabulaire que votre produit utilise pour communiquer. Faites compter chaque glyphe.

Sources et lectures complémentaires

• MDN Web Docs : SVG Icons — Référence technique pour les éléments SVG, rôles ARIA et balisage d'icônes accessibles
• CSS-Tricks : SVG Icon Systems — Guide complet pour construire des sprite sheets SVG et des bibliothèques de composants d'icônes
• web.dev : Web Performance — Bonnes pratiques Google pour charger et afficher les assets d'icônes efficacement
• Smashing Magazine : Icon Design — Principes de design UI pour des systèmes d'icônes cohérents et pixel-perfect