# Une refonte soignée des icônes de Mole
> Mole passe des icônes système à un jeu adapté de Phosphor : choisir une bibliothèque d’icônes, les juger dans le produit, les petites idées qui lui donnent vie, et les détails d’alignement et de taille.
Published: 2026-09-30
J’avais envie de partager quelques réflexions sur la refonte des icônes d’un produit : à quoi faire attention, et ce qu’on peut encore améliorer.
Ce matin, j’ai repris avec soin les icônes de Mole. Jusqu’ici, l’app utilisait les icônes du système, et pour un produit simple je trouve que cela suffit largement, mais en regardant de près, il manquait un peu de caractère.
Dans chaque paire, l’ancienne icône système est à gauche, et à droite l’icône retravaillée à partir de la bibliothèque Phosphor.
## Choisir une bibliothèque d’icônes
Après quelques recherches, les deux bibliothèques qui conviennent le mieux aux icônes d’une app sont Remix Icon et Phosphor Icons. J’ai beaucoup utilisé Remix pour le web, c’est simple et agréable, mais dans une app je ne la trouvais pas très belle, alors je suis passé à Phosphor, qui a vraiment du caractère et rend très bien. Environ 70 % des icônes ont pu être utilisées telles quelles, et les 30 % restantes, je les ai dessinées moi-même en faisant écrire le SVG par Opus 5.5, pour que l’ensemble reste cohérent.
## Toujours les juger dans le produit
Sur la comparaison ci-dessus, la différence ne saute peut-être pas aux yeux. Bien souvent, il faut placer les icônes dans le vrai produit, et je regarde aussi comment tout un groupe d’icônes d’un même module fonctionne ensemble. Il arrive que chaque icône soit belle prise isolément et que le groupe ne le soit pas, comme un visage dont chaque trait est joli mais qui, dans l’ensemble, ne s’accorde pas. Mon conseil est donc simple : quand vous changez d’icônes, regardez-les dans le produit réel, toutes ensemble, c’est là qu’on obtient un bon résultat.
## Les petites idées donnent vie au produit
Ensuite, je pense depuis longtemps que les produits qu’on fait devraient avoir une âme, une impression de vie, plutôt que d’être le produit froid d’un AI Coding sans aucune réflexion de votre part. Les petits détails comme les icônes sont une bonne porte d’entrée pour donner cette vie. Pour « Garder l’écran allumé », j’ai choisi une tasse de café, la métaphore de Caffeine : votre Mac a bu un café et n’arrive plus à dormir. « À propos de Mole » utilise en général un i entouré, mais pour moi c’est un bonjour, alors c’est une main qui salue. Le « Diagnostic » aurait normalement un symbole de dépannage, et ici c’est un stéthoscope, comme un médecin qui examine votre problème. Un produit peut accueillir beaucoup de petites idées de ce genre, et l’ensemble devient bien plus amusant.
## Alignement, taille et centrage
Enfin, un beau design revient presque toujours aux mêmes principes : l’alignement, l’ordre et un rythme bien dosé. Faire en sorte que les icônes, le texte et les blocs au-dessus et en dessous paraissent alignés, de la même taille et même centrés verticalement, tels que l’œil les voit, demande de les regarder et de les ajuster un par un. Cela comprend l’alignement du texte avec les icônes, et la façon de gérer des caractères chinois et latins qui, au départ, ne partagent pas le même centre vertical. On peut peaufiner cela longtemps, et je trouve ça passionnant.
Quelques exemples de cette refonte. La batterie était d’abord un contour vide, identique quelle que soit la charge, si bien qu’une batterie pleine paraissait vide ; elle se remplit maintenant par quarts. Les icônes des menus suivaient d’abord la taille des icônes système et paraissaient trop grandes et trop grasses ; de 14,3 pt je suis passé à 12,5 pt, encore un peu grand, pour finir à 11 pt. Certaines icônes étaient dimensionnées sur leur largeur, d’autres sur leur plus grand côté, si bien que le balai et la flèche de déconnexion, tout en hauteur, paraissaient grands, tandis que l’insecte et la courbe, tout en largeur, paraissaient petits. Elles sont désormais dimensionnées sur la moyenne de la largeur et de la hauteur, avec une limite pour le plus grand côté, et les nouvelles icônes suivront automatiquement la même règle. Et dans l’image comparative faite pour un tweet, le mot Mole du titre est composé dans une police chinoise à empattements dont les lettres latines se trouvaient 4 pt plus haut que le chinois voisin : il a fallu les descendre à part pour que les deux s’alignent.
Les mêmes 14 icônes : à gauche calées sur la largeur ou le plus grand côté, à droite ramenées à une même taille visuelle. Sur téléphone, l’ancien jeu est au-dessus.
## Écouter les utilisateurs, puis un tour de plus
Après la publication de l’article, les retours des utilisateurs sont arrivés petit à petit. Quelques icônes qui me plaisaient leur paraissaient moins jolies ou peu familières : « Rechercher les mises à jour » utilisait une icône de téléchargement et se lisait comme un téléchargement, le petit cube du GPU ne ressemblait pas à une carte graphique, l’icône d’archive ne voulait rien dire, deux barrettes empilées n’évoquaient pas vraiment la mémoire, et certains trouvaient peu jolies l’éponge de « Nettoyer l’écran » et la main qui salue de « À propos de Mole ».
C’est justement le moment où quelques échanges avec les utilisateurs valent mieux qu’une certitude solitaire, alors chacune de ces icônes a eu droit à un tour de plus, en suivant leurs suggestions. La recherche de mises à jour est devenue une flèche dans le sens des aiguilles d’une montre, le GPU une carte graphique à deux ventilateurs, l’archive une boîte de rangement, et l’audio est passé des notes de musique à un casque. « Nettoyer l’écran » est revenu au pinceau de la toute première icône système, « À propos de Mole » a retrouvé le i entouré le plus classique, redessiné pour avoir l’épaisseur du reste de la colonne, et la mémoire est redevenue une puce. Plusieurs ont changé trois fois en chemin.
Le même morceau d’interface côte à côte : sur chaque ligne, les icônes système, la première version et les icônes actuelles.
## Le temps gagné grâce à l’IA, pour peaufiner
Ce genre de travail peut sembler inutile, mais c’est quelque chose que j’aime vraiment faire. L’IA fait beaucoup progresser un bon code et un goût correct, et on pourrait croire qu’il ne reste plus qu’à donner des consignes. Je pense l’inverse : le rôle de la personne est encore plus grand ici. Le temps que l’IA vous fait gagner, c’est justement celui à consacrer au polissage du produit, pour que le 1 % d’utilisateurs attentifs ait de temps en temps, en l’utilisant, cette impression de comprendre tout de suite, de « waouh », d’un petit tour de magie. C’est ce qui a vraiment de la valeur et du sens, et c’est peut-être ce que je trouve le plus intéressant dans le fait de créer des produits indépendants.
---
Canonical HTML page: https://mole.fit/fr/blog/mole-icon-refresh
Blog index for agents: https://mole.fit/fr/blog/llms.txt
Site index for agents: https://mole.fit/llms.txt
