Icon Fonts 101

Les polices d'icônes sont des polices de caractères dans lesquelles les glyphes — normalement des lettres et des chiffres — sont remplacés par des symboles pictographiques. Au lieu d'afficher la lettre « A », une police d'icônes affiche une icône de maison, une loupe de recherche ou un panier d'achat.

Étant donné que les icônes résident dans un fichier de police, elles se comportent exactement comme du texte. Vous pouvez les mettre à l'échelle à n'importe quelle taille avec font-size, changer leur couleur avec color, ajouter des ombres de texte, appliquer des transitions CSS, et même les animer — sans toucher à un seul fichier image.

Cette approche offre plusieurs avantages pratiques :

• Indépendance de la résolution — les contours vectoriels s'adaptent nettement à n'importe quelle densité d'écran
• Poids minimal — un seul fichier de police compressé remplace des dizaines de ressources images individuelles
• Contrôle CSS — la couleur, la taille, l'ombre, l'opacité et les états de survol sont gratuits avec le style de texte
• Requête HTTP unique — l'ensemble d'icônes entier se charge en un seul aller-retour réseau

Aux débuts du Web, les développeurs utilisaient des images individuelles ou des sprites CSS — de grandes images composites où chaque icône occupait une zone rectangulaire fixe. Les sprites réduisaient les requêtes HTTP mais étaient fragiles : l'ajout ou le redimensionnement d'une icône nécessitait de régénérer l'intégralité de la feuille de sprites et de mettre à jour manuellement les décalages en pixels.

Vers 2012, des projets comme Font Awesome et IcoMoon ont popularisé une alternative plus propre : le conditionnement des icônes en tant que glyphes de police mappés sur la zone d'utilisation privée d'Unicode. Les designers pouvaient remplacer un ensemble d'icônes complet en modifiant une seule déclaration @font-face, et les développeurs pouvaient styliser les icônes avec le même CSS qu'ils utilisaient déjà pour le texte. La technique s'est rapidement répandue et reste un choix fiable et peu contraignant pour les systèmes de conception qui utilisent des icônes monochrome.

Le débat « polices d'icônes contre SVG inline » est un classique des discussions front-end depuis plus d'une décennie. Les deux approches sont valides — le bon choix dépend des exigences de votre projet.

Polices d'icônes

• Requête HTTP unique — un seul fichier de police fournit toutes les icônes
• Style CSS très simple — changez color, font-size et text-shadow comme n'importe quel texte
• Monochrome uniquement — chaque glyphe ne supporte qu'une seule couleur de remplissage
• Intégration facile — ajoutez un lien de feuille de style, utilisez une classe CSS, c'est fait

SVG inline

• Multicouleur — chaque chemin peut avoir son propre remplissage, contour ou dégradé
• Accessible par défaut — <title> et aria-label donnent aux lecteurs d'écran une sémantique réelle
• Mise en cache individuelle — les icônes inutilisées ne sont jamais téléchargées
• Contrôle précis — animer des chemins individuels, appliquer des filtres par élément

Sprites SVG

• Combinent plusieurs SVG en une seule feuille de sprites <symbol>
• Référencez les icônes avec <use href="#icon-name">
• Offre les avantages des deux — requête unique, multicouleur, accessible — mais nécessite un pipeline de construction plus élaboré

Les polices d'icônes peuvent être conditionnées en cinq formats de fichiers, chacun avec des niveaux de compression, une prise en charge des navigateurs et des cas d'utilisation différents. Voici comment ils se comparent en un coup d'œil :

Vous ne savez pas quels formats inclure ? Utilisez ce guide de décision pratique :

• Si vous n'en choisissez qu'un — utilisez WOFF2. Il offre la meilleure compression (Brotli) et couvre 97 %+ des navigateurs.
• Si vous avez besoin du support IE 11 — utilisez WOFF2 + WOFF. WOFF gère les navigateurs restants qui ne disposent pas du décodage Brotli.
• Si vous avez besoin du support IE 8 — utilisez WOFF2 + WOFF + EOT. EOT est le seul format compris par Internet Explorer 6-8.
• Pour les applications de bureau — utilisez TTF. C'est le format natif pour le rendu des polices au niveau du système d'exploitation sur Windows, macOS et Linux.
• Pour déboguer les problèmes de polices — inspectez la police SVG. Sa structure XML est lisible par l'homme, ce qui permet de vérifier facilement les chemins des glyphes et les métadonnées.

Approfondissez chaque format pour en comprendre le fonctionnement interne, la compatibilité avec les navigateurs et les bonnes pratiques :

Apprenez à utiliser ces formats dans vos projets :