SCHNELLER EINSTIEG

Ein wenig Bewegung. Drei einfache Schritte.

01 / Finde dein Icon

Sammlung entdecken. Suche nach Namen oder Schlagwörtern und filtere nach Kategorie, Quelle oder Bewegung. Du kannst die Vorschauen jederzeit pausieren.

02 / Passe es an

Öffne ein Icon, um Farbe, Größe, Linienstärke, Dauer, Verzögerung, Beschleunigung, Wiederholungen, Richtung und Bewegungsstärke anzupassen. Nutze Abspielen, Pause, Neu starten oder den Schieberegler zur Vorschau. Die letzten Einstellungen bleiben in diesem Browser gespeichert. Ein geteilter Link enthält deine Einstellungen, ohne dass ein Konto erforderlich ist.

03 / Nimm es mit

Wähle SVG kopieren, um den Code in dein HTML einzufügen, oder lade eine eigenständige .svg-Datei herunter. Die Datei enthält die Animationsstile und benötigt weder JavaScript noch Bibliotheken oder externe Ressourcen.

<img src="/icons/bell-ring.svg"
     width="32" height="32"
     alt="Notifications" />

Für dekorative Bilder neben einer Textbeschriftung verwende ein leeres alt="". Entferne bei dekorativem Inline-SVG role und aria-labelledby und ergänze aria-hidden="true".

Bewegung bewusst einsetzen

Jeder Export berücksichtigt prefers-reduced-motion. Bei reduzierter Bewegung startet der Editor pausiert; drücke Abspielen, um die Animation bewusst zu prüfen. Nutze eine Wiederholung für Abschlussmeldungen und begrenzte Schleifen für Aufmerksamkeitshinweise.

Mehrere Kopien direkt einbetten

Verschiedene Icons und Einstellungen erhalten eigene Stilbereiche. Wenn du denselben Export mehrfach in ein Dokument einfügst, gib jedem SVG und seinem Titel eindeutige IDs und passe CSS-Selektoren sowie aria-labelledby an. Bildelemente isolieren jede Datei automatisch.

Frei für deine Projekte

Alle 210 Icons enthalten Angaben zu Quelle und Lizenz. Prüfe die Quellsammlung für Urheber und Nutzungsbedingungen. Heruntergeladene SVGs enthalten dieselben Informationen. Quellen · Lizenzen