Tự tạo icon miễn phí: chọn, đổi màu, chỉnh nét, xuất SVG/PNG

Cách tự tạo icon miễn phí trên công cụ Tìm icon của ColorME: tìm trong hơn 1.800 icon Lucide bằng tiếng Việt hoặc tiếng Anh, chỉnh cỡ, độ dày nét, màu rồi tải SVG, PNG hoặc chép mã SVG. ColorME đã thử từng bước, kèm file thật, bộ icon đồng bộ cho thương hiệu và giấy phép dùng thương mại.

Muốn tự tạo icon miễn phí mà không phải vẽ từ đầu, cách nhanh nhất là lấy một icon nét viền có sẵn rồi chỉnh cho hợp với thiết kế của bạn: đổi màu, đổi độ dày nét, chọn cỡ, rồi tải về dạng SVG hoặc PNG. Trưa 25/10/2026 mình làm đủ các bước đó trên công cụ Tìm icon của ColorME, không đăng nhập, và ghi lại từng file tải về. Trang công cụ ghi rõ: "Tìm hơn 1.800 icon miễn phí bằng tiếng Việt hoặc tiếng Anh, chỉnh cỡ, độ dày nét, màu rồi tải SVG, PNG hoặc sao chép mã SVG. Dùng được cho dự án thương mại."

Trả lời nhanh: mở công cụ, gõ từ khoá (ví dụ "giỏ hàng" hoặc "cart"), bấm vào icon bạn thích, mở nút "Tuỳ chỉnh" để chọn cỡ và độ dày nét, chọn màu ở khung bên phải, rồi bấm "Tải SVG", "Tải PNG" hoặc "Chép SVG". Trang ghi trong phần hỏi đáp là không cần đăng nhập để tải icon.

Nói cho đúng: "tự tạo" ở đây là tự chọn và tự chỉnh icon từ một bộ có sẵn, không phải vẽ một hình mới. Công cụ không có bút vẽ hay chỗ sửa từng điểm. Nếu bạn cần vẽ icon riêng cho một sản phẩm, bài Icon trong Figma: cách vẽ, quản lý bằng component và xuất SVG đi sâu phần đó.

Công cụ Tìm icon của ColorME có gì

Trang công cụ nói thẳng nguồn icon: "Hơn 1.800 icon Lucide nét viền. Gõ tiếng Việt hoặc tiếng Anh, tải SVG hoặc PNG." Khi mình mở trang, dòng đếm hiện "1.854 icon · bấm để xem và tải". Mình đọc mã của trang thì thấy công cụ nạp bộ lucide-static bản 1.48.0. Lucide là một bộ icon mã nguồn mở, mọi icon cùng vẽ trên lưới 24 × 24, nét tròn đầu, nên ghép chung rất đều tay.

Giao diện có ba phần:

• Bảng sticker bên trái: khi chưa tìm, bảng hiện 9 icon "Gợi ý cho designer" (folder, pen-tool, palette, layers, shapes, type, pipette, crop, brush); khi tìm, bảng hiện 9 kết quả đầu.
• Thẻ lưới 24 × 24 ở giữa: icon đang chọn được vẽ to trên lưới đỏ nhạt, kèm nhãn "Lưới 24px · nét 2". Đây là chỗ xem nét dày mỏng rõ nhất.
• Khung tìm và tải bên phải: ô tìm, tên và thẻ tiếng Anh của icon, 5 chấm màu, ô mã hex, nút "Chép SVG" và "Tải PNG". Nút "Tải SVG" và "Tuỳ chỉnh" nằm phía trên cùng.

Cách tự tạo icon miễn phí trong 6 bước

Bước 1: Gõ từ khoá tiếng Việt

Bấm vào ô "nhà, giỏ hàng, mũi tên, arrow…" và gõ thứ bạn cần. Mình gõ "giỏ hàng": danh sách hiện "15 icon phù hợp", bảng sticker đổi sang 9 kết quả đầu, và icon đầu tiên (shopping-bag) tự lên lưới 24 px mà chưa cần bấm gì.

Gõ “giỏ hàng” trên công cụ Tìm icon của ColorME: icon đầu tiên tự lên lưới 24 px. Ảnh chụp màn hình trưa 25/10/2026, lúc đó danh sách ghi 16 icon; mình thử lại lúc 14:15 cùng ngày thì còn 15. Ảnh: ColorME.

Bước 2: Không ra thì gõ tiếng Anh

Công cụ đọc được từ khoá tiếng Việt, kể cả cụm từ như "ngôi sao" hay "cà phê sữa", rồi so với tên và thẻ tiếng Anh của icon. Ngày 25/10/2026, sau bản cập nhật buổi chiều, mình thử lại từng từ, không đăng nhập, và được kết quả dưới đây:

