Icon trong Figma: cách vẽ, quản lý bằng component và xuất SVG

Cách làm icon trong Figma: dựng icon grid 24 x 24, vẽ icon bằng Pen và Boolean, quy tắc nét cho bộ icon đồng bộ, quản lý bằng component, đổi icon nhanh và xuất SVG; kèm cách lấy icon SVG miễn phí để kéo vào Figma.

Muốn có icon trong Figma, bạn có hai đường: tự vẽ icon trên một khung 24 x 24 px bằng Pen, Shape và Boolean, hoặc lấy icon SVG có sẵn rồi kéo thả vào Figma. Dù chọn đường nào, hãy biến mỗi icon thành component và đặt tên theo kiểu icon/tên-icon để quản lý, đổi icon nhanh và xuất SVG gọn. Bài này đi từng bước theo trang trợ giúp chính thức của Figma (đọc ngày 20/10/2026), kèm bảng phím tắt và cách lấy icon miễn phí bằng công cụ Tìm icon của ColorME.

Phím tắt lấy từ các trang trợ giúp Figma được dẫn link trong bài. Các hình minh hoạ trong bài là sơ đồ ColorME tự dựng và ảnh chụp màn hình thật của công cụ Tìm icon, không phải ảnh chụp giao diện Figma.

Icon trong Figma: vẽ mới hay dùng bộ có sẵn?

Mình hay chia theo việc cần làm:

• Dùng bộ có sẵn khi làm wireframe, giao diện app, slide hay bài đăng cần icon quen thuộc như nhà, giỏ hàng, người dùng. Nhanh, đồng bộ, ít lỗi.
• Tự vẽ khi thương hiệu cần icon riêng (ví dụ icon món ăn cho app quán, icon dịch vụ cho studio), hoặc khi bộ có sẵn thiếu đúng hình bạn cần.
• Kết hợp: lấy bộ có sẵn làm nền, chỉ vẽ thêm vài icon thiếu nhưng theo đúng quy tắc nét của bộ đó để không bị lệch phong cách.

Nếu bạn mới làm quen Figma, đọc trước bài Figma là gì và lộ trình học cơ bản. Còn khái niệm "hệ thống icon" nói chung có ở mục Iconography trong thư viện thuật ngữ.

Cách lấy icon có sẵn và đưa vào Figma

Cách nhanh nhất là tải icon dạng SVG rồi kéo thả vào Figma. Mình thử công cụ Tìm icon của ColorME khi chưa đăng nhập: gõ "máy ảnh" vào ô tìm kiếm, công cụ báo "21 icon phù hợp" (camera, camera-off, aperture, film...).

Tìm "máy ảnh" trong công cụ Tìm icon của ColorME: kết quả hiện ngay, tải SVG để kéo vào Figma. Ảnh chụp màn hình thật, 20/10/2026.

