Zum Inhalt springen
DE
v3300 Icons · keine Abhängigkeiten · MIT→

Icons, die lebendig werden.

Kostenlose animierte Icons für React, shadcn/ui und Lottie

300 handgemachte Mikroanimationen mit eingebauten Mikrointeraktionen für Hover, Klick und Loop. Nutzen Sie sie als React-Komponente, fügen Sie sie mit shadcn hinzu oder laden Sie SVG und Lottie JSON herunter. MIT-lizenziert.

Icons ansehen

Bewegen Sie den Mauszeiger über das Feld.

animierte Icons
300
animierte Icons
eingebaute Interaktionen
6
eingebaute Interaktionen
Player, gzip-komprimiert
8 kB
Player, gzip-komprimiert
Abhängigkeiten
0
Abhängigkeiten

Interaktionen inklusive

Jedes Icon weiß, wie es sich bewegt.

Jedes Icon kommt mit der Interaktion, für die es gestaltet wurde. Einfach einbauen, und es funktioniert – oder mit einem einzigen Prop eine andere wählen. Probieren Sie es aus:

Die Bibliothek

300 kostenlose animierte Icons

Hover oder Klick startet die Animation. Ein Klick auf ein Icon öffnet Code und Downloads – Lottie JSON, SVG und ZIP.

300 Icons

Warnungen

Benachrichtigungen

Navigation

Aktionen

Inhalte

Formulare

Medien

Textbearbeitung

Kommunikation

Geräte

Wetter

Karten & Standort

E-Commerce

Diagramme

Entwicklung

Design & Layout

Formen & Mathematik

Ladeanzeigen

Social Media

Sonstige

Ganz nach Ihrem Workflow

Installieren, importieren, fertig.

Eine React-Komponente ohne Abhängigkeiten, eine shadcn-Registry, Dateien zum Herunterladen unter stabilen URLs und ein Katalog, den KI-Agenten lesen können.

Zur Dokumentation →
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

export function MenuButton({ open, onToggle }) {
  return (
    <UseAnimations
      animation={menu}
      active={open}
      onClick={onToggle}
      size={28}
    />
  );
}

Klein, barrierefrei und frei gestaltbar.

Übernimmt Ihre Farben

Icons nutzen currentColor: Textfarbe, Hover-Zustände und Dark Mode übernehmen sie von selbst. Überschreiben lässt sich das per Prop, Klasse oder ganz normalem CSS.

Bewusst klein

8 kB

Ein eingebauter Player, keine Abhängigkeiten. Jedes Icon ist ein eigenes Modul mit 2 kB.

Von Haus aus barrierefrei

Berücksichtigt reduzierte Bewegung, spielt Hover-Animationen auch bei Tastaturfokus ab und bleibt für Screenreader unsichtbar, solange Sie kein Label vergeben.

Bereit für Server-Rendering

Eine Client-Komponente, die in Next.js, Remix und Astro problemlos rendert. Icons sind reine Daten, die Sie überall importieren können.

Gemacht für Agenten

Ein typisierter Katalog mit Keywords für jedes Icon, icons.json, llms.txt und Dokumentation in Markdown.

Die passende Mikroanimation finden.

Häufige Fragen

Was sind Mikroanimationen und animierte Icons?

Mikroanimationen sind kurze Bewegungen mit genau einem Zweck, die auf eine Aktion des Nutzers antworten: ein Menü-Icon, das zum Schließen-Button wird, ein Herz, das sich beim Liken eines Beitrags füllt, eine Glocke, die bei einer neuen Benachrichtigung läutet. Animierte Icons sind die häufigste Form davon. Sie lassen eine Oberfläche reaktionsschnell wirken und zeigen Zustandswechsel ohne zusätzlichen Text.

Was ist der Unterschied zwischen den Lottie- und den SVG-Dateien?

Die Lottie-JSON-Datei enthält die komplette Animation und läuft in jedem Lottie-Player, auch in dem, der in react-useanimations eingebaut ist. Die SVG-Dateien sind Standbilder des Icons im Ruhezustand, eines pro Zustand (zum Beispiel eye und eye-off), für Stellen, an denen sich nichts bewegen soll: E-Mails, Dokumente, Design-Tools oder ein Fallback ohne JavaScript.

Funktioniert das mit Next.js und Server-Rendering?

Ja. Die Komponente ist mit 'use client' markiert und zeichnet die Animation nur im Browser. Sie rendert daher aus Server Components und SSR-Frameworks wie Next.js, Remix und Astro, ganz ohne dynamische Imports. Icon-Module sind reine Daten, die Server Components importieren und als Props weitergeben können. Next.js und Server-Rendering →

Darf ich die Icons in kommerziellen Projekten verwenden?

Ja. Die Icons und das Paket react-useanimations stehen unter der MIT-Lizenz: Sie dürfen sie in privaten und kommerziellen Projekten nutzen, verändern und weitergeben. Eine Namensnennung freut uns, ist aber nicht erforderlich. Lizenz & Nutzungsbedingungen →

Kann ich die Icons ohne React verwenden?

Ja. Jedes Icon ist eine Standard-Lottie-JSON-Datei und läuft daher mit lottie-web in reinem JavaScript, in Vue, Svelte, Angular oder einem CMS sowie in Lottie-Playern für iOS, Android und Flutter. Auf der Seite zu den Lottie-Icons finden Sie die Datei-URLs und fertige lottie-web-Snippets für jede Interaktion. Lottie-Icons →

Wie viel bringen die Icons zusätzlich ins Bundle?

Der Player in react-useanimations 3.1.1 ist gzip-komprimiert etwa 8 kB groß und hat keine Abhängigkeiten. Jedes Icon ist ein eigenes Modul mit 1 bis 15 kB (Median 2 kB), im Bundle landen also nur die Icons, die Sie importieren.

Bringen Sie Ihr Interface in Bewegung.

Kostenlos und MIT-lizenziert, für private und kommerzielle Projekte.

Jetzt loslegen