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.
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- 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.