22 Icons · MIT-Lizenz

Animierte Social-Media-Icons

Marken-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.

Die 22 Icons verteilen sich so: 3 spielen bei Hover vorwärts und beim Verlassen rückwärts, 9 spielen bei Hover einmal ab und 10 laufen in Schleife, solange der Mauszeiger darauf liegt. 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 „Social Media“

Einsatzmöglichkeiten

Social-Links im Footer einer Website
Teilen-Buttons unter Blogartikeln
Profillinks von Autoren und Teams
Einladungs-Buttons für Community-Chatserver
Anmeldung mit einem Social- oder Entwicklerkonto

Nach Interaktion

Animierte Hover-Icons · 3
Spielt bei mouseenter vorwärts und bei mouseleave rückwärts. Instagram, YouTube, YouTube V2.
Animierte Icons mit Hover-Replay · 9
Spielt bei mouseenter einmal ab, außer bei reduzierter Bewegung. Verlassen stoppt die Animation nicht, und erneutes Betreten während der Wiedergabe startet sie nicht neu. Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.
Animierte Icons mit Hover-Loop · 10
Läuft in Schleife, solange der Mauszeiger darauf liegt, spielt nach mouseleave den aktuellen Durchlauf zu Ende und bleibt bei reduzierter Bewegung statisch. Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.

In die eigene App einbauen

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

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import github from 'react-useanimations/lib/github';

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

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

npx shadcn@latest add https://useanimations.com/r/github.json

import { AnimatedGithub } from '@/components/animations/github';

<AnimatedGithub 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 „Social Media“?

22 Icons: Behance, Chrome, Codepen, Codesandbox, Discord, Dribbble, Facebook, Figma, Framer, Github, GitLab, Instagram und 10 weitere. Alle sind unter der MIT-Lizenz kostenlos für private und kommerzielle Projekte nutzbar, ohne Namensnennung.

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

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

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

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