Icon Library
@techui/icons is TechUI's official comprehensive icon solution. It provides a carefully curated collection of icons optimized for Web development.
All icon resources are delivered via WOFF2 fonts + CSS. Compared to SVG Sprites or JS imports, this solution ensures icon clarity while maintaining minimal file size and highest rendering performance.
Icon Library Composition
This package consists of two main parts: the core icon set and the extended icon set.
TechUI Core Icon Set (Default)
This is the default icon set used by the TechUI component library. It includes icons independently designed by the TechUI team, as well as icons carefully extracted, integrated, and modified from the following high-quality open-source icon libraries:
- HugeIcons
- System UIcons
- Iconoir
- Myna UI Icons
- Pro Icons
These icons have undergone unified visual adjustments to ensure stylistic consistency within the TechUI system.
Extended Icon Set
To meet more complex business requirements, we have also integrated excellent third-party icon libraries:
- Carbon Icons: The official icon library of the IBM Design System, suitable for serious and professional enterprise application scenarios.
*Note: All referenced open-source icon resources are sourced from icones.js.org*
Installation & Usage
Install Dependencies
Typically, there is no need to manually install the TechUI-Icons library in TechUI, as it is automatically installed as part of the TechUI component library ecosystem when installing core component libraries.
If you need to use it in a non-TechUI project, execute the following command in the project root directory to install it:
npm install @techui/iconsImport Styles
You can import icon styles on demand in your project's entry file main.js.
Import Core Icon Library (Recommended):
import "@techui/icons"Import Carbon Extension Library:
import "@techui/icons/carbon"Use in Components
TechUI icons are called using standard <i> tags combined with CSS class names.
Use Core Icons
Core icons use .tui-icon as the base class and .ti-{iconName} as the specific icon class.
<i class="tui-icon ti-star"></i>
<i class="tui-icon ti-settings"></i>Use Carbon Icons
Carbon icons use .cb-icon as the base class and .cb-{iconName} as the specific icon class.
<i class="cb-icon cb-star"></i>Icon Retrieval & Preview
To facilitate developers in finding required icons, the @techui/icons package includes a built-in interactive preview tool preview.html.
This tool provides the following features:
- Category Browsing: View all available icons by category.
- Real-time Filtering: Supports quick retrieval via icon names or tag keywords.
- One-Click Copy: Click any icon to copy the corresponding HTML code.
- Documentation Jump: Provides links to the source icon library documentation.
Usage: Locate the preview.html file in the node_modules/@techui/icons/ directory and open it directly in a browser to start exploring the icon collection.
Credits
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.