Building a Scalable, Cross‑Platform Icon System for Modern Frontend Projects

Background and Motivation

In modern frontend systems, icons serve as an ultra‑efficient "interface language" that conveys information with minimal cognitive load, speeds up user decisions, saves screen space, and unifies visual style, thereby improving interaction efficiency and product consistency.

Without a shared icon library, basic icons such as "back" or "close" require repeated designer hand‑offs, leading to version drift, inconsistent naming, and wasted time for both designers and developers. A unified library enables a single design to be reused across all frontends, allowing developers to self‑serve icons according to standards, reducing communication overhead and ensuring consistent, controllable versions.

Thus, a standardized, maintainable, and extensible vector icon system improves user experience and systematically enhances design‑development collaboration and delivery quality.

Sqb Icon Library Overview

The Sqb icon library has been maintained for over four years, with close collaboration between frontend engineers and designers, resulting in more than 140 icons that serve all company frontend projects and support multiple platforms.

Supported Platforms

WeChat Mini‑Program

Alipay Mini‑Program

Web

Native clients (TTF icons for iOS and Android)

Supported frontend formats

React component library

Font icons

SVG

Offline SVG icons

Online images

The library covers the main development frameworks used at the company and can also support Svelte and Vue if needed.

Easy Usage

After configuration, a single tag copied from the documentation enables the icon on any page.

Import resources

<link type="text/css" rel="stylesheet" href="https://path/to/@sqb/[email protected]/dist/sqb-icons.css" />

Use the icon

<i class="bi bi-b-shou"></i>

Documentation

The library provides comprehensive documentation; screenshots are shown below.

Icon Library Architecture

Vector icons (TTF, SVG, etc.) are smaller than bitmap PNGs, scale without loss, and support theming, on‑demand coloring, state changes, animation, and dark mode, making them friendly for tree‑shaking, caching, and multi‑platform reuse. The library converts designer‑provided SVGs into font icons and leverages Iconify to support many platforms.

Icon Design Guidelines

New icons/glyphs should be drawn on a 16×16 px grid in Figma or Sketch, exported as flat SVG files containing only fills (no strokes).

Icon Build Process

The build pipeline generates all required artifacts for various platforms.

Build Artifacts

After running the scripts, the following artifacts are produced:

Font icons (three compatible formats)

sqb-icons.ttf

sqb-icons.woff

sqb-icons.woff2

CSS stylesheets

sqb-icons.css

sqb-icons.wxss

Other resources

manifest.json – mapping of icon names to SVG enums

sqb-icons-unicode-map.json – name to Unicode mapping

sqb-icons.ts – TypeScript enums and types for icons

index.html – preview page

Iconify resources

icons.json – Iconify mapping

Individual icon JS/TS files – Iconify resources per icon

These resources satisfy the usage requirements of all platforms.

Server‑Side Icon Architecture

Beyond font icons, the library uses Iconify to provide server‑side on‑demand loading and local caching, allowing selective loading of icons instead of the entire font set.

Initialize Iconify

import { addAPIProvider } from "@iconify/react";

addAPIProvider("local", {
  resources: ["https://icon-api.path.to.com"],
});

Use Icon

import { Icon } from "@iconify/react";

<Icon icon="@local:icons:b-arrow-right" />;

Architecture Diagram

Application Cases

Both B‑side and C‑side projects as well as the component library at the company use the icon library; examples are shown below.

Extension and Maintenance

SVG icon construction is a mature technique; combined with GitLab CI/CD, new icons can be added automatically. By following naming conventions and directory structures, developers place compliant SVG files into a designated folder, and build scripts handle optimization, format conversion, and component generation. After publishing, the library auto‑increments its version and updates documentation, achieving near‑full automation.

Conclusion and Outlook

After four years of refinement, the Sqb icon library has become a comprehensive visual infrastructure covering the entire company, enabling efficient design‑development collaboration, consistent visual standards across products, and accelerated business iteration.

From the designer’s first stroke to the <i> tag in code and the first frame seen by users, the library connects the whole pipeline—automated builds, versioned management, and multi‑platform synchronization—delivering efficiency and elegance.

Future work will continue to expand, optimize, and evolve the library, providing plug‑and‑play icon solutions for more scenarios and ensuring visual expression shines with every user interaction.