SVG Icon Suche
Lucide & Heroicons an einem Ort durchsuchen – SVG, React oder Vue kopieren.
Passen Sie Größe, Farbe und Linienstärke ganz einfach an.
🔒Alle Vorgänge werden lokal im Browser ausgeführt.
Über das Tool
Mit der SVG Icon Suche können Sie gleichzeitig das Lucide-Icon-Set und die Heroicons durchsuchen. Passen Sie Größe, Farbe und Linienstärke in Echtzeit an und kopieren Sie per Mausklick fertigen SVG-Code oder einsatzbereiten Komponentencode für React und Vue. Da alle Icons als JSON-Datei lokal geladen werden, erfolgen keine weiteren Zugriffe auf externe Server, was Datenschutz und Geschwindigkeit garantiert.
Anleitung
Icon suchen
Geben Sie englische Begriffe (arrow, home, user) ein, um die passenden Symbole beider Bibliotheken zu filtern.
Anpassen
Klicken Sie auf ein Icon und verwenden Sie die Schieberegler und Farbpaletten für Größe, Linienstärke und Farbe.
Code kopieren
Kopieren Sie den fertigen SVG-Code oder das React/Vue-Snippet mit nur einem Klick direkt in Ihr Projekt.
Glossar
- SVG (Scalable Vector Graphics)
- Ein XML-basiertes Vektorgrafikformat, das sich ohne Qualitätsverlust skalieren lässt und ideal für Webdesign ist.
- Lucide
- Ein Open-Source SVG-Icon-Set mit über 1500 Icons, das als Nachfolger der beliebten Feather-Icons dient. Lizenziert unter ISC.
- Heroicons
- Ein Satz professionell gestalteter SVG-Icons, erstellt von den Machern von Tailwind CSS. Lizenziert unter MIT.
- viewBox
- Ein wichtiges SVG-Attribut, das das Koordinatensystem definiert und für die korrekte Skalierung sorgt.
- stroke-width (Linienstärke)
- Bestimmt die Dicke der gezeichneten Linien innerhalb der SVG-Vektorgrafik.
- currentColor
- Ein CSS-Schlüsselwort, mit dem die SVG-Grafik automatisch die Textfarbe des übergeordneten Elements erbt.
FAQ
- F.Unter welcher Lizenz stehen die Icons?
- Lucide steht unter der ISC-Lizenz, Heroicons unter der MIT-Lizenz. Beide sind auch für kommerzielle Zwecke kostenlos nutzbar.
- F.Werden Daten an einen Server gesendet?
- Nein. Die gesamte Anwendung, inklusive Suche und Generierung, läuft komplett lokal in Ihrem Browser.
Anwendungsfälle
Web- und UI-Design
Finden und stylen Sie schnell die passenden Icons für Ihre nächste Website.
React- & Vue-Projekte
Kopieren Sie komponentenfertigen Code mit Auto-Imports, ohne die Doku zu durchsuchen.
Mockups & Prototyping
Exportieren Sie angepasste SVGs vorab, um sie nahtlos in Figma oder Sketch einzubinden.
Bibliotheken vergleichen
Vergleichen Sie den Stil von Lucide direkt mit Heroicons, um den besten Fit zu finden.