아이콘 22개 · MIT 라이선스

소셜 미디어 애니메이션 아이콘

소셜 네트워크, 그리고 개발자와 디자이너가 작업을 공유하는 서비스의 브랜드 아이콘입니다. X, Instagram, YouTube, Discord, Telegram, Figma 등이 있습니다. 호버하면 움직이므로 푸터와 프로필 링크가 클릭할 수 있는 요소로 느껴집니다.

아이콘 22개 중 3개는 호버하면 재생되었다가 포인터가 벗어나면 되돌아가고, 9개는 호버하면 한 번 재생되고, 10개는 호버하는 동안 반복 재생됩니다. 각 아이콘은 React 컴포넌트, shadcn/ui 컴포넌트, Lottie JSON 애니메이션으로 제공되며, MIT 라이선스로 상업용 프로젝트에도 무료로 쓸 수 있습니다. 모든 아이콘에 정적 SVG도 있습니다.

소셜 미디어 아이콘 전체

이런 곳에 쓰세요

사이트 푸터의 소셜 링크
블로그 글의 공유 버튼
작성자·팀 프로필 링크
채팅 서버 커뮤니티 초대 버튼
소셜·개발자 계정으로 로그인

인터랙션별

호버 애니메이션 아이콘 · 3
mouseenter에서 정방향으로, mouseleave에서 역방향으로 재생됩니다. Instagram, YouTube, YouTube V2.
호버 재생 애니메이션 아이콘 · 9
mouseenter에서 한 번 재생됩니다(동작 줄이기가 설정되어 있으면 재생되지 않음). 포인터가 벗어나도 멈추지 않고, 재생 중에 다시 들어와도 처음부터 다시 시작하지 않습니다. Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.
호버 루프 애니메이션 아이콘 · 10
호버하는 동안 반복 재생되고, mouseleave 후에는 현재 사이클을 마저 끝냅니다. 동작 줄이기가 설정되어 있으면 정지 상태로 있습니다. Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.

앱에 추가하기

React에서는 react-useanimations를 설치하고 아이콘을 가져오면 됩니다. 아이콘은 별도 설정 없이 호버 루프 인터랙션으로 재생됩니다. 이 카테고리의 다른 아이콘도 사용법이 같으니 github만 각 아이콘 페이지에 있는 이름으로 바꾸세요.

npm install react-useanimations

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

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

shadcn/ui에서는 CLI가 바로 쓸 수 있는 컴포넌트를 추가해 줍니다.

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

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

<AnimatedGithub size={24} />

React를 쓰지 않나요? 각 아이콘은 /icons/<id>.json에 있는 Lottie JSON 파일입니다. 웹, iOS, Android, Flutter 플레이어는 Lottie 아이콘 페이지를 참고하세요.

자주 묻는 질문

어떤 소셜 미디어 애니메이션 아이콘이 들어 있나요?

아이콘 22개: Behance, Chrome, Codepen, Codesandbox, Discord, Dribbble, Facebook, Figma, Framer, Github, GitLab, Instagram 외 10개. 모두 MIT 라이선스로 개인·상업용 프로젝트에 무료로 쓸 수 있고, 출처 표기도 필요 없습니다.

이 소셜 미디어 애니메이션 아이콘을 React에서 어떻게 쓰나요?

react-useanimations를 설치하고 import 문(import github from 'react-useanimations/lib/github')을 추가한 뒤 <UseAnimations animation={github} size={32} />를 렌더링하세요. 아이콘은 호버 루프 인터랙션으로 재생되고 텍스트 색상을 따라갑니다. shadcn/ui를 쓴다면 대신 npx shadcn@latest add https://useanimations.com/r/github.json 명령을 실행하세요.

이 소셜 미디어 애니메이션 아이콘을 React 없이 쓸 수 있나요?

네. 각 아이콘은 https://useanimations.com/icons/<id>.json에 있는 Lottie JSON 파일(예: https://useanimations.com/icons/github.json)이라 lottie-web, lottie-ios, lottie-android, Flutter의 lottie 패키지로 재생할 수 있습니다. 정적 SVG는 각 아이콘 페이지(영어)에서 받을 수 있습니다. Twitter에는 After Effects 익스프레션이 쓰였으므로, 웹에서는 lottie-web의 full 빌드가 필요합니다.