La décision entre des icônes en outline et filled n’est pas juste une question d’esthétique. C’est un choix stratégique qui affecte la lisibilité, la cohérence visuelle et même la performance de votre système d’icônes. Les deux styles ont leurs forces, mais ils demandent des approches différentes.
Si vous créez un système d’icônes pour la première fois, vous vous posez probablement cette question : lequel choisir ? La vraie réponse, c’est que vous n’avez pas besoin de choisir. Les meilleurs systèmes d’icônes proposent les deux variantes en même temps, mais ils le font correctement.
Comprendre la différence
Les icônes outline utilisent des contours fins pour créer leurs formes. Elles sont généralement tracées avec un trait de 1 à 2 pixels, ce qui les rend légères et aérées. C’est parfait pour les interfaces épurées où vous voulez beaucoup de détails sans surcharger visuellement.
Les icônes filled remplissent les formes avec de la couleur ou une teinte. Elles sont plus massives, plus présentes. Un icône filled prend plus de poids visuel dans une interface, ce qui les rend idéales pour les éléments importants ou les appels à l’action.
La clé, c’est que les deux variantes représentent le même concept. Une icône outline et sa version filled doivent être immédiatement reconnaissables comme la même icône. C’est ça qui crée la cohérence.
Quand utiliser outline
Les outline fonctionnent bien quand vous avez besoin de légèreté. Pensez aux menus de navigation où vous listez 6 ou 8 options. Si vous utilisiez du filled, ce serait trop visuel. Les outline permettent à l’utilisateur de scroller sans que les icônes dominent le design.
Ils sont aussi excellents pour les états inactifs ou désactivés. Une icône outline peut facilement devenir semi-transparente ou changer de couleur sans perdre sa clarté. Un outline à 50% d’opacité reste lisible. Un filled trop transparent devient flou.
Dans les systèmes avec beaucoup de densité visuelle — tableaux de données, listes longues, grilles de contenu — les outline respirent. Vous pouvez en mettre plus sans créer de chaos.
Les principes présentés ici s’appliquent à la plupart des systèmes d’icônes web. Votre contexte spécifique — la marque, les utilisateurs, la plateforme — peut influencer ces décisions. Testez toujours vos icônes dans des contextes réels avant de valider votre approche.
Quand utiliser filled
Les icônes filled sont vos outils pour créer de la hiérarchie. Vous mettez du filled sur le bouton principal, et outline sur les options secondaires. L’utilisateur sait immédiatement où cliquer en premier. C’est du design sans mots.
Ils brillent aussi dans les interfaces mobiles. Sur un petit écran, une icône outline peut devenir difficile à voir si le trait est trop fin. Un filled à 24×24 pixels reste parfaitement lisible. Beaucoup d’apps mobiles populaires utilisent du filled pour cette raison.
Les icônes filled conviennent aussi mieux aux états actifs ou sélectionnés. Quand quelque chose est sélectionné, vous voulez que ce soit évident. Un icône filled qui change de couleur crée une différence immédiate et incontestable.
Pour les dashboards ou les interfaces de monitoring, le filled aide à identifier rapidement les zones importantes. Si vous avez 20 icônes et que 3 d’entre elles sont filled, vous les voyez tout de suite.
Maintenir le poids visuel
Voici où beaucoup de designers se trompent : ils créent une icône outline, puis simplement remplissent la forme pour la version filled. Le résultat ? Les deux icônes ne se sentent pas du même poids. Le filled paraît toujours plus gros.
La solution, c’est d’ajuster les proportions. Si votre outline a un trait de 2 pixels et une forme de 20×20, votre filled peut avoir une forme légèrement plus petite — disons 18×18 — pour que les deux variantes prennent le même espace visuel.
Ou vous pouvez garder la même taille mais utiliser une couleur plus légère pour le filled. Cela réduit perceptuellement son poids. Gris au lieu de noir. Vous n’avez pas besoin que les deux soient techniquement identiques pour qu’elles se sentent équilibrées.
Le test simple : mettez-les côte à côte à la même taille. Fermez les yeux pendant 2 secondes, puis ouvrez-les. Lequel vous frappe en premier ? Si c’est un des deux, ajustez-le. Ils doivent avoir le même impact visuel immédiat.
Construire votre système
La meilleure approche, c’est d’avoir les deux. Pas besoin de proposer 200 icônes dans chaque style — ça devient ingérable. Mais proposer vos icônes principales en outline ET en filled vous donne de la flexibilité pour la hiérarchie, l’accessibilité et les différents contextes d’utilisation.
Commencez par 20-30 icônes que vous utiliserez vraiment souvent. Créez-les en outline d’abord. C’est plus rapide. Ensuite, faites les versions filled en ajustant le poids visuel pour qu’elles restent cohérentes. Testez-les dans vos designs réels. Corrigez ce qui ne fonctionne pas.
Une fois que vous avez validé votre approche sur ce premier ensemble, vous pouvez étendre progressivement. Chaque nouvelle icône suivra les mêmes règles de cohérence. C’est comme ça que vous construisez un vrai système, pas juste une collection.
