Design d'icônes : créer un jeu d'icônes cohérent

Un bon design d'icônes ne se juge pas à un symbole isolé mais à un jeu d'icônes qui vont ensemble. Une icône superbe seule peut ruiner une interface si son trait est plus épais, ses angles plus durs ou sa taille décalée par rapport à ses voisines. Le secret d'un jeu cohérent tient moins au talent qu'aux règles décidées à l'avance : une grille commune, une épaisseur de trait fixe, le même rayon d'angle et un équilibre optique. Cet article explique pas à pas comment construire un jeu d'icônes de zéro, de façon durable.

Grille et canvas : le point de départ

Avant de dessiner quoi que ce soit, définissez un espace de travail commun. Le canvas standard du secteur est de 24×24 pixels ; les interfaces plus petites utilisent souvent 20×20 ou 16×16. L'essentiel est de dessiner chaque icône sur le même canvas. À l'intérieur, placez une live area (zone de sécurité) : sur un canvas de 24px, on laisse en général une marge de 2px et on travaille dans une zone de 20×20. Le poids visuel de chaque icône doit rester dans cette zone.

Ne pensez pas la grille uniquement comme un carré. En pratique, quatre formes pivots aident : un carré, un rectangle vertical, un rectangle horizontal et un cercle. Un crayon occupe le pivot vertical, une enveloppe l'horizontal, une horloge le cercle. Ainsi des icônes de formes différentes sont perçues comme étant de même taille.

Épaisseur de trait : l'ADN du jeu

Dans un jeu linéaire (outline), la mesure de cohérence la plus visible est l'épaisseur de trait. Pour une grille de 24px, le choix classique est un trait de 2px ; pour un rendu plus fin, 1,5px fonctionne aussi. Choisissez la règle une fois et ne la cassez jamais dans le jeu.

• Utilisez la même terminaison sur tous les tracés ouverts : stroke-linecap: round pour des bouts arrondis, butt pour des bouts plats.
• Fixez aussi les jonctions d'angle : stroke-linejoin: round ou miter — ne les mélangez pas.
• Alignez les traits sur la grille de pixels. Si le centre d'un trait de 2px tombe pile sur une limite de pixel, ses bords deviennent flous ; décalez d'un demi-pixel pour le rendre net.

Gardez le design en vectoriel mais prévisualisez toujours à la taille réelle (par exemple à 16 et 24 pixels). Un trait élégant à 24 peut se boucher comme de la pâte à 16.

Rayon d'angle et langage visuel

Le rayon d'angle définit la personnalité du jeu. Des angles vifs paraissent techniques et sérieux, des angles doux amicaux et modernes. Choisissez une valeur de rayon (par exemple 2px) et appliquez-la de façon cohérente aux angles extérieurs. Réduire légèrement le rayon sur les angles intérieurs semble souvent plus juste optiquement, car les angles concaves s'adoucissent déjà à l'œil.

La même logique vaut pour chaque détail récurrent : la coupe des extrémités, l'angle des flèches (souvent 45°), l'inclinaison des bouchons. Prenez une décision, documentez-la, appliquez-la à chaque icône. La cohérence d'un jeu naît de la somme de ces micro-décisions.

Équilibre optique : l'œil, pas le calcul

La partie la plus négligée du design d'icônes est la correction optique. Ce qui est géométriquement correct ne paraît pas toujours correct. Quelques exemples classiques :

• Un cercle à côté d'un carré de mêmes dimensions paraît plus petit ; il faut agrandir le cercle légèrement au-delà de la grille pour équilibrer.
• Un triangle (comme une icône « play ») placé au centre géométrique paraît décalé vers la gauche ; on le pousse à droite pour aligner son centre de masse.
• Les lignes horizontales paraissent plus épaisses que les verticales de même largeur ; certains jeux affinent un peu les horizontales.

Règle : fiez-vous à votre œil, pas à la règle. Posez une icône à côté des autres, plissez les yeux et corrigez celle qui ressort ou recule.

Systématiser le processus de production

Plutôt que de garder la cohérence en tête, intégrez-la à vos outils. Si vous utilisez Figma, mettez en place cette structure :

• Construisez les icônes en components et gardez-les toutes à la même taille de frame (24×24).
• Mettez la grille et la live area dans un frame modèle et copiez-le pour chaque nouvelle icône.
• Enregistrez l'épaisseur, la couleur et le style de bout en stroke style pour les modifier depuis un seul endroit.
• Gardez un nommage systématique : des noms à slash comme arrow/left, arrow/right, user/filled se rangent automatiquement en dossiers dans Figma.

Une petite checklist par icône aide : bon canvas, bon trait, traits alignés au pixel, lisible à 16px, nommage correct.

Exporter en SVG propre

Une fois le design terminé, les icônes partent vers le code en SVG. Pour une sortie propre, surveillez quelques points :

• Si possible, laissez les lignes en stroke plutôt que de les convertir en outlines ; ainsi couleur et épaisseur restent contrôlables depuis le CSS.
• Mettez la couleur sur currentColor pour que l'icône hérite de la couleur du texte.
• Retirez les groupes inutiles, les balises <g> vides et les métadonnées d'éditeur (SVGO le fait automatiquement).

Une icône propre typique ressemble à ceci :

<svg viewBox="0 0 24 24" width="24" height="24"
     fill="none" stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M13 6l6 6-6 6"/>
</svg>

Avec cette structure, une icône dans un bouton prend sa taille et sa couleur de color et font-size, sans fichier image séparé.

Questions fréquentes

Quelle grille de pixels utiliser pour un jeu d'icônes ?

Pour la plupart des interfaces web et mobiles, 24×24 pixels est un bon point de départ. Pour des interfaces très denses, vous pouvez descendre à 20×20 ou 16×16 ; l'essentiel est de garder tout le jeu sur une seule grille et de dériver les différentes tailles de la même source.

Faut-il des icônes outline ou pleines (filled) ?

Les deux sont valables ; le choix dépend du contexte. Les icônes outline paraissent légères et neutres, les pleines attirent l'attention. Beaucoup de jeux offrent les deux : outline au repos, filled à l'état actif ou sélectionné. Il suffit que les deux suivent la même grille et le même langage visuel.

Puis-je changer l'épaisseur de trait plus tard ?

Si vous avez laissé les lignes en stroke dans le SVG, vous changez l'épaisseur en une ligne avec stroke-width. Mais une fois les lignes converties en outlines (paths), le retour en arrière est difficile — gardez donc toujours la source maître en stroke.

Besoin d'un jeu d'icônes cohérent pour votre marque ? Je peux vous aider à le construire de bout en bout, de la grille à l'export SVG propre. Contactez-moi et parlez-moi de votre projet.