Bạn đang xây dựng dashboard bằng Homarr, Dashy hay Homepage nhưng các icon cứ lệch tông màu, lệch độ dày, thậm chí có app không tìm thấy logo? Vấn đề thường không nằm ở app bạn chọn, mà nằm ở chỗ chưa có một bộ icon dashboard đồng bộ để dùng chung.

Thank you for reading this post, don't forget to subscribe!

Nói thẳng để bạn đỡ mất thời gian: bộ icon dashboard là một icon pack chứa logo thu nhỏ của các dịch vụ như Plex, Nextcloud, GitHub, Jellyfin, Grafana… được vẽ lại theo cùng một chuẩn và có thể nhúng bằng đường dẫn CDN. Lợi ích lớn nhất là sự đồng bộ: không còn cảnh icon nét đậm nét nhạt hay nền trắng chèn vào nền tối. Bộ này phù hợp nhất với dân tự host đang dùng Homarr, Dashy, Homepage, Heimdall và người cần tạo slide PowerPoint, chart hoặc infographic nhanh. Nếu bạn làm UI dashboard icons cho thương hiệu riêng, hãy đọc tiếp phần so sánh với Figma, PowerPoint và Shutterstock bên dưới.

Bộ icon dashboard nào đang được cộng đồng tự host dùng nhiều nhất?

Theo độ phủ trong các repo dashboard mã nguồn mở, Dashboard Icons của Homarr Labs đang là lựa chọn được nhắc đến nhiều nhất. Nó không phải là một app, mà là một bộ icon dashboard dạng repository có hơn 1.800 biểu tượng. Nó gần như trở thành tiêu chuẩn ngầm cho các dự án Homarr, Dashy, Homepage.

Trang dashboardicons.com công bố con số hơn 1.800 icon cho Plex, Jellyfin, Grafana, Portainer và hàng trăm dịch vụ khác. Repository gốc ghi rõ cấu trúc gồm 3 định dạng: SVG dùng cho vector, PNG và WEBP dùng cho ảnh tĩnh 512px. Mỗi icon có thêm 2 biến thể để khớp nền tối hoặc nền sáng, đồng thời tương thích với 4 nền tảng dashboard: Homarr, Dashy, Homepage, Heimdall. Ngoài ra, bạn chỉ cần nhớ một chuỗi CDN chung là có thể nhúng mà không phải tải file về máy.

Bạn cũng nên biết, kho này không nhằm thay thế một repo đa năng như Simple Icons vốn có hơn 3.000 logo thương hiệu. Simple Icons theo đuổi số lượng, còn Dashboard Icons theo đuổi sự vừa khít với giao diện dashboard, nên tỉ lệ icon dùng được ngay trong Homarr hay Dashy cao hơn hẳn.

Biến thể -light và -dark nên dùng khi nào?

Nguyên tắc chỉ nằm ở màu nền, đừng chọn theo sở thích. Icon -dark thực chất là bản vẽ màu đen, hợp với nền sáng. Icon -light là bản vẽ màu trắng, hợp với nền tối. Nếu dashboard bạn có theme tối, hãy gọi file plex-light.svg; theme sáng thì gọi plex-dark.svg.

Một số dashboard như Homarr cho phép đổi theme theo lịch, sáng tối tự động. Vì vậy, đừng nhúng cứng một biến thể cho toàn bộ. Hãy khai báo hai giá trị và để ứng dụng tự chọn theo theme.

Nếu chỉ có một bản icon không có hậu tố, bạn vẫn dùng được nhưng nên kiểm tra màu chủ đạo. Ví dụ GitHub có sẵn github-dark lẫn github-light; một số thương hiệu khác chỉ có một màu duy nhất, nên đặt trong khung có nền tương phản.

Làm cách nào để tải và nhúng icon qua CDN vào Homarr, Dashy hoặc Homepage?

Cả ba dashboard đều đọc icon từ URL, nên bạn không cần tải file rồi upload. Cách nhanh nhất là vào dashboardicons.com, tìm tên dịch vụ, chọn định dạng và sao chép đường dẫn. Sau đó dán vào ô biểu tượng của widget trong bảng điều khiển. Toàn bộ thao tác mất dưới một phút.

Quy trình cụ thể gồm:

1. Truy cập dashboardicons.com, gõ tên app cần tìm, ví dụ plex.
2. Chọn biến thể light hoặc dark tuỳ theme.
3. Copy URL SVG từ mục CDN hoặc tải file về máy.
4. Trong Homarr, dán URL vào trường icon của service; trong Dashy hoặc Homepage, dùng cú pháp tương tự.

Nếu muốn trỏ thẳng từ code, URL có dạng https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/plex.svg. Muốn dùng ảnh tĩnh, thay /svg/ bằng /png/ hoặc /webp/. Tên tất cả icon đều viết kiểu kebab-case, ví dụ nextcloud-calendar.svg, nên bạn không cần tra cứu liên tục.

Nếu bạn đang theo dõi server qua bảng điều khiển Nezha, cách dùng cũng giống vậy: chỉ cần CDN URL là hệ thống tự hiển thị logo. Muốn tải cả thư mục về làm tài liệu, dùng lệnh curl -O https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/nextcloud.svg.

Bạn có thể theo dõi các bản phát hành mới ngay trên trang jsDelivr để biết icon nào vừa được thêm. Nếu chưa quen cấu hình service trong Homarr, hãy mở tài liệu cài đặt Homarr.

Bộ icon miễn phí có đủ cho widget, chart, infographic và slide PowerPoint không?

Đủ cho dashboard tự host, nhưng chưa đủ cho mọi nhu cầu thiết kế. Các widget cần logo dịch vụ, còn chart và infographic cần biểu tượng minh hoạ như mũi tên, hình người, điện thoại. Những biểu tượng đó nằm trong bộ icon của PowerPoint, Figma hoặc kho stock trả phí như Shutterstock.

Nếu bạn đang làm slide báo cáo, hãy dùng thư viện icon trong PowerPoint vì nó có sẵn icon, emoji và logo phổ thông. Nếu bạn thiết kế giao diện trước khi code, Figma Community cung cấp nhiều icon pack dạng vector; bạn kéo thả, sửa màu, export nhanh. Khi cần bản quyền rõ ràng cho ấn phẩm thương mại, tìm cụm UI dashboard icons hoặc logo dashboard trên Shutterstock.

Đối với doanh nghiệp dùng nền tảng quản trị như Base Wework, dashboard báo cáo đã có sẵn widget và bộ lọc. Bạn không cần đụng tới mã nguồn, nhưng cũng khó đưa bộ icon Homarr vào sâu bên trong. Khi đó, hãy coi bộ icon này là tài nguyên cho slide PowerPoint hoặc tài liệu hướng dẫn, còn giao diện Base Wework cứ để mặc định.

Còn nếu bạn nhận thiết kế một mẫu Slide Management Dashboard kiểu báo cáo quản lý, bộ icon Homarr chỉ giúp bạn gắn đúng logo từng ứng dụng. Toàn bộ layout, chart và infographic vẫn nên dựng trong PowerPoint hoặc Figma để dễ chỉnh sửa.

So sánh nhanh: Homarr Dashboard Icons với Figma, PowerPoint và Shutterstock

Bảng dưới gộp ba hướng thay thế phổ biến nhất mà người tìm bộ icon dashboard hay cân nhắc: Figma, PowerPoint và Shutterstock. Nó giúp bạn trả lời nhanh câu hỏi “nên gắn icon từ đâu” thay vì phải cài thử từng nơi.

Nguồn icon	Điểm mạnh	Điểm yếu	Phù hợp nhất
Homarr Dashboard Icons	1.800+ icon, 3 định dạng SVG/PNG/WEBP, có CDN jsDelivr	Chủ yếu là logo dịch vụ, không phải icon minh hoạ đa năng	Homarr, Dashy, Homepage, Heimdall
Figma Community	Nhiều icon pack vector, chỉnh màu và export ngay trong UI	Chất lượng pack không đồng đều, phải export thủ công	Nhà thiết kế cần tạo UI dashboard icons
PowerPoint icons	Tích hợp sẵn icon, emoji, logo phổ thông cho slide và chart	Không có CDN để dùng trong dashboard tự host	Slide báo cáo, infographic, tài liệu nội bộ
Shutterstock	Kho stock vector trả phí có bản quyền, tìm theo cụm UI dashboard icons rất nhanh	Tốn phí và cần đọc kỹ giấy phép sử dụng thương mại	Branding, ấn phẩm quảng cáo, dự án khách hàng

Với hầu hết trường hợp, Homarr Dashboard Icons là lựa chọn đầu tiên cho dân tự host dashboard. Còn với người làm nội dung thị giác, hãy kết hợp thêm PowerPoint hoặc Figma để tiết kiệm thời gian hơn là mua từng file trên Shutterstock.

Câu hỏi thường gặp về bộ icon dashboard

Dưới đây là các câu hỏi người mới hay hỏi trước khi đưa bộ icon này vào một dashboard tự lưu trữ.

Bộ icon dashboard này có thực sự miễn phí không?

Miễn phí. Bạn có thể xem toàn bộ icon trên dashboardicons.com, tải SVG hoặc PNG 512px và dùng CDN cho dashboard cá nhân. Phần mã nguồn mở được công khai trên GitHub. Tuy nhiên, mỗi icon thuộc thương hiệu tương ứng, nên cần kiểm tra chính sách nhãn hiệu trước khi bán sản phẩm có logo.

Có thể tải icon dạng ICO làm favicon không?

Chưa có sẵn ICO. Kho này phát hành SVG, PNG, WEBP; muốn có ICO bạn có thể chuyển từ PNG 512px bằng công cụ trực tuyến. Với favicon dashboard tự host, nhiều người vẫn nhúng SVG trực tiếp, vừa nét trên màn hình retina vừa đỡ phải tạo nhiều kích thước.

Làm sao để yêu cầu bổ sung icon logo của app mới?

Vào dashboardicons.com và điền form đề xuất dịch vụ mới. Đội ngũ Homarr Labs sẽ kiểm tra, chuẩn hoá logo rồi phát hành. Cách này thường nhanh hơn việc mở issue trên GitHub. Nếu muốn hỗ trợ duyệt icon, bạn có thể liên hệ qua Discord hoặc email [email protected].

Nên dùng Homarr Dashboard Icons hay icon pack trong Figma?

Nếu bạn đang cấu hình dashboard thật, chọn Homarr vì đã có CDN, không cần mở phần mềm thiết kế. Nếu bạn còn đang làm mockup UI trên Figma, hãy dùng Figma Community. Hai bộ bổ trợ cho nhau; sản phẩm cuối cùng khi code vẫn có thể lấy file SVG từ Figma và đẩy lên chính kho Homarr.