So nutzt du: SVG-Icon-Finder
- Gib ein, was du brauchst – „Zuhause“, „Pfeil nach rechts“, „Warenkorb“ – und wähle eine Kategorie aus oder durchsuche alle.
- Klick auf ein Symbol, um es zu öffnen. Leg die Größe fest, behalte „currentColor“ bei, damit es sich an deine Textfarbe anpasst, oder wähl eine eigene Farbe aus; pass bei Umriss-Symbolen die Kontur an.
- Kopiere es als SVG, JSX für React, Daten-URI oder CSS-Maske, füge es in Webflow ein – oder lade es als SVG oder PNG herunter.
- Klick auf ☆ Speichern, um Symbole zu speichern, die du oft benutzt; sie erscheinen beim nächsten Mal unter ★ Gespeichert.
Kostenlose Icons, die du wirklich nutzen kannst
Jedes Icon hier stammt aus einem Open-Source-Set mit einer großzügigen Lizenz, sodass du es auf privaten und kommerziellen Websites sowie in Apps verwenden kannst. Die Lizenz und der Urheber werden bei jedem Icon angegeben:
| Set | Lizenz | Stil |
|---|---|---|
| Lucide | ISC | Umriss, 24-px-Raster |
| Tabler-Symbole | MIT | Umriss und ausgefüllt |
| Heroicons | MIT | Umriss, ausgefüllt, Mini |
| Phosphor | MIT | Sechs Schriftstärken |
| Bootstrap-Symbole | MIT | Gefüllt und Umriss |
| Feather, Iconoir | MIT | Kontur |
| Fluent UI-System-Symbole | MIT | Microsoft-Stil |
| Material-Symbole, Material-Design-Symbole, Carbon | Apache 2.0 | Google-, Pictogrammers- und IBM-Stile |
Die MIT-, ISC- und Apache-2.0-Lizenzen verlangen, dass du den Copyright- und Lizenzhinweis beibehältst, wenn du die Icon-Dateien selbst weiterverbreitest (zum Beispiel in einem Icon-Paket). Die Verwendung von Icons auf einer Website oder in einer App ist der typische Anwendungsfall, für den diese Lizenzen geschrieben wurden.
Warum „currentColor“ wichtig ist
Ein Icon, dessen fill oder stroke ist currentColor die CSS-Eigenschaft color seines übergeordneten Elements an, sodass dasselbe SVG auf einer dunklen Schaltfläche weiß, in einem Link blau und im deaktivierten Zustand grau wird – ohne die Datei bearbeiten zu müssen. Behalte „currentColor“ für Symbole in UI-Text und Schaltflächen bei; wähle eine feste Farbe für Illustrationen und Favicons.
Welches Format sollst du kopieren?
- SVG – direkt in HTML, ein Webflow-Embed oder eine
.svgDatei einfügen. - JSX – React-fähige Attribute (
strokeWidth,className), die du in eine Komponente einfügen kannst. - Data-URI – für
<img src>oder ein CSSbackground-imageohne separate Datei. - CSS-Maske – ein Symbol, das
currentColoraus CSS, nützlich in Pseudo-Elementen. - In Webflow kopieren – fügt einen Code-Einbettungscode mit dem SVG in den Webflow-Designer ein.
Optimiere deine eigenen SVGs mit dem SVG-Optimierer oder verwandle eines davon mit dem Favicon-Generator in ein Favicon.
Auch gesucht als: svg-symbole, kostenlose svg-symbole, icon-finder, svg-symbol-suche, open-source-symbole, lucide-symbole, heroicons, tabler-symbole.
Passende Tools zu: SVG-Icon-Finder
- SVG-zu-PNG-Konverter — Rendere SVG-Vektorgrafiken als gestochen scharfe PNG-Bilder genau in der Größe, die du brauchst – für App-Stores, soziale Medien, E-Mails oder Dokumente.
- Bild in Base64 — Wandle ein PNG-, JPEG-, SVG-, WebP- oder GIF-Bild in eine Base64-Daten-URI mit kopierfertigem CSS und HTML um – oder füge eine Base64-Zeichenkette ein, um eine Vorschau des Bildes anzuzeigen und es herunterzuladen.
- 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.
- Barcode-Generator — Erstelle scanbare Barcodes für Produkte, Lagerbestände, Versand und Bibliotheken – die Prüfziffern werden automatisch berechnet, und du kannst eine gestochen scharfe SVG-Datei zum Ausdrucken oder eine PNG-Datei für Dokumente herunterladen.