Zum Inhalt springen
DE

3 Icons · MIT-Lizenz

Animierte Icons für Formularelemente

Eine Checkbox, ein Radiobutton und ein Toggle-Switch, die zwischen aktiviertem und deaktiviertem Zustand animieren. Sie passen überall dort, wo ein normales Eingabeelement flach wirkt, etwa in Onboarding-Checklisten und Einstellungsseiten, und der Zustand bleibt auf einen Blick erkennbar.

Alle 3 Icons wechseln per Klick zwischen zwei Zuständen. Jedes Icon gibt es als React-Komponente, als shadcn/ui-Komponente und als Lottie-JSON-Animation, außerdem als statisches SVG, kostenlos auch für kommerzielle Projekte unter der MIT-Lizenz.

Alle Icons der Kategorie „Formulare“

Einsatzmöglichkeiten

  • Schalter für Funktionen und Einstellungen
  • Onboarding- und To-do-Checklisten
  • Einfachauswahl in Umfragen und bei der Tarifwahl
  • Checkboxen für AGB und Einwilligungen

Nach Interaktion

In die eigene App einbauen

Mit React installieren Sie react-useanimations und importieren das Icon; seine Interaktion „Klick-Toggle“ spielt es von selbst ab. Alle Icons dieser Kategorie funktionieren gleich: Ersetzen Sie checkBox durch den Namen, der auf der jeweiligen Icon-Seite steht.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import checkBox from 'react-useanimations/lib/checkBox';

<UseAnimations animation={checkBox} size={32} />

Mit shadcn/ui fügt die CLI eine fertige Komponente hinzu:

npx shadcn@latest add https://useanimations.com/r/check-box.json
import { AnimatedCheckBox } from '@/components/animations/check-box';

<AnimatedCheckBox size={24} />

Kein React im Einsatz? Jedes Icon ist eine Lottie-JSON-Datei unter /icons/<id>.json; Player für Web, iOS, Android und Flutter finden Sie unter Lottie-Icons.

Häufige Fragen

Welche Icons enthält die Kategorie „Formulare“?

3 Icons: Checkbox, Radio button und Toggle. Alle sind unter der MIT-Lizenz kostenlos für private und kommerzielle Projekte nutzbar, ohne Namensnennung.

Wie verwende ich die Icons der Kategorie „Formulare“ in React?

Installieren Sie react-useanimations, fügen Sie import checkBox from 'react-useanimations/lib/checkBox' hinzu und rendern Sie <UseAnimations animation={checkBox} size={32} />. Das Icon spielt seine Interaktion „Klick-Toggle“ ab und übernimmt die Textfarbe. Mit shadcn/ui führen Sie stattdessen npx shadcn@latest add https://useanimations.com/r/check-box.json aus.

Kann ich die Icons der Kategorie „Formulare“ ohne React verwenden?

Ja. Jedes Icon ist eine Lottie-JSON-Datei unter https://useanimations.com/icons/<id>.json (zum Beispiel https://useanimations.com/icons/check-box.json), abspielbar mit lottie-web, lottie-ios, lottie-android oder dem Flutter-Paket lottie; statische SVGs finden Sie auf der jeweiligen Icon-Seite (die Icon-Seiten sind nur auf Englisch verfügbar). Keines davon nutzt Expressions, der Light-Build von lottie-web reicht also aus.