Les icônes structurent une interface, allègent un texte et guident l’utilisateur. Encore faut-il choisir des fichiers de qualité, sous une licence claire et dans le bon format. Voici les meilleures sources d’icônes gratuites et les bonnes pratiques d’intégration.
Bien choisir ses icônes : format et licence
Beaucoup de packs sont gratuits mais imposent une attribution ; d’autres sont totalement libres. Pour un projet client, vérifiez la mention d’usage commercial.
SVG vs PNG vs police d’icônes
| Format | Avantages | Idéal pour |
|---|---|---|
| SVG | Vectoriel, net, léger, recolorable | Le web moderne |
| PNG | Universel, simple | Maquettes, print |
| Police d’icônes | Gérée comme du texte | Sites avec beaucoup d’icônes |
Pour transformer vos pictos en police, voir icônes en typographie pour le web.
Les meilleures bibliothèques d’icônes gratuites
Packs vectoriels libres (open-source)
Tabler Icons, Lucide, Feather : sets épurés, MIT. Material Symbols (Google) : immense et libre. Flaticon & Icons8 : énormes catalogues (attribution en gratuit).
Bibliothèques pour développeurs
Font Awesome, Heroicons, Phosphor : pensées pour React/Tailwind. Complétez avec nos 4000+ éléments open-source.
Comment intégrer des icônes sur un site
- SVG inline : recoloration et animation en CSS.
- Sprite SVG : un fichier appelé via <use>.
- Police d’icônes : un <link> puis des classes.
Conseils pour un set d’icônes cohérent
- Une seule famille : ne mélangez pas les styles.
- Grille et épaisseur communes.
- Recolorez aux couleurs de votre palette.
FAQ
Où télécharger des icônes gratuites pour usage commercial ?
Tabler Icons, Lucide, Feather et Material Symbols (MIT/Apache), sans attribution.
Quel format d’icône choisir pour un site web ?
Le SVG : vectoriel, net, léger et recolorable en CSS.
Faut-il créditer les icônes gratuites ?
Selon la licence. Les sets MIT n’exigent rien ; Flaticon/Icons8 demandent souvent une attribution.
Comment intégrer une icône SVG sur un site ?
Collez le code SVG inline, ou utilisez un sprite SVG via <use>.