22 icon · Giấy phép MIT

Icon mạng xã hội động

Icon thương hiệu của các mạng xã hội và những công cụ mà lập trình viên, designer dùng để chia sẻ sản phẩm: X, Instagram, YouTube, Discord, Telegram, Figma và nhiều hơn nữa. Chúng chuyển động khi hover, giúp các liên kết ở footer và trang hồ sơ trông rõ là có thể click.

Trong 22 icon, 3 icon phát khi hover và chạy ngược khi rời chuột, 9 icon phát một lần khi hover và 10 icon lặp khi được hover. Mỗi icon có sẵn dưới dạng React component, component shadcn/ui và animation Lottie JSON, kèm SVG tĩnh, dùng miễn phí cả cho mục đích thương mại theo giấy phép MIT.

Tất cả icon mạng xã hội

Dùng ở đâu

Liên kết mạng xã hội ở footer website
Nút chia sẻ trên bài blog
Liên kết hồ sơ tác giả và thành viên nhóm
Nút mời tham gia server chat cộng đồng
Đăng nhập bằng tài khoản mạng xã hội hoặc tài khoản lập trình viên

Theo tương tác

Icon động khi hover · 3
Phát xuôi khi con trỏ đi vào (mouseenter) và phát ngược khi con trỏ rời đi (mouseleave). Instagram, YouTube, YouTube V2.
Icon động phát khi hover · 9
Phát một lần khi con trỏ đi vào (mouseenter), trừ khi người dùng bật giảm chuyển động. Rời chuột không làm hiệu ứng dừng; hover lại trong lúc đang phát cũng không khởi động lại. Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.
Icon động lặp khi hover · 10
Lặp khi đang hover, chạy nốt chu kỳ hiện tại sau khi con trỏ rời đi (mouseleave) và đứng yên khi người dùng bật giảm chuyển động. Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.

Thêm vào ứng dụng của bạn

Với React, hãy cài react-useanimations rồi import icon; icon sẽ tự chạy tương tác “Hover lặp” của nó. Mọi icon trong danh mục này đều dùng giống hệt: chỉ cần thay github bằng tên ghi trên trang của icon đó.

npm install react-useanimations

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

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

Với shadcn/ui, CLI sẽ thêm sẵn một component:

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

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

<AnimatedGithub size={24} />

Không dùng React? Mỗi icon là một tệp Lottie JSON tại /icons/<id>.json; xem Icon Lottie để biết các player cho web, iOS, Android và Flutter.

Câu hỏi thường gặp

Bộ icon mạng xã hội động gồm những icon nào?

22 icon: Behance, Chrome, Codepen, Codesandbox, Discord, Dribbble, Facebook, Figma, Framer, Github, GitLab, Instagram và 10 icon khác. Tất cả đều miễn phí cho dự án cá nhân và thương mại theo giấy phép MIT, không bắt buộc ghi nguồn.

Dùng các icon mạng xã hội động này trong React như thế nào?

Cài react-useanimations, thêm import github from 'react-useanimations/lib/github' rồi render <UseAnimations animation={github} size={32} />. Icon sẽ chạy tương tác “Hover lặp” của nó và tự lấy theo màu chữ. Nếu dùng shadcn/ui, hãy chạy npx shadcn@latest add https://useanimations.com/r/github.json.

Có dùng được các icon mạng xã hội động này mà không cần React không?

Được. Mỗi icon là một tệp Lottie JSON tại https://useanimations.com/icons/<id>.json (ví dụ https://useanimations.com/icons/github.json), phát được bằng lottie-web, lottie-ios, lottie-android hoặc package lottie của Flutter; SVG tĩnh có trên trang riêng của từng icon (bằng tiếng Anh). Twitter dùng expression của After Effects, nên trên web cần bản đầy đủ của lottie-web.