Sur un site, une icône n’est jamais seule. Elle revient dans le menu, dans les boutons, dans les états vides, dans les messages d’erreur. On peut les stocker une par une, en SVG. On peut aussi les rassembler dans une police. Depuis 2024, nous maintenons Genicons pour faire ce passage sans en faire un projet à part. Voici pourquoi, dans beaucoup de productions, nous préférons une webfont à un dossier de fichiers épars.
Ce que change une police d’icônes
Une police d’icônes, ou webfont, rassemble des glyphes dans un seul fichier de fonte. Chaque icône a un nom. Dans le HTML, on l’appelle par une classe. Chez Genicons, l’intégration se fait avec une classe du type gi gi-icon-name. Une balise link par collection charge la fonte.
Le premier effet est pratique. Le navigateur télécharge la fonte une fois, puis l’utilise partout. On ne multiplie pas les requêtes pour vingt, quarante ou quatre-vingts petits SVG. Le second effet est visuel. La taille, la couleur, l’alignement se règlent en CSS, comme pour du texte. Un titre change de corps : l’icône qui l’accompagne suit. Un thème passe au fond sombre : on change la couleur, pas le fichier source.
Cela n’a rien d’une nouveauté de 2025. Les webfonts d’icônes existent depuis longtemps. Ce qui nous intéresse, c’est de ne plus les assembler à la main à chaque projet. Genicons transforme des fichiers SVG en police personnalisée, les range en collections, et donne un fichier prêt à intégrer dans un site ou une application.
Nous ne prétendons pas que cette approche convient à tous les cas. Une illustration unique, un pictogramme très détaillé, un logo avec des dégradés complexes : le SVG seul reste souvent le bon outil. En revanche, dès qu’un jeu d’icônes se répète et doit rester cohérent, la fonte simplifie le quotidien de l’équipe qui tient le site.
Les limites d’un dossier rempli de SVG
Le SVG a des qualités que nous n’ignorons pas. C’est un format vectoriel, lisible, précis à toutes les tailles. On peut l’animer, le colorier, l’inline dans une page. Pour une icône isolée, il est excellent.
Les frictions apparaissent quand le nombre grandit. Un designer exporte depuis Figma. Un développeur range les fichiers dans un dossier. Quelqu’un renomme une icône. Une autre version, « finale-v3 », reste à côté. Le site en charge une ancienne, la page intérieure une nouvelle. La généalogie du fichier se perd.
Le CSS, lui, devient verbeux. Chaque icône peut avoir son propre fichier, son propre fond, sa propre règle de taille. On copie-colle. On oublie un état au survol. Sur un écran, deux pictogrammes du même jeu n’ont plus la même graisse, parce que l’un a été exporté à 24 pixels et l’autre à 20, ou parce qu’un padding différent s’est glissé dans le SVG.
Il y a aussi le temps de chargement. Ce n’est pas toujours mesurable au premier regard sur une page légère. Ça le devient dès que le menu, le pied de page, les cartes et les formulaires tirent chacun leurs fichiers. Une fonte unique ne magie rien à elle seule — encore faut-il la charger correctement — mais elle évite cette dispersion.
Enfin, le travail à plusieurs se complique. Le designer continue d’itérer dans Figma. L’intégration attend un export. Si la passerelle n’est pas claire, on recommence le rituel : exporter, télécharger, remplacer, vérifier que le nom n’a pas changé. C’est précisément ce rituel que nous avons voulu raccourcir avec Genicons et son plugin Figma.
Comment une webfont s’intègre dans un projet
Le chemin, une fois la fonte générée, est volontairement court. On importe les SVG dans une collection, ou on les envoie depuis Figma. Genicons optimise les fichiers pour un rendu net à toute taille. On obtient une webfont. On l’intègre avec une balise link propre à la collection, puis on appelle chaque icône par sa classe.
Dans une feuille de style, on traite alors les icônes comme du texte. On fixe une taille en em ou en rem pour qu’elles suivent le corps du texte voisin. On fixe une couleur. On aligne sur la ligne de base. Si le bouton change d’état, on change la couleur de l’icône, pas le fichier.
Genicons propose trois types d’affichage : plein (full), coloré (colored) et contour (outline). On choisit le rendu selon la maquette, sans reconstruire une collection entière. On peut aussi ajouter des animations CSS — rotation, rebond, fondu, pulsation — les prévisualiser, et copier le code. Ce n’est pas obligatoire. Beaucoup d’interfaces n’ont besoin d’aucun mouvement. Quand un état de chargement ou une action réussie le justifie, le code est déjà là.
Pour une équipe, le partage de collection évite le va-et-vient de fichiers zippés. Sur le plan Team, on invite des collaborateurs par e-mail. Chacun accède aux collections partagées. Les droits restent du côté de celui qui invite. Nous y reviendrons plus en détail dans d’autres notes. L’essentiel, ici, est que la fonte n’est plus un export personnel oublié sur un bureau.
Ce que nous voyons sur les projets
Prenons un site vitrine, une dizaine de pages, un menu, quelques appels à l’action. Au départ, on place cinq ou six SVG en dur. Six mois plus tard, le même site en a trente : réseaux sociaux, pictogrammes de services, pastilles de réassurance, icônes de formulaires. Personne n’a décidé d’« avoir une bibliothèque ». Elle s’est formée toute seule, un peu en désordre.
Prenons maintenant une interface métier. Les icônes portent des actions : ajouter, filtrer, exporter, archiver. Elles doivent rester lisibles, stables, identiques d’un écran à l’autre. Si chaque écran embarque sa copie, l’interface se délite. Une collection unique, versionnée dans une webfont, donne un point de vérité. Quand on ajoute une icône, elle rejoint le jeu. Quand on la retire, on le voit.
Nous gardons le SVG brut dans deux situations surtout. Premièrement, quand le dessin n’est pas une icône de système, mais une illustration. Deuxièmement, quand on a vraiment besoin des couleurs internes du fichier, de masques ou d’animations très spécifiques que la fonte et le CSS ne rendent pas bien. Genicons sait aussi travailler des icônes en couleurs, et le plugin Figma a continué d’évoluer sur ce point — nous le documenterons le moment venu. Cela n’efface pas le bon usage du SVG isolé.
La question n’est donc pas « fonte ou SVG, lequel est moderne ». C’est « où vit le jeu d’icônes, qui le met à jour, comment il arrive dans le code ». Si la réponse est un dossier sans règle, une police générée depuis une collection tenue à jour est souvent plus tenable.
Quelques précautions, sans en faire une doctrine
Une webfont mal chargée peut bloquer l’affichage des icônes le temps du téléchargement. On prévoit un comportement de secours, et on ne charge que les collections utiles à la page. On évite d’empiler trois fontes d’icônes d’origines différentes « au cas où ».
Les noms comptent. Une classe claire vaut mieux qu’un identifiant généré qu’on ne pourra plus relier à la maquette. Quand on importe depuis Figma, on s’accorde en amont sur les noms des calques. Cela évite de republier une fonte uniquement pour corriger une typo dans un identifiant.
L’accessibilité n’est pas réglée par le format. Une icône décorative doit pouvoir être ignorée par un lecteur d’écran. Une icône qui porte une action doit avoir un nom accessible. Que l’on soit en fonte ou en SVG, cette règle reste. Nous la traitons dans le HTML, pas dans l’outil de génération.
Enfin, une fonte n’est pas une bibliothèque magique qui dispense de choisir. Trop d’icônes, mal hiérarchisées, fatiguent une interface. L’outil accélère le passage du dessin au code. Il ne décide pas à notre place quelles icônes méritent d’exister.
Ce que l’on retient
Nous utilisons encore beaucoup le SVG. Nous l’exportons, nous l’inlinons, nous l’animons quand il le faut. Pour un jeu d’icônes répétées, tenues dans la durée, une webfont générée proprement réduit le désordre : un fichier, des classes, une collection que l’équipe peut partager.
Genicons existe depuis 2024 pour ce travail-là. Ce n’est pas un manifeste. C’est un outil que nous faisons vivre, avec un essai, des plans adaptés aux équipes, une documentation pour CSS, React, Vue et les Web Components, et un plugin Figma. Les modalités et les tarifs sont sur la page du produit.
Si vous hésitez entre un dossier de SVG et une police pour un site ou une application, nous pouvons regarder le cas avec vous. Un bref message ou un premier échange suffit à poser le périmètre.