How an idea has been converted as a project. www.potlabicons.com
In this article, I will share the story of the Potlab Icons. Basically, I’m a front-end developer and designer. I’m very much interested in icons and animation.
The idea
I was curious about developing applications or websites like color palettes, icons collections. So exploring the sites more and I thought it should be a unique way to show something to the world.
Mainly focus on designers and developers. These people only. I’m helping to reduce the time of web designers and developers. Also, I thought the site should clean and neat.
The vision
Finally got the idea about animated svg icons. Why because SVG icons, it present every places like illustrator, Adobe XD, figma also code format of svg can we used in web development (dashboard, landing pages, navigation, websites)
The challenges ❤️🔥
Once started the project has an issue in project management. Because this is my first project which will develop my own.
- Explore
Exploring the animations, which will use the svg and CSS. In the beginning I didn’t know where to start and where to finish. Slow and steady keep eyes on how the svg points and how to apply animations on the svg path, rect, circle etc. - Scaling the collection
Difficult to create more icons. Also maintains the consistency in creating icons. First version, I’m not considering the icon packs and category of icons. I’m focusing on developing the complete website.
In the second version, focusing on the categories of icons and search, icon consistence. Now the project has reached the shape.
Being unique
As I shared, the application or website should be unique. UNIQUE means here, fully animated icons using SVG and CSS. There is no additional library needed to integrate.
You can add animated icons in your project, directly through Text editor (VS Code, Atom, brackets, notepad++). Also change the stroke, fill, size etc. If you want to add an icon in any UI design tool (Adobe XD, Figma, Sketch) you can Copy & Paste the icon without animation.
- The result
I have achieved my goal of launching the website with minimal icons.
Big milestone:
When I launched the website in ProductHunt the Potlab Icons was the product of the day. Also got more appreciation for the project and feedback too.
Supporting tools are Figma, Adobe XD, Sketch, VS Code, Webflow
What’s next?
Design and animate more icons. More focus in the categories of icons. Definitely More animated in the coming days. 😀
Technical details
- Front end — React js and HTML5
- Backend — PHP
- Admin panel for managing icons
Buymeacoffee ☕
If you’d like to buy me a coffee, use the link below. For me it will motivate me to do something like this.
