Icon tốt phải được hiểu nhanh, giữ nét ở kích thước nhỏ và hoạt động như một hệ thống; một biểu tượng đẹp riêng lẻ chưa chắc dùng tốt trong sản phẩm số.
Bài viết phù hợp cho website, ứng dụng, phần mềm, dashboard, bộ nhận diện và sản phẩm cần icon riêng.
Hướng dẫn Apple năm 2026 tiếp tục nhấn mạnh icon phải dễ nhận biết, đơn giản và nhất quán giữa các appearance. Vì vậy app icon và icon giao diện cần được thử ở kích thước nhỏ, trên nền sáng/tối và trong hệ icon thật.
Điều cần chốt trước khi triển khai thiết kế icon
Dự án cần khóa ngữ nghĩa, metaphor, grid, trọng lượng nét, corner, fill/stroke, màu, trạng thái, nền sáng tối, accessibility, export SVG/PNG và naming cho dev. Phạm vi thiết kế icon nên được mô tả bằng đầu vào, đầu ra, số phiên bản, người duyệt và điều kiện phát sinh cụ thể.
Từ yêu cầu kinh doanh đến bản trình duyệt icon cho thiết kế icon
1. Ý nghĩa biểu tượng trong thiết kế icon
Ý nghĩa biểu tượng: Mỗi icon phải đại diện một hành động, đối tượng hoặc trạng thái mà người dùng hiểu trong ngữ cảnh.
Khi có nhiều phiên bản thiết kế icon, hãy giữ ý nghĩa biểu tượng như một quy tắc; phần được phép thay đổi và phần phải xin duyệt lại nên được ghi rõ trong bàn giao.
2. Grid và hình học trong thiết kế icon
Grid và hình học: Grid và tỷ lệ quang học giúp icon khác hình dạng vẫn có trọng lượng thị giác cân bằng.
Một bản thử khó hơn bình thường sẽ giúp kiểm tra grid và hình học của thiết kế icon: nội dung dài hơn, kích thước nhỏ hơn hoặc bối cảnh có nhiều nhiễu hơn.
3. Khả năng đọc ở kích thước nhỏ trong thiết kế icon
Khả năng đọc ở kích thước nhỏ: chi tiết phải sống được ở 16–24 pixel, không chỉ đẹp khi phóng lớn.
Phản hồi về khả năng đọc ở kích thước nhỏ cần nêu đúng lỗi sử dụng, nội dung hoặc production; câu ‘chưa đẹp’ không đủ để đội thực hiện biết phải sửa gì trong thiết kế icon.
4. Màu và tương phản trong thiết kế icon
Màu và tương phản: Màu và tương phản cần có bản đơn sắc, disabled, active và nền tối.
Trước khi duyệt, hãy đưa màu và tương phản vào đúng kích thước hoặc môi trường sử dụng của thiết kế icon; nếu dữ liệu thay đổi làm yêu cầu này mất tác dụng, cần sửa master thay vì vá bản xuất.
5. Hệ icon đồng bộ trong thiết kế icon
Hệ icon đồng bộ: Cả bộ phải thống nhất stroke, corner, perspective và mức độ trừu tượng.
Phần hệ icon đồng bộ nên có một tiêu chí đạt ngắn gọn cho thiết kế icon, để người khác có thể kiểm tra bằng dữ liệu thật mà không cần hỏi lại designer.
6. Nền tảng và trạng thái trong thiết kế icon
Nền tảng và trạng thái: Icon cho web, mobile, app launcher hoặc hệ điều hành có kích thước và safe area khác.
Khi có nhiều phiên bản thiết kế icon, hãy giữ nền tảng và trạng thái như một quy tắc; phần được phép thay đổi và phần phải xin duyệt lại nên được ghi rõ trong bàn giao.
7. Motion và phản hồi trong thiết kế icon
Motion và phản hồi: Motion có thể hỗ trợ phản hồi nhưng không được làm chậm hoặc gây nhiễu.
Một bản thử khó hơn bình thường sẽ giúp kiểm tra motion và phản hồi của thiết kế icon: nội dung dài hơn, kích thước nhỏ hơn hoặc bối cảnh có nhiều nhiễu hơn.
8. Xuất file và quản trị trong thiết kế icon
Xuất file và quản trị: Export cần viewBox, tên file, nhóm thư mục và token rõ để dev tích hợp.
Phản hồi về xuất file và quản trị cần nêu đúng lỗi sử dụng, nội dung hoặc production; câu ‘chưa đẹp’ không đủ để đội thực hiện biết phải sửa gì trong thiết kế icon.
Bộ tài liệu phải nhận sau thiết kế icon
| Đầu ra | Quyết định được lưu | Phép nghiệm thu |
|---|---|---|
| Icon concept sheet: ghi rõ nguyên tắc “Mỗi icon phải đại diện một hành” | Lấy tiêu chí “Mỗi icon phải đại diện một hành” làm quy tắc duyệt ý nghĩa biểu tượng: mỗi icon phải đại | đối chiếu tiêu chí “Mỗi icon phải đại diện một hành” trên đầu ra thực tế và ghi nhận kết quả |
| Grid system: ghi rõ nguyên tắc “Grid và tỷ lệ quang học giúp” | Lấy tiêu chí “Grid và tỷ lệ quang học giúp” làm quy tắc duyệt grid và hình học: grid và tỷ lệ | đối chiếu tiêu chí “Grid và tỷ lệ quang học giúp” trên đầu ra thực tế và ghi nhận kết quả |
| Master vector: ghi rõ nguyên tắc “Chi tiết phải sống được ở 16–24” | Lấy tiêu chí “Chi tiết phải sống được ở 16–24” làm quy tắc duyệt khả năng đọc ở kích thước nhỏ: chi tiết phải sống | đối chiếu tiêu chí “Chi tiết phải sống được ở 16–24” trên đầu ra thực tế và ghi nhận kết quả |
| Size test set: ghi rõ nguyên tắc “Màu và tương phản cần có bản” | Lấy tiêu chí “Màu và tương phản cần có bản” làm quy tắc duyệt màu và tương phản: màu và tương phản | đối chiếu tiêu chí “Màu và tương phản cần có bản” trên đầu ra thực tế và ghi nhận kết quả |
| Color variants: ghi rõ nguyên tắc “Cả bộ phải thống nhất stroke, corner,” | Lấy tiêu chí “Cả bộ phải thống nhất stroke, corner,” làm quy tắc duyệt hệ icon đồng bộ: cả bộ phải thống | đối chiếu tiêu chí “Cả bộ phải thống nhất stroke, corner,” trên đầu ra thực tế và ghi nhận kết quả |
| Icon family: ghi rõ nguyên tắc “Icon cho web, mobile, app launcher hoặc” | Lấy tiêu chí “Icon cho web, mobile, app launcher hoặc” làm quy tắc duyệt nền tảng và trạng thái: icon cho web, mobile, | đối chiếu tiêu chí “Icon cho web, mobile, app launcher hoặc” trên đầu ra thực tế và ghi nhận kết quả |
| Motion guideline: ghi rõ nguyên tắc “Motion có thể hỗ trợ phản hồi” | Lấy tiêu chí “Motion có thể hỗ trợ phản hồi” làm quy tắc duyệt motion và phản hồi: motion có thể hỗ | đối chiếu tiêu chí “Motion có thể hỗ trợ phản hồi” trên đầu ra thực tế và ghi nhận kết quả |
| SVG/PNG package: ghi rõ nguyên tắc “Export cần viewBox, tên file, nhóm thư” | Lấy tiêu chí “Export cần viewBox, tên file, nhóm thư” làm quy tắc duyệt xuất file và quản trị: export cần viewbox, tên | đối chiếu tiêu chí “Export cần viewBox, tên file, nhóm thư” trên đầu ra thực tế và ghi nhận kết quả |
Quy trình thực hiện thiết kế icon tại Designer Group
Bước 1: Xác định ngữ nghĩa và ngữ cảnh sử dụng
Ở bước “xác định ngữ nghĩa và ngữ cảnh sử dụng”, hồ sơ thiết kế icon tập trung vào hệ icon đồng bộ: cả bộ phải thống. tổ phụ trách icon dùng tình huống “Bản đầu chưa kiểm tra đầy đủ Cả bộ phải thống nhất stroke, corner,” để kiểm tra, ghi nhận nguy cơ “Bỏ sót điều kiện “Cả bộ phải thống nhất stroke, corner,” làm hệ icon đồng bộ: cả bộ phải thống sai khi dùng thật” và chỉ chuyển bước khi đã đối chiếu tiêu chí “Cả bộ phải thống nhất stroke, corner,” trên đầu ra thực tế và ghi nhận kết quả.
Bước 2: Kiểm tra “Mỗi icon phải đại diện một hành”
Ở bước “kiểm tra “Mỗi icon phải đại diện một hành””, hồ sơ thiết kế icon tập trung vào motion và phản hồi: motion có thể hỗ. tổ phụ trách icon dùng tình huống “Bản đầu chưa kiểm tra đầy đủ Motion có thể hỗ trợ phản hồi” để kiểm tra, ghi nhận nguy cơ “Bỏ sót điều kiện “Motion có thể hỗ trợ phản hồi” làm motion và phản hồi: motion có thể hỗ sai khi dùng thật” và chỉ chuyển bước khi đã đối chiếu tiêu chí “Motion có thể hỗ trợ phản hồi” trên đầu ra thực tế và ghi nhận kết quả.
Bước 3: Phác thảo metaphor cùng grid
Ở bước “phác thảo metaphor cùng grid”, hồ sơ thiết kế icon tập trung vào ý nghĩa biểu tượng: mỗi icon phải đại. tổ phụ trách icon dùng tình huống “Bản đầu chưa kiểm tra đầy đủ Mỗi icon phải đại diện một hành” để kiểm tra, ghi nhận nguy cơ “Bỏ sót điều kiện “Mỗi icon phải đại diện một hành” làm ý nghĩa biểu tượng: mỗi icon phải đại sai khi dùng thật” và chỉ chuyển bước khi đã đối chiếu tiêu chí “Mỗi icon phải đại diện một hành” trên đầu ra thực tế và ghi nhận kết quả.
Cách đọc báo giá thiết kế icon
| Yếu tố | Phạm vi liên quan | Điểm phải ghi rõ |
|---|---|---|
| Số icon | Khả năng đọc ở kích thước nhỏ: Chi tiết phải sống | đối chiếu tiêu chí “Chi tiết phải sống được ở 16–24” trên đầu ra thực tế và ghi nhận kết quả |
| thay đổi theo “Mỗi icon phải đại diện một hành” | Màu và tương phản: Màu và tương phản | đối chiếu tiêu chí “Màu và tương phản cần có bản” trên đầu ra thực tế và ghi nhận kết quả |
| Mức phát triển concept | Hệ icon đồng bộ: Cả bộ phải thống | đối chiếu tiêu chí “Cả bộ phải thống nhất stroke, corner,” trên đầu ra thực tế và ghi nhận kết quả |
| thay đổi theo “Grid và tỷ lệ quang học giúp” | Nền tảng và trạng thái: Icon cho web, mobile, | đối chiếu tiêu chí “Icon cho web, mobile, app launcher hoặc” trên đầu ra thực tế và ghi nhận kết quả |
| Độ phức tạp hệ thống | Motion và phản hồi: Motion có thể hỗ | đối chiếu tiêu chí “Motion có thể hỗ trợ phản hồi” trên đầu ra thực tế và ghi nhận kết quả |
| thay đổi theo “Chi tiết phải sống được ở 16–24” | Xuất file và quản trị: Export cần viewBox, tên | đối chiếu tiêu chí “Export cần viewBox, tên file, nhóm thư” trên đầu ra thực tế và ghi nhận kết quả |
| Số trạng thái | Ý nghĩa biểu tượng: Mỗi icon phải đại | đối chiếu tiêu chí “Mỗi icon phải đại diện một hành” trên đầu ra thực tế và ghi nhận kết quả |
| thay đổi theo “Màu và tương phản cần có bản” | Grid và hình học: Grid và tỷ lệ | đối chiếu tiêu chí “Grid và tỷ lệ quang học giúp” trên đầu ra thực tế và ghi nhận kết quả |
| Motion | Khả năng đọc ở kích thước nhỏ: Chi tiết phải sống | đối chiếu tiêu chí “Chi tiết phải sống được ở 16–24” trên đầu ra thực tế và ghi nhận kết quả |
| thay đổi theo “Cả bộ phải thống nhất stroke, corner,” | Màu và tương phản: Màu và tương phản | đối chiếu tiêu chí “Màu và tương phản cần có bản” trên đầu ra thực tế và ghi nhận kết quả |
| Chuẩn export và handoff | Hệ icon đồng bộ: Cả bộ phải thống | đối chiếu tiêu chí “Cả bộ phải thống nhất stroke, corner,” trên đầu ra thực tế và ghi nhận kết quả |
| thay đổi theo “Icon cho web, mobile, app launcher hoặc” | Nền tảng và trạng thái: Icon cho web, mobile, | đối chiếu tiêu chí “Icon cho web, mobile, app launcher hoặc” trên đầu ra thực tế và ghi nhận kết quả |
Báo giá hồ sơ thiết kế icon cần tách đầu vào, đầu ra, số phiên bản, vòng sửa và trách nhiệm kiểm tra. Khi một yếu tố chưa có dữ liệu, nên ghi là giả định hoặc hạng mục phát sinh thay vì gộp vào một mức giá khó đối chiếu.
Checklist gửi brief thiết kế icon
- Ý nghĩa biểu tượng: Mỗi icon phải đại diện một hành động, đối tượng hoặc trạng thái mà người dùng hiểu trong ngữ cảnh: đối chiếu với phần ý nghĩa biểu tượng: mỗi icon phải đại; người cung cấp dữ liệu cần xác nhận trước bài test “Bản đầu chưa kiểm tra đầy đủ Mỗi icon phải đại diện một hành”.
- Grid và hình học: Grid và tỷ lệ quang học giúp icon khác hình dạng vẫn có trọng lượng thị giác cân bằng: đối chiếu với phần grid và hình học: grid và tỷ lệ; người cung cấp dữ liệu cần xác nhận trước bài test “Bản đầu chưa kiểm tra đầy đủ Grid và tỷ lệ quang học giúp”.
- Khả năng đọc ở kích thước nhỏ: Chi tiết phải sống được ở 16–24 pixel, không chỉ đẹp khi phóng lớn: đối chiếu với phần khả năng đọc ở kích thước nhỏ: chi tiết phải sống; người cung cấp dữ liệu cần xác nhận trước bài test “Bản đầu chưa kiểm tra đầy đủ Chi tiết phải sống được ở 16–24”.
- Màu và tương phản: Màu và tương phản cần có bản đơn sắc, disabled, active và nền tối: đối chiếu với phần màu và tương phản: màu và tương phản; người cung cấp dữ liệu cần xác nhận trước bài test “Bản đầu chưa kiểm tra đầy đủ Màu và tương phản cần có bản”.
- Hệ icon đồng bộ: Cả bộ phải thống nhất stroke, corner, perspective và mức độ trừu tượng: đối chiếu với phần hệ icon đồng bộ: cả bộ phải thống; người cung cấp dữ liệu cần xác nhận trước bài test “Bản đầu chưa kiểm tra đầy đủ Cả bộ phải thống nhất stroke, corner,”.
- Nền tảng và trạng thái: Icon cho web, mobile, app launcher hoặc hệ điều hành có kích thước và safe area khác: đối chiếu với phần nền tảng và trạng thái: icon cho web, mobile,; người cung cấp dữ liệu cần xác nhận trước bài test “Bản đầu chưa kiểm tra đầy đủ Icon cho web, mobile, app launcher hoặc”.
- Motion và phản hồi: Motion có thể hỗ trợ phản hồi nhưng không được làm chậm hoặc gây nhiễu: đối chiếu với phần motion và phản hồi: motion có thể hỗ; người cung cấp dữ liệu cần xác nhận trước bài test “Bản đầu chưa kiểm tra đầy đủ Motion có thể hỗ trợ phản hồi”.
- Xuất file và quản trị: Export cần viewBox, tên file, nhóm thư mục và token rõ để dev tích hợp: đối chiếu với phần xuất file và quản trị: export cần viewbox, tên; người cung cấp dữ liệu cần xác nhận trước bài test “Bản đầu chưa kiểm tra đầy đủ Export cần viewBox, tên file, nhóm thư”.
Các lỗi cần loại bỏ trước khi duyệt thiết kế icon
Bỏ qua điều kiện “Mỗi icon phải đại diện một hành”
Lỗi “bỏ qua điều kiện “Mỗi icon phải đại diện một hành”” làm suy yếu grid và hình học: grid và tỷ lệ trong hồ sơ thiết kế icon. Dấu hiệu thực tế là “Bỏ sót điều kiện “Grid và tỷ lệ quang học giúp” làm grid và hình học: grid và tỷ lệ sai khi dùng thật”. Cách sửa là dùng điều kiện “Grid và tỷ lệ quang học giúp” làm quy tắc duyệt grid và hình học: grid và tỷ lệ, rồi kiểm tra lại bằng “đối chiếu tiêu chí “Grid và tỷ lệ quang học giúp” trên đầu ra thực tế và ghi nhận kết quả”.
Bỏ qua điều kiện “Grid và tỷ lệ quang học giúp”
Lỗi “bỏ qua điều kiện “Grid và tỷ lệ quang học giúp”” làm suy yếu khả năng đọc ở kích thước nhỏ: chi tiết phải sống trong hồ sơ thiết kế icon. Dấu hiệu thực tế là “Bỏ sót điều kiện “Chi tiết phải sống được ở 16–24” làm khả năng đọc ở kích thước nhỏ: chi tiết phải sống sai khi dùng thật”. Cách sửa là dùng điều kiện “Chi tiết phải sống được ở 16–24” làm quy tắc duyệt khả năng đọc ở kích thước nhỏ: chi tiết phải sống, rồi kiểm tra lại bằng “đối chiếu tiêu chí “Chi tiết phải sống được ở 16–24” trên đầu ra thực tế và ghi nhận kết quả”.
Bỏ qua điều kiện “Chi tiết phải sống được ở 16–24”
Lỗi “bỏ qua điều kiện “Chi tiết phải sống được ở 16–24”” làm suy yếu màu và tương phản: màu và tương phản trong hồ sơ thiết kế icon. Dấu hiệu thực tế là “Bỏ sót điều kiện “Màu và tương phản cần có bản” làm màu và tương phản: màu và tương phản sai khi dùng thật”. Cách sửa là dùng điều kiện “Màu và tương phản cần có bản” làm quy tắc duyệt màu và tương phản: màu và tương phản, rồi kiểm tra lại bằng “đối chiếu tiêu chí “Màu và tương phản cần có bản” trên đầu ra thực tế và ghi nhận kết quả”.
Trong một lần cập nhật thiết kế icon, phần ý nghĩa biểu tượng nên được kiểm tra lại từ dữ kiện ‘Mỗi icon phải đại diện một hành động, đối tượng hoặc trạng thái mà người dùng hiểu trong ngữ cảnh’. Không nên giả định phiên bản mới sẽ tự giữ đúng logic của bản cũ. Hãy dùng nội dung thật, so với đầu ra cuối và ghi rõ trường hợp nào cần quay lại người phê duyệt. Cách làm này giúp thiết kế icon tiếp tục được mở rộng mà không biến mỗi lần cập nhật thành một dự án thiết kế lại từ đầu.
Trong một lần cập nhật thiết kế icon, phần grid và hình học nên được kiểm tra lại từ dữ kiện ‘Grid và tỷ lệ quang học giúp icon khác hình dạng vẫn có trọng lượng thị giác cân bằng’. Không nên giả định phiên bản mới sẽ tự giữ đúng logic của bản cũ. Hãy dùng nội dung thật, so với đầu ra cuối và ghi rõ trường hợp nào cần quay lại người phê duyệt. Cách làm này giúp thiết kế icon tiếp tục được mở rộng mà không biến mỗi lần cập nhật thành một dự án thiết kế lại từ đầu.
Trong một lần cập nhật thiết kế icon, phần khả năng đọc ở kích thước nhỏ nên được kiểm tra lại từ dữ kiện ‘chi tiết phải sống được ở 16–24 pixel, không chỉ đẹp khi phóng lớn’. Không nên giả định phiên bản mới sẽ tự giữ đúng logic của bản cũ. Hãy dùng nội dung thật, so với đầu ra cuối và ghi rõ trường hợp nào cần quay lại người phê duyệt. Cách làm này giúp thiết kế icon tiếp tục được mở rộng mà không biến mỗi lần cập nhật thành một dự án thiết kế lại từ đầu.
Trong một lần cập nhật thiết kế icon, phần màu và tương phản nên được kiểm tra lại từ dữ kiện ‘Màu và tương phản cần có bản đơn sắc, disabled, active và nền tối’. Không nên giả định phiên bản mới sẽ tự giữ đúng logic của bản cũ. Hãy dùng nội dung thật, so với đầu ra cuối và ghi rõ trường hợp nào cần quay lại người phê duyệt. Cách làm này giúp thiết kế icon tiếp tục được mở rộng mà không biến mỗi lần cập nhật thành một dự án thiết kế lại từ đầu.
Câu hỏi thường gặp về thiết kế icon
Icon nên dùng stroke hay fill?
Tùy phong cách và ngữ cảnh. Quan trọng là tính nhất quán, khả năng đọc nhỏ và trạng thái active/disabled rõ.
Có thể dùng icon miễn phí rồi chỉnh lại không?
Cần kiểm tra license và mức độ đồng bộ. Chỉnh nhiều nguồn khác nhau thường tạo hệ nét, tỷ lệ và ý nghĩa không nhất quán.
Thiết kế icon thường triển khai trong bao lâu?
Tiến độ của thiết kế icon phụ thuộc trực tiếp vào mỗi icon phải đại diện một hành động, đối tượng hoặc trạng thái mà người dùng hiểu trong ngữ cảnh, màu và tương phản cần có bản đơn sắc, disabled, active và nền tối và mức kiểm thử export cần viewbox, tên file, nhóm thư mục và token rõ để dev tích hợp. Nên chia dự án thành brief, concept, mẫu đại diện, triển khai, nghiệm thu và bàn giao.
Bộ bàn giao của thiết kế icon gồm những gì?
Bộ bàn giao phải phục vụ cả bộ phải thống nhất stroke, corner, perspective và mức độ trừu tượng và khả năng vận hành sau dự án. Tối thiểu cần master, file xuất, source, quy tắc sử dụng, dữ liệu liên quan và checklist kỹ thuật; sản xuất hoặc phát triển được tách riêng.
Sau bàn giao thiết kế icon có thể tự chỉnh sửa không?
Có nếu file được xây theo nguyên tắc icon cho web, mobile, app launcher hoặc hệ điều hành có kích thước và safe area khác và có template, vùng khóa, version cùng người quản trị. Các thay đổi ảnh hưởng grid và tỷ lệ quang học giúp icon khác hình dạng vẫn có trọng lượng thị giác cân bằng nên được kiểm tra lại trước khi phát hành.
Thiết kế icon có cần làm mẫu hoặc test thật không?
Có. Phép thử nên tập trung vào chi tiết phải sống được ở 16–24 pixel, không chỉ đẹp khi phóng lớn, motion có thể hỗ trợ phản hồi nhưng không được làm chậm hoặc gây nhiễu và export cần viewbox, tên file, nhóm thư mục và token rõ để dev tích hợp. Một mẫu đại diện giúp phát hiện lỗi trước khi nhân rộng sang toàn bộ phiên bản hoặc sản xuất số lượng.
Kết luận về thiết kế icon
Dự án cần khóa ngữ nghĩa, metaphor, grid, trọng lượng nét, corner, fill/stroke, màu, trạng thái, nền sáng tối, accessibility, export SVG/PNG và naming cho dev. Dự án thiết kế icon phải vượt qua mẫu khó và bàn giao đủ master để tiếp tục vận hành.
Trao đổi dự án thiết kế icon
Designer Group – Nhà phát triển hình ảnh thương hiệu tiếp nhận brief thiết kế icon, rà tài nguyên hiện có, xác định bản thử icon và đề xuất phạm vi bàn giao. Hotline 0845 00 99 77 · Email tuvan@designer.com.vn.