300 icon · 20 danh mục

Danh mục icon động

Mỗi icon của useAnimations thuộc về một danh mục, từ mũi tên điều hướng, nút điều khiển media đến loader và logo mạng xã hội. Mở một danh mục để xem tất cả icon trong đó, nên dùng chúng ở đâu và code để thêm vào ứng dụng, hoặc xem theo tương tác.

Cảnh báo5 iconTam giác cảnh báo, vòng tròn báo lỗi và biển dừng, nhấp nháy vừa đủ để gây chú ý mà không chói mắt. Hãy đặt chúng cạnh một trường form bị lỗi, ở đầu banner báo lỗi hoặc trong cột trạng thái, những chỗ mà icon tĩnh rất dễ bị lướt qua.
Thông báo4 iconIcon chuông rung lên khi có hoạt động mới, hoặc chuyển qua lại giữa chuông và chuông tắt tiếng. Một cú lắc nhẹ của chiếc chuông kéo ánh mắt về số tin chưa đọc, còn các phiên bản bật/tắt có thể dùng luôn làm nút tắt thông báo cho một kênh hay một luồng thảo luận.
Điều hướng34 iconMenu 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.
Thao tác64 iconNhữ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.
Nội dung22 iconTệp, thư mục, sách, thư, tệp đính kèm và người dùng. Chúng gắn nhãn cho những thứ người dùng làm việc cùng, còn các biến thể thêm, bớt và đánh dấu giúp việc quản lý danh sách và thành viên nhóm có phản hồi rõ ràng hơn.
Biểu mẫu3 iconMột checkbox, một radio button và một công tắc toggle chuyển động giữa trạng thái chọn và bỏ chọn. Hãy dùng chúng ở những chỗ mà input thông thường trông quá đơn điệu, như checklist onboarding hay màn hình cài đặt, mà trạng thái vẫn dễ đọc chỉ trong một cái nhìn.
Đa phương tiện28 iconPhát và tạm dừng, âm lượng, micro, camera, chuyển bài và phát ngẫu nhiên cho trình phát âm thanh và video. Các icon bật/tắt chuyển giữa hai trạng thái, từ phát sang tạm dừng hay từ micro sang tắt tiếng, nên nút bấm luôn cho thấy cú click tiếp theo sẽ làm gì.
Soạn thảo văn bản10 iconIcon in đậm, in nghiêng, gạch chân, căn lề và danh sách cho thanh công cụ soạn thảo rich text. Một hiệu ứng click ngắn xác nhận định dạng đã được áp dụng, rất có ích trong những trình soạn thảo mà thay đổi trên chính văn bản khó nhận ra.
Liên lạc13 iconĐiện thoại, bong bóng chat, nút gửi, hộp thư thoại và RSS. Các icon cuộc gọi có đủ trạng thái gọi đến, gọi đi, gọi nhỡ và chuyển tiếp mà một nhật ký cuộc gọi cần, còn icon gửi tạo một chuyển động “tiễn” tin nhắn nho nhỏ khi click.
Thiết bị12 iconĐiện thoại, máy tính bảng, màn hình, đồng hồ và máy in, cùng các chỉ báo kết nối đi kèm: wifi, Bluetooth và pin. Chúng hợp với bộ chọn thiết bị, nút chuyển chế độ xem trước responsive và trạng thái kết nối.
Thời tiết16 iconMặt trời, mặt trăng, mây, mưa, tuyết, sấm sét và gió cho dự báo thời tiết và mọi thứ thay đổi theo thời điểm trong ngày. Cặp mặt trời và mặt trăng cũng là lựa chọn tự nhiên cho nút chuyển giao diện sáng/tối.
Bản đồ & vị trí9 iconGhim bản đồ, mũi tên chỉ đường, quả địa cầu, tâm ngắm và mỏ neo. Một chiếc ghim rơi xuống khi hover giúp trang tìm cửa hàng hay ô địa chỉ giao hàng nổi bật hơn, còn quả địa cầu dùng được làm nút chọn ngôn ngữ hoặc khu vực.
Thương mại11 iconGiỏ hàng, túi mua sắm, thẻ giá, hộp quà, thẻ tín dụng và xe giao hàng cho cửa hàng online. Hiệu ứng thêm vào giỏ xác nhận cú click mà không cần đến toast, còn icon xe tải và kiện hàng khiến trạng thái đơn hàng sinh động hơn một chút.
Biểu đồ5 iconBiểu đồ cột, biểu đồ tròn và mũi tên xu hướng cho phân tích và báo cáo. Icon xu hướng tăng và giảm cho thấy ngay một chỉ số đã tăng hay giảm, rất hợp với thẻ KPI và nhật ký thay đổi các con số.
Lập trình9 iconDấu ngoặc code, terminal, nhánh Git, commit, merge và pull request, cùng server và database. Được làm cho công cụ lập trình, trang tài liệu và trang trạng thái, nơi các khái niệm về Git và hạ tầng là một phần của giao diện.
Thiết kế & bố cục10 iconIcon lưới, cột, layer, cắt ảnh, công cụ bút và con trỏ cho trình chỉnh sửa và trình dựng trang. Chúng hợp với thanh công cụ nơi người dùng sắp xếp nội dung, chuyển giữa dạng lưới và dạng bảng, hoặc chọn một công cụ vẽ.
Hình khối & toán học8 iconHì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.
Loading5 iconSpinner và loader lặp liên tục trong suốt thời gian một tác vụ đang chạy. Đặt một icon trong nút submit khi request đang xử lý, thay chỗ cho nội dung chưa tải xong, hoặc trên màn hình splash toàn trang; chúng đứng yên khi người dùng bật chế độ giảm chuyển động.
Mạng xã hội22 iconIcon thương hiệu của các mạng xã hội và những công cụ mà lập trình viên, designer dùng để chia sẻ sản phẩm: X, Instagram, YouTube, Discord, Telegram, Figma và nhiều hơn nữa. Chúng chuyển động khi hover, giúp các liên kết ở footer và trang hồ sơ trông rõ là có thể click.
Khác10 iconNhữ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.