Chuyển đến nội dung chính
VI

64 icon · Giấy phép MIT

Icon thao tác động

Những “động từ” của giao diện: lưu, xóa, tải xuống, làm mới, thích, đánh dấu, tìm kiếm và cài đặt. Mỗi icon xác nhận lại cú click hay hover mà nó gắn với, nên trái tim sẽ được tô đầy khi bạn thích một bài viết, còn nắp thùng rác nhấc lên trước khi bạn xóa.

Trong 64 icon, 2 icon lặp liên tục, 14 icon chuyển giữa hai trạng thái khi click, 30 icon phát lại sau mỗi lần click, 11 icon phát khi hover và chạy ngược khi rời chuột, 6 icon phát một lần khi hover và 1 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, dùng miễn phí cả cho mục đích thương mại theo giấy phép MIT. 61 icon trong số đó còn có thêm SVG tĩnh.

Tất cả icon thao tác

Dùng ở đâu

  • Nút thích, yêu thích và đánh dấu trên các thẻ
  • Nút tải xuống, tải lên và lưu có phản hồi xác nhận
  • Nút ẩn/hiện mật khẩu trong form đăng nhập
  • Nút làm mới và đồng bộ trên dashboard
  • Nút xóa trong bảng và danh sách tệp
  • Ô tìm kiếm biến thành nút xóa nội dung

Theo tương tác

  • Icon động lặp liên tục · 2

    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. Checkmark, Help.

  • Icon động bật/tắt khi click · 14

    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. Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3.

  • Icon động khi click · 30

    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. Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square.

  • Icon động khi hover · 11

    Phát xuôi khi con trỏ đi vào (mouseenter) và phát ngược khi con trỏ rời đi (mouseleave). Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.

  • 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. Award, Key, Maximize 2, Minimize 2, Shield, Slash.

  • Icon động lặp khi hover · 1

    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. Flag.

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

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import heart from 'react-useanimations/lib/heart';

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

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

npx shadcn@latest add https://useanimations.com/r/heart.json
import { AnimatedHeart } from '@/components/animations/heart';

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

64 icon: Award, Bookmark, Calendar, Check, Check Circle, Checkmark, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 và 52 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 thao tác động này trong React như thế nào?

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

Có dùng được các icon thao tá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/heart.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à đủ.