I want to contribute icons, how?

Contact us via email or social media. We always welcome contributions from the designer and developer community!

User Documentation

Everything you need to know to use VICONIC effectively — from browsing icons, searching, creating personal Kits to project integration.

Introduction

Overview

VICONIC is the largest icon library in Vietnam with 200,000+ Tailwind Native icons, supporting React, CDN, Figma... completely free and ready for commercial use.

This documentation will help you learn how to use all VICONIC features — from browsing and searching icons, to creating personal Kits and integrating them into your projects.

Quick Search

Find icons by name, keyword with powerful filters

Collections

Thousands of icons organized into collections

Customization

Change colors, sizes, and icon styles

Downloads

Download SVG, PNG or copy code directly

Multi-platform

Supports HTML, React, Vue, CDN

Global CDN

Fast integration via CDN script

Personal Kits

Create custom icon sets for your projects

Clear Licenses

Each collection specifies its license

Quick Start

1Using CDN (Fastest)

Add a single script line to your HTML, and icons will render automatically.

Add to HTMLHTML

<!-- Add CDN script to <head> or end of <body> -->
<script src="https://cdn.viconic.dev/js/copyicons-smart-loader.min.js"></script>

<!-- Use icons with the <viconic-icon> tag -->
<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>

2Using in React

Install the viconic-react-icons library and use it directly in 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>
  );
}

3Direct SVG Download

You can also download SVG files and use them directly in your project without a CDN.

SVG in HTMLHTML

<!-- Copy SVG code from icon detail page -->
<img src="path/to/icon.svg" alt="Icon" width="24" height="24" />

<!-- Or 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>

Browse Collections

Collections

The Collections page allows you to browse all available icon sets on VICONIC.

Search Collections

Use the search bar at the top to find collections by name. Supports Ctrl+K (or ⌘K on Mac) shortcut for quick focus.

Filter by Size

The left sidebar filters allow you to filter collections by icon count: < 100, 100-500, 500-1000, or > 1000 icons.

Filter by License

Select license types (MIT, Apache, CC BY, ...) to show only collections suitable for your project.

Sorting

Sort results by: Newest, Most Icons, A-Z, or Z-A using the Sort dropdown on the right.

Bookmark & Share

Each collection has a Bookmark button (save to profile) and a Share button to share on social media or copy the link.

View Details

Click on a collection card to enter the detail page, where you can browse each icon, search within the collection, vote, and add to your Kit.

💡 Tip: On mobile, filters are hidden in a side menu; press the "Filters" button to open.

Search Icons

The Search page allows you to find specific icons across the entire VICONIC library.

Enter Keywords

Type the icon name or keyword into the search bar. Results update automatically after 500ms (debounce). e.g., 'home', 'arrow', 'user', 'setting'.

Use Filters

Filter results by: Style (monoColor, doutone, multiple), Specific Collections, and License Type. Filters are on the left sidebar (desktop) or via the Filter button (mobile).

Sort Results

Sort by: Relevance, Most Voted, A-Z, or Z-A.

Select Icon

Click an icon to open the detail modal for preview, code copying, downloading, or adding to your Kit.

🎯 Marquee Selection Mode

Enable "Select mode" in Settings to select multiple icons at once:

Go to Settings (⚙️ icon in the navigation bar)
Change Copy Speed Mode to "Select"
Return to the search page and drag your mouse to select
All selected icons will be added to your Kit immediately

📄 Pagination: Results are paginated. Use the navigation bar at the bottom to switch pages. Each page shows up to 100 icons.

Icon Details

Icon Detail

Click an icon to open the detail page (or modal) with full information and tools.

🎨 Preview

▸View icon at large scale on light/dark/colored backgrounds
▸Adjust preview size using the slider
▸View info: name, collection, author, license, tags

📋 Copy Code

▸HTML Tab: Copy <viconic-icon> tag with CDN
▸React Tab: Copy <ViconicIcon> component
▸SVG Tab: Copy raw SVG code
▸CDN Tab: Copy CDN script link

⬇️ Download

▸Download SVG: High-quality vector file
▸Download PNG: Choose size (64px to 512px)
▸Copy SVG code: Paste directly into your project

🛠️ Other Tools

▸Add to Kit: Choose an existing Kit or create a new one
▸Edit: Open icon in the SVG Editor
▸Share: Copy link or share on social media
▸Related Icons: View similar icons

Code example from HTML tab:

Using icon via CDNHTML

<!-- Add CDN script (only once) -->
<script src="https://cdn.viconic.dev/js/copyicons-smart-loader.min.js"></script>

<!-- Usage -->
<viconic-icon icon="ti:home"></viconic-icon>

⬅️➡️ Quick Navigation: In the detail modal, use left/right arrow buttons or keyboard shortcuts to switch between neighboring icons.

Manage Kits

Kits

What is a Kit?

Kit is a collection of icons you personally choose, organize, and manage for your project. Each Kit has its own CDN link, ensuring you only load the icons your project needs — nothing more, nothing less.

Open Kits Page →

1Create a New Kit

Go to the Kits page (/kits) or click 'Create Kit' from anywhere

Name your Kit (e.g., 'My App Icons')

