Qu’est-ce qui fait qu’un jeu d’icônes paraît homogène ?
Des icônes vont ensemble quand elles partagent une grille, une épaisseur de trait, un traitement des coins, un niveau de détail et une palette. Mélanger des icônes de différents packs, ou les générer une à une avec des prompts séparés, casse généralement au moins l’un de ces points. Le générateur de jeux d’icônes dessine toutes les icônes d’un jeu sur une même planche, à partir d’une seule description du style : les choix de dessin sont faits une fois pour toutes. Chaque icône est ensuite découpée et vectorisée dans son propre SVG.
Trois de nos jeux d’exemple, chacun créé à partir d’une seule liste : une appli de café en Ligne, une appli de fitness en Plein avec des coins anguleux, et une appli de voyage en Aplat avec trois couleurs.
Comment créer un jeu ?
Ouvrez le générateur de logo IA et choisissez Icônes. Le titre du studio devient alors celui du générateur de jeux d’icônes.
- Listez les icônes. Tapez les objets dont vous avez besoin, séparés par des virgules ou un par ligne :
tasse de café, croissant, repère, carte de fidélité. Chacun devient une puce. Un jeu contient jusqu’à 25 icônes. - Choisissez leur rendu. Ligne donne des contours d’une seule épaisseur, Plein des formes pleines d’une seule couleur, Aplat des formes pleines en trois couleurs au maximum, et Comme cette image reprend le style d’une image que vous importez (avec un compte) ou d’un logo ou jeu d’icônes que vous avez déjà créé.
- Choisissez les coins. Arrondis ou anguleux.
- Décrivez le style en mots, si vous le souhaitez. Jusqu’à 300 caractères, par exemple « sympa et minimaliste, extrémités arrondies, une petite touche faite main ». Cette phrase entre dans le dessin de chaque icône du jeu.
- Envoyez. Chaque vignette montre son icône en cours de vectorisation, puis le SVG terminé.
Le prix d’un nouveau jeu est indiqué sur le bouton avant l’envoi ; rien n’est facturé pour un jeu qui échoue.
Comment corriger une icône sans redessiner les autres ?
Utilisez une série de modifications. Dans une série, vous pouvez refaire des icônes avec une note (« un tapis roulé tout simple, sans texture ») et en ajouter de nouvelles, jusqu’à neuf modifications à la fois. Les icônes refaites et ajoutées sont dessinées dans le style du jeu : elles restent assorties. Les premières séries d’un jeu sont incluses ; quand une série coûte des crédits, son bouton l’indique avant de la lancer.
Si un seul détail cloche et qu’un nouveau dessin serait excessif, ouvrez l’icône dans l’éditeur SVG et modifiez directement le tracé ou la couleur.
Que contient le téléchargement ?
Le ZIP comporte trois parties :
| Dossier | Contenu |
|---|---|
svg/ |
un SVG par icône, viewBox="0 0 24 24" avec une marge de 2 px |
png/ |
chaque icône en PNG transparent de 16, 24, 32, 48, 64, 128, 256 et 512 px |
sprite.svg |
toutes les icônes en <symbol> avec l’identifiant icon-NAME |
Les petits PNG (jusqu’à 48 px) sont dessinés à leur propre taille : les traits tombent sur des pixels entiers au lieu d’être réduits depuis une grande image. Les tailles plus grandes sont mises à l’échelle à partir de 512 px.
Comment utiliser les icônes sur un site web ?
Pour un jeu en Ligne ou en Plein, les SVG sont dessinés en currentColor : une icône prend la couleur du texte qui l’entoure. Vous la recolorez en CSS au lieu de modifier les fichiers :
<button class="icon-button">
<svg width="24" height="24" aria-hidden="true"><use href="sprite.svg#icon-cup-of-coffee"/></svg>
Order
</button>
.icon-button { color: #6b3f24; }
.icon-button:hover { color: #1f2937; }
Choisissez Tel que conçu dans la fenêtre de téléchargement si vous préférez que la couleur soit inscrite dans chaque fichier. Un jeu en Aplat garde toujours ses propres couleurs. Marquez les icônes décoratives avec aria-hidden="true", et donnez un nom accessible à une icône utilisée seule comme bouton.
Quelles listes fonctionnent le mieux ?
Les noms concrets et faciles à dessiner fonctionnent le mieux : « vélo », « chronomètre », « serrure ». Les mots abstraits (« croissance », « confiance ») ne donnent rien de précis à dessiner au générateur : transformez-les d’abord en objet (« une pousse », « une poignée de main »). Gardez un seul niveau de détail sur toute la liste. Un jeu qui mélange « point » et « silhouette de ville » paraîtra déséquilibré, quelle que soit la façon de le dessiner.
Avant de publier, vérifiez chaque icône en 16 et 24 px à côté du texte, vérifiez le contraste sur vos arrière-plans, et assurez-vous que les icônes similaires restent bien distinctes. Un générateur ne vérifie pas si une icône ressemble à la marque de quelqu’un d’autre : examinez toute icône que vous comptez déposer comme marque.