Mastering Icon Design: Tips, Tools, and Vector Techniques for Modern UI

Industry's Excellent Cases

SF Symbols is Apple’s built‑in icon collection for the San Francisco system font, offering seamless alignment with any font weight or size. Updated to version 3.0, it provides 3,200 symbols each in nine weights, allowing designers to import them directly or create custom symbols.

Multiple Weights

SF Symbols matches the nine font weights of San Francisco and supports three display scales (Small, Medium, Large), resulting in 27 style variations that ensure optimal visual matching with different glyphs.

Glyph Baseline Positioning

Icons are vertically positioned by placing the graphic’s center above the template baseline; the system calculates a baseline offset to align the icon with text, achieving horizontal visual alignment.

Multicolor Application

By reading layer information within the graphic, designers can assign different rendering modes to each layer, creating richer visual effects.

Localized Adaptation

Beyond weight and scale, SF Symbols provides language‑specific icons for Latin, Arabic, Hebrew, Hindi, Thai, Chinese, Japanese, Korean, supporting both LTR and RTL layouts.

Efficient Vector Specification Drawing

High‑resolution screens and vector formats like SVG and PDF raise expectations for icon precision. For example, WeChat uses a 24 × 24 pt grid with a default 1.2 pt stroke, maintaining a rounded‑corner style.

Design Challenges and Solutions

Non‑integer stroke widths (e.g., 1.2 pt) are difficult in Sketch, Figma, or Photoshop. A practical workaround is to scale the canvas five‑fold, draw with integer strokes, then scale back, or use parity‑based scaling (odd numbers ×10, even numbers ×5).

Tool Differences

Sketch offers extensive vector tools but lacks some default toolbar functions; custom toolbars can expose them. Figma relies on community plugins for similar capabilities. Adobe Illustrator provides robust grid systems, isolation mode, and angle‑based duplication, making it suitable for precise icon work.

Key Drawing Considerations

When scaling irregular shapes, use geometric‑center based offset rather than layer‑center scaling to avoid distortion. Path offset tools in both Sketch and Illustrator can achieve uniform scaling.

Skeleton and Export Path

Start with a stroked outline as the icon’s skeleton, then apply stroke styles for weight and corner treatment. Before export, convert everything to closed outlines to ensure consistent rendering across platforms.

Balance in Icon Design

Icon area proportion and visual alignment affect perception. Use standard grid ratios, adjust overly prominent features, and apply subtle outward extensions to improve visual balance.

Visual Alignment Issues

Tools may report centered objects that appear off‑center due to differing shape areas. Use auxiliary geometry (e.g., circles touching triangle vertices) and polygon tools that generate true equilateral shapes for accurate alignment.

Conclusion

The discussed techniques reflect personal experience; real‑world design problems can be more complex, but understanding underlying principles and applying appropriate tools can make icon creation efficient and visually compelling.

References: Apple Developer – SF Symbols – Human Interface Guidelines; Xcode Documentation – Creating Custom Symbol Images; hustanding – CSDN – Irregular Polygon Scaling Algorithms.