34 icon · Giấy phép MIT

Icon điều hướng và mũi tên động

Menu hamburger biến thành nút đóng, cùng các mũi tên, chevron và mũi tên góc khẽ nhích theo hướng của chúng khi hover. Nhờ vậy người dùng thấy ngay một nút sẽ dẫn đi đâu: mở drawer, quay lại, mở rộng một dòng hay rời khỏi trang.

Trong 34 icon, 2 icon lặp liên tục, 4 icon chuyển giữa hai trạng thái khi click, 6 icon phát lại sau mỗi lần click và 22 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.

Dùng ở đâu

Menu hamburger biến thành nút đóng trên mobile
Nút trước và sau trong carousel và phân trang
Chevron của accordion và dropdown
Gợi ý cuộn lên đầu trang hoặc cuộn xuống
Liên kết đăng nhập và đăng xuất
Dấu hiệu liên kết ngoài và nút ẩn/hiện sidebar

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. More Horizontal, More Vertical.
Icon động bật/tắt khi click · 4
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. Burger Menu, Menu V2, Menu V3, Menu V4.
Icon động khi click · 6
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. Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.
Icon động phát khi hover · 22
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. Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar.

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

npm install react-useanimations

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

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

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

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

import { AnimatedMenu } from '@/components/animations/menu';

<AnimatedMenu 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 điều hướng và mũi tên động gồm những icon nào?

34 icon: Arrow down circle, Arrow Down Left, Arrow Down Right, Arrow Left, Arrow left circle, Arrow Right, Arrow right circle, Arrow up circle, Arrow Up Left, Arrow Up Right, Burger Menu, Chevron Down và 22 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 điều hướng và mũi tên động này trong React như thế nào?

Cài react-useanimations, thêm import menu from 'react-useanimations/lib/menu' rồi render <UseAnimations animation={menu} 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/menu.json.

Có dùng được các icon điều hướng và mũi tên độ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/menu.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à đủ.

Tất cả icon điều hướng

Dùng ở đâu

Theo tương tác

Thêm vào ứng dụng của bạn

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