Genicons n’est plus un projet de 2024 que l’on aurait laissé en l’état. L’outil continue de recevoir des SVG, de les ranger en collections et de générer une webfont. Le 10 février 2026, la version 6 du plugin Figma a ajouté l’import de toutes les icônes en couleurs. C’est le moment de revenir sur trois usages que nous voyons souvent ensemble : les trois types d’affichage, les animations CSS, et ce passage plus fluide des icônes colorées depuis Figma.
Trois types d’affichage, un même jeu
Genicons propose trois styles d’affichage : plein (full), coloré (colored) et contour (outline). L’idée n’est pas de multiplier les bibliothèques. C’est de pouvoir adapter le rendu à la maquette, souvent d’un choix, sans reconstruire une collection entière pour un changement de graisse ou de traitement.
Le style plein convient aux interfaces où l’icône doit être très lisible, monochrome, colorée ensuite par le CSS. Le contour sert des contextes plus légers, des fonds déjà chargés, des pictogrammes qui doivent rester discrets. Le style coloré conserve les couleurs du dessin, lorsque le pictogramme porte une information que le monochrome effacerait : un statut, une marque, un code visuel déjà validé dans Figma.
Ce troisième style n’est utile que si le fichier source est propre. Des couleurs accidentelles, un fond oublié, une transparence mal gérée, se verront autant dans la fonte que dans le SVG. Avant d’importer, on relit le jeu dans Figma. Ensuite seulement, on choisit l’affichage dans Genicons.
Dans un projet, nous évitons de mélanger les trois styles sans raison, sur le même niveau d’interface. Un menu en contour, un bouton en plein, un état en couleurs : cela peut se justifier. Un écran où chaque icône a son propre régime, non. La fonte donne de la cohérence. Encore faut-il s’en servir comme d’un système, pas comme d’un tiroir.
Des animations CSS, seulement quand elles aident
Genicons permet d’ajouter des animations CSS aux icônes SVG : rotation, rebond, fondu, pulsation, et d’autres effets du même type. On prévisualise le résultat, on copie le code. C’est pratique. Ce n’est pas un prétexte pour faire bouger tout le menu.
Nous réservons le mouvement à des états qui parlent tout seuls : un chargement, une action en cours, une confirmation brève. Une icône décorative qui pulse en permanence fatigue, et peut poser des questions d’accessibilité. Une animation doit pouvoir être comprise, et, le cas échéant, ne pas être l’unique moyen de comprendre ce qui se passe.
Le code copié depuis l’outil s’intègre dans la feuille de style du projet. On le relit. On vérifie qu’il ne entre pas en conflit avec d’autres transitions. On évite les durées trop longues. Une icône n’est pas une bande-annonce.
Là encore, l’outil accélère un geste de production. Il ne remplace pas un choix de design. Si la maquette n’a pas prévu de mouvement, nous n’en ajoutons pas « parce que c’est disponible ».
Le plugin Figma, version 6 : les icônes en couleurs
Le plugin existe depuis les débuts de Genicons. Il sert à sélectionner des icônes dans un fichier Figma et à les envoyer vers une collection, sans l’export manuel, le téléchargement et le ré-import. Le 8 février 2026, une version 5 a été publiée. Le 10 février, la version 6 a ajouté l’import de toutes les icônes en couleurs.
Ce point n’est pas anecdotique. Tant que l’on ne travaillait commodément que des glyphes monochromes, une partie des jeux — pastilles, drapeaux discrets, pictogrammes déjà colorés dans la charte — restait sur le bord du chemin, ou revenait à un dossier de SVG isolés. Pouvoir importer l’ensemble en couleurs rapproche le fichier de design de la fonte réellement utilisée.
Cela n’enlève rien aux bonnes habitudes déjà décrites dans nos notes précédentes. Les calques doivent être nommés clairement. On n’envoie que les icônes utiles. On vérifie le rendu après génération, sur fond clair et sur fond sombre, à différentes tailles. Une icône colorée mal détourée le sera encore une fois dans la webfont.
Le support du plugin reste celui de l’agence, via l’adresse indiquée sur la fiche Figma Community. En cas de doute sur un import, nous préférons un exemple de fichier à une capture floue. C’est plus rapide à diagnostiquer.
Intégrer, partager, ne pas tout charger
Une fois la collection à jour, le chemin d’intégration ne change pas : une balise link par collection, des classes du type gi gi-icon-name, une documentation pour CSS, React, Vue et les Web Components. On charge ce dont la page a besoin. Une fonte d’icônes trop lourde, parce que l’on a versé tout le fichier Figma « pour plus tard », annule une partie du bénéfice.
Pour une équipe, le partage de collections, sur le plan qui le permet, reste le moyen d’éviter les ZIP qui circulent. On invite par e-mail. On garde la main sur les accès. Le designer, l’intégrateur et, parfois, un prestataire externe, regardent le même jeu, pas trois variantes.
Les formules, l’essai et les tarifs sont sur genicons.io. Ils peuvent évoluer. Cette note ne les fige pas. Elle décrit des fonctions que l’on peut vérifier aujourd’hui dans l’outil et dans le plugin.
Un cas concret : un jeu d’icônes de navigation, monochrome, et un petit ensemble de pastilles déjà colorées dans la charte — un statut « en cours », un statut « validé », un pictogramme de service. Avant la version 6 du plugin, on pouvait être tenté de scinder le travail : la navigation dans la webfont, les pastilles en SVG isolés. Désormais, on peut viser une seule collection, à condition de relire chaque glyphe coloré après l’import. Si une pastille se révèle instable à petite taille, on la retravaille dans Figma, on la renvoie, on ne la laisse pas « comme ça » dans la fonte.
La même relecture vaut pour les animations. Une pulsation sur un bouton « Enregistrer » déjà en cours d’envoi peut aider. La même pulsation sur cinq icônes du menu, en permanence, ne dit plus rien. Nous demandons à la maquette, ou à l’équipe, quel état le mouvement est censé représenter. S’il n’y a pas de réponse, on laisse l’icône statique. Le code reste disponible pour plus tard.
Nous prêtons aussi attention au poids. Une collection qui mélange des tracés simples et des illustrations trop détaillées, surtout en couleurs, alourdit la fonte. Genicons optimise les SVG, mais il ne peut pas décider à notre place qu’un dessin est trop complexe pour un glyphe. Dans ce cas, nous sortons l’illustration du jeu d’icônes et nous la traitons comme une image à part. La webfont redevient ce qu’elle doit être : un système, pas un carton à dessins. Cette distinction, un peu ingrate, évite bien des fontes impossibles à faire évoluer. Mieux vaut le dire à ce moment-là, plutôt que de le découvrir une fois la fonte déjà en production.
Une évolution, pas une relance
Genicons a été mis en ligne en 2024. Nous n’annonçons pas un lancement. Nous documentons une évolution utile : mieux accepter les icônes en couleurs depuis Figma, alors que les trois styles et les animations CSS sont déjà là. Le bon usage n’a pas changé. Un jeu court, nommé, relu, intégré proprement, vaut mieux qu’une valise animée.
Si vous avez un fichier Figma déjà coloré et que le passage à la webfont restait bloqué, nous pouvons regarder un extrait avec vous. Un message sur la page contact, ou un rendez-vous, suffit pour partir du fichier réel.