300 Icons · 20 Kategorien

Kategorien animierter Icons

Jedes useAnimations-Icon gehört zu genau einer Kategorie, von Navigationspfeilen und Mediensteuerung bis zu Loadern und Social-Media-Logos. Eine Kategorie zeigt alle ihre Icons, typische Einsatzorte und den Code zum Einbauen. Alternativ können Sie nach Interaktion stöbern.

Warnungen5 IconsWarndreiecke, 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.
Benachrichtigungen4 IconsGlocken-Icons, die bei neuen Aktivitäten läuten oder zwischen Glocke und durchgestrichener Glocke wechseln. Ein kurzes Schwingen lenkt den Blick auf die Zahl ungelesener Nachrichten, und die umschaltbaren Varianten dienen zugleich als Stummschalter für einen Kanal oder Thread.
Navigation34 IconsHamburger-Menüs, die sich in einen Schließen-Button verwandeln, dazu Pfeile, Chevrons und Eckpfeile, die bei Hover ein Stück in ihre Richtung rücken. So ist sofort klar, wohin ein Bedienelement führt: Drawer öffnen, zurückgehen, Zeile aufklappen, die Website verlassen.
Aktionen64 IconsDie Verben einer Oberfläche: speichern, löschen, herunterladen, aktualisieren, liken, merken, suchen und Einstellungen. Jedes Icon bestätigt den Klick oder Hover, zu dem es gehört: Das Herz füllt sich, wenn man einen Beitrag likt, und der Deckel des Papierkorbs hebt sich, bevor man etwas löscht.
Inhalte22 IconsDateien, Ordner, Bücher, Mail, Anhänge und Personen. Sie kennzeichnen die Dinge, mit denen Nutzer arbeiten, und dank der Varianten zum Hinzufügen, Entfernen und Abhaken reagieren Listen und Teamverwaltung spürbar auf jede Aktion.
Formulare3 IconsEine 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.
Medien28 IconsPlay und Pause, Lautstärke, Mikrofon, Kamera, Überspringen und Zufallswiedergabe für Audio- und Videoplayer. Die umschaltbaren Icons wechseln zwischen ihren beiden Zuständen, von Play zu Pause oder vom Mikrofon zum stummgeschalteten Mikrofon, sodass der Button immer zeigt, was ein Klick bewirkt.
Textbearbeitung10 IconsFett, kursiv, unterstrichen, Ausrichtung und Listen für Rich-Text-Toolbars. Eine kurze Klick-Animation bestätigt, dass die Formatierung angewendet wurde. Das hilft in Editoren, in denen die Änderung am Text selbst kaum auffällt.
Kommunikation13 IconsTelefone, Sprechblasen, Senden-Buttons, Voicemail und RSS. Die Telefon-Icons decken alle Zustände ab, die eine Anrufliste braucht: eingehend, ausgehend, verpasst und weitergeleitet. Das Senden-Icon gibt einer Nachricht beim Klick einen kleinen Schwung mit auf den Weg.
Geräte12 IconsSmartphones, Tablets, Monitore, Smartwatches und Drucker, dazu die passenden Verbindungsanzeigen: WLAN, Bluetooth und Akku. Sie eignen sich für Geräteauswahl, Umschalter für die responsive Vorschau und den Verbindungsstatus.
Wetter16 IconsSonne, Mond, Wolken, Regen, Schnee, Blitz und Wind für Wettervorhersagen und alles, was sich nach der Tageszeit richtet. Sonne und Mond ergeben außerdem einen naheliegenden Umschalter zwischen Light und Dark Mode.
Karten & Standort9 IconsKartenpins, Navigationspfeile, Globen, Zielscheiben und Anker. Ein Pin, der bei Hover herunterfällt, hebt eine Filialsuche oder eine Lieferadresse hervor, und der Globus taugt als Umschalter für Sprache oder Region.
E-Commerce11 IconsWarenkörbe, Einkaufstaschen, Preisschilder, Geschenke, Kreditkarten und Lieferwagen für Onlineshops. Eine In-den-Warenkorb-Animation bestätigt den Klick ohne Toast, und Lieferwagen und Paket bringen etwas Leben in den Bestellstatus.
Diagramme5 IconsBalkendiagramme, ein Tortendiagramm und Trendpfeile für Analytics und Reporting. Die Icons für steigenden und fallenden Trend zeigen auf einen Blick, ob eine Kennzahl gestiegen oder gesunken ist, und passen damit zu KPI-Karten und Zahlenübersichten im Zeitverlauf.
Entwicklung9 IconsCode-Klammern, ein Terminal, Git-Branches, Commits, Merges und Pull Requests, dazu Server und Datenbanken. Gemacht für Developer-Tools, Dokumentationsseiten und Statusseiten, deren Oberfläche ohnehin von Git- und Infrastruktur-Begriffen geprägt ist.
Design & Layout10 IconsRaster, Spalten, Ebenen, Zuschneiden, Zeichenstift und Mauszeiger für Editoren und Baukästen. Sie passen in Toolbars, in denen Nutzer Inhalte anordnen, zwischen Raster- und Tabellenansicht wechseln oder ein Zeichenwerkzeug wählen.
Formen & Mathematik8 IconsKreise, Quadrate, Dreiecke, Sechsecke, ein Achteck und Divisionszeichen. Sie dienen als Formwerkzeuge in Zeichen-Apps, als Rechenoperatoren in einem Taschenrechner oder als neutrale Markierungen in Diagrammen und Onboarding-Schritten.
Ladeanzeigen5 IconsSpinner und Loader, die in Schleife laufen, solange etwas in Arbeit ist. Setzen Sie einen in den Absenden-Button, während ein Request läuft, an die Stelle von Inhalten, die noch laden, oder auf einen Vollbild-Splashscreen. Bevorzugt der Nutzer reduzierte Bewegung, bleiben sie still stehen.
Social Media22 IconsMarken-Icons für soziale Netzwerke und für die Tools, über die Entwickler und Designer ihre Arbeit teilen: X, Instagram, YouTube, Discord, Telegram, Figma und weitere. Sie animieren bei Hover, wodurch Links im Footer und im Profil sichtbar anklickbar wirken.
Sonstige10 IconsIcons, die zu keiner größeren Gruppe gehören: Emoji-Gesichter für Feedback, eine Kaffeetasse, eine Uhr, eine Pulslinie und ein Scroll-Hinweis. Das Scroll-Icon ist ein verbreiteter Hinweis im Hero-Bereich, dass weiter unten noch mehr kommt.