Bibliothèque d'icônes SVG

À propos de cet outil

Cette bibliothèque propose des icônes SVG au trait, dessinées sur une grille de 24 × 24 pour les interfaces de sites et d'applications. Recherchez par nom (la recherche ignore les accents et accepte plusieurs mots), choisissez la couleur, la taille et l'épaisseur du trait, puis copiez le code : en SVG avec la couleur choisie, en SVG qui hérite de la couleur du texte (currentColor, pratique en CSS), ou en URL de données. Chaque icône se télécharge aussi en SVG ou en PNG à la taille voulue. Elles sont libres d'utilisation, y compris pour un projet commercial.

Comment utiliser cet outil

1. Recherchez une icône par mot-clé (maison, panier, cœur, réglages…) ou parcourez la grille.
2. Cliquez sur une icône, puis réglez la couleur, la taille et l'épaisseur du trait.
3. Choisissez la forme du code (couleur fixe, currentColor ou URL de données) et cliquez sur « Copier le code ».
4. Ou téléchargez l'icône en SVG (vectoriel) ou en PNG à la taille choisie.

Pourquoi des icônes SVG ?

Les icônes d'interface (loupe, panier, flèche, cœur) se prêtent parfaitement au format SVG : un dessin vectoriel décrit par du texte, qui reste net à n'importe quelle taille et sur tous les écrans, même ceux à très haute densité de pixels. Selon les recommandations de web.dev, les formats vectoriels sont idéaux pour les logos, le texte et les icônes : ils donnent des résultats nets à chaque résolution et à chaque niveau de zoom, alors qu'une image matricielle agrandie devient floue.

• Légèreté : une icône simple pèse quelques centaines d'octets, moins qu'un PNG de même taille, et se compresse très bien.
• Personnalisation en CSS : couleur, taille, épaisseur du trait et animations se changent sans retoucher le fichier.
• Thème clair et sombre : avec currentColor, l'icône reprend la couleur du texte qui l'entoure, et suit donc automatiquement le thème de la page.
• Aucune requête supplémentaire lorsque le SVG est intégré directement dans le HTML.

Les icônes de cette bibliothèque suivent un style unique : trait fin sur une grille de 24 × 24, bords arrondis, sans remplissage (sauf quelques points). Cette homogénéité compte : mélanger des icônes d'épaisseurs ou de styles différents donne une interface désordonnée.

Trois façons d'utiliser une icône

1. SVG en ligne (recommandé). Collez le code directement dans votre HTML. Avec l'option « héritant la couleur du texte », l'icône se colore en CSS :

   <button class="btn">
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
          fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">…</svg>
     Ajouter
   </button>

   La couleur du bouton, au survol ou en thème sombre, s'applique à l'icône sans règle supplémentaire.
2. Fichier .svg dans une balise img. Pratique pour un logo ou une icône isolée. Inconvénient : une image externe ne peut pas hériter de la couleur du texte ; il faut une version par couleur.
3. URL de données en CSS. L'option « URL de données » produit une adresse data:image/svg+xml,… utilisable dans background-image ou mask-image : l'icône est intégrée dans la feuille de style, sans fichier à part. Avec mask-image et background-color: currentColor, vous obtenez même une icône qui suit la couleur du texte.

Pour un usage en PNG (outils sans prise en charge du SVG, courriels, présentations), choisissez la taille voulue et téléchargez : l'export est généré à la taille exacte, à partir du dessin vectoriel.

Accessibilité des icônes

• Icône décorative (à côté d'un texte qui dit déjà la même chose, comme un « + » devant « Ajouter ») : masquez-la aux technologies d'assistance avec aria-hidden="true". Les lecteurs d'écran ne l'annonceront pas.
• Icône seule porteuse du sens (un bouton de recherche sans texte) : donnez un nom accessible au bouton, avec aria-label="Rechercher" sur le bouton ou un texte masqué visuellement ; l'icône elle-même reste en aria-hidden="true".
• Taille de la zone cliquable : même si l'icône mesure 20 px, la zone interactive doit être assez grande pour un doigt (au moins 24 × 24 px selon WCAG 2.2, 44 px conseillés sur mobile). Entourez l'icône d'un bouton avec du padding.
• Contraste : une icône qui porte une information doit avoir un contraste d'au moins 3:1 avec son fond. Utilisez le convertisseur de couleurs pour le vérifier.
• Ne comptez pas uniquement sur la couleur (rouge/vert) pour distinguer deux états : changez aussi la forme de l'icône.

Bonnes pratiques de design d'icônes

• Choisissez une taille de base (16, 20 ou 24 px) et tenez-vous-y dans une même interface ; évitez de mêler plusieurs échelles.
• Gardez une épaisseur de trait cohérente. Si vous affichez des icônes à 16 px, un trait de 2 sur la grille 24 paraît plus épais qu'à 24 px : l'épaisseur réglable permet d'adapter (1,5 pour de petites tailles).
• Associez une icône à un libellé quand le sens n'est pas évident : une icône inconnue sans texte ralentit l'utilisateur.
• Peu d'icônes, bien choisies. Trop d'icônes encombrent une interface. Réservez-les aux actions fréquentes ou aux repères visuels utiles.
• Alignez-les sur le texte. Une icône de 1,25 em de haut s'aligne bien avec une ligne de texte ; utilisez display: inline-flex; align-items: center; gap: .5em pour un alignement propre.

Pour la couleur des icônes, voir le générateur de palettes ; pour les icônes de votre site dans les onglets et sur l'écran d'accueil, le générateur de favicons.

Questions fréquentes