Tài nguyên liên quan
AZDIGI
WordPress Studio
Squoosh
Tyler
Blueky WebKit
Bạn đang làm website, thiết kế ứng dụng, hay tạo tài liệu thuyết trình?
Bạn cần những biểu tượng đơn giản, rõ ràng và dễ dùng?
Google Icons là thư viện hơn 2.500 biểu tượng miễn phí chuẩn hiện đại, dễ tích hợp, phù hợp với mọi nền tảng – từ website đến ứng dụng di động.
Nội dung chính
Google Icons là gì?
Google Icons (trước đây là Material Icons) là bộ biểu tượng chính thức do Google phát triển.
Chúng tuân theo phong cách thiết kế Material, được tối ưu cho cả giao diện web lẫn app, có thể dễ dàng tùy biến độ dày, độ lớn, màu sắc và phong cách.
Google Icons giúp bạn làm gì?
- Chọn từ 2.500+ biểu tượng: giao diện, biểu đồ, nút bấm, media, social…
- Chuyển đổi giữa 5 phong cách: Filled, Outlined, Rounded, Sharp, và Two-Tone
- Tải xuống SVG hoặc nhúng trực tiếp bằng mã HTML
- Tùy chỉnh icon với CSS hoặc inline style
- Tích hợp dễ dàng với Figma, website HTML, WordPress, React, Tailwind, v.v.
Hướng dẫn cách sử dụng Google Icons
Cách 1: Sử dụng trực tiếp từ Google Fonts Icons
Truy cập fonts.google.com/icons
Tìm kiếm biểu tượng bạn muốn
Chọn style → Copy đoạn <span class="material-symbols-outlined">icon_name</span> và dán vào HTML
Cách 2: Tải SVG về dùng trong thiết kế
Click vào biểu tượng → chọn “Download SVG” để dùng trong Figma, Canva, Photoshop, hoặc khi làm mockup
Cách 3: Dùng với Google Fonts API
Thêm đoạn này vào <head>:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Rồi dùng trong HTML như sau:
<span class="material-symbols-outlined">home</span>Khi nào nên dùng?
- Khi bạn muốn website hoặc giao diện trông chuyên nghiệp, hiện đại
- Khi cần bộ icon đồng bộ, gọn gàng, dễ scale
- Khi thiết kế web/blog/landing page và không muốn tải icon nặng từ thư viện bên ngoài
- Khi tạo tài liệu thuyết trình, infographics, hoặc app demo
Cách thêm Google Fonts cho Blueky Hub
Đang cập nhật…
So sánh với các công cụ icon khác
| Công cụ | Số lượng icon | Miễn phí | Tùy chỉnh | Dễ tích hợp |
|---|---|---|---|---|
| Google Icons | ✅ 2.500+ | ✅ | ✅ | ✅ |
| Font Awesome | ✅ 2.000+ (miễn phí) | ⚠️ Có bản trả phí | ✅ | ✅ |
| Heroicons | ✅ Gọn nhẹ | ✅ | ✅ | ✅ |
| Iconscout / NounProject | ✅ Nhiều | ⚠️ Trả phí | ✅ | ⚠️ Khó tích hợp |
Tóm lại, tại sao chọn Google Icons?
| Bạn cần | Google Icons có |
|---|---|
| Bộ icon đồng bộ, rõ nét | ✅ |
| Dùng nhanh, tải nhẹ | ✅ |
| Tùy chỉnh kích cỡ, màu sắc | ✅ |
| Tương thích tốt với web/app | ✅ |
| Miễn phí hoàn toàn | ✅ |
Gợi ý từ Bộ Lạc HXN
Nếu bạn đang xây dựng website bằng WordPress, Webflow, Blogger, hay thậm chí là Notion – thì Google Icons chính là công cụ bạn nên bookmark ngay.
Dễ tìm, dễ dùng, linh hoạt và chuẩn thiết kế – không cần kỹ thuật cao, chỉ cần copy & paste.
Nếu như cầu không quá lớn, Thường Hoàng Hxn dùng công cụ https://heroicons.com/ để lấy icon nhanh cho cài đặt nhóm & Menu của tính năng cộng đồng trên Blueky Hub.
Công cụ liên quan