For Developers

Code-Ready Icons

Scalable Vector Icons for Modern Interfaces

Direct Integration

Zero-Dependency SVG Injection

Drop IconFlow directly into your markup. Each glyph ships as a standalone, mathematically optimized SVG with pre-applied `currentColor` support, ensuring instant rendering without external HTTP requests or sprite bloat.

<svg class="icon-flow icon-flow--24 icon-flow--alert-triangle" 
     viewBox="0 0 24 24" fill="none" stroke="currentColor" 
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
  <line x1="12" y1="9" x2="12" y2="13"/>
  <line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>

Performance Note: Icons average 180–340 bytes gzipped. They inherit `width`, `height`, and `color` from parent containers automatically, eliminating layout shift on hydration.

Framework Support

Native React & Vue Components

TypeScript-ready components that integrate seamlessly with your existing UI library. Supports tree-shaking, dynamic props, and WAI-ARIA accessibility attributes out of the box.

⚛️

React Implementation

import { IconAlert, IconSearch } from '@iconflow/react';

export function SearchBar() {
  return (
    <div className="search-container">
      <IconSearch className="search-icon" size={20} />
      <input placeholder="Filter modules..." />
    </div>
  );
}

TypeScript Tree-shakeable

🟢

Vue 3 Composition API

import { IconAlert, IconSearch } from '@iconflow/vue';

export default {
  components: { IconSearch },
  setup() {
    return { IconAlert };
  }
}
<template>
  <div class="toolbar">
    <IconSearch :size="24" aria-label="Search" />
  </div>
</template>

Vue 3 SSR Ready

Package Management

NPM & Yarn Distribution

Manage your icon library like any other dependency. Version-locked releases, automatic updates, and zero-config bundler support via Vite, Webpack 5, and esbuild.

# Install the core package
npm install @iconflow/core

# Or with Yarn
yarn add @iconflow/core

Tip: Use the `@iconflow/cli` generator to export only the icons you actually use. Reduces bundle size by up to 94% compared to full sprite sheets.

2,400+ Optimized Glyphs

12ms Avg. Parse Time

0 Runtime Dependencies

Browse NPM Registry Read Migration Guide