Mẹo rút ra: gõ tiếng Việt có dấu và gõ cả cụm, công cụ hiểu theo cả cụm: "cà phê sữa" ra coffee và milk, "cắt" ra crop và scissors. Gõ không dấu dễ lệch nghĩa: "ca" ra 8 icon về cá và tôm (fish, shrimp). Sau icon đúng đôi khi vẫn có vài icon ít liên quan (gõ "mèo" có thêm dome, tv-minimal), nên nếu chưa ưng, thử từ tiếng Anh như coffee, star, cat.

Ngày 25/10/2026: gõ “mèo”, “con mèo” hay “cat” đều ra 10 icon, icon con mèo đứng đầu. Ảnh chụp màn hình, không đăng nhập. Ảnh: ColorME.

Nếu bạn đang tìm icon Facebook, Zalo hay logo thương hiệu khác thì công cụ này không có: Lucide là bộ icon giao diện (nhà, giỏ hàng, lịch, tin nhắn…), không phải bộ logo mạng xã hội.

Bước 3: Chọn icon

Bấm vào một ô trong danh sách hoặc một sticker trong bảng bên trái. Icon được chọn có viền đen, sticker nghiêng nhẹ, và thẻ lưới vẽ lại icon to ở giữa. Dưới tên icon có các thẻ tiếng Anh (ví dụ coffee: "drink cup mug tea cafe hot beverage"), đọc qua để biết nên gõ từ gì khi tìm icon cùng nhóm. Danh sách hiện 120 icon một lượt, bấm "Xem thêm" để mở tiếp.

Bước 4: Mở "Tuỳ chỉnh" để chọn cỡ, nét và màu

