10 icon · Giấy phép MIT

Icon động khác

Những icon không thuộc nhóm lớn nào: khuôn mặt emoji để lấy phản hồi, tách cà phê, đồng hồ, đường nhịp tim và gợi ý cuộn xuống. Icon cuộn xuống là gợi ý quen thuộc ở phần hero rằng bên dưới vẫn còn nội dung.

Trong 10 icon, 4 icon lặp liên tục và 6 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 khác

Dùng ở đâu

Gợi ý cuộn xuống ở cuối phần hero
Khuôn mặt vui, bình thường và buồn trong widget phản hồi
Chỉ báo hoạt động và uptime
Giờ mở cửa và bộ chọn thời gian
Liên kết buy-me-a-coffee và ủng hộ

Theo tương tác

Icon động lặp liên tục · 4
Phát liên tục; đứng yên ở khung hình tĩnh đầu tiên khi người dùng bật giảm chuyển động. Activity, Arrow down, Arrow up, Scroll down.
Icon động phát khi hover · 6
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. Clock, Coffee, Frown, Meh, Smile, Tool.

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 “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 scrollDown bằng tên ghi trên trang của icon đó.

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/scroll-down.json

import { AnimatedScrollDown } from '@/components/animations/scroll-down';

<AnimatedScrollDown 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 động khác gồm những icon nào?

10 icon: Activity, Arrow down, Arrow up, Clock, Coffee, Frown, Meh, Scroll down, Smile và Tool. 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 động khác này trong React như thế nào?

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

Có dùng được các icon động khác 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/scroll-down.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à đủ.