# @coreui/icons 中文文档

规范地址：https://npmcn.com/package/%40coreui/icons/

版本：3\.1\.0
npm 元数据更新时间：2026-04-16T13:11:19.064Z
中文译文更新时间：2026-11-10T19:19:02.468Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40coreui/icons
原文对照：https://npmcn.com/package/%40coreui/icons/?lang=original
项目主页：https://github.com/coreui/coreui-icons#readme
源码仓库：https://github.com/coreui/coreui-icons

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：26.3 MB，11182 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2018-05-09T11:34:11.344Z
- 最新版本发布：2026-04-16T13:11:18.904Z
- 近 30 天下载量：626218（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：32（近 12 个月 1 个）

## 中文简介

CoreUI 图标自由

## 安装

```sh
npm install @coreui/icons
```

也可以使用：`pnpm add @coreui/icons`、`yarn add @coreui/icons`、`bun add @coreui/icons`

## README

![](https://coreui.io/images/brands/coreui-icons.svg)

 [![npm (scoped)](https://img.shields.io/npm/v/@coreui/icons)](https://www.npmjs.com/package/@coreui/icons)[![npm](https://img.shields.io/npm/dw/@coreui/icons)](https://www.npmjs.com/package/@coreui/icons)

# CoreUI 图标(1500+自由图标)- 纯美的开源图标

CoreUI图标是一款开源图标集,有多格式SVG,PNG和Webfonts等1500多个图标. 核心UI 图标是用于共同行动和物品的精心设计的符号。 你可以在数字产品中用于网络或移动应用.

![CoreUI Free Icons](https://coreui.io/images/icons_free_bg_set.png)

## 目录

-   [CoreUI 图标(1500+自由图标)- 纯美的开源图标](https://npmcn.com/package/%40coreui/icons/#readme-coreui-icons-1500-free-icons--simply-beautiful-open-source-icons)
    -   [目录](https://npmcn.com/package/%40coreui/icons/#readme-table-of-contents)
    -   [预览文档( D)](https://npmcn.com/package/%40coreui/icons/#readme-preview--docs)
    -   [安装](https://npmcn.com/package/%40coreui/icons/#readme-installation)
        -   [光盘N](https://npmcn.com/package/%40coreui/icons/#readme-cdn)
        -   [国家预防机制](https://npmcn.com/package/%40coreui/icons/#readme-npm)
        -   [雅伦](https://npmcn.com/package/%40coreui/icons/#readme-yarn)
    -   [使用量](https://npmcn.com/package/%40coreui/icons/#readme-usage)
        -   [基本用途](https://npmcn.com/package/%40coreui/icons/#readme-basic-use)
        -   [SVG 样板](https://npmcn.com/package/%40coreui/icons/#readme-svg-sprites)
        -   [SVG 符号](https://npmcn.com/package/%40coreui/icons/#readme-svg-symbols)
        -   [Angular 的核心UI 图标](https://npmcn.com/package/%40coreui/icons/#readme-coreui-icons-for-angular)
        -   [React.js 的核心UI 图标](https://npmcn.com/package/%40coreui/icons/#readme-coreui-icons-for-reactjs)
        -   [Vue.js 的 CoreUI 图标](https://npmcn.com/package/%40coreui/icons/#readme-coreui-icons-for-vuejs)
    -   [CoreUI 图标 PRO](https://npmcn.com/package/%40coreui/icons/#readme-coreui-icons-pro)
    -   [许可证](https://npmcn.com/package/%40coreui/icons/#readme-license)
        -   [CoreUI 图标自由图标](https://npmcn.com/package/%40coreui/icons/#readme-coreui-icons-free-icons)
        -   [CoreUI 图标品牌和旗帜图标](https://npmcn.com/package/%40coreui/icons/#readme-coreui-icons-brand-and-flag-icons)
            -   [品牌图标](https://npmcn.com/package/%40coreui/icons/#readme-brand-icons)

## 预览文档( D)

[https://coreui.io/icons/ (中文(简体) )](https://coreui.io/icons/)

## 安装

### 光盘N

```html
<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/all.min.css">
```

或者说

```html
<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/free.min.css">
<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/brand.min.css">
<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/flag.min.css">
```

### 国家预防机制

```shell
npm install @coreui/icons --save
```

### 雅伦

```shell
yarn add @coreui/icons
```

或者,你也可以克隆,或者 [下载此寄存器](https://github.com/coreui/coreui-icons/archive/main.zip) 作为拉链.

## 使用量

### 基本用途

使用 CSS 样式前缀和图标名称,您可以在任何地方放置 CoreUI 图标 。 CoreUI 图标被设计为与内含元素一起被使用 ex. `<i>` 或者说 `<span>`。 。 。 .

请使用 `cil-` 线性图标的前缀, `cib-` 品牌图标的前缀,以及 `cif-` 旗帜图标的前缀.

```html
<i class="cil-energy"></i>
```

```html
<i class="cib-twitter"></i>
```

```html
<i class="cif-us"></i>
```

### SVG 样板

SVG 图标允许您在网站上快速使用向量图标 。 我们已经将所有图标集的样式都准备好,形成他们自己的SVG图案.

将图示文件和其他静态文件放在您的项目中, 如图像和样式。 确保为 SVG 图示文件添加合适的路径,并使用您想要显示的 SVG 图标或符号特有的碎片标识符 .

```html
<svg>
  <use xlink:href="path/to/free.svg#cil-airplane-mode"></use>
</svg>
<svg>
  <use xlink:href="path/to/brand.svg#cib-twitter"></use>
</svg>
<svg>
  <use xlink:href="path/to/flag.svg#cif-us"></use>
</svg>
```

### SVG 符号

当您下载您的图标集时, 它会出现一个包含 SVG 图标定义的图示目录 。 这些图标可以被引用,并作为内置的SVG像这样:

```html
<!-- Define the symbols -->
<symbol id="cil-apple" viewBox="0 0 24 24">
<title>apple</title>
<path d="M21.207 9.987c-0.497-1.275-1.29-2.262-2.293-2.863-0.25 0.477-0.524 0.888-0.835 1.267l0.010-0.013c0.002 0.001 0.004 0.002 0.005 0.003 1.494 0.859 2.364 3.054 2.114 5.338-0.414 3.784-1.563 6.377-3.236 7.302-1.087 0.601-2.444 0.516-4.031-0.254l-0.155-0.075h-1.143l-0.155 0.075c-1.588 0.77-2.944 0.856-4.031 0.254-1.673-0.925-2.822-3.518-3.236-7.302-0.25-2.284 0.619-4.479 2.114-5.338 0.445-0.259 0.979-0.411 1.549-0.411 0.011 0 0.023 0 0.034 0l-0.002-0c1.132 0 2.436 0.53 3.853 1.578l0.051 0.037s2.043-0.248 2.852-0.616c2.439-1.107 2.976-2.867 3.072-3.106 0.262-0.632 0.414-1.366 0.414-2.135 0-0.813-0.17-1.587-0.476-2.287l0.014 0.037-0.191-0.477-0.513 0.005c-3.151 0.036-5.692 2.598-5.692 5.755 0 0.255 0.017 0.507 0.049 0.754l-0.003-0.029c-0.886-0.496-1.747-0.813-2.573-0.944-1.169-0.186-2.241-0.005-3.186 0.538-1.038 0.596-1.855 1.601-2.364 2.906-0.463 1.186-0.638 2.57-0.493 3.895 0.475 4.344 1.859 7.267 4.001 8.452 0.655 0.37 1.438 0.588 2.272 0.588 0.010 0 0.021-0 0.031-0h-0.002c0.918-0 1.904-0.244 2.952-0.73h0.461c1.987 0.923 3.754 0.971 5.253 0.142 2.142-1.185 3.526-4.107 4.001-8.452 0.145-1.325-0.030-2.709-0.493-3.895zM15.376 2.851c0.322-0.143 0.697-0.251 1.088-0.305l0.022-0.003c0.106 0.354 0.167 0.761 0.167 1.182 0 2.15-1.593 3.927-3.663 4.215l-0.022 0.003c-0.106-0.354-0.167-0.76-0.167-1.181 0-1.743 1.048-3.242 2.547-3.901l0.027-0.011z"></path>
</symbol>

<!-- Use the defined symbols -->
<svg>
  <use xlink:href="#cil-apple"></use>
</svg>
```

还可与包含下列定义的外部SVG链接:

```html
<svg class="icon-home">
  <use xlink:href="path/to/free.svg#cil-apple"></use>
</svg>
```

### Angular 的核心UI 图标

-   请检查官方仓库 [Angular 的核心UI 图标](https://github.com/coreui/coreui-icons-angular)

### React.js 的核心UI 图标

-   请检查官方仓库 [反应的 CoreUI 图标](https://github.com/coreui/coreui-icons-react)

### Vue.js 的 CoreUI 图标

-   请检查官方仓库 [Vue.js 的 CoreUI 图标](https://github.com/coreui/coreui-icons-vue)

## CoreUI 图标 PRO

如果免费的图标集不够,你可以买 [CoreUI 图标 Pro](https://coreui.io/icons/pro/) 包含超过2000个图标,并有更多的风格——Solid, Duo-Tone和Linear.

## 许可证

### CoreUI 图标自由图标

CoreUI Icons Free是免费的,开源的,和GPL友好的. 你可以用来 商业项目,开放源代码项目, 或实际上任何你想要的.

-   图标 — CC BY 4.0 许可证
    -   在"CoreUI Icons Free"中,CC BY 4.0许可适用于所有图标 以.svg和.js文件类型来包装.
-   字体——SIL OFL 1.1 许可证
    -   在 CoreUI 图标自由版中,SIL OLF 许可证适用于所有图标 被打包成网络和桌面字体文件.
-   代码-麻省理工学院许可证
    -   在"CoreUI Icons Free"中,麻省理工学院许可证适用于所有人 非字体文件和非缩写文件.

### CoreUI 图标品牌和旗帜图标

#### 品牌图标

所有品牌图标都是各自所有者的商标. 使用这些工具 商标不表示由字体背书商标持有人 真棒,反之亦然. **请不要为任何目的使用品牌标志,除非 代表他们所指的公司、产品或服务.**

**CC0 1.0 普及** 宗旨声明

全世界大多数司法管辖区的法律自动赋予 著作权及相关权利(定义如下) 之后的原作所有者(每个和所有,一个“所有者”) 作者身份和/或数据库(每个数据库,"工作").

某些所有者希望永久放弃这些权利,让其为工人工作 创造、文化和科学方面的共同 作品("Commons"),公众可以可靠和不必担心后世 侵权索赔基于、修改、纳入其他工程、再利用 并尽可能自由地以任何形式和为任何 目的,包括无限制的商业目的。 这些业主可以 促进共同社区促进自由文化的理想 进一步制作创作、文化和科学作品,或 其作品的声誉或更大程度的分配,部分通过使用和 其他国家的努力.

为此和(或)其他目的和动机,没有任何期望 将CC0与 作品("Afwarder"),以他或她是版权所有人为限 自愿选择将CC0适用于工作 在了解《工作》的情况下,按照《工作》的规定公开分发《工作》 作品中的版权和相关权利及其含义和意图 cC0对这些权利的影响.

1.  版权及相关权利。 根据CC0提供的工作可以是: 版权和相关或相邻权利(“版权和 相关权利"). 版权和相关权利包括但不限于: 改为:

一. 复制、改造、分配、表演、展示、交流、, 并翻译作品;

二. 原作者和/或表演者保留的精神权利;

页:1 与个人形象或相似性有关的宣传和隐私权 在作品中描绘;

四. 在工作方面免受不公平竞争的权利, 受下文第4(a)段的限制;

五. 保护提取、传播、使用和再利用数据的权利 a 工作;

六. 数据库权利(例如根据欧洲理事会第96/9/EC号指令产生的权利) 1996年3月11日欧洲议会和欧洲理事会关于 保护数据库,并在任何国家执行数据库, (b) 包括任何经修订的或后续的此种指令;以及

七. 世界各地其他类似、等同或相应的权利 根据适用的法律或条约,以及任何国家执行这些法律或条约的情况.

2.  弃去. 尽最大可能,但不得违反, (d) 明确、充分、永久、不可撤销和 无条件放弃,放弃,放弃所有Afwarder的版权 有关权利及相关权利要求和诉讼原因,是否现在 b. 已知或未知的索赔(包括现有和未来的索赔和 (一) 在世界所有领土上,(二) 最大限度 适用法律或条约规定的期限(包括未来时间) (三) 任何现有或未来媒介以及任何数量 (四) 用于任何目的,包括不受限制 商业、广告或宣传目的(“放弃”)。 {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}我还好 免除对全体公众和 损害继承人和继承人的利益,完全意图放弃 不得撤销、撤销、取消、终止或 以任何其他法律或公平行动扰乱静静地享受工作 (a) 由公众根据《德国法律声明》提出的目的声明.
    
3.  公共执照倒置。 如果出于任何原因放弃协议的任何部分 根据适用法律被判定在法律上无效或无效,然后放弃 应在允许的最大限度内予以保留,同时考虑到 (原始内容存档于2017-10-21). Afwarder's express of宗旨声明. 此外,在放弃的范围内 特此授予每个受影响的人免使用费, 非可转让、不可转让、非排他性、不可撤销和 行使版权和相关权利的无条件许可 (一) 在世界所有领土上的工作,(二) 最长期限 适用法律或条约规定的(包括今后延长时间),(三) (四) 任何 包括不受限制的商业、广告或 宣传目的("License"). 该许可证应被认为具有下列效力: cC0由Afwarder适用于该工作。 是否属于 以任何理由颁发的许可证在法律上无效或无效 部分无效或无效不得 执照的剩余部分作废,在此情况下 申明其将不(一)行使任何剩余的 著作权及相关权利在作品中或(二)主张任何相关权利 和与工作有关的诉讼原因,无论在哪种情况下,均违反 (原始内容存档于2017-10-21). Afwarder's express of宗旨声明.
    
4.  限制和免责声明.
    

(单位:千美元) 任何商标或专利权均不放弃、放弃, 已移交、许可或受本文件影响.

b. 雇主主动提供工作,不作陈述或保证 涉及工作的任何种类,明示、暗示、法定或其他, 包括不受所有权、可买卖性、健身性限制的保证 特定目的、不侵权、或无潜在或 其他缺陷、准确性,或目前或没有出错,不论是否 可在适用法律允许的最大限度内予以发现.

c. 确认不承担为其他人确认权利的责任 工作或其任何用途,包括不受限制地 任何个人在作品中的版权和相关权利。 更何况.. 免除获得任何必要同意、许可的责任 或任何使用该工作所需的其他权利.

d. 申明者理解并承认 " 创造常识 " 不是 本文件缔约方对此没有义务或义务 CC0或使用该作品.

详情请参见 [http://creativecommons.org/publicdomain/zero/1.0 (英语)](http://creativecommons.org/publicdomain/zero/1.0/)

## 常见问题

### @coreui/icons 是什么？

CoreUI 图标自由

### 如何安装 @coreui/icons？

在项目目录运行 npm install @coreui/icons，或使用 pnpm add / yarn add / bun add。

### @coreui/icons 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @coreui/icons 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @coreui/icons 可以商用吗？

@coreui/icons 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @coreui/icons 的下载量有多少？

根据 npm 官方下载统计，@coreui/icons 在 2026/10/11 – 2026/11/09 这 30 天内被下载 626,218 次，日均约 20,874 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @coreui/icons 还在维护吗？

最新版本 3\.1\.0 发布于 2026/04/16（6 个月前）；至今共发布 32 个版本，其中过去 12 个月发布了 1 个；首次发布于 2018/05/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。