On Building HackerNoon's Pixel Icon Library

In the current digital era of rapidly evolving designs, every minor detail can significantly affect the overall User Experience (UX). Icons, for instance, can notably enhance a product's visual appeal.

What began as an effort to diminish our reliance on third-party resources has turned into a more significant venture.

This open-source collection of Pixelated Icons was designed using a 24px grid for perfect alignment and consistency, thereby enriching your web/app/product/page/life experience. Inspired by HackerNoon’s retro design vibe, these icons encapsulate the essence of the internet's golden era.

The Concept Behind Our Pixel Icon Library

As designers, we often seek solutions to streamline our processes.

At HackerNoon, we initially turned to Font Awesome icons to add the necessary functionality and aesthetics to the site. These icons served us well by offering consistency and a wide range of options. However, by relying on a pre-existing library, we could no longer service our brand identity as it evolved.

Our founders, David and Linh, initially proposed the idea of transitioning to an in-house Icon Library during one of our product meetings. The first phase focused on replacing the existing Font Awesome icons on HackerNoon with our very own. The latter focused on sharing these icons as an Icon Library for the community.

This transition allowed us to challenge ourselves creatively. While the journey was not without its challenges, each pixelated icon we crafted allowed our brand's personality to shine through. These pixelated icons have become more than mere visual elements; they are now a reflection of HackerNoon.

Designing Our In-House Icons: From Concept to Creation

Creating an icon library was an exhilarating journey through creativity, precision, and problem-solving. Here’s a peek into the process behind crafting these pixelated icons, imbued with HackerNoon’s essence.

1. Defining the Design Language

2. Ideation & Sketching

3. Designing & Bringing Ideas to Life

4. Preparing for Community Publishing: Figma & GitHub

Defining the Design Language

Our journey began by defining a cohesive design language. This involved deciding on the level of detail, illustration style, and mood we wanted our icons to convey. Establishing this foundation ensured consistency throughout the library.

• For the level of detail, we opted for a minimalist approach and aimed for clean icons. We ensured the icons would not create visual clutter when scaled, which helped us eliminate unnecessary details.

• Our Illustration Style was particularly inspired by the HackerNoon logo. The retro, 80s-inspired pixel block design style is perfectly in line with our brand. This ensured the design language was consistent with the overall visual identity. We call them the Pixelated Icons.

• To maintain consistency, we opted for a 24px grid. (A 24px grid is considered ideal when designing icons since most system icons are displayed at 24x24). This enabled us to create icons for viewing at 100% scale with pixel-perfect accuracy by providing us with:

  • A 22px live area for icon content

  • And 1px of padding surrounding the live area

Ideation & Sketching

The ideation process began with listing the functions represented by the current icons and their respective use cases. We then brainstormed how we could redesign icons for these functionalities. And then followed up with quick doodles and sketches. These rough sketches helped us visualize the icons on a smaller scale, allowing for faster iterations and discarding of ideas that didn't fit.

Designing the Pixelated Icons

The next crucial step was converting these hand-drawn concepts into pixelated icons. This phase primarily involved using Adobe Illustrator to create these pixelated icons and subsequently exporting them in different formats and sizes to test scalability.

• We began by importing these rough sketches into Illustrator.

• We then created a 24px grid using the Grid Tool to begin the pixelation process.

• We utilized the Live Paint Tool and filled out each square that had >50% of space occupied.

• Once we were satisfied with the design, we expanded the Live Paint (Object Menu → Expand) to form shapes.

• Next, we utilized the Shape Builder Tool to simplify these shapes, and voilà! Our pixelated icon was ready.

• We then exported the icon as SVG, PNG at 12px, 16px, 24px, and 48px. (We selected these sizes based on the use cases we listed during the ideation phase)

• Moreover, we documented specific details about the icons, such as their type. Currently, we have three types: Solid (Fill), Regular, and Light Icons. There is another type for those icons that don't fall under the first three, namely the Brand Logos. (Documenting icons helps maintain design consistency and facilitates future updates)

Preparing for Community Publishing: Figma & GitHub

Once we had exported all the icons in the desired formats, we organized these icons and prepared them for community publishing. We chose Figma Community File and a GitHub Repository for this purpose.

Here’s how we prepared everything:

• Grouping and Organizing: We organized the icons into four sets based on their type: Solid, Regular, Light, and Brand Logos, making it easier for users to search for specific icons.

• Naming Convention & Folder Structure: We established a clear and descriptive naming convention to make it easier for users to identify icons. For the GitHub Repo, we opted for a folder structure as follows: file-type/color-theme(if any)/size/icon-type/icon-name.file-extension (e.g.: PNG/For Dark Mode/24px/Solid/Ad.png and SVG/Solid/Ad.svg)

• Creating Component Library & Defining Variants in Figma: Figma's component system allowed us to create master components for each icon. We created size variants for every icon, enabling users to scale the icons directly through instances without any hassle. This streamlined the process of updating icons and ensured consistency across different design files.

• Setting Up GitHub Repository: We created a dedicated GitHub repository for our Pixel Icon Library, allowing us to manage and share our icons with the wider design and development community.

• Documentation on Github: We crafted a comprehensive README file in our GitHub Repo. This included an introduction to the Pixel Icon Library, information on all possible methods to use these pixelated icons in your project, licensing details, well-defined contributing guidelines, and other special considerations.

• Documentation on Figma: For Figma, we created a separate About Page, which included an in-depth introduction to the Pixel Icon Library and a tutorial on using the component library and variants. We also included a list of icons with their names for easy reference.

• Licensing: We clearly defined the licensing terms for our icon library. The Pixel Icon Library GitHub Repo & Figma File are licensed under the CC BY 4.0 License, which allows usage with proper attribution to HackerNoon.

The Finished Product:

Our journey to create the Pixel Icon Library has been filled with creative exploration, challenges, and growth. From our humble beginnings using Font Awesome icons to using In-House icons site-wide and, finally, the creation of our very own Pixel Icon Library.

This process has taught us that icons are not merely symbols but are storytellers in their own right.

Join us on this creative journey and be among the first to try out the Pixel Icon Library by HackerNoon.

Stay Creative, Stay Iconic.