Zum Inhalt springen
DE

5 Icons · MIT-Lizenz

Animierte Warn-Icons

Warndreiecke, Alarmkreise und Stoppschilder, die gerade so stark pulsieren, dass man sie bemerkt, ohne dass etwas blinkt. Sie gehören neben ein fehlerhaftes Formularfeld, an den Anfang eines Fehlerbanners oder in eine Statusspalte, also überall dorthin, wo man über ein statisches Icon leicht hinwegscrollt.

Die 5 Icons verteilen sich so: 4 laufen in Endlosschleife und 1 spielt bei jedem Klick erneut ab. 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 „Warnungen“

Einsatzmöglichkeiten

  • Validierungsfehler direkt unter Formularfeldern
  • Fehler- und Warnbanner oben auf der Seite
  • Fehlgeschlagene Zeilen in einer Deploy- oder Job-Statustabelle
  • Bestätigungsdialoge für destruktive Aktionen
  • Statusseiten während einer Störung

Nach Interaktion

In die eigene App einbauen

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/alert-triangle.json
import { AnimatedAlertTriangle } from '@/components/animations/alert-triangle';

<AnimatedAlertTriangle 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 „Warnungen“?

5 Icons: Alert circle, Alert octagon, Alert triangle, Error und X Octagon. Alle sind unter der MIT-Lizenz kostenlos für private und kommerzielle Projekte nutzbar, ohne Namensnennung.

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

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

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

Ja. Jedes Icon ist eine Lottie-JSON-Datei unter https://useanimations.com/icons/<id>.json (zum Beispiel https://useanimations.com/icons/alert-triangle.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). Error nutzt After-Effects-Expressions und braucht im Web deshalb den vollständigen Build von lottie-web.