Bấm vào một icon để mở bảng chỉnh: đổi cỡ, độ dày nét và màu, rồi tải SVG, PNG hoặc sao chép mã SVG. Mình chọn icon camera, đổi nét từ 2 xuống 1,5 và chọn màu xanh lá; mã SVG trong khung xem trước đổi theo ngay (stroke-width="1.5", màu #30A46C).

Bảng chỉnh icon: đổi cỡ, độ dày nét và màu trước khi tải SVG hoặc PNG. Ảnh chụp màn hình thật, 20/10/2026.

Vài điều trang công cụ ghi rõ (trích nguyên văn mục Câu hỏi thường gặp, đọc ngày 20/10/2026):

• "Công cụ Tìm icon có hơn 1.800 icon Lucide miễn phí, tìm theo từ khoá và tải ngay SVG hoặc PNG."
• "Được. Bộ icon Lucide dùng giấy phép ISC, miễn phí cho cả dự án cá nhân và thương mại." Bạn đọc nguyên văn giấy phép ở lucide.dev/license.
• Về Figma: "Tải SVG rồi kéo vào Figma, icon trở thành vector có thể đổi màu và chỉnh nét như hình vẽ thông thường."
• Về đăng nhập: "Không cần. Nếu đăng nhập, icon bạn tải được lưu vào mục Lịch sử riêng để dùng lại sau."
• Về dữ liệu: "Có. Khi bạn sao chép hoặc tải một icon, ColorME ghi nhận tên icon, kiểu bạn chọn và từ khoá bạn đang tìm, để biết nên bổ sung những icon nào."

Mẹo nhỏ: nên chọn SVG thay vì PNG khi đưa vào Figma, vì SVG vào Figma là vector, phóng to không vỡ và đổi màu được. PNG chỉ hợp khi bạn chèn thẳng vào slide hay ảnh.

Dùng icon font trong Figma

Một cách khác là icon font. Theo trang Use icon fonts của Figma, icon font phải được cài trên máy ở định dạng OTF hoặc TTF; muốn dùng trên trình duyệt thì cần cài thêm Figma font helper, còn bản desktop đọc được font máy. Figma hỗ trợ Font Awesome 5 và 6 (bản Free và bản Pro cần đăng ký với Font Awesome). Icon font là chữ, nên khi bàn giao cho lập trình viên, đa số nhóm vẫn chuộng icon SVG hơn.

Chuẩn bị khung vẽ icon 24 x 24 px (icon grid)

Theo bài thực hành Create a reusable icon grid của Figma, icon grid là một Frame chuẩn bị sẵn giúp mọi icon trong bộ có cùng khuôn. Các bước chính:

1. Tạo Frame: nhấn F, giữ Shift kéo một khung 24 x 24 (hoặc gõ W 24, H 24 ở thanh bên phải), đặt tên "Icon grid".
2. Bật lưới 1 px: chọn Frame, bấm dấu cộng ở mục lưới của thanh bên phải (bài hướng dẫn vẫn gọi là Layout grid; giao diện mới gọi là Layout guide), đổi cỡ lưới thành 1.
3. Bật bắt dính: vào Main menu, Preferences, tích các tuỳ chọn snap. Bài hướng dẫn còn đổi Nudge amount, ô Small nudge thành 0.5 để nhích chính xác hơn bằng phím mũi tên.
4. Vẽ đường dóng: dùng Pen (P) kẻ hai đường chéo, một đường dọc giữa và hai đường cách nó 3 px, rồi xoay bản sao thành đường ngang.
5. Thêm keyline shapes: một hình tròn 20 x 20, hình chữ nhật đứng 16 x 20 và nằm ngang 20 x 16 (bo góc 1), hình vuông 18 x 18, tất cả căn giữa khung.
6. Gộp và biến thành component: chọn hết bên trong Frame, bấm Union selection, hạ độ mờ màu đỏ còn 10%, rồi bấm Create component.

Icon grid 24 x 24 px theo bài mẫu của Figma: vùng an toàn 20 x 20, lề 2 px, đường dóng và bốn hình khoá. Sơ đồ ColorME vẽ lại.

Kết quả, theo Figma, là một khung có vùng an toàn 20 x 20 px và lề 2 px mỗi bên. Khi vẽ, bạn tạo một instance của khung này, detach rồi vẽ bên trong. Nếu chưa rõ instance là gì, xem mục main component và instance. Lưới cột cho cả màn hình thì có bài riêng: Layout grid trong Figma.

Trước khi vẽ, bài Design a search icon dặn bật Pixel grid và Snap to pixel grid trong menu Zoom/view options ở góc phải thanh công cụ, để điểm neo luôn rơi đúng ô pixel.

Vẽ icon kính lúp từng bước

Đây là bài tập mẫu của chính Figma, mình tóm lại và vẽ lại thành sơ đồ bên dưới:

1. Thấu kính: nhấn O, giữ Shift kéo hình tròn 16 x 16, đặt sát góc trên bên phải của icon grid.
2. Đổi sang nét: bấm dấu cộng ở mục Stroke, đặt độ dày 2; bấm dấu trừ ở mục Fill để bỏ màu nền.
3. Cán kính: phóng to góc dưới bên trái, chọn Pen (P), bấm điểm đầu ở chỗ đường chéo cắt nét hình tròn, đi xuống 4 px bấm điểm thứ hai, nhấn Enter để thoát. Đặt nét 2 và đầu nét Round.
4. Gộp: giữ Shift chọn cả thấu kính và cán, bấm Union selection. Căn giữa Frame bằng các nút Align, đổi tên Frame thành "search-icon".

Vẽ icon kính lúp trong Figma qua 4 bước: hình tròn 16 x 16, nét 2, cán kính bằng Pen, Union và căn giữa. Sơ đồ ColorME vẽ lại theo bài mẫu của Figma.

Vì sao gộp bằng Boolean chứ không Group? Figma giải thích: khi Group, khung bao (bounding box) không tính phần nét của cán kính, nên căn giữa xong lề bốn phía không đều. Union thì khung bao ôm trọn mọi phần, căn giữa mới chuẩn.

Group không tính phần nét vào khung bao nên căn giữa bị lệch; Union ôm trọn nét. Minh hoạ của ColorME.

Bốn phép Boolean dùng nhiều nhất khi vẽ icon

Theo trang Boolean operations, Boolean gộp nhiều layer thành một nhóm boolean và là thao tác không phá huỷ: bạn vẫn chỉnh kích thước, vị trí, góc xoay, bo góc của từng layer bên trong. Áp dụng được cho shape, vector path và text, không áp dụng cho Section hay Frame. Cần chọn ít nhất hai layer.

Union, Subtract, Intersect, Exclude và phím tắt trên Mac, Windows. Sơ đồ ColorME vẽ theo trang trợ giúp của Figma.

Figma có ghi chú quan trọng: Boolean giờ tính hình dạng theo cả nét (stroke) lẫn nền (fill) của layer. Muốn tách nhóm boolean về các layer rời, bấm chuột phải chọn Ungroup.

Outline stroke và Flatten: dùng khi nào?

Hai lệnh này hay bị dùng nhầm vì đều "gộp" icon lại, nhưng cả hai đều là thao tác phá huỷ:

Nguồn: Convert strokes to vector paths và Flatten layers. Nếu lỡ tay, Figma gợi ý dùng Command Z / Ctrl Z hoặc khôi phục từ lịch sử phiên bản. Cách làm thường gặp của mình: giữ bản icon còn nét (để sau này đổi độ dày cả bộ), và chỉ Outline stroke ở bản sao dành cho bàn giao khi lập trình viên yêu cầu.

Quy tắc để cả bộ icon trông đồng bộ

Icon lẻ đẹp chưa đủ, cả bộ phải "cùng một giọng". Bộ quy tắc thiết kế của Lucide (trang Lucide design language, đọc ngày 20/10/2026) là tài liệu mẫu rất dễ áp dụng:

• Khung 24 x 24 px, chừa ít nhất 1 px vùng an toàn quanh icon.
• Nét 2 px, căn giữa đường path (không dùng nét Inside hay Outside), đầu nét và góc nối đều Round.
• Bo góc: 2 px cho hình rộng hoặc cao từ 8 px trở lên, 1 px cho hình nhỏ hơn 8 px.
• Các phần tách rời cách nhau ít nhất 2 px; khoảng trống bên trong hình cũng nên từ 2 px.
• Đặt toạ độ, tâm cung tròn và đường chéo trúng lưới pixel khi có thể, để icon nét trên màn hình mật độ thấp.

Bốn quy tắc giúp bộ icon đồng bộ: nét 2 px, đầu nét Round, chừa 1 px vùng an toàn, các phần cách nhau từ 2 px. Ví dụ ColorME tự vẽ theo quy tắc của Lucide.

Lucide cũng có hướng dẫn riêng cho Figma: mỗi icon một Frame 24 x 24, đặt tên Frame theo tên icon để khi xuất ra file "tên-frame.svg", và với vector đặt Corner radius 2px, Stroke width 2px, Stroke alignment center. Muốn kiểm tra khoảng cách 2 px trong Figma, giữ Option (Mac) hoặc Alt (Windows) khi rê chuột.

Bạn không bắt buộc theo đúng Lucide; điều quan trọng là chọn một bộ số (cỡ khung, độ dày nét, bo góc) rồi giữ nguyên cho mọi icon. Nếu đã dùng icon Lucide từ công cụ Tìm icon, vẽ thêm icon theo đúng bộ số trên thì icon tự vẽ sẽ đứng cạnh icon có sẵn rất ăn ý.

Cách quản lý icon trong Figma bằng component

Biến icon thành component, đặt tên có dấu gạch chéo

Theo trang Create components, chọn layer rồi bấm Create component ở thanh bên phải, bấm chuột phải chọn Create component, hoặc nhấn Option Command K (Mac) / Ctrl Alt K (Windows). Lệnh Create multiple components biến cùng lúc nhiều layer thành từng component riêng, tiện khi vừa vẽ xong 20 icon.

Đặt tên theo dạng icon/search, icon/home, icon/camera. Figma dùng dấu gạch chéo để xếp tầng trong tab Assets và Instance menu, và coi các component cùng tiền tố là "liên quan" nên đổi qua lại rất nhanh. Khi xuất file, dấu gạch chéo trong tên còn tạo thư mục lồng nhau.

Mỗi icon một component tên icon/...; khi xuất SVG, dấu gạch chéo tạo thư mục; cùng icon nhiều cỡ thì gom thành variants. Icon: Lucide, giấy phép ISC.

Đổi icon nhanh: Instance menu, Quick insert, instance swap

• Instance menu: chọn instance, bấm tên component ở thanh bên phải để tìm và chọn icon khác. Trang Swap components and instances ghi tính năng này thuộc các gói Education, Professional và Organization.
• Quick insert: chọn layer, nhấn Shift I, tìm icon, giữ Option (Mac) hoặc Ctrl (Windows) để thay.
• Chuột phải, Swap Instance: chỉ đổi giữa các component cùng nhóm, cùng Frame.
• Instance swap property: trong component nút bấm có icon, bạn tạo thuộc tính cho phép đổi icon và đặt "preferred instances". Figma lấy đúng ví dụ này: thư viện có hơn 100 icon nhưng nút chỉ nên dùng 8 icon, thì thêm 8 icon đó làm danh sách gợi ý (trang Explore component properties).

Có nên gom icon thành variants?

Figma khuyên rõ trong trang Create and use variants: không nên dùng variants để gom các icon khác nhau; nếu cùng một icon có nhiều cỡ thì có thể gom các cỡ đó thành variants. Ví dụ: icon/search cỡ 16, 20, 24 là một component set, còn search và home là hai component riêng.

Dùng bộ icon cho nhiều file: Publish library

Muốn cả nhóm dùng chung bộ icon ở nhiều file, bạn publish file đó thành library. Theo trang Publish a library, tính năng này dành cho các gói Professional, Education, Organization, Government và Enterprise Xem thêm mục Publish library trong thư viện thuật ngữ.

Cách xuất icon SVG từ Figma

1. Chọn Frame icon (chọn cả Frame để giữ khung 24 x 24 và lề).
2. Ở mục Export cuối thanh bên phải, bấm dấu cộng, chọn SVG.
3. Bấm Export. Trên trình duyệt, file về thư mục tải xuống; trên app desktop, Figma hỏi tên và nơi lưu.

Muốn lấy mã nhanh: chuột phải, Copy/Paste as, Copy as SVG. Muốn xuất cả bộ: gắn cấu hình Export cho từng icon rồi nhấn Shift Command E (Mac) / Shift Ctrl E (Windows), theo trang Export static designs.

Ba điều trang Export formats and settings lưu ý khi xuất SVG: nét được xuất thành fill; chữ mặc định xuất thành glyph (bỏ tích Outline text nếu muốn giữ chữ sửa được); background blur phải áp trực tiếp lên layer. Tuỳ chọn có sẵn gồm Ignore overlapping layers, Include "id" attribute, Outline text và Simplify stroke.

Khi xuất SVG, Figma chuyển nét thành fill; bốn tuỳ chọn xuất SVG và ý nghĩa. Minh hoạ của ColorME.

File SVG xuất từ phần mềm thiết kế thường còn thừa số thập phân dài và thông tin không cần. Bạn có thể làm gọn bằng công cụ Tối ưu SVG; trang công cụ ghi: "Khi xử lý thì không: file được tối ưu ngay trên trình duyệt bằng SVGO, không gửi lên máy chủ. Chỉ khi bạn đã đăng nhập, file kết quả bạn tải về mới được lưu vào mục Lịch sử riêng của bạn và tự xoá sau 180 ngày." Hiểu thêm về định dạng này ở bài SVG là gì.

Lỗi thường gặp khi làm icon trong Figma

• Icon lệch tâm sau khi Group: dùng Union như ví dụ kính lúp ở trên để khung bao ôm trọn nét.
• Phóng to icon, nét không to theo (hoặc to quá): dùng Scale tool (phím K) khi muốn nét và hiệu ứng co giãn cùng icon. Trang Scale layers ghi: blur và stroke sẽ co giãn theo. Kéo góc bình thường thì nét giữ nguyên độ dày.
• Icon bị mờ ở cỡ nhỏ: điểm neo rơi vào nửa pixel. Bật Pixel grid, Snap to pixel grid và đặt toạ độ số nguyên.
• Đã Outline stroke, giờ muốn đổi độ dày nét: không làm được trên bản đó; quay lại bản còn nét hoặc lịch sử phiên bản.
• Bộ icon lổn nhổn: trộn icon nét 1.5 với icon nét 2, hoặc icon nét viền với icon tô đặc. Chọn một bộ và giữ một bộ số.
• Xuất ra mất khung, icon dính sát mép: bạn đã chọn layer bên trong thay vì Frame 24 x 24.

Muốn học bài bản cách xây giao diện và hệ thống component trong Figma, bạn có thể tham khảo khoá Figma UI trên E-learning của ColorME.

Câu hỏi thường gặp

Icon trong Figma nên vẽ cỡ bao nhiêu?

Cỡ phổ biến là khung 24 x 24 px. Bài icon grid của Figma dùng khung 24 x 24 với vùng an toàn 20 x 20 và lề 2 px; bộ Lucide cũng dùng khung 24 x 24 với nét 2 px.

Làm sao đưa icon SVG vào Figma?

Tải icon dạng SVG (ví dụ từ công cụ Tìm icon của ColorME) rồi kéo thả file vào Figma. Icon vào Figma là vector, đổi màu và chỉnh nét được như hình vẽ thông thường.

Union khác Group thế nào khi làm icon?

Group không tính phần nét vào khung bao nên căn giữa dễ lệch. Union gộp các hình thành một nhóm boolean mà khung bao ôm trọn nét, căn giữa Frame chính xác, và vẫn chỉnh từng layer bên trong được.

Có nên Outline stroke icon trước khi xuất?

Không bắt buộc, vì Figma vốn xuất nét thành fill trong file SVG. Outline stroke là thao tác phá huỷ, nên giữ bản còn nét để sau này còn đổi độ dày.

Gói Figma miễn phí có quản lý được bộ icon không?

Có thể tạo component cho icon trong file ở gói Starter miễn phí. Publish thành library để dùng ở nhiều file thì cần các gói Professional, Education, Organization, Government hoặc Enterprise, theo trang trợ giúp của Figma.

Icon Lucide có được dùng cho dự án thương mại không?

Được. Lucide dùng giấy phép ISC, cho phép dùng, sửa và phân phối, kể cả mục đích thương mại; nếu phân phối lại chính bộ icon thì giữ thông báo bản quyền và giấy phép.