Glyphr — AI Icon Generator

Vidit Patil · B2B AI Product Designer

CASE STUDY 03 — SIDE PROJECT · BCG DESIGN STUDIO

Designed, developed and deployed an AI icon generator that finally made BCG's icon set scalable.

BCG Design Studio needed a way to generate icons that respected the signature arc of its design system. Glyphr is that tool — live, tested, and used internally.

PROJECT: Glyphr · STACK: Claude API · Vercel · ITERATIONS: 12+ · STATUS: Live

THE PROBLEM

BCG Design Studio's proprietary icon set has a signature arc — a defining stroke that makes it distinctly BCG. But the set was incomplete. Designers defaulted to open-source icons that broke visual consistency. We needed a way to generate new icons that matched the system.

BCG DS icon set — distinctive arc signature, limited coverage.

THE SOLUTION

Started with a machine. Ended with a tool.

V1 — ICONFORGE

The machine

Gameboy aesthetic. Form + Feel dual input. Tactile, bold UI. Proved the concept worked.

V2 — REFINEMENT

The tool emerges

Cleaner interface. DS Style toggle added. Tone quadrant for feeling input. Industry context layer.

FINAL — GLYPHR

Production ready

Full pipeline. Arch drawing for DS style. SVG export. Used internally at BCG. Feedback loop active.

THE PIPELINE

Every query runs through a decision tree before Claude generates anything. The inputs you give change which path the system takes.

DS STYLE OFF

Standard generation. Claude receives the icon subject, feeling, style, and count. Returns clean SVG paths with no BCG arc constraints.

DS STYLE ON · ICON EXISTS

System checks the BCG icon repository first. If a matching icon exists in the requested style (filled or stroke) — it returns the original. No generation needed.

DS STYLE ON · ICON EXISTS IN OPPOSITE STYLE

If the icon exists in stroke but filled is requested — system retrieves the stroke version and attempts a fill conversion before returning. Preserves the arc signature.

DS STYLE ON · ICON NOT FOUND

No match in repository. Claude generates from scratch with BCG arc geometry rules injected into the prompt. The arch placement from the drawing tool is embedded as a path constraint.

THE ARCH BUILDER

Users place the BCG signature arc on the icon canvas before generation.

UNDER THE HOOD

Every generation is a structured prompt — not a simple text-to-image call. User inputs are assembled into a layered query: the describe field sets the subject, the feel field modifies stroke personality, DS Style injects BCG arc geometry rules, and the style/weight/count parameters constrain the output. Claude returns SVG code — parsed, validated, and rendered directly in the browser.

The prompt layer

Inputs are combined into a single structured prompt with hierarchy: subject → feeling → system rules → format constraints. No vague requests. Every parameter is explicit.

The output layer

Claude returns raw SVG. Glyphr parses the paths, validates structure, and renders to canvas. Invalid output is caught and regenerated. Clean SVG every time.

CLAUDE API VANILLA JS SVG PARSING VERCEL PROMPT ENGINEERING

THE CRAFT

The Gameboy UI wasn't an accident. Glyphr was designed to feel physical — knobs, toggles, buttons. The aesthetic says: this generates things. As the tool matured, the UI simplified. But the tactile intention stayed.

Glyphr — current version. Cleaner than V1, still tactile.

Currently live and collecting feedback from designers at BCG and beyond. 12+ iterations. More coming.

12+ versions shipped · Live on Vercel · Feedback loop active