Hướng dẫn sử dụng

Tất cả những gì bạn cần biết để sử dụng VICONIC hiệu quả — từ duyệt icon, tìm kiếm, tạo Kit cá nhân đến tích hợp vào dự án.

Giới thiệu

Overview

VICONIC là thư viện icon lớn nhất Việt Nam với 200.000+ icons Tailwind Native, hỗ trợ React, CDN, Figma… miễn phí hoàn toàn và dùng cho mục đích thương mại được.

Trang hướng dẫn này sẽ giúp bạn tìm hiểu cách sử dụng toàn bộ tính năng của VICONIC — từ việc duyệt và tìm kiếm icon, đến tạo Kit cá nhân và tích hợp vào dự án.

Tìm kiếm nhanh

Tìm icon theo tên, từ khóa với bộ lọc mạnh mẽ

Bộ sưu tập

Hàng nghìn icon được tổ chức theo bộ sưu tập

Tùy chỉnh

Thay đổi màu sắc, kích thước, kiểu dáng icon

Tải xuống

Tải SVG, PNG hoặc copy code trực tiếp

Đa nền tảng

Hỗ trợ HTML, React, Vue, CDN

CDN toàn cầu

Tích hợp nhanh qua CDN script

Kit cá nhân

Tạo bộ icon riêng cho dự án của bạn

Giấy phép rõ ràng

Mỗi bộ sưu tập đều ghi rõ license

Bắt đầu nhanh

Quick Start

1Sử dụng CDN (Nhanh nhất)

Thêm một dòng script vào HTML của bạn, icon sẽ tự động render.

Thêm vào HTMLHTML

<!-- Thêm script CDN vào <head> hoặc cuối <body> -->
<script src="https://cdn.viconic.dev/js/copyicons-smart-loader.min.js"></script>

<!-- Sử dụng icon bằng thẻ <viconic-icon> -->
<viconic-icon icon="ti:home"></viconic-icon>
<viconic-icon icon="ti:search" style="font-size: 32px;"></viconic-icon>
<viconic-icon icon="ti:heart" style="color: red;"></viconic-icon>

2Sử dụng trong React

Cài đặt thư viện viconic-react-icons và sử dụng trực tiếp trong JSX.

React ComponentJSX

import { ViconicIcon } from "viconic-react-icons";

function App() {
  return (
    <div>
      <ViconicIcon name="ti:home" />
      <ViconicIcon name="ti:search" size={32} />
      <ViconicIcon name="ti:heart" color="red" />
    </div>
  );
}

3Tải SVG trực tiếp

Bạn cũng có thể tải file SVG về và sử dụng trực tiếp trong dự án mà không cần CDN.

SVG trong HTMLHTML

<!-- Copy SVG code từ trang chi tiết icon -->
<img src="path/to/icon.svg" alt="Icon" width="24" height="24" />

<!-- Hoặc inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 
     viewBox="0 0 24 24" fill="none" stroke="currentColor" 
     stroke-width="2">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
</svg>

Duyệt bộ sưu tập

Collections

Trang Bộ sưu tập cho phép bạn duyệt qua tất cả các bộ icon có sẵn trên VICONIC.

Tìm kiếm bộ sưu tập

Sử dụng thanh tìm kiếm ở đầu trang để tìm bộ sưu tập theo tên. Hỗ trợ phím tắt Ctrl+K (hoặc ⌘K trên Mac) để focus nhanh vào ô tìm kiếm.

Lọc theo kích thước

Bộ lọc ở sidebar trái cho phép lọc bộ sưu tập theo số lượng icon: < 100, 100-500, 500-1000, hoặc > 1000 icon.

Lọc theo giấy phép

Chọn loại giấy phép (MIT, Apache, CC BY, ...) để chỉ hiển thị bộ sưu tập phù hợp với dự án của bạn.

Sắp xếp

Sắp xếp kết quả theo: Mới nhất, Nhiều icon nhất, A-Z, hoặc Z-A bằng dropdown Sort ở góc phải.

Bookmark & Chia sẻ

