Learnings from Vibecoding #1
Things I learned while building an icon library
Building an icon library taught me about fuzzy search, Levenshtein distance, and keyword mapping
I didn't know how to code. I was just a designer. But I had one big problem: Finding and customizing icons was painful.
I had to open many websites, search, download, clean the file, fix it, then put it in Figma. And make sure about attribution. Then do it all over again for every icon. It was slow and boring. It broke my flow every time.
So I asked myself:
What if there was just one place with all the icons? And what if I could change the size or color right there and paste it into Figma?
No clue how, but I made it 💯. I used Iconify API to fetch 20M+ icons and 250+ premium libraries. All in one place. You can customize size, stroke, color, copy-paste, and see which icons need attribution.
Later, I even made a Figma plugin. Now over 5,000+ designers use it worldwide. That still feels crazy to me.
While building this, I found some coding words I had never heard before. Three of them stayed with me:
1. Fuzzy Search
Imagine you write setings with one "t" missing. The computer still shows the settings icon. That's fuzzy search. It's like the computer says: "I know what you mean!"
Learn more about Fuzzy Search2. Levenshtein Distance
This word is long, but the idea is small. It tells you how many changes you need to turn one word into another.
Example: you type nate instead of note. The computer changes a to o. Just one change. Distance = 1.
It's like autocorrect for icons.
Learn more about Levenshtein Distance3. Keyword Mapping
This is about "other names" like synonyms. Type gear, you still see the settings icon. Type trash, you see delete.
Easy trick, but very useful.
Learn more about Keyword MappingWhat I took away
I started knowing nothing. Couldn't even open a terminal. But curiosity pushed me through.
I didn't know coding. I only had curiosity.
By trying, I found new words and new ideas and made something real that people use.
Today, over 5,000+ designers use the plugin worldwide, with thousands more using the web app daily. It has been downloaded and used across 120+ countries.
The best way to learn is by fixing a problem you care about. You'll either make it work or learn something new along the way.
Sometimes you don't need to know everything. You just need to start.
Key Takeaways
- The Icons plugin now serves over 5,000+ designers worldwide across 120+ countries
- Fuzzy search allows users to find icons even with typos or approximate spellings
- Levenshtein distance is the algorithm that measures similarity between search terms
- Building projects to solve your own problems often creates value for others
- You don't need to know everything before starting – curiosity and persistence are enough
Frequently Asked Questions
How many designers use the Icons plugin?
Over 5,000+ designers worldwide currently use the Icons Figma plugin, with active users in more than 120 countries. The web app has thousands of additional daily users.
What is fuzzy search and how does it work?
Fuzzy search is an approximate string matching technique that finds results even when search terms contain typos or spelling variations. For example, if you type "setings" (missing a 't'), the fuzzy search algorithm will still show you "settings" results.
What is Levenshtein distance?
Levenshtein distance is an algorithm that calculates the minimum number of single-character edits needed to transform one word into another. For instance, changing "nate" to "note" requires just one edit (a→o), giving it a Levenshtein distance of 1.
How can someone with no coding experience build a project like this?
Start by identifying a problem you personally face. Then research and learn incrementally as you build. I started without knowing how to code, but by focusing on solving my icon search problem, I learned fuzzy search, API integration, and more along the way.
About the Author
Chandu Machineni is a product designer and creative coder based in Hyderabad, India. He has built 15+ interactive projects and design tools, including the Icons plugin used by 5,000+ designers worldwide. He specializes in combining design with code to create practical, user-friendly tools.
Check out the icon library: