@TechUI/Icons Introduction

🔓Open Source

TechUI Icons is the visual vocabulary of the TechUI ecosystem, providing unified, high-definition, and thoroughly optimized icon resources for the entire UI framework.

Unlike the massive SVG JS solutions on the market, @techui/icons returns to the classic WebFont (woff2 + css) technical route. This means it boasts the smallest file size among all current icon solutions and the fastest loading speed, perfectly aligning with TechUI's ultimate pursuit of performance.

One-sentence summary: Smallest size, fastest loading, and built-in powerful local preview tools.

Dual-Core Icon System

@techui/icons is not a single icon set, but consists of two deeply cleaned and optimized sub-libraries, designed to handle different business scenarios:

🛡️ TechUI Default (Default Library)

This is TechUI's standard icon set and the default dependency for the Base, Admin, and Prime component libraries.

• Source: Created originally by the TechUI design team, and selectively integrated from high-quality open-source libraries such as HugeIcons, System UIcons, and Iconoir.
• Positioning: Covers general system operations (such as settings, user, edit, close), with a unified style and exquisite lines.
• Features: Specifically optimized for TechUI components to ensure flawless alignment and rendering in buttons, menus, and forms.

🏭 Carbon Icons (Enterprise Library)

This is a deeply customized version of IBM's famous Carbon Design System icon library.

• Source: Derived from IBM Carbon, TechUI has filtered, renamed, and categorized it to comply with TechUI's naming conventions.
• Positioning: Provides a large number of professional icons related to industry, data, servers, and hardware, suitable for building complex B-end enterprise applications.
• Features: Exists as an optional extension that you can import individually when needed.

Interactive Preview

In this package, we provide not only font files but also a built-in productivity tool—a local interactive preview file (preview.html).

Say goodbye to guessing class names and consulting online documentation. After installing the dependency, you can open it directly inside node_modules or deploy it to your intranet documentation server.

• ⚡️ Real-time Search: Supports millisecond-level filtering of icons by name or tag keywords (e.g., "user", "edit", "server").
• 📋 One-click Copy: Click on any icon to automatically copy the <i class="tui-icon ti-xxx"></i> code to your clipboard.
• 🗂 Categorized Browsing: Clear category divisions help you quickly find icon groups of the same style.

💡 Why is this important? During development, finding suitable icons often consumes a lot of time. The built-in preview.html turns icon lookup into a 3-second action of "Open -> Search -> Copy," greatly improving development efficiency.

Technical Advantage: Woff2

In an era where SVG Sprite and SVG-in-JS are prevalent, TechUI firmly chooses the WebFont solution for one reason only: Performance.

• Extreme Compression: Using Woff2 format, the file size is more than 60% smaller than an equivalent number of SVGs.
• Browser Native Rendering: No JS parsing required, no DOM node burden; fonts are rendered directly by the browser's underlying layer with almost zero overhead.
• Flexible Coloring: Like text, you can change icon colors at will via the color property, supporting gradient text effects.

Installation and Usage

Installation

npm install @techui/icons

Import (On-demand loading)

You can import it in main.ts or specific components:

// 1. Import TechUI Default Core Library (Required)
import "@techui/icons";

// 2. Import Carbon Extension Library (Optional, for industrial/enterprise scenarios)
import "@techui/icons/carbon";

Code Usage

Simply use the <i> tag with the corresponding class name:

<i class="tui-icon ti-settings"></i>
<i class="tui-icon ti-user-edit"></i>

<i class="cb-icon cb-data-blob"></i>
<i class="cb-icon cb-chip"></i>

Trade-offs Explanation

To achieve the ultimate size advantage, we adopted a full bundling strategy (the nature of WebFont determines that it cannot be Tree-shaken like JS).

• Pros: For medium-to-large systems using a large number of icons, a single HTTP request caches all icons. Subsequent page switches have no flickering, and the total volume is still smaller than importing a large amount of SVG code on demand.
• Cons: If your project is extremely simple and only requires 1-2 icons, importing the entire font file might seem slightly heavy.

Credits

Carbon Design System

Carbon Icons Github

ProCode Software

Proicons Github

Corey Ginnivan

System UIcons Github

Iconoir

Iconoir Github

Praveen Juge

Mynaui Icons Github

Hugeicons

Iconify Github

Icônes

Site

Special thanks to the authors of the outstanding open-source icon libraries listed above. All of them utilize the MIT License and provide developers with rich, unified, and free design assets through exquisite pixel-level craftsmanship.

At the same time, we extend our sincere gratitude to the Icônes icon integration platform. It is a powerful tool for frontend developers that significantly lowers the barrier for searching and integrating open-source icon resources.