22 ikon · licence MIT

Animované ikony sociálních sítí

Ikony značek sociálních sítí a nástrojů, na kterých vývojáři a designéři sdílejí svou práci: X, Instagram, YouTube, Discord, Telegram, Figma a další. Při najetí myší se animují, takže odkazy v patičce a v profilech působí jasně klikatelně.

Kategorie obsahuje 22 ikon: 3 se při najetí myší přehrají a při odjetí přehrají pozpátku, 9 se při najetí myší jednou přehraje a 10 se při najetí myší přehrává ve smyčce. Každá ikona je k dispozici jako React komponenta, komponenta pro shadcn/ui, Lottie JSON animace a statické SVG, zdarma i pro komerční použití pod licencí MIT.

Všechny ikony v kategorii Sociální sítě

Kde je použít

Odkazy na sociální sítě v patičce webu
Tlačítka pro sdílení u článků na blogu
Odkazy na profily autorů a členů týmu
Pozvánky do komunit na chatovacích serverech
Přihlášení přes sociální síť nebo vývojářský účet

Podle interakce

Animované ikony reagující na hover · 3
Při najetí myší (mouseenter) se přehraje dopředu, při odjetí (mouseleave) pozpátku. Instagram, YouTube, YouTube V2.
Animované ikony s přehráním při hoveru · 9
Při najetí myší (mouseenter) se jednou přehraje, pokud uživatel nepreferuje omezený pohyb. Odjetí myši ji nezastaví a nové najetí během přehrávání ji nespustí znovu. Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.
Animované ikony se smyčkou při hoveru · 10
Při hoveru běží ve smyčce, po odjetí myši (mouseleave) dokončí aktuální cyklus a při preferenci omezeného pohybu zůstane statická. Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.

Přidejte ikonu do aplikace

V Reactu nainstalujte react-useanimations a naimportujte ikonu; svou interakci „smyčka při hoveru“ přehraje sama. Všechny ikony v této kategorii fungují stejně: github jen nahraďte názvem ze stránky požadované ikony.

npm install react-useanimations

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

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

Se shadcn/ui vám CLI přidá hotovou komponentu:

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

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

<AnimatedGithub size={24} />

Nepoužíváte React? Každá ikona je Lottie JSON soubor na adrese /icons/<id>.json; přehrávače pro web, iOS, Android a Flutter popisuje stránka Lottie ikony.

Časté dotazy

Které animované ikony sociálních sítí sada obsahuje?

22 ikon: Behance, Chrome, Codepen, Codesandbox, Discord, Dribbble, Facebook, Figma, Framer, Github, GitLab, Instagram a 10 dalších. Všechny můžete zdarma používat v osobních i komerčních projektech pod licencí MIT, bez nutnosti uvádět autora.

Jak použít animované ikony sociálních sítí v Reactu?

Nainstalujte react-useanimations, přidejte import github from 'react-useanimations/lib/github' a vykreslete <UseAnimations animation={github} size={32} />. Ikona přehraje svou interakci „smyčka při hoveru“ a převezme barvu textu. Se shadcn/ui místo toho spusťte npx shadcn@latest add https://useanimations.com/r/github.json.

Můžu animované ikony sociálních sítí použít i bez Reactu?

Ano. Každá ikona je Lottie JSON soubor na adrese https://useanimations.com/icons/<id>.json (například https://useanimations.com/icons/github.json), který přehraje lottie-web, lottie-ios, lottie-android nebo balíček lottie pro Flutter; statická SVG najdete na stránce každé ikony (stránky ikon jsou v angličtině). Twitter používá výrazy (expressions) z After Effects, takže na webu potřebuje plný build lottie-web.