Headless Icon API

One URL.
Every Icon.
Zero Setup.

Brand logos, Material icons, and UI elements — all served as crisp SVGs via a single API endpoint. Drop it anywhere.

code Start Building grid_view Browse Icons
10k+
Icons
<50ms
Latency
Free
Forever
Live Generator
icon preview
64 × 64 · SVG
IMG URL
HTML
CSS
React
Why IconFlow

Built for speed
& simplicity.

01
bolt
Edge-Deployed

Runs on Vercel Edge Functions for sub-50ms latency across every continent. No cold starts.

02
palette
Any Color, Any Size

Pass a hex code or color name directly in the URL. Icons render pixel-perfectly at any size from 16 to 512.

03
code
Zero Installation

No npm packages, no config files. Works as a plain <img> src in any framework — HTML, React, Vue, Webflow.

04
auto_awesome
Smart Fallbacks

High-fidelity brand SVGs for top logos, then seamless routing to the 10k+ Iconify network for everything else.

05
tune
Multiple Formats

Use as an <img> source, CSS background-image, inline SVG code, or React component prop. One API, all workflows.

06
lock_open
Completely Free

No API keys, no rate limits for normal use, no credit card. Open-source and built to stay free forever.

Developer Manual

Integrate in
minutes.

html HTML & No-Code

The easiest method. Drop a URL into any <img> tag. Works in Webflow, WordPress, Framer, and raw HTML — no build step required.

HTML 
<!-- Simple image embed -->
<img
  src="https://icon-flow-pi.vercel.app/api/render?q=google&color=000000&size=32"
  alt="Google"
  width="32"
/>

code React & Next.js

Build a dynamic icon component driven entirely by props. Works with any React-based framework including Next.js, Remix, and Vite.

JSX 
const Icon = ({ name, color = '000000', size = 24 }) => (
  <img
    src={`https://icon-flow-pi.vercel.app/api/render?q=${name}&color=${color}&size=${size}`}
    width={size}
    alt={`${name} icon`}
  />
);

// Usage
<Icon name="github" color="000000" size={24} />

brush CSS Backgrounds

Use as a background-image for styled buttons, pseudo-elements, or any element that needs an icon without extra markup.

CSS 
.btn-send {
  background-image: url('https://icon-flow-pi.vercel.app/api/render?q=send&color=000000&size=20');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  padding-left: 36px;
}

tune API Parameters

All parameters are passed as query strings to the /api/render endpoint.

Parameter Type Default Description
q string circle Icon name or brand (e.g. rocket, google)
color string 000000 Hex code without # (e.g. FF0000) or color name
size number 24 Width and height in pixels. Integer (e.g. 48)