Mỗi bộ sưu tập có nút Bookmark (lưu vào hồ sơ) và nút Share để chia sẻ qua mạng xã hội hoặc copy link.

Xem chi tiết bộ sưu tập

Click vào card bộ sưu tập để vào trang chi tiết, nơi bạn có thể duyệt từng icon, tìm kiếm trong bộ sưu tập, vote và thêm vào Kit.

💡 Mẹo: Trên mobile, bộ lọc sẽ ẩn vào menu bên, nhấn nút "Filters" để mở.

Tìm kiếm Icon

Trang Tìm kiếm cho phép bạn tìm icon cụ thể trong toàn bộ thư viện VICONIC.

Nhập từ khóa

Gõ tên icon hoặc từ khóa vào ô tìm kiếm. Kết quả sẽ tự động cập nhật sau 500ms (debounce). Ví dụ: 'home', 'arrow', 'user', 'setting'.

Sử dụng bộ lọc

Lọc kết quả theo: Style (monoColor, doutone, multiple), Bộ sưu tập cụ thể, và Loại giấy phép. Các bộ lọc nằm ở sidebar trái (desktop) hoặc nút Filter (mobile).

Sắp xếp kết quả

Sắp xếp theo: Relevance (độ liên quan), Most Voted (nhiều vote nhất), A-Z, hoặc Z-A.

Chọn icon

Click vào icon để mở modal chi tiết, nơi bạn có thể xem preview, copy code, download, hoặc thêm vào Kit.

🎯 Chế độ chọn nhanh (Marquee Selection)

Bật chế độ "Select mode" trong Settings để sử dụng tính năng chọn nhiều icon cùng lúc:

Vào Settings (biểu tượng ⚙️ trên thanh điều hướng)
Chuyển Copy Speed Mode sang "Select"
Quay lại trang tìm kiếm, kéo chuột để tạo vùng chọn
Tất cả icon trong vùng chọn sẽ được thêm vào Kit ngay lập tức

📄 Phân trang: Kết quả hiển thị theo trang. Sử dụng thanh phân trang ở cuối để chuyển trang. Mỗi trang hiển thị tối đa 100 icon.

Chi tiết Icon

Icon Detail

Khi click vào bất kỳ icon nào, bạn sẽ được đưa đến trang chi tiết (hoặc modal chi tiết) với đầy đủ thông tin và công cụ.

🎨 Xem trước (Preview)

▸Xem icon ở kích thước lớn trên nhiều nền: sáng, tối, màu
▸Thay đổi kích thước preview bằng slider
▸Xem thông tin: tên, bộ sưu tập, tác giả, giấy phép, tags

📋 Copy Code

▸Tab HTML: Copy thẻ <viconic-icon> với CDN
▸Tab React: Copy component <ViconicIcon>
▸Tab SVG: Copy mã SVG gốc
▸Tab CDN: Copy link script CDN

⬇️ Tải xuống

▸Tải SVG: File vector chất lượng cao
▸Tải PNG: Chọn kích thước (64px đến 512px)
▸Copy SVG code: Dán trực tiếp vào dự án

🛠️ Công cụ khác

▸Thêm vào Kit: Chọn kit hoặc tạo kit mới
▸Chỉnh sửa: Mở icon trong SVG Editor
▸Chia sẻ: Copy link hoặc chia sẻ qua mạng xã hội
▸Icon liên quan: Xem các icon tương tự

Ví dụ code từ tab HTML:

Sử dụng icon qua CDNHTML

<!-- Thêm CDN script (chì cần 1 lần) -->
<script src="https://cdn.viconic.dev/js/copyicons-smart-loader.min.js"></script>

<!-- Sử dụng icon -->
<viconic-icon icon="ti:home"></viconic-icon>

⬅️➡️ Điều hướng nhanh: Trong modal chi tiết, nhấn nút mũi tên trái/phải hoặc dùng phím tắt để chuyển giữa các icon lân cận.

Quản lý Kit

Kits

Kit là gì?

Kit là tập hợp icon do bạn tự chọn, tổ chức và quản lý cho dự án của mình. Mỗi Kit có CDN link riêng, giúp bạn chỉ tải đúng những icon mà dự án cần — không thừa, không thiếu.

