HomeCasa Guide de style d’icônes pour un design system
Créez le guide de style de votre jeu d’icônes : grille et keylines, épaisseur de trait, angles, tailles, métaphore pour chaque icône, nommage, export SVG, accessibilité et check-list. Conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Il comprend 5 variables personnalisables et vous pouvez le copier gratuitement en un clic.
Intermédiaire · Texte · En attente de relecture éditoriale
Prompt
Agis comme designer d'icônes et responsable de design system.
Contexte :
- Produit : {{produit}}
- Personnalité de marque : {{personnalite}}
- Style d'icône : {{style}}
- Taille de grille de base : {{grille}}
- Icônes nécessaires : {{icones}}
Livrables :
1. 3 à 5 principes de style issus de la personnalité de marque, avec des exemples d'application.
2. Grille et keylines : taille du canevas, zone utile, marge de sécurité et formes guides (cercle, carré, rectangles portrait et paysage) avec leurs mesures.
3. Règles de construction : épaisseur de trait, rayon des angles, terminaisons, angles autorisés, traitement des espaces et niveau de détail minimal.
4. Tailles d'usage (par exemple 16, 20, 24, 32) et cas où une version ajustée optiquement est nécessaire.
5. Tableau des métaphores pour chaque icône demandée : métaphore proposée, alternative, risque d'ambiguïté ou de différence culturelle, et nécessité ou non d'un libellé.
6. Nommage des fichiers et composants, règles d'export SVG : viewBox, aucun remplissage figé (currentColor), traits vectorisés ou non selon le cas, optimisation.
7. Accessibilité : icônes décoratives ou informatives, aria-hidden, nom accessible pour les boutons sans texte, contraste minimal de 3:1 et zone tactile de 44 à 48 px quelle que soit la taille de l'icône.
8. Check-list de revue avant d'ajouter une nouvelle icône au jeu.
Contraintes :
- Ne copie ni n'imite des jeux d'icônes tiers ; si tu proposes de partir d'une bibliothèque libre, rappelle-moi d'en vérifier la licence.
- Utilise [À COMPLÉTER] pour les choix de marque absents du contexte.
- Si la liste d'icônes est ambiguë, demande-moi quelle action représente chaque icône avant de proposer des métaphores.
Format : guide structuré par titres, tableaux de mesures et de métaphores, check-list finale.Comment l'utiliser
- Listez les icônes nécessaires avec l’action ou le concept que chacune représente. 2. Testez le tableau des métaphores auprès d’utilisateurs ou de l’équipe produit. 3. Créez un gabarit de grille dans votre outil de design avec les mesures proposées.
Exemple d'utilisation
Produit : application bancaire · Personnalité : fiable et chaleureuse · Style : contour avec remplissage à l’état actif · Grille : 24 px · Icônes : virement, carte, alertes, épargne.
Exemple de résultat
Principes de style
- Fiable : formes géométriques stables, pas de traits obliques inutiles.
- Chaleureuse : angles arrondis de 2 px et terminaisons rondes.
- Simple : trois éléments maximum par icône ; au-delà, la métaphore ne fonctionne pas.
Grille et construction (24 px)
| Élément | Mesure |
|---|---|
| Canevas | 24 × 24 px |
| Zone utile | 20 × 20 px (marge de 2 px) |
| Cercle de repère | Ø 20 px |
| Carré de repère | 18 × 18 px |
| Contour | 1,5 px, terminaisons rondes |
| Rayon d'angle | 2 px |
| État actif | Même dessin avec remplissage plein |
Tableau des métaphores
| Icône | Métaphore | Alternative | Risque | Libellé obligatoire ? |
|---|---|---|---|---|
| Accueil | Maison | Grille | Faible | Oui, dans la barre du bas |
| Virement | Deux flèches opposées | Flèche vers une personne | Peut évoquer « échanger » | Oui |
| Paiement mobile | Téléphone avec ondes | Main tenant un téléphone | Ondes = Wi-Fi | Oui |
| Épargne | Tirelire | Pièce avec flèche montante | Tirelire peu universelle | Oui |
| Alertes | Cloche | — | Faible | Bouton icône seule : nom accessible |
Export SVG
viewBox="0 0 24 24", aucun remplissage figé :stroke="currentColor".- Nommage :
icon-transfer-outline.svg/icon-transfer-filled.svg…
Informations clés
- Catégorie
- Design UI/UX · Design systems
- Type de résultat
- Texte
- Niveau
- Intermédiaire
- Conçu pour
- ChatGPT, Claude, Gemini et Microsoft Copilot
- Vérifié sur
- En attente de vérification éditoriale
- Variables
- Produit, Personnalité de marque, Style d’icône, Grille de base et Icônes nécessaires
- Langue
- Français
- Prix
- Gratuit, sans inscription
- Mis à jour
- 07/11/2026
Questions fréquentes
Quelle taille de grille choisir pour des icônes d’interface ?
La grille de 24 px est la plus répandue, avec des déclinaisons à 16 ou 20 px pour les zones denses. L’essentiel est de garder la même épaisseur de trait apparente à toutes les tailles.
Une icône doit-elle toujours avoir un libellé ?
Pas toujours, mais les icônes peu universelles gagnent à être accompagnées d’un texte. Un bouton sans texte doit au minimum avoir un nom accessible pour les lecteurs d’écran.
À quoi sert ce prompt ?
Créez le guide de style de votre jeu d’icônes : grille et keylines, épaisseur de trait, angles, tailles, métaphore pour chaque icône, nommage, export SVG, accessibilité et check-list.
Avec quels outils d'IA fonctionne-t-il ?
Il est conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Nous ne l'avons pas encore vérifié sur ces outils ; les résultats peuvent donc varier de l'un à l'autre.
Comment personnaliser le prompt ?
Cliquez sur « Personnaliser » et remplissez les variables (Produit, Personnalité de marque, Style d’icône, Grille de base et Icônes nécessaires). Le texte se met à jour instantanément et vous pouvez ensuite le copier en un clic. Les valeurs sont stockées uniquement dans votre navigateur.
Faut-il de l'expérience pour l'utiliser ?
Il est de niveau intermédiaire : il vaut mieux connaître le sujet pour fournir un bon contexte et relire le résultat d'un œil critique.
Ce prompt est-il gratuit ?
Oui. Tous les prompts de HomeCasa Prompts sont gratuits, sans inscription ni abonnement. Vous pouvez aussi les utiliser dans des projets professionnels.
Puis-je me fier au résultat de l'IA ?
Considérez-le comme un brouillon de qualité : vérifiez toujours les données, les chiffres et les affirmations importantes avant de publier ou de prendre des décisions.