# Modular UI Design Research: Icons

Background

There are many high-quality icon libraries available, such as Untitled, Lucide, and Remix. For a more comprehensive list, you can also refer to React Icons and Iconfont.

Although there are so many existing icon libraries, if you only select icons based on their meaning... anyone can do it, even if they aren't a designer.

We cannot "know the result without knowing the reason," so let's start with icons and understand the theory behind the design.

Overview

Icons play a core role in UI design. They transform textual information into visual symbols, simplifying users' understanding of the content and enhancing the aesthetic appeal of the interface. Particularly in B2B design, although icons are used less frequently and complexly than in C2C design, appropriate icon design in form-heavy page layouts can highlight the style and brand tone of the product and even the entire enterprise.

The earliest form of visual communication was primarily through graphics. This is a prehistoric cave painting by North American Indians. Although cave paintings are often referred to as the precursors to writing, I personally feel they are very similar to icons. Icons are more like a universal language, transcending various languages such as Simplified Chinese, English, and Korean.

The Nuances of Icons

First, icons should clearly represent an object, action, or idea. If users cannot see/understand their meaning, the icon becomes ostentatious decoration or even hinders task completion.

Icon Size

In fact, when I was using various component libraries, I noticed that the icons in these libraries are all based on the 24px size.

After searching through online resources, I found the potential reasons:

• The 24px size ensures that icons remain clear and legible across various screen resolutions and devices.
• The 24px size adapts to various grid systems (e.g., 8-Point Grid System), facilitating collaboration between designers and developers.
• 24dp*24dp @x1 is the "perfect size" recommended by the Material Design 3 specification. Furthermore, Material Design recommends a minimum touch target size of 48dp.

Supporting data has not yet been found, but applying this size based on common convention:

• The recommended standard icon size is 24px*24px, typically including 2px of padding around it, though this is not absolute; the specific margin should be determined by the Keyline. The corresponding recommended touch target size is 48px*48px.
• In desktop environments, the icon size can be adjusted to 20px*20px, with a corresponding recommended touch target of 40px*40px.
• 16px is generally considered the minimum size. At this size, the icon should be designed to be simpler, and its decorative role will outweigh its functional role.

"Rules are rigid, but people are flexible." We can apply this guiding principle while also combining it with practical circumstances.

px, dp, and pt are not equal; they have their own conversion relationships, which can be researched online.

Icon Style

Existing icon styles are numerous and complex, no longer limited to just line or filled styles. C2C icons are even more diverse and flourishing. Here, we will temporarily base our analysis on fundamental styles.

Below are the icon styles I found in Untitled Icons: Line, Duocolor (line multi-color), Duotone (filled multi-color), and Solid (filled).

These four icon styles can generally meet all requirements for B2B design.

If categorized more finely, Material Design further divides "line icons" into: OutLine, Rounded, and Sharp.

Coupled with the stroke weight (Stroke) and radius (Radius) of line icons, this is generally sufficient to meet the customized needs of enterprise and product character.

Furthermore, the style of the icon not only affects the overall interface style but also influences the icon's functionality and user experience:

• Complex icons are not suitable for excessively small sizes (16px * 16px icons require a simpler line style).
• Filled icons are generally easier to recognize than line icons, but the specific case needs to be judged based on the icon shape Source of Conclusion.

Icon Design

First, I want to say that I have never completely independently designed an icon. Previously, if there was no icon that met the requirements, I would usually take an icon with a similar meaning and simply adjust its shape.

Therefore, using this opportunity, I can also explore icon design. Ant Design's Icon Design Guide has already covered a lot of relevant content, and it is recommended to read it first.

Using Keylines

The Keyline is the foundation of the grid. By using these core shapes as guidance, we can maintain consistent visual proportions between system icons.

The figure below shows the Keyline grid drawn according to the specifications of the Material Design 3 Icon design template. Based on this grid, various icons can be drawn.

In this era of ubiquitous design resources, you can completely find icons that meet your style requirements on iconfont. You can then redraw them according to the product's style; there are very few cases where a designer needs to create something entirely from scratch.

I also tried applying the Keyline to draw a few basic icons: Home, Card, Lock, and File. These are the four basic shapes on the Keyline grid.

During my hands-on practice, I discovered a few small icon design tips:

• Try to use Boolean operations on "basic shapes" to construct the icon.
• Keyline provides numerical balance, but numerical equality does not equate to visual balance (e.g., the Play icon).
• When selecting the Stroke Alignment method, icon design mostly uses Center or Inside alignment. Center-aligned icons appear slightly larger under the same conditions.
• In Figma, using Shift + Backspace to delete points and utilizing the Pen tool's center point function can significantly improve icon design efficiency.
• After the icon design is complete, you can use Flatten to consolidate the icon lines, making them easier to handle uniformly. There is no need to convert the stroke to a fill, as this hinders later adjustment of the line weight.

Icon Application

Once the icon design is complete, the next step is to consider how to effectively present these icons to the audience. As the saying goes, "The ugly daughter-in-law must eventually meet her in-laws," which means regardless of the design outcome, there must be a process of presentation and feedback. This is not only to showcase the results but also to gather feedback, improve, and optimize the design.

Image Method

The most traditional presentation method is naturally images. Designers slice the icons into @1x and @2x versions for states such as default, hover, pressed, active, and disabled, package them into a compressed file, and send them to the frontend team. Alternatively, designers can upload the sliced images to "Lanhu," where frontend developers can download the required icons themselves.

If the frontend needs icons in image format, I generally compress them using TinyPNG to minimize file size while ensuring clarity. My most frequently used tool is TinyPNG4Mac, which is quite convenient. Some frontend scaffolding tools also include built-in image compression features, and images smaller than a certain value may be converted to Base64 encoding for storage.

Looking back at older technology, we encounter "spritesheets," a practice of consolidating multiple icons onto a single image with a transparent background. Designers place all icons on one image, and frontend developers display them on the web page using the position and size of each icon. The advantage of this method is reducing the number of web requests. In fact, some websites now often use a similar "spritesheet" approach when creating dynamic images, generating animation effects through continuous static frames.

JPG / PNG image formats are the safest way to present icons, supported by all browsers. Although they are bitmap formats and lose clarity when zoomed, image formats generally meet most website needs, and the solution is mature enough.

Existing CDN providers and/or frameworks like Next.js can intelligently identify whether a browser supports WEBP or AVIF formats. These two image formats can offer higher compression rates yet greater clarity.

Font Method

As mentioned earlier, icons require designers to slice them separately for various states before handing them over to development. If the overall color scheme of the official website changes, and all icons need to be resliced, this could be a catastrophe.

Perhaps due to other combined reasons, the icon font solution emerged. The most commonly used font icon platform domestically is Iconfont. This requires designers to outline the icons and then upload them to Iconfont. Frontend developers can then reference the icons by name and easily adjust their color and size.

Icon fonts are still widely used as of this writing; they are easy to call and take up less space. However, they have several major drawbacks that affect their use:

• Icons need to be processed by the designer one by one. After some icons are outlined, it's still not enough; they also need the Figma Fill Rule Editor plugin to adjust the icon fill mode to "Non-zero rule" before they can be displayed correctly in Iconfont. The specific solution can be found here.
• If the icon disappears when adjusting the fill style via Fill Rule Editor, you can try copying the icon exactly as it is to Illustrator / Sketch, and then copying it back to resolve the issue. (Joke)
• Icon fonts do not adequately support multi-color icons, and the degree of customization is low.
• Icon fonts can also fail to render correctly, requiring special handling (I naively thought it was my browser problem).

I can only evaluate font-style icons from a designer's perspective, as I have not applied this method during development. I recommend the article Icon Fonts vs SVG Icons: What Works Best for You?, which compares the pros and cons of fonts versus SVG in detail.

SVG Method

SVG icons not only inherit the main advantages of font icons but also solve some of their limitations. Their main advantages include:

• Support multiple colors per icon, including gradients.
• Support more complex graphics and shapes, not limited to the basic shapes of fonts.
• Support direct embedding into HTML code, making it easy to edit and control the icon.
• Support CSS and JavaScript animations

Iconfont also supports more than just font icons; the official platform has supported referencing SVG icons via the symbol method for several years now.

We can briefly understand SVG through an example. Below is the code for a "Home" icon exported in SVG format from Figma:

