Générateur de sprite CSS (regrouper des icônes dans une image)
Choisissez les icônes (PNG, SVG, WebP ou JPG). Le nom de chaque fichier devient le nom de la classe dans le CSS.
Mode d’emploiPlusieurs icônes dans un seul fichier
Disponible en: 
Générateur de sprite CSS (regrouper des icônes dans une image): à quoi ça sert
Un sprite regroupe plusieurs icônes dans une seule image, et le CSS affiche la bonne portion à chaque endroit avec background-position. Le navigateur fait une requête au lieu de dix et les icônes de survol ne clignotent pas.
Choisissez les icônes, la disposition (grille, ligne ou colonne), l’espace entre elles et le format. Téléchargez le sprite et copiez le CSS avec une classe par icône (le nom du fichier devient le nom de la classe), largeur, hauteur et position. L’option Retina affiche à moitié les icônes réalisées au double de la taille, nettes sur les écrans haute densité.
Mode d’emploi
- Choisissez les icônes.
- Réglez la disposition, l’espace et le format.
- Téléchargez le sprite et copiez le CSS.
Quand l’utiliser
- Icônes de réseaux sociaux avec survol.
- Drapeaux et badges.
- Sprites de jeux en HTML.
Questions fréquentes
À quoi sert un sprite ?
Au lieu de télécharger dix icônes séparées, le navigateur télécharge une seule image, et le CSS affiche la bonne portion à chaque endroit avec background-position. Cela réduit le nombre de requêtes au serveur et évite que les icônes clignotent au survol, car l’état de survol est déjà chargé.
Le sprite vaut-il encore la peine avec HTTP/2 ?
Avec HTTP/2, le coût de nombreux petits fichiers a beaucoup baissé : le gain est donc moindre qu’autrefois. Les sprites restent utiles pour les jeux d’icônes de survol, les drapeaux, les badges et les jeux en canvas, ainsi que pour ceux qui ne peuvent pas utiliser le SVG inline.
Qu’est-ce que l’option Retina ?
Si vos icônes ont été réalisées au double de la taille à laquelle elles s’affichent, cochez l’option : le CSS affiche chacune à moitié avec background-size, et elles restent nettes sur les écrans haute densité, comme ceux des téléphones et des Mac.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.