So nutzt du: SVG Icon Finder
- Tippe ein, was du brauchst — Haus, Pfeil rechts, Warenkorb — und wähle ein Set oder suche in allen.
- Klicke auf ein Icon, um es zu öffnen. Stelle die Größe ein, behalte currentColor, damit es der Textfarbe folgt, oder wähle eine eigene Farbe. Passe die Strichstärke bei Outline-Icons an.
- Kopiere es als SVG, JSX für React, als Data-URI, als CSS-Maske oder füge es direkt in Webflow ein — oder lade SVG oder PNG herunter.
- Klicke auf ☆ Merken, um Icons zu speichern, die du oft nutzt. Beim nächsten Mal erscheinen sie unter ★ Gespeichert.
Kostenlose Icons, die du wirklich nutzen kannst
Jedes Icon hier stammt aus einem Open-Source-Set mit freizügiger Lizenz, sodass du es in privaten und kommerziellen Websites und Apps verwenden kannst. Lizenz und Autor werden bei jedem Icon angezeigt:
| Set | Lizenz | Stil |
|---|---|---|
| Lucide | ISC | Outline, 24-px-Raster |
| Tabler Icons | MIT | Outline und gefüllt |
| Heroicons | MIT | Outline, Solid, Mini |
| Phosphor | MIT | Sechs Stärken |
| Bootstrap Icons | MIT | Gefüllt und Outline |
| Feather, Iconoir | MIT | Outline |
| Fluent UI System Icons | MIT | Microsoft-Stil |
| Material Symbols, Material Design Icons, Carbon | Apache 2.0 | Stile von Google, Pictogrammers und IBM |
MIT-, ISC- und Apache-2.0-Lizenzen verlangen, dass du Copyright- und Lizenzhinweis beibehältst, wenn du die Icon-Dateien selbst weitergibst (zum Beispiel in einem Icon-Paket). Die Verwendung von Icons in einer Website oder App ist genau der Alltagsfall, für den diese Lizenzen gedacht sind.
Warum currentColor wichtig ist
Ein Icon, dessen fill oder stroke auf currentColor steht, übernimmt die CSS-color seines Elternelements. So wird dasselbe SVG auf einem dunklen Button weiß, in einem Link blau und im deaktivierten Zustand grau – ohne die Datei zu ändern. Behalte currentColor für Icons in UI-Texten und Buttons; wähle eine feste Farbe für Illustrationen und Favicons.
Welches Format du kopieren solltest
- SVG — direkt in HTML, ein Webflow-Embed oder eine
.svg-Datei einfügen. - JSX — React-fertige Attribute (
strokeWidth,className) für eine Komponente. - Data-URI — für
<img src>oder eine CSS-background-imageohne separate Datei. - CSS-Maske — ein Icon, das
currentColorper CSS erbt; praktisch in Pseudo-Elementen. - Nach Webflow kopieren — fügt einen Code-Embed mit dem SVG in den Webflow Designer ein.
Optimiere eigene SVGs mit dem SVG Optimizer oder mach mit dem Favicon Generator ein Favicon daraus.
Beliebte Icons
Kostenlose SVG-Icon-Sammlungen für die gängigsten Interface-Symbole:
- Haus-Icons
- Such-Icons
- Benutzer-Icons
- Menü-Icons
- Pfeil-Icons
- Häkchen-Icons
- Schließen-Icons
- Warenkorb Icons
- Herz-Icons
- Stern-Icons
- Mail-Icons
- Telefon-Icons
- Kalender-Icons
- Einstellungen-Icons
- Download-Icons
- Upload-Icons
- Mülleimer-Icons
- Bearbeiten-Icons
- Teilen-Icons
- Schloss-Icons
- Glocken-Icons
- Play-Icons
- Bild-Icons
- Standort-Icons
- Uhr-Icons
- Globus-Icons
- Chat-Icons
- Datei-Icons
- Ordner-Icons
- Cloud-Icons
- Kamera-Icons
- Video-Icons
- Musik-Icons
- Wi-Fi-Icons
- Mond- und Dark-Mode-Icons
- Plus-Icons
- Info-Icons
- Warnsymbole
- Augen-Icons
- Link-Icons
- Filter-Icons
- Geld-Icons
- Kreditkarten-Icons
- Diagramm-Icons
- Lesezeichen-Icons
- Tag-Icons
Häufige Fragen
Sind diese Icons für die kommerzielle Nutzung kostenlos?
Ja. Alle aufgeführten Sets sind Open Source unter MIT-, ISC- oder Apache-2.0-Lizenz, die kommerzielle Nutzung erlauben. Behalte den Lizenzhinweis bei, wenn du die Icon-Dateien selbst weitergibst.
Muss ich den Autor des Icons nennen?
Innerhalb einer Website oder App ist das unter diesen Lizenzen nicht nötig. Wenn du die Icons als Dateien weitergibst – zum Beispiel in einer Vorlage oder einem Icon-Paket –, füge die Lizenz des Sets bei.
Was bewirkt currentColor?
Das Icon übernimmt die Textfarbe des Elements, in dem es steht. So passt sich ein einziges SVG über CSS an Buttons, Links und den Dark Mode an.
Kann ich die Strichstärke ändern?
Ja, bei Outline-Icons wie Lucide, Tabler, Feather und Iconoir. Gefüllte Icons haben keinen Strich, der sich ändern ließe.
Ist meine Suche privat?
Suchbegriffe werden an die öffentliche Iconify-API gesendet, die die Icon-Sets bereitstellt. Sonst verlässt nichts deinen Browser, und ein Konto ist nicht nötig.
Kann ich SVG Icon Finder als Web-App installieren und offline nutzen?
Ja. SVG Icon Finder ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.
Ähnliche Tools
SVG-zu-PNG-KonverterRendere SVG-Vektorgrafiken als gestochen scharfe PNG-Bilder genau in der Größe, die du brauchst – für App-S…
Bild in Base64Wandle ein PNG-, JPEG-, SVG-, WebP- oder GIF-Bild in eine Base64-Daten-URI mit kopierfertigem CSS und HTML …
CSS Mask GeneratorLass Bilder und Bereiche sanft auslaufen, statt hart abzuschneiden: eine Kante ausblenden, oben und unten, …