Rassemblez vos icônes en une planche unique

Avec Planche de sprites, les photographes et créateurs visuels peuvent regrouper des icônes et leur CSS avant intégration. Rassemblez vos icônes en une planche unique, avec sa feuille CSS.

Rassemblez vos icônes en une planche unique, avec sa feuille CSS. Utilisez-le gratuitement dans votre navigateur, sans créer de compte.

Mode d’emploi

Sélectionnez plusieurs images PNG, JPEG ou WebP ; chaque fichier doit peser moins de 20 Mo et l'ensemble doit contenir entre 2 et 100 éléments.
Indiquez la largeur maximale souhaitée pour la planche finale, en pixels.
Ajoutez une marge autour de chaque sprite pour éviter que les icônes se touchent.
Lancez la construction puis récupérez l'image de planche et sa feuille CSS.

Exemple

Un développeur web prépare une série d'icônes pour un menu. Il rassemble les fichiers dans l'outil, fixe une largeur raisonnable et une petite marge, puis intègre la planche et la feuille CSS dans son projet. Le navigateur charge ainsi une seule image au lieu de plusieurs fichiers séparés.

Limites et formats

La planche générée est une image ; elle ne remplace pas un système d'icônes vectorielles si vous devez redimensionner à l'infini.
Les fichiers acceptés sont PNG, JPEG et WebP, avec un plafond de 20 Mo par image et un total compris entre 2 et 100 fichiers.
Vérifiez la feuille CSS dans votre code, car les chemins ou les noms de classes doivent correspondre à votre intégration.
Trop d'images ou une largeur mal choisie peut produire une planche peu pratique à maintenir.

Où le traitement a lieu

Le montage de la planche et la création du CSS se font entièrement dans le navigateur. Vos fichiers ne quittent pas l'appareil, aucune inscription n'est demandée, et le résultat est téléchargeable dès qu'il est prêt.

Questions fréquentes

Quelle largeur maximale choisir pour la planche ?

Cela dépend du nombre d'icônes et de la place disponible dans votre page. Une largeur modérée évite les images trop hautes, tandis qu'une largeur plus grande peut réduire la hauteur finale. Testez une valeur, regardez la planche obtenue, puis ajustez si nécessaire.

La feuille CSS est-elle obligatoire ?

Elle est générée pour vous aider à positionner chaque sprite avec des coordonnées. Vous pouvez l'utiliser telle quelle, l'adapter à votre convention de nommage ou simplement vous en servir comme référence pendant l'intégration. Elle ne change pas l'image de planche elle-même.

Puis-je mélanger des formats dans une même planche ?

Oui, la sélection accepte PNG, JPEG et WebP. Gardez toutefois à l'esprit que les images avec transparence, comme beaucoup de PNG, se prêtent mieux à des icônes. Vérifiez toujours le rendu final, car les bords et les fonds peuvent varier selon le format d'origine.