Iconify: Thư viện biểu tượng mã nguồn mở

• Nền tảng tổng hợp biểu tượng cho phép khám phá và sử dụng nhiều bộ biểu tượng mã nguồn mở tại một nơi
• Cung cấp 204 bộ được phân loại theo nhiều danh mục, với khoảng 280.000 biểu tượng
• Hỗ trợ lấy thông tin biểu tượng và tạo SVG/CSS thông qua API. Cũng cung cấp Search API để dùng trong plugin cho Figma/Sketch
• Mỗi bộ được phát hành theo nhiều giấy phép mở khác nhau như Apache 2.0, MIT, CC BY, GPL
• Bao gồm biểu tượng của các hệ thống thiết kế lớn như Google Material, Fluent UI, Font Awesome, Tabler, HeroIcons

---

Tổng quan về Iconify

• Iconify là kho lưu trữ trung tâm cho các bộ biểu tượng mã nguồn mở, cho phép khám phá nhiều biểu tượng qua giao diện web
• Mỗi bộ biểu tượng gồm tên, loại giấy phép, số lượng biểu tượng và liên kết riêng
• Người dùng có thể lọc theo danh mục để chọn các bộ như Material, UI, Emoji, Logos, Programming...

Các danh mục biểu tượng chính

• Nhóm Material: 6 bộ như Material Symbols, Material Design Icons..., bao gồm tối đa hơn 15.000 biểu tượng
• Bộ UI 24px: gồm hơn 50 bộ như Solar, Tabler, Remix, Lucide, Iconoir..., cung cấp nhiều phong cách và kích thước
• Bộ UI 16px / 32px: bao gồm 18 bộ như Carbon, IonIcons, Ant Design Icons, Bootstrap Icons
• UI Other / Mixed Grid: chứa nhiều bộ lớn như Fluent UI System Icons (18.959 biểu tượng), Phosphor (9.072 biểu tượng)
• Bộ UI Multicolor: cung cấp các biểu tượng nhiều màu sắc như Streamline, Fluent Color, IconPark
• Bộ Programming: 9 bộ chuyên cho môi trường phát triển như VSCode Icons, Devicon, File Icons
• Bộ Logos: 15 bộ tập trung vào thương hiệu và logo như Simple Icons, SVG Logos, Web3 Icons
• Bộ Emoji: gồm 11 bộ như OpenMoji, Twemoji, Noto Emoji
• Bộ Flags / Maps: bao gồm 7 bộ như Circle Flags, Flag Icons
• Bộ Thematic: 8 bộ theo chủ đề như Game Icons, Health Icons, Weather Icons
• Bộ Archive / Unmaintained: lưu trữ 30 bộ phiên bản cũ như Font Awesome 4~6, Eva Icons

Sự đa dạng về giấy phép

• Mỗi bộ được phát hành theo nhiều giấy phép mở như Apache 2.0, MIT, CC BY, GPL, OFL (Open Font License)
• Một số bộ có thể được sử dụng tự do dưới dạng CC0 (public domain) hoặc Unlicense
• Thông tin giấy phép được ghi rõ, giúp dễ dàng kiểm tra khả năng sử dụng thương mại và chỉnh sửa

Ví dụ về các bộ biểu tượng tiêu biểu

• Fluent UI System Icons: giấy phép MIT, 18.959 biểu tượng
• Material Symbols Light: Apache 2.0, 15.180 biểu tượng
• Tabler Icons: MIT, 5.986 biểu tượng
• Simple Icons: CC0, 3.379 logo thương hiệu
• OpenMoji: CC BY-SA 4.0, 4.449 emoji

Giá trị ứng dụng

• Đảm bảo khả năng tiếp cận biểu tượng nhất quán trên nhiều hệ thống thiết kế và framework
• Giúp nhà phát triển và nhà thiết kế chọn ngay phong cách và giấy phép phù hợp với yêu cầu dự án
• Là nền tảng tài nguyên thúc đẩy tái sử dụng và tiêu chuẩn hóa biểu tượng trong toàn bộ hệ sinh thái mã nguồn mở
• Tham khảo cách sử dụng cùng thông tin API/plugin tại trang tài liệu chính thức

