13 icon · Giấy phép MIT

Icon liên lạc động

Điện thoại, bong bóng chat, nút gửi, hộp thư thoại và RSS. Các icon cuộc gọi có đủ trạng thái gọi đến, gọi đi, gọi nhỡ và chuyển tiếp mà một nhật ký cuộc gọi cần, còn icon gửi tạo một chuyển động “tiễn” tin nhắn nho nhỏ khi click.

Trong 13 icon, 1 icon chuyển giữa hai trạng thái khi click, 3 icon phát lại sau mỗi lần click và 9 icon phát một lần khi 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 liên lạc

Dùng ở đâu

Nút gửi trong form chat và bình luận
Nhật ký cuộc gọi với cuộc gọi đến, gọi đi và gọi nhỡ
Nút liên hệ và hỗ trợ
Nút mở widget chat
Trường nhắc tên (mention) và địa chỉ email

Theo tương tác

Icon động bật/tắt khi click · 1
Chuyển giữa hai trạng thái khi click, hoặc chuyển ngay lập tức khi người dùng bật giảm chuyển động. Phone Off.
Icon động khi click · 3
Phát lại một lần từ đầu sau mỗi lần click, trừ khi người dùng bật giảm chuyển động. Phone, Phone Call, Send.
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. At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail.

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 “Click phát lại” của nó. Mọi icon trong danh mục này đều dùng giống hệt: chỉ cần thay send bằng tên ghi trên trang của icon đó.

npm install react-useanimations

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

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

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

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

import { AnimatedSend } from '@/components/animations/send';

<AnimatedSend 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 liên lạc động gồm những icon nào?

13 icon: At Sign, Message Circle, Message Square, Phone, Phone Call, Phone Forwarded, Phone Incoming, Phone Missed, Phone Off, Phone Outgoing, RSS, Send và 1 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 liên lạc động này trong React như thế nào?

Cài react-useanimations, thêm import send from 'react-useanimations/lib/send' rồi render <UseAnimations animation={send} size={32} />. Icon sẽ chạy tương tác “Click phát lại” 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/send.json.

Có dùng được các icon liên lạc độ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/send.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). Không icon nào dùng expression, nên bản rút gọn (light) của lottie-web là đủ.