This is a collection of free icon libraries collected , classified and designed by TechUI.
@techui/icons is a comprehensive icon library package for TechUI. It provides a curated collection of free icon libraries, organized and optimized for web development. All icons are delivered using the woff2+css approach, offering the smallest file size among all icon solutions.
bash
npm install @techui/icons
`
$3
#### Import
`javascript
// Default TechUI icon library
import "@techui/icons"
// Third-party icon library (e.g., Carbon)
import "@techui/icons/carbon"
`
#### Examples
TechUI Default Icons:
`html
`
Carbon Icons:
`html
`
$3
Each icon library includes a preview.html file that allows you to:
- Browse all available icons by category
- Filter icons by name or tag
- Copy icon code with one click
- Navigate to source documentation
Simply open the preview.html file in your browser to explore the icon collections.
$3
- Format: woff2 + CSS
- Advantages: Smallest file size, fastest loading
- Trade-off: Full library import (no tree-shaking)
This approach prioritizes optimal performance for projects that use multiple icons from the same library.
$3
- Author: aYin (WeChat: jay1986cn)
- Homepage:
- License: None
- Keywords: @techui, ayin, icon, icons, webfont, woff, woff2, iconfont
$3
If you have any questions or suggestions, please contact:
- Email:
- WeChat: jay1986cn
- Website:
---
中文
$3
@techui/icons 是 TechUI 的综合图标库包。它提供了精心整理的免费图标库集合,经过优化以适配 Web 开发。所有图标均采用 woff2+css 方式提供,在所有图标解决方案中体积最小。
$3
- 🎨 多图标集: 包含自主设计图标和热门免费图标库
- 📦 优化交付: 使用 woff2+css 实现最小文件体积
- 🔍 交互预览: 内置 preview.html 用于浏览、筛选和复制图标
- 🚀 轻松集成: 简单的导入和使用语法
$3
本包包含:
#### TechUI 默认图标库
默认图标库包含自主设计的图标,以及从以下免费图标库中精心提取、整合和修改的图标:
- HugeIcons
- System UIcons
- Iconoir
- Myna UI Icons
- Pro Icons
- 其他免费图标库...
#### 第三方图标库
- Carbon Icons: IBM 的综合设计系统图标
所有免费图标库均来源于 icones.js.org
$3
`bash
npm install @techui/icons
`
$3
#### 导入
`javascript
// TechUI 默认图标库
import "@techui/icons"
// 第三方图标库(如 Carbon)
import "@techui/icons/carbon"
`
#### 使用示例
TechUI 默认图标:
`html
`
Carbon 图标:
`html
`
$3
每个图标库都包含一个 preview.html 文件,您可以:
- 按类别浏览所有可用图标
- 按名称或标签筛选图标
- 一键复制图标代码
- 跳转到源文档
只需在浏览器中打开 preview.html` 文件即可探索图标集合。