Icônes et pictogrammes : bonnes pratiques
Cohérence de style, taille minimale, texte d'accompagnement : les bonnes pratiques pour utiliser des icônes efficacement dans une interface.
Icône seule ou icône + texte ?
| Contexte | Recommandation |
|---|---|
| Action fréquente et universellement reconnue (fermer, rechercher) | Icône seule acceptable |
| Action moins courante ou ambiguë | Toujours accompagner d'un texte ou d'un tooltip |
| Navigation principale | Icône + texte, pour éviter toute ambiguïté |
Une icône seule, sans texte ni tooltip, est un pari sur la compréhension universelle du symbole — une hypothèse souvent fausse (l'icône « disquette » pour enregistrer n'est plus reconnue par les plus jeunes utilisateurs, qui n'ont jamais vu de disquette physique).
Taille et zone cliquable minimales
| Contexte | Taille minimale recommandée |
|---|---|
| Icône sur desktop | ~16-24px visuellement |
| Zone cliquable/tactile (mobile) | 44×44px minimum (recommandation Apple/Google) |
Cohérence de style dans un même set d'icônes
- Même épaisseur de trait pour toutes les icônes (linéaires) ou même style plein (filled) — ne pas mélanger les deux styles dans une même interface.
- Même grille de conception (ex. 24×24px) pour un alignement visuel cohérent.
- Même niveau de détail : des icônes trop détaillées à petite taille deviennent illisibles.
Bibliothèques d'icônes courantes
| Bibliothèque | Style |
|---|---|
| Feather Icons | Minimaliste, traits fins |
| Font Awesome | Large choix, styles multiples (solid, regular, brands) |
| Material Icons | Style Google, plusieurs graisses |
| Heroicons | Minimaliste, pensé pour Tailwind CSS |
Merci pour votre retour !