Developer
Sign in

Unify

App icons

Every app's favicon, home-screen icon and in-app logo come from one function — the same family, each in its own colour.

Developer
SSO
Coready
Studio
Lerne
Crate
Folio
Spentry

Anatomy

ShapeA square with continuous 22.37% corners (Apple's ratio), so it sits naturally on iOS and macOS.
FillThe app's accent hue as a diagonal gradient: lighter top-left, deeper bottom-right.
SheenA soft white radial highlight from the top and a hairline inner edge — the glass touch.
GlyphOne white lucide icon, 2-unit stroke on a 24 grid, at half the icon's size. One idea, no letters.

Generator

Try a hue and a glyph; download the SVG. In an app, the same spec goes in lib/brand.ts.

Glyph
120
64
40
32
16

In an app

app/icon.tsx + app/apple-icon.tsx
// app/icon.tsx — SVG favicon
export const contentType = "image/svg+xml";
export default function Icon() {
  return new Response(appIconSvg(ICON), { headers: { "Content-Type": contentType } });
}

// app/apple-icon.tsx — 180×180 PNG for iOS
export const size = { width: 180, height: 180 };
export const contentType = "image/png";
export default function AppleIcon() {
  return new ImageResponse(<img src={appIconDataUrl(ICON)} width={180} height={180} alt="" />, size);
}