Mở trang Kits →

1Tạo Kit mới

Vào trang Kits (/kits) hoặc nhấn nút 'Create Kit' từ bất kỳ đâu

Đặt tên cho Kit (ví dụ: 'My App Icons')

Đặt tên prefix cho Kit (Quy định: Prefix không được có dấu cách)

Kit được tạo, bạn có thể bắt đầu thêm icon

2Thêm icon vào Kit

Duyệt hoặc tìm kiếm icon như bình thường

Click vào icon → Nhấn nút "Add to Kit"

Chọn Kit muốn thêm → Icon được thêm tự động

Hoặc sử dụng Marquee Selection để thêm nhiều icon cùng lúc

💡 Icon đã chọn (picked) sẽ hiển thị ở Trang Tạo kit. Bạn có thể gán chúng vào Kit từ đó.

3Kit Editor — Chỉnh sửa Kit

Click vào Kit bất kỳ để mở trình chỉnh sửa với đầy đủ tính năng:

✏️

Đổi tên Kit

Click vào tên Kit để sửa

🎨

Đổi màu chủ đạo

Chọn Primary Color cho Kit

📏

Kích thước mặc định

Thiết lập Default Size cho icon

🔄

Nhấn nút cập nhật

Nhấn "nhấn nút cập nhật" để tạo/cập nhật CDN link

⬇️

Tải Kit

Download toàn bộ icon trong Kit (ZIP)

🗑️

Xóa icon/Kit

Xóa từng icon hoặc toàn bộ Kit

🌐 Sử dụng CDN cho Kit

Sau khi nhấn nút cập nhật, bạn sẽ nhận được link script riêng cho Kit. Chỉ cần thêm link này vào dự án và tất cả icon trong Kit sẽ tự động khả dụng.

⚠️ Mỗi lần thay đổi icon trong Kit, nhớ nhấn nút cập nhật để đồng bộ.

SVG Viewer

Tool

SVG Viewer là công cụ xem, chỉnh sửa và xuất file SVG ngay trên trình duyệt — tích hợp sẵn code editor chuyên nghiệp.

📁 Sidebar (Trái)

▸Tìm kiếm icon từ thư viện VICONIC
▸Duyệt icon theo bộ sưu tập
▸Click icon để tải SVG vào editor
▸Vote icon yêu thích

💻 Code Editor (Giữa)

▸Ace Editor với syntax highlighting
▸Chỉnh sửa SVG code trực tiếp
▸Auto-validate SVG
▸Hiển thị line number, cursor position

👁️ Preview (Phải)

▸Xem trước SVG real-time
▸Chuyển nền: Grid / Trắng / Tối
▸Xuất: SVG, PNG, React, React Native
▸Tối ưu SVG (Optimize)

Tính năng chính:

📤

Upload file — Kéo thả hoặc chọn file SVG từ máy tính

📝

Live editing — Sửa code → Preview cập nhật ngay lập tức

🔄

Chuyển đổi — Chuyển SVG sang React component, React Native, hoặc PNG

⚡

Tối ưu hóa — Xóa comment, attribute thừa, minify style, gộp group — giảm đáng kể file size

↩️

Reset — Quay về SVG gốc nếu bạn đã sửa đổi

🔀

Transform — Flip ngang/dọc, xoay icon ngay từ toolbar

💡 Mẹo: Bạn có thể kéo thanh phân cách giữa sidebar, editor và preview để thay đổi kích thước vùng làm việc theo ý muốn.

Hồ sơ cá nhân

Profile

Trang Hồ sơ quản lý tất cả thông tin tài khoản và nội dung cá nhân của bạn.

📝 Chỉnh sửa hồ sơ

Cập nhật tên, và thông tin cá nhân.

/profile

📊 Gói & Sử dụng

Xem gói đang dùng, số lượng API calls, dung lượng storage, và lượt tải còn lại.

/profile/plan

📦 Kits của tôi

Xem và quản lý tất cả Kit icon bạn đã tạo.

/profile/kits