<svg
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M15 21V13C15 12.4477 14.5523 12 14 12H10C9.44772 12 9 12.4477 9 13V21M15 21H20C20.5523 21 21 20.5523 21 20V9.48908C21 9.18049 20.8575 8.88919 20.6139 8.69973L12.6139 2.47751C12.2528 2.19665 11.7472 2.19665 11.3861 2.47751L3.38606 8.69973C3.14247 8.88919 3 9.18049 3 9.48908V20C3 20.5523 3.44772 21 4 21H9M15 21H9"
    stroke="black"
    stroke-width="2"
  />
</svg>

This SVG contains several key attributes:

• path: The path element defines the outline of the graphic, forming the shape through a series of commands and parameters that describe points along the path. In this example, these commands and parameters collectively form the shape of a house.
• fill: The fill attribute is used to set the internal color of the graphic. It can be a hexadecimal color code (e.g., #FF0000) or a common color name (e.g., black). none means no fill, while currentColor uses the value of the color attribute of the element or its parent.
• stroke: The stroke attribute is used to define the color of the graphic outline, used similarly to fill.
• stroke-width: The stroke-width attribute specifies the width of the stroke.

If an SVG contains multiple paths, there will be multiple path elements. Each path can have independent fill and stroke attributes, controlling its respective fill and stroke styles. If a part of the graphic does not require a stroke, its stroke attribute can be set to none.

As shown in the figure above, we see an icon preview and the corresponding code. Upon close observation, you will notice that the icon's width, height, fill color, and stroke color are not specified in the code.

This practice aims to provide the simplest possible SVG icon code, containing only core information like the icon path. The purpose of this design is to allow frontend developers more flexibility in controlling the icon's color and size. For example, if the SVG icon code defaults to including a fill attribute, frontend developers might find they cannot change the color when applying these icons. To solve this, one method is to remove the fill attribute, or set fill to currentColor, and then define the color via CSS. Another method is to directly specify the required color in the fill attribute.

It is not recommended to use hack methods like filter to adjust color, as this method can be complex and imprecise.

Similarly, SVG icons support compression; tools like SVGO can be used to clean redundant parts of the SVG code.

For practical frontend implementation of SVG, refer to the examples below, which use Tailwindcss and Lucide Icons:

Direct Invocation Example

This code example demonstrates how to use simple classes to control the icon's size, color, and display effect in dark mode. The operation is very intuitive and convenient:

<div className="Container">
  <svg
    className="h-5 w-5 stroke-blue-500 hover:stroke-blue-600 dark:stroke-blue-400 dark:hover:stroke-blue-500"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M15 21V13C15 12.4477 14.5523 12 14 12H10C9.44772 12 9 12.4477 9 13V21M15 21H20C20.5523 21 21 20.5523 21 20V9.48908C21 9.18049 20.8575 8.88919 20.6139 8.69973L12.6139 2.47751C12.2528 2.19665 11.7472 2.19665 11.3861 2.47751L3.38606 8.69973C3.14247 8.88919 3 9.18049 3 9.48908V20C3 20.5523 3.44772 21 4 21H9M15 21H9" />
  </svg>
</div>

Package Application Example

The following example shows how to apply icons via a software package. This method is also simple, requiring only the introduction of the necessary icon and style settings:

import { Home } from 'lucide-react';

const App = () => {
  return (
    <Home className="h-5 w-5 stroke-blue-500 hover:stroke-blue-600 dark:stroke-blue-400 dark:hover:stroke-blue-500" />
  );
};

export default App;

To deliver design icons to the development team, you can choose Iconfont or use the figma-icon-automation plugin to package the icons into an npm library, making it easy for the development team to call them via an installation package. This method requires configuration only once and is highly efficient.

Although the method of applying SVG icons involves code, this section is still prepared for designers. The goal is simply to inform everyone that SVG does not have problems with color adjustment or invocation difficulty. Actively encourage development follow-up!

Conclusion

A wealth of complex content is hidden behind this tiny icon, and this article is merely a preliminary exploration of this broad topic. As a beginner, errors in the text are inevitable, and I sincerely welcome readers to offer valuable suggestions and corrections.

References

• Material Design 3
• Icon Fonts vs SVG Icons: What Works Best for You?
• Design Icons from Scratch
• Intro to The 8-Point Grid System
• Apple - Human Interface Guidelines
• Ant Design 5
• Lucide Icons
• Remix Icons