Un jeu d'icônes cohérent avec l'IA : une icône maîtresse, onze sœurs, un seul style

Demandez une icône de cloche à un modèle d'image et vous obtiendrez une jolie cloche. Demandez ensuite un cadenas et vous obtiendrez un joli cadenas, dessiné visiblement par une autre main : traits plus épais, angles plus vifs, une légère inclinaison, une pointe d'ombrage que la cloche n'avait pas. Placez-les côte à côte dans une barre d'onglets et l'application semble assemblée à partir de trois packs gratuits. Un jeu d'icônes se juge comme un ensemble, et l'œil repère l'intruse bien avant de remarquer une bonne icône.

Ce guide construit douze icônes pour une application de prise de notes inventée, Quillbox : accueil, recherche, notifications, calendrier, messages, appareil photo, favoris, filtres, verrou, courrier, dossier et suppression. La méthode vaut pour n'importe quelle liste. Fixez les règles, créez une icône maîtresse qui les respecte, dérivez toutes les autres de cette maîtresse, vérifiez-les à la taille où on les verra vraiment, et terminez par un redessin vectoriel.

Écrivez les règles avant le premier prompt

La cohérence, ce sont quelques chiffres que partagent toutes les icônes. Notez-les sur une seule fiche et gardez-la ouverte du début à la fin :

1. 01La grille. Un canevas carré, par exemple 24 sur 24 unités, avec une marge de 2 unités que rien ne franchit sauf exprès. Chaque icône est dessinée sur cette grille et mise à l'échelle seulement à la fin.
2. 02Le trait. Une seule épaisseur, par exemple 2 unités, avec des extrémités et des jointures arrondies. Icônes au trait et icônes pleines ne se mélangent pas dans un même jeu ; choisissez-en un.
3. 03Le rayon d'angle. Un seul rayon pour chaque rectangle, par exemple 3 unités sur les angles extérieurs. Un calendrier aux angles doux à côté d'une icône de courrier aux angles vifs, c'est l'incohérence la plus fréquente.
4. 04Les formes de référence. Un cercle, un carré et un rectangle large qui occupent à peu près la même surface, pour qu'une icône ronde et une icône carrée paraissent de la même taille à l'œil.
5. 05La palette. Une seule couleur de trait pour le jeu, plus au maximum un accent pour l'état actif. Pas de dégradé, pas d'ombre, pas de deuxième couleur de trait pour décorer.
6. 06La perspective. À plat et de face. Pas de vue de trois quarts, pas d'inclinaison isométrique.

Générez une icône maîtresse, et une seule

Choisissez la maîtresse avec soin : une icône simple qui applique la plupart des règles à la fois. Une maison fonctionne bien, car elle a un trait droit, un angle, une jointure et une petite forme intérieure. Reportez la fiche dans le prompt avec des mots simples et demandez une seule icône sur un fond uni, rien d'autre.

Deux types de modèles du catalogue s'y prêtent. Recraft 20B SVG est décrit comme produisant des images vectorielles SVG pour des graphismes et des icônes redimensionnables, et Recraft V4.1 Text to Vector comme produisant des images de style vectoriel modifiables à partir d'un prompt. Si vous préférez partir d'un dessin matriciel bien détouré, Ideogram V3 Generate Transparent renvoie des images sur fond transparent. Lancez le prompt de nombreuses fois et jugez les résultats d'après la fiche, pas d'après vos goûts. La maîtresse à garder est celle qui respecte le mieux les règles, même si un autre brouillon est plus joli.

Dérivez les sœurs de la maîtresse

C'est là que la plupart des jeux s'effondrent : onze nouveaux prompts donnent onze nouvelles interprétations. Faites plutôt de la maîtresse la référence de tout ce qui suit. Le catalogue a une voie directe pour cela. Recraft V4 Create Style transforme des images de référence en un identifiant de style réutilisable, et Recraft V4 Style Text to Vector dessine un graphisme vectoriel à partir d'un prompt et de cet identifiant de style, ou directement des images de référence. Donnez-lui votre maîtresse, puis, dès que vous avez deux ou trois bonnes sœurs, ajoutez-les aussi comme références, pour que le style soit appris d'une petite famille plutôt que d'un seul dessin.

Gardez chaque prompt d'icône sœur ennuyeux. Même phrase que pour la maîtresse, seul l'objet change : une cloche, une loupe, un cadenas. Évitez les adjectifs qui tirent le style ailleurs, comme mignon, détaillé ou réaliste. Décrivez l'objet par ses formes les plus simples : un cadenas, c'est un rectangle arrondi sous une anse en demi-cercle, avec un petit trait pour le trou de serrure.

• Les objets difficiles d'abord. L'appareil photo, les filtres et le calendrier ont le plus de parties et dérivent le plus. S'ils tiennent, le reste tiendra.
• Des métaphores simples. Les notifications sont une cloche, les favoris un cœur, la suppression une corbeille. Une métaphore astucieuse est une décision de design à part, pas une expérience de prompt.
• Un objet par icône. Un dossier avec une étoile, ce sont deux icônes. Ajoutez le badge plus tard en vectoriel, de la même façon pour chaque icône qui en a besoin.
• De petites corrections, pas de nouveaux tirages. Si une bonne sœur a un seul détail faux, comme un angle vif sur un appareil photo par ailleurs réussi, Ideogram V4.5 Edit accepte un masque, pour ne modifier que cette partie.

Verrouiller le style réduit les écarts ; il ne les supprime pas. Comptez quelques tours avant que les douze s'accordent, et attendez-vous à corriger le reste à la main dans les étapes suivantes.

Alignez-les et vérifiez-les en petit

Placez les douze sur une seule planche, en grille de 4 sur 3, sur le même fond, à la même taille. Puis réduisez la planche jusqu'à ce que chaque icône ait à peu près sa taille dans l'application : 24 pixels pour une barre d'outils, 16 pour un menu ou une liste dense. Regardez-la sur un vrai téléphone, pas seulement sur un grand écran. Passez la liste :

• Le test du plissement d'yeux. Plissez les yeux. Les douze doivent avoir le même poids de gris. Celle qui paraît plus sombre a un trait plus épais ou trop de lignes.
• Le test de taille. Les icônes rondes et carrées doivent paraître de la même taille. Si la recherche semble plus petite que le courrier, agrandissez-la jusqu'au cercle de référence.
• Le test des détails. À 16 pixels, tout espace plus étroit qu'un trait se bouche. Le trou de serrure du verrou et la bague d'objectif de l'appareil photo en sont les victimes habituelles ; supprimez-les ou élargissez-les.
• Le test de devinette. Montrez la petite planche à quelqu'un qui ne l'a jamais vue et demandez ce que signifie chaque icône. Toute hésitation appelle une forme plus simple ou un libellé à côté dans l'application.
• Le test d'état. Essayez chaque icône dans la couleur d'accent sur l'onglet actif. Si une version pleine fait partie de votre système, elle doit être remplie de la même façon pour les douze.

Nettoyez en vectoriel

Même quand un modèle renvoie un SVG, ouvrez-le avant de lui faire confiance. Les tracés générés sont souvent bosselés : des dizaines de nœuds là où trois suffiraient, des traits stockés comme des contours pleins de largeurs légèrement différentes, des angles presque mais pas tout à fait du même rayon. Pour un jeu, le plus propre est de redessiner chaque icône sur votre grille avec de vrais traits, en gardant le fichier généré dessous comme simple guide. Notre guide des concepts de logo IA au vectoriel couvre le tracé à la main et la simplification des formes, et les mêmes habitudes s'appliquent ici.

Ce qui est propre aux icônes, c'est la construction partagée. Définissez une fois l'épaisseur du trait et le rayon d'angle comme un style dans votre éditeur et appliquez-le aux douze, pour qu'un changement ultérieur du trait modifie tout le jeu. Alignez les points sur la grille pour que les lignes tombent sur des pixels entiers à la taille principale. Gardez un fichier maître avec chaque icône sur son propre plan de travail, nommée selon son sens, par exemple icon-search plutôt que loupe, et exportez de là dans les formats que demandent vos développeurs.

Si les icônes doivent cohabiter avec une identité plus large, la palette et l'identifiant de style peuvent venir du même endroit que le reste de la marque, comme dans la planche d'identité de marque d'une torréfaction fictive. L'idée de figer une pièce maîtresse et de tout construire autour est la même qui fait tenir une papeterie d'un seul tenant.

Ce qui reste votre travail

Le modèle vous donne des brouillons et une direction. Le jeu final, c'est le redessin : des traits cohérents, une vraie grille, testé à taille réelle. Vérifiez qu'aucune icône n'est une quasi-copie du symbole connu d'une autre entreprise, et suivez les recommandations de la plateforme quand une boutique ou un système d'exploitation a ses propres règles pour les icônes d'application. Quand les douze tiennent, en ajouter une treizième est facile : la fiche, la maîtresse et l'identifiant de style sont déjà là. Parcourez les modèles vectoriels et de design sur /models et lancez votre maîtresse dans le studio.