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

8 icon · Giấy phép MIT

Icon hình khối và toán học động

Hình tròn, hình vuông, tam giác, lục giác, một hình bát giác và dấu chia. Dùng chúng làm công cụ vẽ hình trong ứng dụng vẽ, làm phép toán trong máy tính, hoặc làm ký hiệu trung tính trong sơ đồ và các bước onboarding.

Cả 8 icon đều 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 hình khối & toán học

Dùng ở đâu

  • Công cụ vẽ hình trong ứng dụng whiteboard và vẽ
  • Phép toán trong máy tính và trình soạn công thức
  • Ký hiệu đầu dòng và đánh dấu bước trong sơ đồ
  • Giao diện trắc nghiệm và trò chơi

Theo tương tác

  • Icon động phát khi hover · 8

    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. Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle.

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

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

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

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

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

<AnimatedHexagon 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 hình khối và toán học động gồm những icon nào?

8 icon: Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square và Triangle. 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 hình khối và toán học động này trong React như thế nào?

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

Có dùng được các icon hình khối và toán họ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/hexagon.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à đủ.