Mastering Icon Design: Sizes, Line Widths, and Iconfont Best Practices

Design Language Upgrade

Size Specifications

Inherited from RELAAAY's original icons and extended to unify platform, plugin, and mobile standards, three icon sizes (Web@1x) are defined:

Tool level: 24 × 24 px

System level: 20 × 20 px

Identity level: 16 × 16 px

Through repeated observation and adjustment, visual reference lines and bleed areas were established for each size; actual visual size may differ slightly from exact scaling.

Icon Rhythm

Line Width

Tool level: d = 2.0 px

System level: d = 1.5 px

Identity level: d = 1.0 px

Some icons can be fine‑tuned in 0.2 px increments; complex shapes may reduce line width for visual balance.

Corner Radius

General tool & system: r = d/2 (rounded)

Special tool (geometric): r = 0.2 px

Nested or segmented icons: r = 0

Icon Button Interaction Rules

Standard icons use iconfont; interaction is expressed by hotspot background and icon fill color across five states, without changing the graphic itself.

What Is Iconfont?

Iconfont treats icons as vector‑font files, offering small size, easy invocation, modification, and no distortion. It is not a textual character but a font‑based method for rendering icons in code.

Why Use Iconfont?

Scalable without loss compared to bitmap slices.

Smaller than SVG files and allows unified color changes.

Designers can control icon “size” more precisely.

Developers can change icon color via CSS for interactive effects.

Designers can update or replace icons without developer assistance.

Current RELAAAY iconfont supports only single‑color icons; multi‑color icons cannot be recolored via CSS.

How to Use

1. Classification

Two usage modes: SVG (design) – multi‑layer, styleable, no automatic color/size changes; Iconfont – single‑color fill, no layer styles, color and size can be changed automatically.

2. Graphic Path

Iconfont only recognises fill attributes; strokes are ignored and set to #000. Guidelines:

Closed shapes are required.

Outline strokes must be converted to filled shapes.

Merge multiple shapes or Boolean groups into a simple structure.

Without a background layer, iconfont may capture fractional pixel edges.

3. Fill Color

Set fill to #000000 for developers to modify via CSS; other colors lock the icon color.

4. Size and Position

Designers control icon “size” by using a background layer to define overall dimensions and positioning. Steps:

Design the foreground icon according to the rules.

Create a background layer with the desired size; hide it or set opacity to 0%.

Place the foreground relative to the background, group them, and name the group as the icon name.

Upload the group to RELAAAY Iconfont.

5. Update & Replace

Enable “fixed CDN” in the iconfont library, keep the same name, delete the old icon, upload the new one, and regenerate the URL.

6. Q&A

Q: Can an icon be set invisible? A: Yes, by hiding the layer or setting opacity to 0% – the outline is still recognised but not displayed.

Q: Can fill be empty or 0% opacity? A: No, the fill must be enabled; any value will be replaced with #000, resulting in a solid black shape.

Q: Can fill be another color? A: Yes, for invisible layers the color does not affect the result.

Q: Can symbols be uploaded? A: Yes.

Q: Can instances be uploaded? A: No, RELAAAY cannot parse instances as iconfont.

Invocation and Management

Plugins can quickly set icon color and size via the iconfont.