Usage

Drop into any app

Same input always produces the same icon. Use the URL, embed the SVG, or generate client-side.

HTML

<img src="https://icofy.vercel.app/api/icon/alice?size=128" alt="alice" width="64" height="64" style="image-rendering:pixelated" />

JavaScript

// Point any <img> at the endpoint img.src = `https://icofy.vercel.app/api/icon/${encodeURIComponent(user)}?size=128`; // Or fetch as blob const blob = await (await fetch(url)).blob();

React

function Avatar({ username, size = 64 }) { const src = `https://icofy.vercel.app/api/icon/${encodeURIComponent(username)}?size=${size*2}`; return ( <img src={src} alt={username} width={size} height={size} style={{ imageRendering: "pixelated" }} /> ); }

With safe border

<img src="https://icofy.vercel.app/api/icon/alice?size=128&pad=1" alt="alice" style="border-radius:50%;image-rendering:pixelated" />

API

Simple URL endpoint

No authentication. Cache forever. Point an image tag at the path and you are done.

GET https://icofy.vercel.app/api/icon/{input}?size={px}&bg={hex}&grid={4-7}&style={0-3}&pad={0|1}

Param

Type

Notes

input

string

Any UTF-8 string, URL-encoded. Required. Same input always yields the same icon.

size

integer

Output size in px. Default 80. Max 512.

string

Background hex without #. Omit for transparent.

grid

integer

Density 4–7. Default 5.

style

integer

0 Classic · 1 Dense · 2 Sparse · 3 Border. Omit for auto.

pad

0|1

Safe border padding. Use 1 when the image may be cropped or zoomed.