Le temps de chargement d’un site est décisif. Une technique pour l’optimiser : regrouper ses icônes dans une police web (icon font) plutôt que de multiplier les fichiers image. Voici pourquoi et comment, ainsi que les alternatives modernes.
Pourquoi utiliser une icon font ?
- Performance : un seul fichier au lieu de dizaines d’images.
- Souplesse : taille et couleur gérées en CSS, comme du texte.
- Netteté : vectoriel, parfait sur écrans Retina.
Comment créer une icon font
- Préparez vos icônes en SVG (voir nos packs d’icônes).
- Importez-les dans un générateur comme IcoMoon ou Fontello.
- Téléchargez la police générée (woff2) + le CSS.
- Appelez les icônes via des classes (
<i class="icon-...">).
Icon font ou SVG : que choisir ?
| Critère | Icon font | SVG |
|---|---|---|
| Performance | Bonne | Excellente |
| Accessibilité | Moyenne | Bonne |
| Multicolore | Non | Oui |
| Tendance actuelle | En recul | Recommandé |
Aujourd’hui, le SVG (sprite ou inline) est souvent préféré, mais l’icon font reste pratique sur des sites riches en icônes monochromes.
FAQ
Comment transformer des SVG en police d’icônes ?
Importez vos SVG dans IcoMoon ou Fontello, qui génèrent la police (woff2) et le CSS associé.
Icon font ou SVG en 2026 ?
Le SVG est globalement recommandé (accessibilité, multicolore) ; l’icon font reste utile pour beaucoup d’icônes monochromes.
Une icon font améliore-t-elle la vitesse ?
Oui, en réduisant le nombre de requêtes par rapport à des images séparées.