❤️ Yêu thích

Danh sách icon mà bạn đã vote / yêu thích.

/profile/favorites

🔖 Bookmark

Các bộ sưu tập mà bạn đã bookmark để xem lại sau.

/profile/bookmarks

🔐 Lưu ý: Bạn cần đăng nhập để truy cập trang Hồ sơ. Nếu chưa đăng nhập, hệ thống sẽ hiển thị thông báo yêu cầu đăng nhập.

Phím tắt & Mẹo

Tips

⌨️ Phím tắt

Phím tắt	Trang	Chức năng
`Ctrl + K`	Mọi trang	Focus vào ô tìm kiếm
`⌘ + K`	Mọi trang (Mac)	Focus vào ô tìm kiếm
`← →`	Icon Detail Modal	Chuyển icon trước/sau
`Esc`	Modal / Sheet	Đóng dialog đang mở
`Kéo chuột`	Search / Collection	Marquee selection (chế độ Select)

💡 Mẹo sử dụng

🔍

Tìm kiếm thông minh

VICONIC sử dụng MeiliSearch — hỗ trợ typo tolerance. Bạn gõ sai chính tả vẫn tìm được kết quả đúng!

⚡

Cache thông minh

Icon đã tải sẽ được cache tại trình duyệt. Lần sau truy cập sẽ hiển thị ngay lập tức, không cần chờ load.

🌐

Đa ngôn ngữ

VICONIC tự động phát hiện ngôn ngữ trình duyệt. Bạn cũng có thể chuyển đổi ngôn ngữ trong Settings.

📱

Responsive

Toàn bộ giao diện hoạt động tốt trên mọi thiết bị — từ mobile đến desktop.

🗳️

Vote icon

Nhấn nút Vote trên icon yêu thích để giúp cộng đồng biết icon nào hữu ích nhất.

📋

Copy nhanh

Ở chế độ "Slow" (mặc định), click icon sẽ mở chi tiết. Chuyển sang chế độ "Fast" để copy icons với 1 click.

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

FAQ

Có! VICONIC cung cấp hàng nghìn icon miễn phí. Mỗi bộ sưu tập đều ghi rõ giấy phép (MIT, Apache, CC BY, ...) để bạn yên tâm sử dụng trong dự án thương mại hay cá nhân.

Tùy thuộc vào giấy phép của bộ sưu tập. Hầu hết các bộ icon trên VICONIC sử dụng giấy phép MIT hoặc Apache 2.0, cho phép sử dụng thương mại. Hãy kiểm tra thông tin giấy phép trên trang chi tiết bộ sưu tập.

CDN của VICONIC được tối ưu cho tốc độ và được phục vụ qua mạng lưới toàn cầu. Hiện tại không có giới hạn bandwidth cho sử dụng thông thường.

Khi sử dụng CDN: thêm style (ví dụ: <viconic-icon icon="ti:home" style="color: red;">). Khi sử dụng React: dùng style hoặc className (ví dụ: style={{ color: "red" }}). Với SVG: chỉnh sửa fill hoặc stroke trong code SVG.

Số lượng Kit phụ thuộc vào gói sử dụng của bạn. Xem chi tiết tại trang Hồ sơ > Gói & Sử dụng. Gói miễn phí cho phép tạo nhiều Kit với số lượng icon hợp lý.

Không. SVG Viewer hoạt động hoàn toàn trên trình duyệt. File SVG bạn tải lên hoặc chỉnh sửa không được gửi lên server — đảm bảo riêng tư tuyệt đối.

VICONIC hỗ trợ: HTML/CSS (qua CDN hoặc SVG trực tiếp), React (component ViconicIcon), Vue (copy SVG hoặc CDN), React Native (qua SVG Viewer export), và bất kỳ framework nào hỗ trợ SVG.

Liên hệ với chúng tôi qua email hoặc mạng xã hội. Chúng tôi luôn chào đón đóng góp từ cộng đồng designer và developer!

← Về trang chủ lấy icon miễn phí

VICONIC Documentation • 2026

Có thắc mắc? Liên hệ qua mạng xã hội hoặc email.