Icon Library & Link Generator for Notion

Fast, searchable, customizable icons ready for Notion

Sole frontend developer for an icon utility app featuring lazy loading, dynamic filters, live previews, and one-click Notion link copying. Migrated codebase from React to Next.js.

Next.jsReactTypeScriptMUI
Feature overview demonstrating icon filtering and copying

Dynamic filtering, search, and one-click copying in action

Beyond Emojis in Notion

Notion is a fantastic tool, but relying solely on standard emojis for page icons can become repetitive, visually distracting, or simply lack the desired aesthetic simplicity. Users needed a way to easily find and use clean, consistent icons that integrate seamlessly. The goal of this project was to create a dedicated web application offering a large library of simple, aesthetic icons specifically designed and formatted for easy copy-paste use directly into Notion pages via generated links.
My Role & Contributions
As the sole frontend developer, I was responsible for all aspects of the UI/UX design and implementation, feature development (filters, search, copy mechanism, etc.), the framework migration from React to Next.js, performance optimization, and ensuring a fully responsive design.
  • Led the full migration from React to Next.js for improved SEO and performance
  • Designed and implemented all UI/UX aspects of the application
  • Built the complex filtering and search functionality from scratch
  • Created the SVG data URI generation and clipboard copy mechanism
  • Implemented responsive design to ensure seamless experience across all devices
  • Optimized performance for handling thousands of icons with minimal load time

Key Features

  • Category filter with bold variant toggle

    Color picker with smart background contrast

    Live search results with instant filtering

  • Icons loading progressively during scrolling

  • Clipboard copy confirmation with usage instructions

  • Responsive design adapting to different screen sizes

From React to Next.js: Technical Migration & Performance

What started as a standard React application evolved through significant technical improvements to create a more performant, SEO-friendly user experience:

✨ Highlights
  • Led full migration from React to Next.js without prior Next.js experience
  • Built complex filtering system with multiple interactive controls
  • Implemented optimized rendering for thousands of icons
🔍 Challenges
  • Learning Next.js framework while migrating an existing React application
  • Optimizing rendering performance when displaying thousands of interactive SVG icons
  • Implementing proper SVG manipulation for dynamic color and size changes
🛠️ Skills Demonstrated
  • Next.js: for improved SEO and SSR capabilities
  • React: for component-based UI architecture
  • Virtualization: for efficient rendering of large icon collections

Key Takeaways

  • Gained deep experience with Next.js and its SSR/SSG capabilities
  • Mastered virtualization techniques for rendering large collections efficiently
  • Developed expertise in SVG manipulation for dynamic styling
  • Learned effective state management patterns beyond Redux
  • Refined approaches for building intuitive, multi-parameter filtering UIs
  • Improved understanding of progressive enhancement for different device capabilities

Technologies Used

⚙️ Core Stack
  • Next.js
  • React
  • TypeScript
  • CSS3 (Flexbox/Grid)
  • HTML5
📦 Libraries
  • MUI
  • react-virtualized (virtualization)
  • React Color (color picker)
🔧 Tools
  • Git
  • Yarn
  • Webpack
  • DigitalOcean Droplet (deployment)
← Back to All ProjectsContact Me