Interactive Icon Font Creator: Design & Download SVG Fonts

Interactive Icon Font Creator: Design & Download SVG FontsInteractive Icon Font Creator: Design & Download SVG Fonts

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Anil k

pro

• Feb 27

Icon Font Creator is an interactive web app built with Figma Make that lets users draw custom icons and instantly generate a downloadable SVG font.

Users can sketch individual icons, preview them as a live font, type custom text using their created characters, and export a usable SVG font file.

This project explores creative tooling, real-time preview interaction, and generative workflows powered entirely by Figma Make.

https://unity-crown-39927166.figma.site/

figmamakeathon

Nabeel M. Kasim

pro

• Mar 1

Live font preview makes the value obvious fast. Clever bridge between drawing and exporting without context switching.

Abhiram Tinguria

• Feb 27

This is clever. Turning icon sketching into a live font preview solves a real workflow gap. Curious — how are you handling consistency across stroke weights and alignment?

Anil k

pro

• Feb 27

Appreciate it 🙌

Consistency was a big focus. I added a normalization layer where every sketch snaps to a shared baseline + cap-height grid, with proportional stroke scaling and bounding-box alignment.

The goal wasn’t just exporting icons, but making them behave like a cohesive type system.

Anil k

pro

• Feb 27

Now you can try this - https://prnt.sc/DYeRSvxNfoR3

Abhiram Tinguria

• Feb 27

That makes a lot of sense. Treating icons like a type system instead of isolated assets is what creates real visual rhythm. The baseline + cap-height alignment explains the consistency.

Révolté

pro

• Mar 27

Can an AI tool understand your aesthetic or just simulate it?

I fed Google Stitch one prompt. No code. No Figma.

Full dark UI. Filterable gallery. Cyber-brutalist system. Mobile-responsive. Figma export. One shot.

~70% of my vision. But the soul wasn't there.

I had to push it: → "More chaotic" → "Denser. Less whitespace." → "Typography more system-like."

Iteration requires taste. Taste isn't in the prompt.

Stitch is a validated idea machine. The Figma export alone is worth it for MVPs.

But the freelancers who win? The ones who know exactly what to ask and why.

The prompt is the brief. Write it like one.

googlestitch vibedesigning

Akin Gundogan

• 2d

Wow, obviously design is awesome but I also liked what you're saying in the post "The prompt is the brief. Write it like one." that summarizes your approach!

Jan Mráz

pro

• Mar 27

3 Must-know Figma Plugins, part 14

Figma uidesign ux UI Design UX Design

Crina Iolanda

• Mar 27

I studied the world’s best mobile patterns on Mobbin. From health rings to social matching, to build a research-backed moodboard. I was inspired by apps like Greg, Apple Health, Shop and Bumble. I translated these high-end UX behaviors into a cohesive design system that prioritizes clarity and local trust.

Then I jumped with all my ideas into Figma Make. Here it comes Pottr, a fusion between quantified plant health with a social graph. It includes plant care tracking but it doesn't stop there. It’s an ecosystem where you match with neighbors based on shared plants, trade seeds or tools, and request community care when you travel. It’s a premium, hyperlocal take on sustainability with custom branding and a neighborhood "open-world" map.