Chuyển đến nội dung chính
VI
v3300 icon · không dependency · MIT→

Icon sống động.

Icon động miễn phí cho React, shadcn/ui và Lottie

300 micro animation được làm thủ công, có sẵn micro-interaction hover, click và loop. Dùng như một React component, thêm bằng shadcn, hoặc tải về SVG và Lottie JSON. Giấy phép MIT.

Xem icon

Di chuyển con trỏ qua vùng icon.

icon động
300
icon động
tương tác có sẵn
6
tương tác có sẵn
player, đã gzip
8 kB
player, đã gzip
dependency
0
dependency

Tương tác có sẵn

Icon nào cũng biết cách chuyển động.

Mỗi icon đi kèm tương tác mà nó được thiết kế cho. Chỉ cần thả vào là chạy, hoặc chọn tương tác khác bằng một prop duy nhất. Hãy thử:

Thư viện

300 icon động miễn phí

Hover hoặc click để xem hiệu ứng. Mở một icon để lấy code và tải về Lottie JSON, SVG hoặc ZIP.

300 icon

Cảnh báo

Thông báo

Điều hướng

Thao tác

Nội dung

Biểu mẫu

Đa phương tiện

Soạn thảo văn bản

Liên lạc

Thiết bị

Thời tiết

Bản đồ & vị trí

Thương mại

Biểu đồ

Lập trình

Thiết kế & bố cục

Hình khối & toán học

Loading

Mạng xã hội

Khác

Dùng theo cách của bạn

Cài, import, xong.

Một React component không có dependency, một shadcn registry, các tệp tải về với URL cố định, và một catalog mà AI agent đọc được.

Đọc tài liệu →
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

export function MenuButton({ open, onToggle }) {
  return (
    <UseAnimations
      animation={menu}
      active={open}
      onClick={onToggle}
      size={28}
    />
  );
}

Nhỏ gọn, dễ tiếp cận và tùy biến thoải mái.

Theo màu của bạn

Icon dùng currentColor: tự lấy màu chữ, trạng thái hover và dark mode mà không cần cấu hình. Muốn ghi đè thì dùng prop, class hoặc CSS thuần.

Nhỏ gọn ngay từ thiết kế

8 kB

Player tích hợp sẵn, không có dependency. Mỗi icon là một module riêng chỉ 2 kB.

Khả năng truy cập có sẵn

Tôn trọng thiết lập giảm chuyển động, phát hiệu ứng hover khi focus bằng bàn phím và được trình đọc màn hình bỏ qua trừ khi bạn gắn nhãn.

Sẵn sàng cho server rendering

Một client component render an toàn trong Next.js, Remix và Astro. Icon chỉ là dữ liệu thuần, import ở đâu cũng được.

Làm cho AI agent

Catalog có kiểu dữ liệu với từ khóa cho từng icon, icons.json, llms.txt và tài liệu Markdown.

Tìm đúng micro animation bạn cần.

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

Micro animation và icon động là gì?

Micro animation là những chuyển động ngắn, chỉ phục vụ một mục đích, phản hồi lại thao tác của người dùng: icon menu biến thành nút đóng, trái tim được tô đầy khi bạn thích một bài viết, chiếc chuông rung lên khi có thông báo mới. Icon động là dạng micro animation phổ biến nhất. Chúng giúp giao diện có cảm giác phản hồi nhanh và thể hiện thay đổi trạng thái mà không cần thêm chữ.

Tệp Lottie và tệp SVG khác nhau thế nào?

Tệp Lottie JSON chứa toàn bộ animation và phát được trong mọi Lottie player, kể cả player tích hợp trong react-useanimations. Các tệp SVG là ảnh tĩnh của icon khi đứng yên, mỗi trạng thái một tệp (ví dụ eye và eye-off), dùng cho những nơi không nên có chuyển động: email, tài liệu, công cụ thiết kế hoặc phương án dự phòng khi không có JavaScript.

Có dùng được với Next.js và server rendering không?

Có. Component được đánh dấu 'use client' và chỉ vẽ animation trên trình duyệt, nên render được từ server component và các framework SSR như Next.js, Remix và Astro mà không cần dynamic import. Module icon là dữ liệu thuần, server component có thể import và truyền chúng xuống dưới dạng prop. Next.js và server rendering →

Có dùng icon trong dự án thương mại được không?

Được. Bộ icon và package react-useanimations dùng giấy phép MIT: bạn được dùng, chỉnh sửa và phân phối lại trong cả dự án cá nhân lẫn thương mại. Ghi nguồn là điều chúng tôi trân trọng nhưng không bắt buộc. Giấy phép & Điều khoản →

Có dùng icon mà không cần React được không?

Được. Mỗi icon là một tệp Lottie JSON chuẩn, nên phát được bằng lottie-web trong JavaScript thuần, Vue, Svelte, Angular hay CMS, và trong các Lottie player cho iOS, Android và Flutter. Trang Icon Lottie có URL của các tệp và đoạn code lottie-web dùng ngay cho từng tương tác. Icon Lottie →

Icon làm bundle của tôi nặng thêm bao nhiêu?

Player trong react-useanimations 3.1.1 nặng khoảng 8 kB sau khi gzip và không có dependency; mỗi icon là một module riêng từ 1 đến 15 kB (trung vị 2 kB), nên bundle chỉ chứa những icon bạn import.

Thổi hồn vào giao diện của bạn.

Miễn phí, giấy phép MIT, cho cả dự án cá nhân và thương mại.

Bắt đầu