Set a prefix for the Kit (Rule: Prefixes cannot contain spaces)

Once created, you can start adding icons

2Add Icons to Kit

Browse or search for icons as usual

Click an icon → Click the "Add to Kit" button

Select the Kit to add to → Icon is added automatically

Or use Marquee Selection to add multiple icons at once

💡 Selected (picked) icons will be displayed on the Kit creation page. You can assign them to a Kit from there.

3Kit Editor — Edit Your Kit

Click on any Kit to open the editor with full features:

✏️

Rename Kit

Click the Kit name to edit

🎨

Change Primary Color

Select a Primary Color for the Kit

📏

Default Size

Set the default size for icons

🔄

Click Update Button

Click the update button to generate/update the CDN link

⬇️

Download Kit

Download all icons in the Kit (ZIP)

🗑️

Delete Icon/Kit

Delete individual icons or the entire Kit

🌐 Using CDN for Kits

After clicking the update button, you will receive a unique script link for your Kit. Add this link to your project, and all icons in the Kit will be available automatically.

⚠️ Remember to click the update button every time you change icons in the Kit to sync changes.

SVG Viewer

Tool

SVG Viewer is an online tool to view, edit, and export SVG files directly in your browser — with an integrated professional code editor.

📁 Sidebar (Left)

▸Search icons from VICONIC library
▸Browse icons by collection
▸Click an icon to load SVG into editor
▸Vote for icons

💻 Code Editor (Middle)

▸Ace Editor with syntax highlighting
▸Edit SVG code directly
▸Auto-validate SVG
▸Line numbers, cursor position

👁 Preview (Right)

▸Real-time SVG preview
▸Toggle background: Grid / White / Dark
▸Export: SVG, PNG, React, React Native
▸Optimize SVG (Optimize)

Key Features:

📤

Upload File — Drag and drop or select SVG files from your computer

📝

Live Editing — Edit code → Preview updates instantly

🔄

Conversion — Convert SVG to React components, React Native, or PNG

⚡

Optimization — Remove comments, extra attributes, minify styles — significantly reduces file size

↩️

Reset — Revert to the original SVG if you've made changes

🔀

Transform — Flip horizontally/vertically, rotate icons right from the toolbar

💡 Tip: You can drag the dividers between the sidebar, editor, and preview to resize the workspace.

User Profile

Profile

The Profile page manages all your account information and personal content.

📝 Edit Profile

Update your name and personal information.

/profile

📊 Plans & Usage

View your current plan, API calls, storage usage, and remaining downloads.

/profile/plan

📦 My Kits

View and manage all the icon Kits you've created.

/profile/kits

❤️ Favorites

A list of icons you've voted for or favorited.

/profile/favorites

🔖 Bookmarks

Collections you've bookmarked to view later.

/profile/bookmarks

🔐 Note: You need to be logged in to access the Profile page. If not logged in, the system will prompt you to log in.

Shortcuts & Tips

Tips

⌨️ Keyboard Shortcuts

Shortcuts	Page	Function
`Ctrl + K`	All Pages	Focus on search bar
`⌘ + K`	All Pages (Mac)	Focus on search bar
`← →`	Icon Detail Modal	Switch previous/next icon
`Esc`	Modal / Sheet	Close active dialog
`Drag mouse`	Search / Collection	Marquee selection (Select mode)

💡 Usage Tips

🔍

Smart Search

VICONIC uses MeiliSearch — supporting typo tolerance. You can find results even with mistakes!

⚡

Smart Caching

Loaded icons are cached in the browser for instant loading next time.

🌐

Multi-language

VICONIC auto-detects browser language. You can also switch languages in Settings.

📱

Responsive

The entire interface works great on any device — from mobile to desktop.

🗳️

Vote icons

Click the Vote button on your favorite icons to help the community know which ones are most useful.

📋

Fast Copy

In "Slow" mode (default), clicking opens details. Switch to "Fast" mode to copy icons with 1 click.

FAQ

Yes! VICONIC provides thousands of free icons. Each collection specifies its license (MIT, Apache, CC BY, ...) so you can use them confidently in commercial or personal projects.

Depends on the collection's license. Most icon sets on VICONIC use MIT or Apache 2.0 licenses, which allow commercial use. Check the license info on the collection detail page.

VICONIC's CDN is optimized for speed and served via a global network. Currently, there are no bandwidth limits for normal usage.

Using CDN: Add style (e.g., <viconic-icon icon="ti:home" style="color: red;">). Using React: Use style or className (e.g., style={{ color: "red" }}). With SVG: Edit fill or stroke in the SVG code.

The number of Kits depends on your plan. Check Profile > Plans & Usage for details. The free plan allows creating multiple Kits with a reasonable number of icons.

No. SVG Viewer runs entirely in your browser. SVG files you upload or edit are not sent to our servers — ensuring absolute privacy.

VICONIC supports: HTML/CSS (via CDN or direct SVG), React (ViconicIcon component), Vue (SVG copy or CDN), React Native (via SVG Viewer export), and any framework supporting SVG.

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

VICONIC Documentation • 2026

Any questions? Contact us via social media or email.