Mastering Icon Design: Principles, Types, and Workflow for Modern UI

Introduction

With the development of the internet industry, cost reduction and efficiency have become a collective consensus, and the once‑distinct functional divisions are gradually merging. For many companies, UI and UE designers are combined, and a UI improvement course was launched to help UE designers transition more gracefully.

1. Value of Icons

Icons play a crucial role in modern design by conveying information, evoking emotions, and serving as brand symbols. Broadly, an icon is any graphic symbol representing a concept, object, or operation, covering brand logos, UI buttons, and indicators. Narrowly, icons refer to small UI symbols used in apps and websites to represent specific actions or meanings, helping users recognize functions faster and providing guidance, brand recognition, and emotional connection.

2. Classification of Icons

Icons can be classified by features and usage. In UI, common categories are basic functional icons, creative decorative icons, and application launch icons.

2.1 Functional Icons

Functional icons provide navigation, prompts, and interaction, enabling users to perform specific actions or access related features. They are simple, clear, and easily recognizable, aiming to convey their function directly.

2.2 Creative Icons

Creative icons are crafted by designers with unique ideas, creativity, and techniques, offering distinct visual style and expressive value. Beyond conveying information, they provide aesthetic appeal and emotional connections, enriching user experience.

2.3 Application Icons

Application icons highlight brand identity, function, or theme to represent a specific product or brand. They should be clear, attractive, and accurately convey the app’s purpose or style.

3. Icon Styles and Trends

Basic Styles : Linear, filled, and combined line‑fill styles are the three basic UI icon styles. For information‑first scenarios, the basic style is preferred to avoid cognitive load.

Beyond the basics, icon styles evolve with design trends:

2013‑2016: From Skeuomorphism to Flat The shift began with Windows Metro (2010) and accelerated with iOS 7 (2013), leading to widespread flat design.

2016‑2020: Flat but Not Too Flat After extreme flatness, Google introduced Material Design, adding subtle shadows and depth. Designers explored cartoon, colorful, and 2.5D styles.

2020‑2024: New Interpretations of Skeuomorphism Improved display and graphics capabilities enable richer details. Neumorphism, AIGC‑generated 3D icons, frosted glass, laser, and neon styles become popular.

4. Basic Principles of Icon Design

Four core principles guide the icon design process, ensuring user‑centric, clear, and distinctive icons.

4.1 Recognizability & Consistency

Icons must be uniquely identifiable while maintaining visual consistency across similar icons to strengthen brand image and user experience.

4.2 Adaptability & Scalability

Design icons to work well on different platforms, devices, and resolutions, preserving visual integrity.

4.3 Playfulness & Emotional Connection

Incorporating fun and emotion attracts attention, encourages interaction, and creates deeper user attachment to the product.

4.4 Representativeness & Brand Value

Embedding brand identity into icons helps establish a unique visual language and fosters trust.

5. Icon Design Process

The workflow consists of five steps: requirement understanding, design preparation, visual association, sketching, and final production.

5.1 Requirement Understanding

Analyze the product function, target users, and communication intent to set clear goals while balancing usability and aesthetics.

5.2 Design Preparation

Conduct market research, competitor analysis, and collect inspiration to define the design direction and emotional palette.

5.3 Visual Association

Use symbols, shapes, and colors to represent concepts, abstracting non‑tangible ideas into recognizable graphics.

5.4 Sketching & Concept Design

Create hand‑drawn sketches or digital concepts to explore ideas quickly.

5.5 Design Production

After selecting the best concept, produce high‑quality icons following three principles: Adaptation, Precision, and Simplicity.

Adaptation

Ensure icons work both as standalone graphics and within interfaces, matching style and rhythm.

Precision

Choose the most intuitive shape, refine details, and use consistent naming for easy management.

Simplicity

Minimize parameters, remove unnecessary decimals and anchor points, and avoid superfluous decoration.

Maintain visual balance by considering area calculations and using keylines during drawing.

Apply even-numbered spacing for LED displays to ensure consistent perception.

5.6 Testing & Revision

Conduct recognizability, adaptability, and visual hierarchy tests to evaluate icon quality and make necessary adjustments.

6. KooJia Icon Drawing Standards

6.1 Design Principles

KooJia’s basic icons are divided into platform (linear) and tool (filled) types, adhering to four core principles.

6.2 Platform Icon Specs

Line thickness: default 10 px (optional 8 px or 12 px). Canvas size: 96 × 96 px. Corner radius: default 4 px (sharp), 6 px (blunt), 3 px (sharp), 2 px (extreme). Spacing between outer shapes: 6 px, 8 px, 12 px, 20 px. Inner spacing: vertical 8 px; top/bottom 8 px, 12 px, or 16 px as needed.

6.3 Tool Icon Specs

Line thickness: default 4 px (optional 3 px). Canvas size: 40 × 40 px. Corner radius: default 2 px (sharp), 3 px (blunt), 1 px (sharp), 0.5 px (extreme). Outer spacing: 2 px, 6 px, 12 px, 2.5 px. Inner spacing: vertical 8 px; top/bottom 8 px, 12 px, or 16 px.

Final Tips

1. When building a new icon library, start with a few typical icons before defining full standards.

2. Abstracting complex meanings into icons is challenging; consider user research and usability testing.

3. Combining text and icons can accelerate recognition.

4. Pay attention to pixel precision; avoid quirky designs.

5. Test icons in real scenarios, not just within the library.

6. Revisit and iterate on your work; fresh perspectives emerge later.

7. Experienced UI designers often rely on Sketch, backed by extensive practice.

8. While Figma is great, Sketch remains preferred for icon work; mastering Photoshop/Illustrator sets the upper bound.

9. The MD icon library already contains over 1,000 icons—use them wisely.

—

The above completes the entire content of "Icon Design".

Why do gardenia white petals fall on a blue pleated skirt? Why do pure white jasmine blossoms appear on amber moons? How to question, understand, and perceive color? The next article "Color Design" will provide the answers.