Comment choisir une collection d'icônes pour votre projet
Mis à jour le · 6 min de lecture
Une collection d'icônes cohérente donne à une interface un air soigné ; un mélange de trois collections lui donne un air bricolé. Avec des centaines de collections gratuites, le défi n'est pas de trouver des icônes, mais de trouver la collection qui couvre vos besoins, correspond à votre style et dont la licence vous convient. Voici une méthode rapide pour décider.
1. Vérifiez d'abord la couverture
Listez les 15 à 20 icônes dont votre produit a le plus besoin (accueil, recherche, réglages, utilisateur, envoi, corbeille, modifier, fermer, chevrons, alertes…), plus quelques icônes propres à votre domaine, comme une facture, un stéthoscope ou une branche git. Cherchez-les ensuite une par une dans la collection candidate. Une collection à laquelle manquent deux de vos icônes clés vous obligera tôt ou tard à en mélanger une autre, et les icônes dépareillées sont l'incohérence visuelle la plus fréquente dans les interfaces.
La taille aide, mais ne fait pas tout : Material Design Icons compte 7 447 icônes et Fluent UI System Icons 19 850, tandis que Heroicons en propose 1 288 soigneusement choisies. Pour un site marketing, une petite collection peut suffire ; pour un tableau de bord complexe, vous apprécierez la profondeur.
2. Choisissez un style : contour, plein ou duotone
- Les icônes contour (au trait) sont légères et modernes et conviennent à la plupart des interfaces. Exemples : Lucide, Tabler Icons.
- Les icônes pleines sont plus lisibles en petite taille et pour les états actifs. Exemples : Material Design Icons, Bootstrap Icons (qui propose aussi des versions contour).
- Les collections à plusieurs graisses permettent d'utiliser le contour au repos et le plein pour l'état sélectionné, sans changer de famille. Phosphor propose six graisses, de fine à duotone. Material Symbols offre des styles contour, arrondi et anguleux. Heroicons et Fluent associent contour et plein.
- Les icônes multicolores donnent du caractère aux illustrations, aux écrans d'accueil et aux états vides, mais s'adaptent plus difficilement à un thème. Parcourez les icônes d'interface multicolores.
Accordez le style des icônes à votre typographie : les traits fins vont avec des polices légères et géométriques, les icônes plus épaisses avec un texte d'interface en gras.
3. Adaptez la grille et l'épaisseur du trait
Les icônes sont dessinées sur une grille, le plus souvent de 24×24 pixels. Elles sont plus nettes affichées à la taille de leur grille ou à un multiple ; choisissez donc une collection conçue pour la taille que vous utilisez vraiment :
- Les collections UI 24 px conviennent aux boutons, menus et à la navigation, le cas le plus courant.
- Les collections 16 et 32 px conviennent respectivement aux outils denses et aux grandes zones tactiles.
Chaque page de collection indique la taille de sa grille. Si vous associez icônes et texte, vérifiez aussi l'épaisseur du trait : un trait de 1,5 px s'équilibre bien avec un texte normal, un trait de 2 px avec un texte medium ou gras.
4. Vérifiez la licence
La plupart des collections autorisent l'usage commercial, mais les conditions varient. MIT, ISC et Apache 2.0 demandent seulement d'inclure le texte de la licence, alors que la CC BY exige un crédit visible. Quelques collections interdisent tout usage commercial. Chaque page de catégorie contient un tableau des licences, et le guide des licences d'icônes les explique toutes.
5. Préférez les collections maintenues
Une collection activement maintenue reçoit de nouvelles icônes au fil des besoins (nouvelles marques, nouveaux motifs d'interface) et des corrections des icônes existantes. Les collections de la catégorie archives non maintenues fonctionnent toujours, mais vous serez seul le jour où il vous faudra une nouvelle icône. Regardez aussi l'écosystème : les collections populaires ont des paquets officiels pour React, Vue et d'autres frameworks, ainsi que des fichiers de design pour Figma.
Recommandations par usage
| Vous créez… | À considérer | Pourquoi |
|---|---|---|
| Une application web moderne ou un SaaS | Lucide, Tabler | Style contour épuré, collections grandes et en croissance, licences permissives (ISC, MIT) |
| Une app avec états actif/inactif | Phosphor, Heroicons | Versions contour et pleines assorties |
| Une app Android ou Material UI | Material Symbols, Material Design Icons | Conformes au Material Design ; Apache 2.0 |
| Une app d'entreprise ou de style Microsoft | Fluent UI System Icons, Carbon | Très large couverture, pensées pour les interfaces métier denses |
| Un site Bootstrap | Bootstrap Icons | Conçues avec Bootstrap ; MIT |
| Logos de marques et réseaux sociaux | Simple Icons, SVG Logos | Logos monochromes et en couleur ; CC0 |
| Sections « stack technique » | Devicon, VS Code Icons | Langages, frameworks et types de fichiers |
| Emojis | Noto Emoji, Twitter Emoji | Couverture complète des emojis ; Apache 2.0 / CC BY 4.0 |
| Sélecteurs de pays | Circle Flags, Flag Icons | Drapeaux ronds ou rectangulaires ; MIT |
Encore hésitant ? Ouvrez deux candidates côte à côte, cherchez vos dix icônes les plus importantes dans chacune et placez-les dans un vrai écran de votre produit. Le meilleur choix apparaît généralement en quelques minutes. Ensuite, le guide d'utilisation des icônes SVG explique comment les ajouter en HTML, React ou Vue.