Comment utiliser : Recherche d’icônes SVG
- Tapez ce dont vous avez besoin — « maison », « flèche vers la droite », « panier » — puis choisissez un ensemble ou effectuez une recherche parmi tous les ensembles.
- Cliquez sur une icône pour l'ouvrir. Définissez sa taille, conservez la couleur actuelle (« currentColor ») pour qu'elle s'harmonise avec la couleur de votre texte, ou choisissez une couleur personnalisée ; ajustez l'épaisseur du trait pour les icônes avec contour.
- Copiez-le au format SVG, JSX pour React, URI de données ou masque CSS, ou collez-le dans Webflow — ou téléchargez-le au format SVG ou PNG.
- Cliquez sur ☆ Enregistrer pour conserver les icônes que vous utilisez souvent ; elles apparaîtront la prochaine fois sous ★ Enregistrées.
Des icônes gratuites que vous pouvez réellement utiliser
Chaque icône présentée ici provient d’un ensemble open source doté d’une licence permissive ; vous pouvez donc l’utiliser sur des sites web et dans des applications à usage personnel ou commercial. La licence et le nom de l’auteur sont indiqués pour chaque icône :
| Ensemble | Licence | Style |
|---|---|---|
| Lucide | ISC | Contour, grille de 24 px |
| Icônes Tabler | MIT | Contour et remplissage |
| Heroicons | MIT | Contour, plein, mini |
| Phosphor | MIT | Six graisses |
| Icônes Bootstrap | MIT | Rempli et contour |
| Feather, Iconoir | MIT | Contour |
| Icônes du système Fluent UI | MIT | Style Microsoft |
| Symboles Material, icônes Material Design, Carbon | Apache 2.0 | Styles Google, Pictogrammers et IBM |
Les licences MIT, ISC et Apache 2.0 vous demandent de conserver la mention de copyright et la notice de licence lorsque vous redistribuez les fichiers d’icônes eux-mêmes (par exemple dans un pack d’icônes). L’utilisation d’icônes au sein d’un site web ou d’une application correspond au cas de figure courant pour lequel ces licences ont été rédigées.
Pourquoi la propriété « currentColor » est-elle importante ?
Une icône dont la fill ou stroke est currentColor hérite de la couleur CSS color de son élément parent ; ainsi, le même fichier SVG devient blanc sur un bouton foncé, bleu dans un lien et gris lorsqu’il est désactivé — sans avoir à modifier le fichier. Conservez la propriété currentColor pour les icônes présentes dans le texte et les boutons de l’interface utilisateur ; choisissez une couleur fixe pour les illustrations et les favicons.
Quel format copier
- SVG — à coller directement dans le code HTML, dans un élément Webflow Embed ou dans un
.svgfichier. - JSX — attributs compatibles avec React (
strokeWidth,className) à insérer dans un composant. - URI de données — pour
<img src>ou un CSSbackground-imagesans fichier séparé. - Masque CSS — une icône qui hérite
currentColordu CSS, utile dans les pseudo-éléments. - Copier dans Webflow — insère un code d’intégration contenant le SVG dans le Webflow Designer.
Optimisez vos propres fichiers SVG à l’aide de l’optimiseur SVG ou transformez-en un en favicon grâce au générateur de favicons.
Aussi recherché comme : icônes svg, icônes svg gratuites, recherche d’icônes, icônes open source, icônes lucide, héroïcons, icônes de tableur, icônes pour sites web.
Outils complémentaires : Recherche d’icônes SVG
- Convertisseur SVG en PNG — Générez des images PNG d'une grande netteté à partir de graphiques vectoriels SVG, exactement à la taille dont vous avez besoin — pour les boutiques d'applications, les réseaux sociaux, les e-mails ou les documents.
- Image en Base64 — Convertissez un fichier PNG, JPEG, SVG, WebP ou GIF en URI de données Base64 avec du code CSS et HTML prêt à être copié — ou collez une chaîne Base64 pour prévisualiser et télécharger l'image.
- Générateur de masque CSS — Faites disparaître en fondu les images et les sections au lieu de les couper net : estompez un bord, le haut et le bas, les quatre bords, une vignette radiale ou un spot, découpez l'élément en rayures, ou appliquez un masque en forme (étoile, cœur, hexagone, flèche…) aux bords doux et progressifs que clip-path ne sait pas faire.
- Générateur de codes-barres — Créez des codes-barres scannables pour vos produits, vos stocks, vos expéditions et vos bibliothèques : les chiffres de contrôle sont calculés automatiquement, et vous pouvez télécharger un fichier SVG de haute qualité pour l'impression ou un fichier PNG pour vos documents.