New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details
Socket
Book a DemoSign in
Socket

@techui/icons

Package Overview
Dependencies
Maintainers
2
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@techui/icons

This is a collection of free icon libraries collected , classified and designed by TechUI.

latest
npmnpm
Version
1.0.4
Version published
Maintainers
2
Created
Source

@techui/icons

English | 中文

English

Introduction

@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.

Key Features

  • 🎨 Multiple Icon Sets: Includes custom-designed icons and popular free icon libraries
  • 📦 Optimized Delivery: Uses woff2+css for minimal file size
  • 🔍 Interactive Preview: Built-in preview.html for browsing, filtering, and copying icons
  • 🚀 Easy Integration: Simple import and usage syntax

Icon Libraries

This package includes:

TechUI Default Icon Library

The default icon library contains custom-designed icons and icons carefully selected, integrated, and modified from the following free icon libraries:

  • HugeIcons
  • System UIcons
  • Iconoir
  • Myna UI Icons
  • Pro Icons
  • Other free icon libraries...

Third-party Icon Libraries

  • Carbon Icons: IBM's comprehensive design system icons

All free icon libraries are sourced from icones.js.org

Installation

npm install @techui/icons

Usage

Import

// Default TechUI icon library
import "@techui/icons"

// Third-party icon library (e.g., Carbon)
import "@techui/icons/carbon"

Examples

TechUI Default Icons:

<i class="tui-icon ti-star"></i>

Carbon Icons:

<i class="cb-icon cb-star"></i>

Preview & Exploration

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.

Technical Details

  • 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.

Package Information

Contact

If you have any questions or suggestions, please contact:

中文

简介

@techui/icons 是 TechUI 的综合图标库包。它提供了精心整理的免费图标库集合,经过优化以适配 Web 开发。所有图标均采用 woff2+css 方式提供,在所有图标解决方案中体积最小。

核心特性

  • 🎨 多图标集: 包含自主设计图标和热门免费图标库
  • 📦 优化交付: 使用 woff2+css 实现最小文件体积
  • 🔍 交互预览: 内置 preview.html 用于浏览、筛选和复制图标
  • 🚀 轻松集成: 简单的导入和使用语法

图标库说明

本包包含:

TechUI 默认图标库

默认图标库包含自主设计的图标,以及从以下免费图标库中精心提取、整合和修改的图标:

  • HugeIcons
  • System UIcons
  • Iconoir
  • Myna UI Icons
  • Pro Icons
  • 其他免费图标库...

第三方图标库

  • Carbon Icons: IBM 的综合设计系统图标

所有免费图标库均来源于 icones.js.org

安装

npm install @techui/icons

使用方法

导入

// TechUI 默认图标库
import "@techui/icons"

// 第三方图标库(如 Carbon)
import "@techui/icons/carbon"

使用示例

TechUI 默认图标:

<i class="tui-icon ti-star"></i>

Carbon 图标:

<i class="cb-icon cb-star"></i>

预览与探索

每个图标库都包含一个 preview.html 文件,您可以:

  • 按类别浏览所有可用图标
  • 按名称或标签筛选图标
  • 一键复制图标代码
  • 跳转到源文档

只需在浏览器中打开 preview.html 文件即可探索图标集合。

技术细节

  • 格式: woff2 + CSS
  • 优势: 最小文件体积,最快加载速度
  • 权衡: 需整体导入(无法按需引入)

此方案优先考虑为使用同一图标库中多个图标的项目提供最佳性能。

包信息

联系方式

如有任何问题或建议,请联系:

Keywords

@techui

FAQs

Package last updated on 07 Apr 2026

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts