How I Vibe Coded the Pixel Icon Library Website Without Learning to Code (Thanks, Cursor AI!)

As a designer, I've always been fascinated by the intersection of design and tech. The gap between designer and developer has always intrigued me—I just never expected to cross it this soon.

The Pixel Icon Library by HackerNoon started as a fun design project to create pixelated icons that captured the nostalgic essence of HackerNoon’s design language—but transforming a Figma Design file into a fully functional website myself? That was not on my card for 2025 until I discovered Cursor AI. Having the library open-sourced via GitHub, xFigma & NPM, we always wanted to make these icons more accessible to the community. The idea was simple: let’s build a website where designers and developers could browse, search, and download these icons for their projects.

The challenge? I had literally zero experience with coding.💀

Enter Cursor AI, an AI-powered code editor that quickly became my mentor and guide throughout this journey. Here's how I pushed past my limits from design to full-stack with AI assistance and some serious vibe coding.

Starting from Ground Zero

The first step was to establish what I wanted to build and take stock of what I already had:

• A library of pixel icons in SVG format.
• A Figma design for the website.
• A list of features I wanted on the website.
• Absolutely no idea how to bring it to life.

I started by setting up a website branch on the Pixel Icon Library GitHub Repository. Then I installed Cursor AI, and getting started was surprisingly straightforward.

Setting Up the Project with Cursor AI

Cursor UI

After installing Cursor, the next thing was to check for:

• GIT - for version control
• Node.js - for the NPM package

With the essentials installed, it was time to get my hands dirty. I cloned the repo to my system, opened the project folder in Cursor AI, and initiated a conversation with the built-in AI assistant.

Cursor Chat Window

Having had a solid experience with Claude, I opted for Claude 3.7 Sonnet in Agent Mode to guide me through the process.

With the first prompt, I briefly explained what I wanted to build and listed the required features along with a basic structure of the project, asking for suggestions on which framework(s) to prioritize efficiency and speed. Cursor helped with the necessary folder structure and suggested I stick to HTML & Tailwind for the project. It even created the files required for starting the project. Here’s how the folder structure looked after this:

├── index.html

├── src/

│ ├── style.css

│ ├── output.css

├── assets/

├── fonts/

├── scripts/

The next step was setting up Tailwind & starting with the UI.

Setting Up Tailwind CSS & Building The UI

To my surprise, Cursor messed up the Tailwind installation and mixed up commands from Tailwind v3.4 & v4.0. So, it was time for me to step up! I went over to Tailwindcss Installation Docs and followed these steps:

• To install Tailwind, open the terminal & run:

  npm install tailwindcss @tailwindcss/cli

• Import Tailwind in src/style.css file:

  @import "tailwindcss";

• To set up the Build Process, run:

  npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch

• Start using Tailwind in the HTML:

  <link href="/src/output.css" rel="stylesheet">

Once Tailwind was installed and the classes were ready to be used, I started defining colors, fonts, and other atoms for the AI agent before building out more complex molecules, organisms, and pages as per my Figma Design.

Then, I installed the Pixel Icon Library NPM Package to use the icons in the project. Here are the steps for installing the NPM Package:

• Install the package:

  npm i @hackernoon/pixel-icon-library

• Import the CSS in your HTML

  (I moved all the necessary icon font files to the /fonts folder for ease of access.)

  <link href="/fonts/iconfont.css" rel="stylesheet">

• To display an icon, add

  <i class="hn hn-icon-name"></i>

For the UI, I took an element-by-element approach to keep things organized and make it easy to revert to the previous iteration if needed.

Here’s the order :

• Nav Bar
• Footer
• Hero Section
• Search Bar
• Icon Cards & Grid
• Individual Icon Modal

I made sure to define paddings, margins, border radius, colors, and dimensions for all these elements while adding hover & click states as well. In addition to CSS properties, I included responsive behavior & interactions in the prompts as well.

Live Server Extension

Icon Data Challenge & Implementing Search Functionality

With the UI Elements in place, it was time for the real challenge: displaying all icons with their details - Icon Name, Icon Type Tag, and SVG Code while ensuring smooth search functionality. To overcome this, Cursor suggested a structured approach:

• Creating a JSON file with icon metadata and SVG code
• Loading the data from the JSON to display it efficiently.
• Implement search based on the icon name.
• Add search filters based on the icon type tags - solid, regular, brands/social-media-icons, purrcats

To further automate this process, I asked Cursor to create a script to add all the icon data to the /data/icons.json file.

icons.json file

Now, with the search working, search filters in place, and icon modal working as intended, all that was left to do was add remaining interactions to the UI, thorough testing, and deployment!

Deployment & Beyond

Once I was happy with the UI and thoroughly tested every functionality, it was time for the next challenge - Deployment!!!

Since the project was a static site, I needed a hosting solution that was fast, free, and easy to maintain. GitHub Pages was a no-brainer! It offered:

• Seamless integration with the GitHub repo, making deployment effortless.
• It’s free to use & best suited for static projects like this.
• Updates are super easy - all you need is a commit!

But before I could push all my code to the repository and deploy via GitHub Pages, I needed to clean up the code and check for any production issues. After a quick back and forth with Cursor, and a few tweaks, it was all ready for launch!

Here’s all you need to do to deploy your project via GitHub Pages:

• Push all your code to the GitHub repo & make sure it’s public
• Enabling GitHub pages for the repo
  • Go to Settings
  • Click on Pages
  • Set the Branch to “Website” (The branch where your code is. In my case, it was in website branch)
  • Click Save
• Optional:
  • Add your custom domain (Like I used: pixeliconlibrary.com)
  • Configure DNS (Thanks to Richard for helping me out with this)
• Wait for a few minutes & your website will be LIVE!

PIXELICONLIBRARY

Pixel Icon Library | Open-Source Pixelated Icons By HackerNoon

HackerNoon's Pixel Icon Library is an open-source collection of meticulously designed pixelated icons. Crafted on a 24px grid for perfect alignment, inspired by HackerNoon's retro design vibes, these icons capture the essence of internet's golden days.

GitHub Pages Settings Page

A Product to Be Proud Of

From designing pixel-art icons to vibe-coding my way into a fully functional site, this project pushed me beyond my comfort zone in the best way possible. Looking back, it was more than just building a website - it was about widening my creative horizons & realizing that with AI, the line between design and development is blurring faster than ever. And to me, it's like an endless road has opened up in front of my eyes.

Wanna take a peek at the code behind the website? Check out the GitHub repo!