[GN⁺]

Ý kiến trên Hacker News

• Iconify có thể lấy trực tiếp SVG icon thông qua API
  Tôi thường tạo sơ đồ kiến trúc bằng D2, và khi dùng cùng thư viện icon khổng lồ của Iconify thì hình ảnh trở nên phong phú hơn rất nhiều
  Ví dụ, trong sơ đồ kết nối Docker và Kubernetes, có thể chỉ định SVG icon tương ứng cho từng bên

• Một số SVG có áp dụng animation và còn có thể tìm kiếm được
  Tôi đã dùng các icon này cho trình soạn thảo văn bản offline wrifocus.bounded.cc, và rất hài lòng với kết quả

  • Tôi tò mò không biết bạn đã dùng bộ icon nào. Nếu lọc theo “contains animations” thì có vẻ chỉ thấy bộ icon loader và thời tiết
  • Animation bánh răng quay của icon cài đặt đặc biệt rất đẹp. Bản thân trình soạn thảo cũng rất ấn tượng
    Tôi tò mò liệu có thể dùng online theo cách lưu dữ liệu lên máy chủ hay không, và vì sao bạn lại chọn làm theo kiểu offline trên trình duyệt
  • Cảm ơn vì đã chia sẻ. Tôi cũng muốn biết liệu dự án này có thể vận hành theo kiểu self-hosted hay không

• icones.js.org là một trang rất tốt để tìm kiếm những icon như thế này

• Tôi nghĩ mình muốn viết một bài về chủ đề tối ưu hóa icon
  Mỗi khi thấy website không inline icon nên layout bị xô lệch là tôi lại thấy khó chịu

  • Đồng ý. Inline icon là một cách hay, nhưng có thể làm DOM phình to
    Tùy vào độ phức tạp của icon hay tần suất lặp lại, đôi khi lazy loading lại là lựa chọn tốt hơn
    Về cốt lõi thì đây là vấn đề do không đặt trước không gian hiển thị cho đúng
  • Chỉ định thuộc tính width/height cũng là một cách giải quyết tốt. aspect-ratio cũng thường được khuyến nghị
    Tuy nhiên, inline icon sẽ khiến không thể cache
    Tham khảo liên quan: bài viết tối ưu CLS của web.dev

• Liên kết thảo luận trước đó: thảo luận tháng 9/2024

• Xin dành lời khen lớn cho dự án này. Tôi dùng nó hằng ngày trong gần như mọi thứ mình tạo ra
  Tôi đã ngạc nhiên khi thấy có cả devicon bản màu lẫn bản đơn sắc cho dự án k3s

• Pictogrammers có một vài điểm mạnh riêng
  Nó cung cấp ngay mã Home Assistant cho các icon Material, nên chỉ cần một cú nhấp là có được đoạn mã cần thiết

• Tôi muốn giới thiệu thêm The Noun Project như một nguồn icon tuyệt vời khác
  Ở đó có lẫn icon miễn phí, CC-BY-3.0 và icon có giấy phép trả phí

  • Tuy nhiên, nếu không trả phí thì bạn phải tự tay xóa mã thừa trong SVG, khá phiền

• Nhiều câu trả lời khác nhau cho câu hỏi đâu là thư viện icon tốt nhất

  • Cá nhân tôi thấy đỉnh cao là bộ icon famfamfam Silk vào khoảng năm 2005
    Hơi tiếc là không có bản độ phân giải cao hay SVG, nhưng ngày nay có lẽ có thể bù đắp bằng AI
    Xem / Tải xuống
  • Tôi đề xuất Lucide
  • Tôi thích Phosphor Icons. Ngoài ra thì về cơ bản tôi dùng Material UI Icons
  • Tôi chủ yếu dùng FlatIcon cho phát triển game
  • SVGRepo rất thân thiện với người dùng vì có thể tự chỉnh độ dày nét, màu sắc, v.v.

• Trang của tôi universymbols.com có thể mở rộng nhiều bộ icon của Iconify bằng mô hình ảnh AI
  Nhờ vậy có thể tạo ra những bộ icon độc đáo hơn bên cạnh các bộ lớn sẵn có