Thiết kế icon vector là kỹ năng quan trọng trong UI/UX, thiết kế website, ứng dụng, infographic và nhiều sản phẩm số khác. Illustrator là công cụ lý tưởng nhờ độ chính xác cao, linh hoạt và khả năng xuất ra mọi định dạng. Bài viết sau sẽ giúp bạn nắm được cách thiết kế icon từ đơn giản đến chuyên nghiệp với các công cụ cơ bản nhất.
1️⃣ Đặt kích thước icon chuẩn ngay từ đầu
Trước khi vẽ, hãy tạo Artboard có kích thước cố định, ví dụ:
- 24×24 px (phổ biến cho web)
- 48×48 px hoặc 64×64 px (cho ứng dụng, desktop)
💡 Mẹo: Bật Pixel Preview (View > Pixel Preview) và Snap to Pixel để icon không bị mờ, lệch khi xuất ảnh PNG/SVG.
2️⃣ Dùng Shape Tool để vẽ hình nhanh và chính xác
Icon tốt thường bắt đầu từ các hình cơ bản:
- Rectangle (M): hình chữ nhật, nút
- Ellipse (L): hình tròn, nút radio
- Polygon/Star: biểu tượng cảnh báo, ngôi sao, mũi tên
- Rounded Rectangle: khung bo tròn, biểu tượng hiện đại
Sử dụng Shift để vẽ hình cân đối, Alt để vẽ từ tâm.
3️⃣ Sử dụng Pathfinder để tạo hình phức tạp
Kết hợp các hình khối bằng công cụ Pathfinder (Window > Pathfinder):
- Unite: gộp thành một khối
- Minus Front: trừ hình phía trên
- Intersect: chỉ giữ phần giao nhau
- Exclude: tạo hình rỗng
💡 Dùng để tạo biểu tượng trái tim, nút play, giỏ hàng, thư mục…
4️⃣ Căn chỉnh đối tượng chính xác với Align
Dùng Align panel (Window > Align) để:
- Canh giữa các phần tử
- Phân bố đều (Distribute)
- Canh theo Artboard
Icon chuyên nghiệp cần tính đối xứng và tỷ lệ chính xác – đây là công cụ không thể thiếu.
5️⃣ Tối giản nhưng rõ ràng
Nguyên tắc quan trọng:
- Dùng ít chi tiết nhất có thể
- Dễ nhận biết ở kích thước nhỏ
- Tránh stroke quá mảnh (nên từ 1.5–2 px trở lên)
💡 Tốt nhất: test icon ở kích thước thực tế trước khi xuất file.
6️⃣ Sử dụng màu linh hoạt hoặc giữ đen trắng
- Icon hệ thống: dùng 1 màu – dễ đổi màu bằng CSS
- Icon trang trí/infographic: có thể dùng màu, gradient nhẹ
- Đảm bảo đủ tương phản nếu dùng trên nền màu
💡 Illustrator cho phép tô màu nhanh bằng Swatches và Appearance Panel.
7️⃣ Xuất file đúng định dạng
- SVG: dùng cho web, UI/UX – nhỏ gọn, hỗ trợ tương tác
- PNG: dùng cho ứng dụng, ảnh tĩnh
- AI hoặc PDF: lưu trữ file gốc, in ấn vector
Vào File > Export > Export As để xuất PNG, SVG (chọn “Use Artboards” để cắt đúng kích thước).
