Professional

Notion Icon Library

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.js
React
TypeScript
MUI

Discuss this project

Feature overview demonstrating icon filtering and copying — Dynamic filtering, search, and one-click copying in action

Context

Beyond Emojis in Notion

Why this work mattered and the environment it lived in.

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.

Snapshot

Highlights, Challenges, Skills

A concise readout for quick evaluators.

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

Role

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 Contributions

Features & Outcomes

Open narratives that explain the impact of each slice of work.

Contribution 01

Live Filtering & Search

Instantly refine the icon library using intuitive controls

Users can instantly refine the icon library with multiple flexible filter options:

Size Adjustment: A slider control allows users to adjust icon size in real-time, with the preview updating instantly to show exactly how the icon will appear in Notion.

Color Selection: Users can select colors via an intuitive color picker or enter precise hex codes. The application features a smart background switch that automatically changes the preview background for optimal contrast when dark icon colors are selected.

Text Search: The search field filters icons by name with each keystroke, allowing users to quickly find specific icons without hunting through the entire library.

Categories: Icons are organized into logical, predefined categories that can be selected from a dropdown menu, making it easy to browse related icons. Some icon sets even support a bold variant filter.

Category filter dropdown with bold option enabled — Category filter with bold variant toggle

Color picker interface with smart background switching — Color picker with smart background contrast

Search filtering results updating in real-time — Live search results with instant filtering

Contribution 02

Efficient Icon Browsing

Displaying thousands of icons without impacting performance

Displaying potentially thousands of icons without impacting performance was crucial. I implemented a solution using a specialized React library for lazy loading and virtualization, ensuring a smooth browsing experience even with a vast icon set – icons load progressively as the user scrolls.

This implementation required careful consideration of:

Virtualized rendering to minimize DOM nodes
Progressive loading of SVG assets to reduce initial load time
Efficient state management to prevent re-rendering during filtering
Memory management to prevent leaks with large icon sets

The result was an interface that remains responsive even when displaying and filtering thousands of icons, with smooth scrolling and minimal wait time between filter operations.

Demonstration of lazy loading when scrolling through icons — Icons loading progressively during scrolling

Contribution 03

One-Click Copy for Notion

Instantly copy specially formatted data URI links

The core feature provides instant utility with no friction. Clicking any icon immediately generates and copies a specially formatted data URI link to the user's clipboard. This link contains the SVG data adjusted for the selected size and color, ready to paste directly into Notion.

The technical implementation involved:

Dynamically generating SVG data URIs with the user's selected parameters
Encoding SVG content properly for use in URLs
Implementing a secure, cross-browser clipboard API solution
Providing clear visual feedback through a notification system

A confirmation notification appears after copying, guiding the user to paste the link directly into Notion's icon input field. This streamlined workflow makes it incredibly easy for users to customize their Notion workspace.

Notification confirming icon link copied to clipboard — Clipboard copy confirmation with usage instructions

Contribution 04

Responsive Design

Seamless experience across all devices

Ensuring a consistent, intuitive experience across all devices was paramount. I implemented a fully responsive layout using modern CSS techniques including Flexbox and Grid, ensuring the filters and icon grid adapt perfectly from large desktops down to mobile screens.

Key responsive design considerations included:

Reorganizing filter controls for optimal use on small screens
Adjusting the icon grid to maintain usability on mobile devices
Ensuring touch targets were appropriately sized for mobile users
Optimizing load times for mobile networks

This approach ensured that users could effectively find and use icons regardless of their device.

Interface adapting from desktop to mobile sizes — Responsive design adapting to different screen sizes

Technical Deep Dive

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:

Framework Migration: Initially built with React, Redux (for state management), and MUI, I identified opportunities to improve performance and, critically, Search Engine Optimization (SEO). I spearheaded the migration of the entire application to Next.js. Despite having no prior experience with the framework, I learned it quickly and executed the migration successfully, leveraging its server-side rendering capabilities for better performance and SEO.

Performance Optimization: Beyond the Next.js migration, tackling the "thousands of icons" display challenge required researching and implementing a virtualization library, significantly improving initial load times and scrolling performance through windowing techniques that only render visible icons.

Build & Performance Improvements: The migration to Next.js directly addressed two critical goals - improved load times and SEO optimization. I leveraged Next.dynamic for on-demand loading of SVG icons, which prevented loading the entire icon library at once and significantly improved initial page load. Additionally, Next.js's static generation capabilities allowed us to pre-render pages for optimal SEO, making the application discoverable and providing faster first contentful paint for users. These improvements resulted in a more responsive application with better search engine visibility.

Growth

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

Toolkit

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 Projects Contact Me