Evolution of Web Icon Implementation: From Images to Component-Based SVG Icons

This article provides a comprehensive overview of the evolution of web icon implementation techniques in frontend development. The author traces the progression through several key stages: (1) Independent image files using <img> tags and CSS background-image , which caused performance issues due to multiple HTTP requests; (2) CSS Sprite technique that combined multiple icons into a single image, using background-position to display different icons, though it had maintenance challenges and couldn't dynamically change colors; (3) Font icons using @font-face to render icons as text characters in the Private Use Area of Unicode (U+E000-U+F8FF), offering scalability and color control via CSS, but introducing accessibility issues and font loading delays; (4) SVG icons including inline SVG and SVG Sprite approaches, which provide superior rendering quality, CSS controllability, and accessibility through <title> elements; (5) Modern component-based frameworks where icons are encapsulated as reusable components, typically using inline SVG as the underlying implementation.

The article also discusses Baidu's practical experience in building a centralized icon management platform as part of their design language system. This platform includes: an icon management CMS for designers to upload and publish icons, a Sketch plugin for designers to search and use icons, and an optimization/compilation/publish service that uses SVGO for optimization and generates framework-specific component packages (React/Vue/etc.) with automatic version management based on icon changes.