Bấm "Tuỳ chỉnh" cạnh nút Tải SVG, một bảng nhỏ mở ra với hai thanh kéo: "Cỡ khi tải" và "Độ dày nét". Màu chọn ở khung bên phải: 5 chấm màu có sẵn (mực #101828, đỏ, cam, xanh lá, xanh dương) hoặc bấm vào ô mã hex để chọn màu bất kỳ. Mình chọn icon coffee, cỡ 48 px, nét 1,5 và màu xanh cobalt #1F3FE0: thẻ lưới đổi màu ngay và nhãn đổi thành "Lưới 24px · nét 1.5".

Bảng Tuỳ chỉnh: cỡ khi tải 48 px, độ dày nét 1,5 px, màu #1F3FE0 chọn ở khung bên phải. Ảnh: ColorME.

Bước 5: Chọn độ dày nét hợp với chữ của bạn

Độ dày nét là thứ làm bộ icon trông "nặng" hay "nhẹ". Mình tải cùng một icon coffee ở 5 mức nét, cỡ 48 px, màu mực, để so trực tiếp. Mỗi ô dưới đây là file SVG tải từ công cụ, không chỉnh sửa gì:

Cùng icon coffee ở 5 độ dày nét, mỗi ô là một file SVG tải từ công cụ, không chỉnh sửa. Ảnh: ColorME.

• Nét 1 đến 1,5: mảnh, sang, hợp với chữ mảnh, giao diện nhiều khoảng trắng, menu nhà hàng, thiệp.
• Nét 2 (mặc định): cân với chữ thường ở cỡ 14 đến 16 px trên web và app.
• Nét 2,5 đến 3: đậm, đọc rõ khi icon nhỏ hoặc đặt trên ảnh, hợp với chữ đậm, poster, sticker.

Một lưu ý: nét được tính trên lưới 24 đơn vị rồi phóng theo cỡ tải. Icon nét 2 tải ở cỡ 96 px sẽ có nét dày khoảng 8 px trên màn hình. Vì vậy hãy chọn nét theo cỡ bạn thật sự dùng.

Bước 6: Tải SVG, tải PNG hoặc chép mã SVG

Mình bấm cả ba nút với icon coffee ở cỡ 48 px, nét 1,5, màu #1F3FE0. Mỗi nút đổi sang dấu tick xanh ("Đã tải", "Đã chép") và dòng nhỏ bên dưới báo tên file vừa tải (ví dụ "Đã tải coffee-48px-stroke1.5-1f3fe0.svg") hoặc "Đã chép mã SVG của coffee". Đây là hai file thật mình nhận được:

File thật tải về: SVG 339 byte (width 48, viewBox 0 0 24 24) và PNG 384 × 384 px nền trong suốt. Tên coffee.svg, coffee.png trong ảnh là tên trước bản cập nhật trưa 25/10/2026; giờ tên file ghi kèm cỡ, nét và màu. Ảnh: ColorME.

• coffee-48px-stroke1.5-1f3fe0.svg nặng 339 byte, có width="48" height="48" (đúng cỡ đã chọn), viewBox="0 0 24 24", stroke="#1f3fe0" và stroke-width="1.5". Mã "Chép SVG" giống hệt nội dung file này, dán thẳng vào HTML được.
• coffee-384px-stroke1.5-1f3fe0.png có kích thước 384 × 384 px, nền trong suốt. Bảng Tuỳ chỉnh giờ ghi sẵn kích thước ngay dưới thanh "Cỡ khi tải", ví dụ "SVG 48×48 px · PNG 384×384 px". Mình kéo thử: cỡ 16 và 32 đều ra PNG 256 px, cỡ 64 ra 512 px, cỡ 96 ra 768 px, tức PNG gấp 8 lần cỡ tải và nhỏ nhất 256 px.
• Ngày 25/10/2026, sau bản cập nhật buổi trưa, mình thử lại: tên file giờ ghi kèm cỡ, nét và màu (coffee-48px-stroke1.5-1f3fe0.svg, coffee-384px-stroke1.5-1f3fe0.png). Tải nhiều bản cùng một icon với màu hay nét khác nhau sẽ ra các tên khác nhau, không bị lẫn.

Nên tải SVG hay PNG

Phần hỏi đáp của công cụ nói gọn: "SVG giữ nét sắc ở mọi kích thước và đổi màu được, hợp với web và thiết kế; PNG tiện dùng ngay trong slide hoặc ảnh." Nếu bạn định chỉnh SVG thêm trong Illustrator rồi xuất lại, có thể làm gọn file bằng Tối ưu SVG (trang công cụ ghi: "xoá metadata, làm tròn số, gộp path"); bài Tối ưu file SVG online có số đo trước và sau.

Tự tạo một bộ icon đồng bộ cho thương hiệu

Cái hay nhất của công cụ không phải một icon lẻ mà là một bộ icon cùng kiểu. Mình thử với một thương hiệu mẫu tự đặt tên: "Sương Rang", một tiệm rang cà phê nhỏ ở Đà Lạt. Mình đặt cỡ 32 px, nét 1,75, màu nâu #4A2C1A một lần, rồi tìm và tải lần lượt 6 icon: coffee, bean, map-pin, calendar-days, gift, message-circle. Cài đặt giữ nguyên khi mình đổi từ khoá, nên cả 6 file có cùng màu, cùng nét. Sau đó mình đặt 6 file SVG đó lên hai chỗ dùng thật: bộ ảnh bìa tin nổi bật và thanh tab của một app đặt đồ uống.

Bộ 6 icon cùng nét 1,75 px, màu #4A2C1A, tải từ công cụ rồi đặt lên ảnh bìa tin nổi bật và thanh tab app cho thương hiệu mẫu Sương Rang (tên tự đặt). Ảnh: ColorME.

Vài điều giúp bộ icon trông chuyên nghiệp:

1. Chốt cỡ, nét, màu trước rồi mới tìm icon. Đổi giữa chừng là bộ icon lệch nhau ngay.
2. Chọn icon cùng "độ phức tạp". Một icon nhiều chi tiết (calendar-days có 6 chấm) đứng cạnh một icon rất đơn giản (message-circle) vẫn ổn vì chung nét, nhưng đừng ghép icon đặc với icon nét viền.
3. Nét mảnh trên nền nhạt, nét dày trên ảnh. Trên ảnh bìa tin nổi bật nền màu, mình thấy nét 1,75 ở cỡ lớn đọc rõ; nếu đặt icon lên ảnh chụp, bạn nên thử nét 2,25 đến 2,5 cho dễ đọc.
4. Giữ khoảng đệm đều. Icon Lucide đã chừa lề trong lưới 24, nên chỉ cần đặt chúng giữa các ô cùng cỡ là thẳng hàng.

Nếu bạn muốn icon tô đặc, nhiều màu hoặc 3D, phần hỏi đáp của công cụ nói: "Thư viện này là icon nét viền." Trang có nhắc tới công cụ AI Tạo bộ icon "dành cho tài khoản được cấp quyền", mình không thử công cụ đó.

Dùng trên điện thoại

Mình mở trang ở khổ 390 px (giả lập điện thoại trong Chrome). Các phần xếp dọc: nút Tải SVG và Tuỳ chỉnh ở trên, bảng sticker và thẻ lưới thu nhỏ, rồi tới ô tìm, 5 chấm màu và hai nút Chép SVG, Tải PNG. Trang không bị cuộn ngang. Mình gõ "hoa" và ra 2 icon (flower, flower-2). Mình không thử tải file trên một chiếc điện thoại thật.

Công cụ Tìm icon ở khổ 390 px (giả lập điện thoại trong Chrome): tìm “hoa”, chọn màu, Chép SVG, Tải PNG. Ảnh: ColorME.

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

Trên trang công cụ có nhãn "Miễn phí cả dự án thương mại" và dòng chú thích: "Bộ icon Lucide (giấy phép ISC; một số icon gốc từ Feather theo giấy phép MIT), dùng miễn phí cho dự án cá nhân và thương mại." Mình đọc tệp giấy phép trong kho mã của Lucide trên GitHub ngày 25/10/2026. Câu chính của giấy phép ISC là: "Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies." Cũng tệp đó ghi một nhóm icon gốc từ bộ Feather (ví dụ arrow-right, calendar, search, download) đi kèm giấy phép MIT.

Hiểu đơn giản: bạn dùng icon trong logo phụ, app, website, bao bì hay bài đăng bán hàng đều được. Nếu bạn phân phối lại chính bộ icon (ví dụ đóng gói thành một "icon pack" để chia sẻ hay bán), hãy kèm thông báo giấy phép của Lucide. Phần hỏi đáp của công cụ cũng viết: "Giấy phép ISC không bắt buộc ghi nguồn trong sản phẩm, nhưng cần giữ thông báo giấy phép nếu bạn phân phối lại chính bộ icon."

Về đăng nhập và dữ liệu, phần hỏi đáp của trang ghi: "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à "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."

Những gì công cụ chưa làm được

• Không vẽ icon mới, không sửa từng nét hay điểm neo. Muốn đổi hình, bạn tải SVG rồi sửa trong Figma hoặc Illustrator.
• Chỉ có icon nét viền một màu. Không có icon tô đặc, hai màu, gradient hay logo thương hiệu.
• Tìm tiếng Việt đã hiểu cả cụm từ sau bản cập nhật chiều 25/10/2026 ("ngôi sao", "mặt cười", "con mèo" đều ra đúng icon đầu tiên), nhưng sau icon đúng đôi khi còn icon ít liên quan, và gõ không dấu có thể ra nghĩa khác ("ca" ra icon con cá).
• Không đặt được cỡ PNG tuỳ ý: PNG luôn gấp 8 lần "Cỡ khi tải", từ 256 đến 768 px.
• Mỗi lần tải một icon, chưa có nút tải cả bộ thành một tệp nén.

Tải icon xong, làm gì tiếp

• Cần biểu tượng nhỏ cho tab trình duyệt của website: xem Tạo favicon online từ logo.
• Đóng gói logo và icon gửi khách: bài Xuất file logo bàn giao khách có bảng định dạng PNG, SVG, JPG.
• Muốn làm sticker từ một tấm ảnh của bạn thay vì icon: Tạo sticker từ ảnh của ColorME, trang ghi công cụ tự tách nền, thêm viền sticker, chữ và emoji rồi tải PNG nền trong suốt.
• Muốn học bài bản cách dùng icon trong giao diện app và web: khoá Thiết Kế UI của ColorME, hoặc học theo video tại E-learning ColorME.

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

Tự tạo icon miễn phí ở đâu?

Bạn dùng công cụ Tìm icon của ColorME tại colorme.vn/tools/icon-finder: chọn một trong hơn 1.800 icon Lucide nét viền, đổi cỡ, độ dày nét, màu rồi tải SVG, PNG hoặc chép mã SVG. Trang ghi là không cần đăng nhập để tải icon.

Tải icon SVG miễn phí có dùng cho thương mại được không?

Trang công cụ ghi "Bộ icon Lucide (giấy phép ISC; một số icon gốc từ Feather theo giấy phép MIT), dùng miễn phí cho dự án cá nhân và thương mại." Nếu bạn phân phối lại chính bộ icon, hãy kèm thông báo giấy phép của Lucide.

Tải PNG ra kích thước bao nhiêu?

PNG lớn gấp 8 lần "Cỡ khi tải" và nhỏ nhất 256 px; bảng Tuỳ chỉnh ghi sẵn cỡ này, ví dụ "SVG 48×48 px · PNG 384×384 px". Mình chọn cỡ 48 px và nhận file coffee-384px-stroke1.5-1f3fe0.png, 384 × 384 px, nền trong suốt.

Tìm icon bằng tiếng Việt có được không?

Được. Ngày 25/10/2026, sau bản cập nhật buổi chiều, mình thử lại: giỏ hàng, trái tim, nhà, điện thoại, ngôi sao, con mèo, mặt cười, cắt, cà phê sữa đều ra đúng icon ở vị trí đầu. Nên gõ có dấu; nếu icon đầu tiên chưa đúng, hãy gõ tiếng Anh như coffee, star, cat.

Làm sao để cả bộ icon cùng một kiểu?

Đặt cỡ, độ dày nét và màu một lần trong "Tuỳ chỉnh" và ô màu, rồi mới tìm và tải từng icon. Cài đặt giữ nguyên khi bạn đổi từ khoá, nên mọi file tải ra cùng nét và cùng màu.