DEV Community

Cover image for How to Use Viconic Icons in React and HTML
I'm Phuc
I'm Phuc

Posted on

How to Use Viconic Icons in React and HTML

#javascript #webdev #ai #opensource

Quick Start

Option 1: CDN (Fastest)

Add one script tag to your HTML. That's it.

<script src="https://cdn.viconic.dev/js/copyicons-smart-loader.min.js"></script>

<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>
Enter fullscreen mode Exit fullscreen mode

Icons are loaded from the CDN at runtime. Your bundle size stays at 0KB.

Option 2: React

Install the package:

npm install viconic-react-icons
Enter fullscreen mode Exit fullscreen mode

Then use it in your components:

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Works with React, Next.js, Vue, Angular, Svelte — anything that supports SVG.

Option 3: Raw SVG

Go to any icon's detail page, copy the SVG code, and paste it directly into your project. No CDN needed, no dependencies.

Searching Icons

Go to viconic.dev/search and type any keyword — home, arrow, user, settings. Results update automatically.

You can filter by:

  • Style (mono color, duotone, multi-color)
  • Collection (Lucide, Tabler, Font Awesome, etc.)
  • License (MIT, Apache 2.0, CC BY, etc.)

Press Ctrl+K (or ⌘K on Mac) from anywhere on the site to jump straight to search.

Fast Mode

By default, clicking an icon opens the detail modal. If you just want to grab icons quickly, switch to Fast Mode in Settings — one click copies the icon code instantly, no modal needed.

Marquee Selection

In Select mode, drag your mouse to draw a selection box. Every icon inside gets added to your Kit at once. Useful when you need a batch of icons quickly.

Customizing Icons

Change color via CDN:

<viconic-icon icon="ti:home" style="color: red;"></viconic-icon>
Enter fullscreen mode Exit fullscreen mode

Change color in React:

<ViconicIcon name="ti:home" style={{ color: "red" }} />
Enter fullscreen mode Exit fullscreen mode

With Tailwind CSS:

<ViconicIcon name="ti:home" className="w-8 h-8 text-blue-500" />
Enter fullscreen mode Exit fullscreen mode

Change size:

<viconic-icon icon="ti:home" style="font-size: 32px;"></viconic-icon>
Enter fullscreen mode Exit fullscreen mode

Kit Builder

A Kit is a custom collection of icons you pick for a specific project. Each Kit gets its own CDN link — so you only load exactly the icons your project needs.

To create a Kit:

  1. Go to viconic.dev/kits
  2. Click "Create Kit" and give it a name and prefix
  3. Browse icons and click "Add to Kit"
  4. Hit the update button to generate your private CDN link

Then use your Kit CDN in any project:

<script src="https://cdn.viconic.dev/kits/YOUR_PREFIX/loader.js"></script>
Enter fullscreen mode Exit fullscreen mode

This is especially useful if you work offline — build your Kit once, then use the generated CDN anywhere without needing to hit the main Viconic CDN each time.

SVG Editor

Viconic has a built-in SVG editor at viconic.dev/svg-viewer. No need to open a separate tab.

You can:

  • Upload any SVG file or load an icon from the library
  • Edit the SVG code with syntax highlighting and live preview
  • Change background (grid / light / dark)
  • Flip, rotate, or optimize the SVG
  • Export as SVG, PNG, React component, or React Native component

SVG files are never sent to the server — everything runs in your browser.

Keyboard Shortcuts

  • Ctrl+K / ⌘K — Focus search (anywhere on the site)
  • ← → — Navigate between icons (inside icon detail modal)
  • Esc — Close any open dialog
  • Drag mouse — Marquee select multiple icons (Select mode only)

FAQ

Is it free?
Yes. Every icon collection on Viconic is free. Most use MIT or Apache 2.0 licenses which allow commercial use. Check the license on each collection's detail page.

Does the CDN have bandwidth limits?
No limits for normal usage. Icons are served through a global edge network.

Does the SVG Editor store my files?
No. Everything runs client-side. Your SVG files never leave your browser.

Which frameworks are supported?
HTML, React, Next.js, Vue, Angular, Svelte, React Native — anything that supports SVG.

Resources

Top comments (0)