The Art of Icon Design: Behind the Scenes of Webflow’s Iconography Redesign

November 30, 2024

Introduction

In the dynamic realm of digital design, icons are indispensable. These small but powerful elements contribute significantly to user experience, enhancing both visual consistency and usability.

At Webflow, we recently undertook a comprehensive rebrand and redesign of our product, where iconography played a pivotal role. This redesign wasn’t just about aesthetics—it was about creating a cohesive visual language that aligned seamlessly with our updated product interface.

In this blog, I’ll walk you through the intricate process of crafting over 800 icons, delving into the creative decisions, challenges, and technical considerations that brought our refreshed icon set to life. Let’s explore how achieving pixel perfection, ensuring usability, and maintaining brand identity came together in our design journey.

Why Icon Design Matters in Modern UX/UI

Icons are more than just visuals—they’re functional tools that bridge communication between users and interfaces. They:

Enhance clarity and reduce cognitive load.
Promote quick recognition of actions and features.
Serve as an extension of the brand’s identity.

For Webflow, reimagining our icons was an opportunity to refine how users interact with our product while ensuring that the design aligns with our evolving brand.

Our Icon Design Process: Simplifying Without Compromising

1. Streamlining Sizes for Better Consistency

In our previous icon set, multiple sizes (12×12, 16×16, 20×20, and beyond) created inconsistencies. For the redesign, we standardized the sizes to improve readability and cohesion:

16×16: Primary size for interface icons.
24×24: Used in sidebars and top navigation.
64×64: Reserved for empty UI states.

This simplification ensured visual harmony across the interface, making the user experience more intuitive.

2. Adopting a Stroke-Based Approach

The earlier icons featured filled designs with intricate details and multiple colors, which hindered readability at smaller sizes. To align with our updated UI typography, we adopted a stroke-based design:

Rounded outer corners with sharp inner edges for a unique, polished look.
Focused on minimalism to reduce visual noise.

3. Balancing Abstraction and Functionality

During the redesign, we considered using abstract, symbolic icons to create a modern look. However, this approach risked usability, especially for new users unfamiliar with the product. Instead, we prioritized clarity, ensuring each icon conveyed its meaning instantly.

Design Highlights: Crafting Iconography with Purpose

The Rocketship Icon: A Symbol of Excitement

One of our most recognizable icons, the rocketship (used for the “publish” function), represents the thrill of launching a new project. The challenge was to balance playfulness with functionality while ensuring the icon was cohesive with the rest of the library.

This design reflects motion and excitement, embodying the essence of Webflow’s creative spirit.

The Simplicity of the “Site” Icon

The “site” icon, a simple rectangle, embodies minimalism. It symbolizes a blank slate, representing the infinite possibilities of design. This straightforward approach underscores that sometimes less truly is more.

Iterating for Perfection: The Most Challenging Icons

Icons like “settings cog,” “AI help,” and “data binding” required extensive iterations to balance clarity and visual weight. For example:

The “data binding” icon underwent 50 design concepts before we reverted to a simplified plus icon.
These iterations ensured each icon was intuitive and fit seamlessly within the set.

Creating a Cohesive Icon Set

1. Consistency Through Keylines

To achieve a unified look, we relied on consistent keylines, ensuring all icons shared the same visual weight. Reusing elements like arrows and common symbols further reinforced this cohesion.

2. Testing Across Contexts

Each icon was tested in various contexts to ensure usability at small sizes. Aligning elements with the pixel grid was crucial to maintaining sharpness and clarity.

Technical Considerations in Icon Design

Pixel Perfection

Every icon had to be legible at a tiny 16x16px size. This required meticulous adjustments to ensure no details were lost.

Transparency and Color

Transparency was used sparingly to maintain simplicity.
Icons adhered to a consistent color token system, with most set to the “text/active” variable color.

Layer Naming for Code Compatibility

By flattening and unionizing layers in Figma, we ensured seamless code exports and prevented styling conflicts during implementation.

Tips for Designing Your Own Icon Set

If you’re considering creating a custom icon set, these principles can guide your process:

1. Establish a Style Guide

Define stroke thickness, corner radii, and other visual elements that reflect your brand. For Webflow, the stroke-based design with rounded outer corners became our signature.

2. Start with Key Icons

Begin with the most frequently used or distinctive icons. These serve as a benchmark for the rest of the set.

3. Focus on Usability

Icons must communicate their purpose instantly. Test them across various screen sizes and contexts to ensure clarity.

4. Leverage Figma’s “Union” Feature

This tool simplifies the design process, merging paths into cohesive shapes for clean SVG exports.

5. Embrace Iterative Design

Be prepared to revise and refine. Iteration is essential to achieving the perfect balance of functionality and aesthetics.

The Power of Thoughtful Icon Design

Redesigning Webflow’s iconography was an exercise in precision, creativity, and user-centric thinking. Icons are more than decorative elements—they’re vital tools that enhance usability and strengthen brand identity. By prioritizing clarity, consistency, and simplicity, we created a cohesive icon set that elevates the user experience.

Whether you’re a seasoned designer or just starting out, these insights can inspire you to approach icon design with purpose and passion.

intertoons

Interoons aim at providing electronically intelligent and comprehensive range of digital marketing solutions that exceed customer expectations. We implement revolutionary digital marketing ideas to achieve a common as well as the aggregate growth of the organization. Long-term customer relations and extended support are maintained.