Entwickler-Dokumentation
Bibliothek fuer Vektor- und 3D-Symbole fuer Entwickler und Designer
Binde den Katalog mit 76,166 Symbolen, die JSON-Suche und Komponenten ohne Abhaengigkeiten in React, Next.js, Vue 3, Svelte, Tailwind CSS oder PHP ein.
1. JSON-Suche und Facetten-API (GET /api/icons)
Filtere nach Stichwort, Bibliotheksordner, Kategorie, Stil oder Lizenz. Die Antwort liefert seitenweise Symbole mit sicherem Inline-SVG, Vorschlaegen und passenden Facetten.
GET /api/icons?q=arrow&library=lucide&category=arrows&style=outline&license=ISC&page=1&limit=48&facets=1
2. Direkte Vektor-Dateipfade
# Folder-scoped SVG asset (all 15 active folders supported):
GET /icon-library-assets/{libraryId}/{slug}.svg
# Legacy flat slug endpoint:
GET /icon-assets/{slug}.svg
# Upstream SPDX license notice file:
GET /icon-library-notices/{libraryId}/LICENSE.txt
3. Komponentenmuster ohne Abhaengigkeiten
import * as React from 'react';
export function NexusArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
);
}
Praktische SVG-Anleitungen und Tutorials
SVG vs. PNG: Welches Format sollten Sie nutzen?
Verwenden Sie SVG für Website-Icons, Logos und Benutzeroberflächen, da Vektorpfade auf jedem Bildschirm gestochen scharf bleiben. Nutzen Sie PNG für feste Pixelgrafiken in E-Mails oder sozialen Netzwerken.
So animieren Sie SVG-Icons mit CSS
Fügen Sie Ihrem Inline-SVG eine CSS-Klasse hinzu und nutzen Sie transform oder stroke-dasharray Keyframes. Unser Live-Editor erstellt flüssige 60fps-Animationen ganz ohne JavaScript.
SVG-Icons in Figma oder im Browser bearbeiten
Kopieren Sie den SVG-Code von SVG Nexus und fügen Sie ihn direkt in Figma oder Illustrator ein. Alternativ können Sie jedes Icon direkt in unserem Browser-Studio bearbeiten.
SVG-Icons in React, Next.js und Vue verwenden
Wählen Sie auf einer Icon-Seite den Tab React TSX oder Vue 3, um eine fertige Komponente mit currentColor-Unterstützung für Tailwind CSS zu kopieren.