Với nhu cầu thiết kế nhanh giao diện của một dự án, icon là không thể thiếu trong quá trình phát triển, hãy cùng mình xem những thư viện icon phổ biến và có thể áp dụng cho dự án sắp tới của bản thân nhé.
1. Feather
Feather là một bộ sưu tập các biểu tượng mã nguồn mở đẹp mắt. Mỗi biểu tượng được thiết kế trên lưới 24×24 với trọng tâm là sự đơn giản, nhất quán và linh hoạt.
Feather cung cấp khoảng hơn ~280 icons, rất nhẹ nhàng, đơn giản và nhất quán. Hiện tại bộ icons này nhận được khoảng 20.3k stars trên Github.
Trang chủ: https://feathericons.com/
Tài liệu: https://github.com/feathericons/feather
Để cài đặt bộ icon bạn này gõ:
npminstall feather-icons --save
2. Bootstrap Icon
Bootstrap không còn quá xa lạ với giới lập trình web nữa, các icons Bootstrap được đóng gói và xuất bản riêng thành gói npm. Chúng chỉ bao gồm các SVG đã được xử lý trong gói này, việc triển khai tùy thuộc vào bạn và nhóm của bạn.
Bootstrap có thư viện icon mã nguồn mở miễn phí, chất lượng cao với hơn ~1.300 icons. Với 4.3k stars trên Github đây là thư viện không thể bỏ qua nếu bạn kết hợp với thư viện giao diện Bootstrap.
Trang chủ: https://icons.getbootstrap.com/
Tài liệu: https://github.com/twbs/icons
Để cài đặt bộ icon bạn này gõ:
npminstall bootstrap-icons --save
3. Remix Icon
Remix Icon là một tập hợp các biểu tượng hệ thống theo phong cách trung lập mã nguồn mở dành cho các nhà thiết kế và nhà phát triển. Không giống như thư viện biểu tượng chắp vá, các biểu tượng đều được chế tạo công phu để chúng được sinh ra với khả năng dễ đọc, tính nhất quán và pixel hoàn hảo. Mỗi biểu tượng được thiết kế theo kiểu “phác thảo” và “làm đầy” dựa trên lưới 24×24. Tất nhiên, tất cả các biểu tượng đều miễn phí cho cả mục đích sử dụng cá nhân và thương mại.
Remix Icon có icon có nhiều kiểu dáng khác nhau và số lượng khủng hơn các loại còn lại với khoảng hơn ~2.200 icons. Số lượng stars trên Github chỉ khoảng 3.5k.
Trang chủ: https://remixicon.com/
Tài liệu: https://github.com/Remix-Design/RemixIcon
Để cài đặt bộ icon bạn này gõ:
npminstall remixicon --save
4. Boxicons
Boxicons là một bộ biểu tượng mã nguồn mở được thiết kế cẩn thận với hơn 1000 biểu tượng. Nó được chế tạo để làm phong phú trải nghiệm trang web / ứng dụng của bạn.
Hiện tại Boxicons có khoảng ~1.500 icons và khoảng 1.2k stars trên Github, có lẽ đây là bộ icon mới nên ít người biết tới 
.
Trang chủ: https://boxicons.com/
Tài liệu: https://github.com/atisawd/boxicons
Để cài đặt bộ icon bạn này gõ:
npminstall boxicons --save
5. Teenyicons
Bộ icon cuối mà mình muốn giới thiệu là Teenyicons rất độc và lạ. Nó được thiết kế trên lưới 15×15, Teenyicons dễ dàng phù hợp với không gian rất nhỏ 🤏 và duy trì vẻ ngoài sắc nét ✨.
Số lượng của icon này thì không được đề cập, với khoảng 1.6k stars trên Github đây cũng là bộ icon bạn nên thử qua .
Trang chủ: https://teenyicons.com/
Tài liệu: https://github.com/teenyicons/teenyicons
Để cài đặt bộ icon bạn này gõ:
npminstall teenyicons --save
6. Icons Khác
Ngoài những icon mình giới thiệu ở trên ra còn rất nhiều những bộ icon khác mà bạn nên thử trong dự án sắp tới. Các bạn có thể đóng góp thêm các bộ icon khác bằng cách comment bên dưới nhé. Đừng quên cho mình 1 vote nếu các bạn cảm thấy bài viết giúp ích cho bản thân .
| Icons | Cài Đặt | Sử Dụng | Số Stars |
|---|---|---|---|
| Fontawesome | npm install @fortawesome/fontawesome-free --save |
Github | 65.8k stars |
| Radix Icon | npm install @modulz/radix-icons --save |
Github | 640 stars |
| CoreUI Icon | npm install @coreui/[email protected] --save |
Website | |
| Octicons | npm install @primer/octicons --save |
Website | |
| Ikonate | npm install ikonate --save |
Github | 3.3k stars |
| CSS.gg icon | npm install css.gg --save |
Github | 7.6k stars |
| AntDesign | npm install @ant-design/icons --save |
Github | 73k stars |
| Ionicons | npm install ionicons --save |
Github | 15.5k stars |
Nguồn: viblo.asia