How to Use IconVaultKit

Go to Browse Icons and type any keyword into the search bar. Results update live as you type. Try words like arrow, home, user, settings, or heart.

Use the library dropdown to narrow results to a specific icon set. Choose from 92+ libraries including Feather, Heroicons, Tabler, Material Design, Phosphor, Lucide, and more. When no library is selected, icons from all libraries appear.

Use the category sidebar on the left (desktop) or the scrollable category pills below the search bar (mobile) to browse icons by topic. Categories include Arrows, Social Media, Files, Users, Commerce, Weather, Security, and more. Clicking a category loads relevant icons instantly.

Select a library from the filter without typing anything in the search bar to browse all icons in that set. This is useful when you want to explore what a library offers.

Pick any color using the color picker or enter a hex value. You can save frequently used colors as named presets so they are available on every icon you open.

Switch between Fill and Outline mode. Adjust the stroke width slider to add or thicken the outline on any icon regardless of style. Use the size slider to preview the icon at different scales. Rotate freely from 0 to 360 degrees using the rotation slider, and flip the icon horizontally or vertically.

The icon is rendered as a solid filled shape. Increasing the stroke width adds an outline border on top of the fill. This works well for adding definition or depth to bold icons.

The fill is removed and only the stroke is drawn. This is ideal for line-style icons or for converting a fill icon into a lightweight outline version. The stroke width slider controls how thick the lines appear.

Copies the Iconify icon ID to your clipboard, for example mdi:home or feather:arrow-right. Use this string directly in code with the @iconify/react package:

import { Icon } from "@iconify/react"

<Icon icon="mdi:home" className="h-6 w-6" />

Copies the raw SVG markup to your clipboard. Paste it directly into Figma, Sketch, Illustrator, or your HTML. The SVG reflects the current color you have selected.

Copies the icon as a PNG image to your clipboard at the current preview size. You can paste it directly into design tools, documents, or messaging apps. Note: requires a browser that supports image clipboard (Chrome and Edge work best).

Copies a ready-to-use React functional component to your clipboard. The component accepts size and className props. Paste it directly into your project as a standalone icon component with no extra dependencies.

export function HomeIcon({ size = 24, className = "" }) {
  return (
    <svg width={size} height={size} ...>
      {/* icon paths */}
    </svg>
  )
}

Copies a Base64-encoded data URL of the SVG. Paste it directly into a CSS background-image or an HTML img src without needing to host the file anywhere.

/* CSS */
.icon { background-image: url("data:image/svg+xml;base64,...") }

/* HTML */
<img src="data:image/svg+xml;base64,..." alt="icon" />

Downloads the icon as an SVG file with your chosen color applied. SVG is a vector format so it scales to any size without quality loss. Best for web, apps, and design tools.

Downloads a pixel-perfect PNG at your chosen size (24px to 512px). Choose a larger size for high-resolution displays or print. The PNG includes your color and style settings.

Click the Save to Favorites button at the bottom of the detail panel to bookmark an icon along with its current color and style settings. Favorites are saved in your browser and stay available across sessions on the same device.

Click the Saved button in the top-right corner of the Browse Icons page to open your favorites panel. From there you can select any saved icon to re-open it with its saved settings.

Icons you download are automatically added to your recent history. They appear in the Saved panel under a Recent section so you can quickly find icons you were working with.

All favorites and recent history are stored locally in your browser using localStorage. Nothing is sent to a server. Clearing your browser site data will remove them.

Use the Rotation slider in the Style tab to rotate the icon to any angle between 0 and 360 degrees. The preview updates in real time.

Mirrors the icon along the vertical axis. Useful for directional icons like arrows, chevrons, and cursors where you need both left-facing and right-facing versions.

Mirrors the icon along the horizontal axis. Useful for icons like upload or download arrows where you need the opposite direction.

Rotation and flip are baked into SVG and PNG exports so the downloaded file matches exactly what you see in the preview.

The Logo Maker lets you combine any icon with a brand name, tagline, and background to create a logo. Four layouts are available: Icon Top, Icon Left, Icon Only, and Text Only. Backgrounds can be a solid color, a gradient, or transparent.

Go to the Logo Maker page from the navigation. If you already have an icon selected in the Browse Icons page, click the Make Logo button in the detail panel to open the Logo Maker with that icon pre-loaded.

Use the four control tabs: Icon (search and select an icon, set size and color), Text (brand name, tagline, font size, color, weight), Background (solid, gradient, or transparent), and Layout (arrange elements, set padding). The canvas updates in real time as you make changes.

Click Copy PNG to clipboard or choose a download size: 512px, 1024px, or 2048px. All rendering happens in your browser using the Canvas API. The exported PNG reflects exactly what you see in the preview, including any transparency.

IconVaultKit uses the Iconify ecosystem. To use icons directly in a React or Next.js project, install the package:

npm install @iconify/react

Copy the icon name from the Export tab and pass it to the Icon component. You can control size and color via className or style:

import { Icon } from "@iconify/react"

// Basic usage
<Icon icon="mdi:home" />

// With Tailwind CSS
<Icon icon="feather:arrow-right" className="h-5 w-5 text-blue-500" />

// With inline style
<Icon icon="tabler:star" style={{ fontSize: 32, color: "#6366f1" }} />

Iconify has packages for Vue, Svelte, Angular, and plain HTML/CSS. Visit iconify.design for framework-specific installation instructions. The icon IDs you copy from IconVaultKit work identically across all Iconify packages.