hugeicons

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Hugeicons

Hugeicons is an SVG icon library with one rendering package per framework plus a shared icon set. This skill covers all official packages. Work in three steps: detect the framework, render with its component, then pick icon names from the right catalog.

⚠️ Read this first: grep the icon lists, never read them whole
The reference files under
references/
list thousands of icons and run tens of thousands of tokens each. Never open one in full — always
grep
for a keyword and copy the exact match:
bash
grep -i search references/icon-list.md          # JS frameworks
grep -i home   references/icon-list-flutter.md   # Flutter
Do not rely on memory for icon names — a guessed name may not exist, or may exist but be the wrong glyph (e.g.
LeftToRightBlockQuoteIcon
is quote marks, not the bracket you wanted). Grep, confirm, copy.

Hugeicons是一个SVG图标库，每个框架对应一个渲染包，同时共享一套图标集。本技能文档涵盖所有官方包。操作分为三步：检测框架、使用对应组件渲染、从正确的目录中选择图标名称。

⚠️ 必读提示：使用grep搜索图标列表，切勿完整查看
references/
目录下的参考文件列出了数千个图标，占用数万个token。切勿完整打开文件——务必使用
grep
搜索关键词并复制精确匹配的结果：
bash
grep -i search references/icon-list.md          # JS框架适用
grep -i home   references/icon-list-flutter.md   # Flutter适用
不要依赖记忆来拼写图标名称——猜测的名称可能不存在，或者存在但对应错误的图标样式（例如
LeftToRightBlockQuoteIcon
是引号标记，而非你想要的括号样式）。请使用grep搜索、确认后再复制。

1. Detect the framework

1. 检测框架

Check the project's manifest and match the installed package:

Framework	Detect by	Component
React	`@hugeicons/react` in package.json	`HugeiconsIcon`
Vue	`@hugeicons/vue` in package.json	`HugeiconsIcon`
Svelte	`@hugeicons/svelte` in package.json	`HugeiconsIcon`
Angular	`@hugeicons/angular` in package.json	`hugeicons-icon`
React Native	`@hugeicons/react-native` in package.json	`HugeiconsIcon`
Flutter	`hugeicons` in pubspec.yaml	`HugeIcon`

If more than one matches (e.g. a monorepo), use the one for the file you are editing.

检查项目的清单文件，匹配已安装的包：

框架	检测方式	组件
React	package.json中存在 `@hugeicons/react`	`HugeiconsIcon`
Vue	package.json中存在 `@hugeicons/vue`	`HugeiconsIcon`
Svelte	package.json中存在 `@hugeicons/svelte`	`HugeiconsIcon`
Angular	package.json中存在 `@hugeicons/angular`	`hugeicons-icon`
React Native	package.json中存在 `@hugeicons/react-native`	`HugeiconsIcon`
Flutter	pubspec.yaml中存在 `hugeicons`	`HugeIcon`

如果多个框架匹配（例如单体仓库），请使用当前编辑文件对应的框架包。

2. Two architectures

2. 两种架构

JS frameworks (React, Vue, Svelte, Angular, React Native) — the
```
@hugeicons/*
```
package is a renderer only. Icons are named exports imported from a separate package,
```
@hugeicons/core-free-icons
```
(free). The same icon names work across all five frameworks.
Flutter — the
```
hugeicons
```
package bundles the icon data. Icons are
```
HugeIcons.*
```
constants of type
```
List<List<dynamic>>
```
(SVG path data, not Flutter
```
IconData
```
), rendered with
```
HugeIcon
```
— never Flutter's
```
Icon
```
.

JS框架（React、Vue、Svelte、Angular、React Native） ——
```
@hugeicons/*
```
包仅作为渲染器。图标是从独立包
```
@hugeicons/core-free-icons
```
（免费版）导入的命名导出。同一图标名称可在所有五个框架中通用。
Flutter ——
```
hugeicons
```
包内置图标数据。图标是
```
HugeIcons.*
```
类型为
```
List<List<dynamic>>
```
的常量（SVG路径数据，并非Flutter的
```
IconData
```
），需使用
```
HugeIcon
```
组件渲染——切勿使用Flutter的
```
Icon
```
组件。

3. Install & render (per framework)

3. 安装与渲染（按框架分类）

Keep generated code minimal:
icon
is the only required prop. Don't write props that just repeat the component's default value (e.g.
size={24}
,
color="currentColor"
,
strokeWidth={1.5}
) — pass a prop only when overriding a default. The defaults are listed in each props table below.

保持生成代码简洁：
icon
是唯一必填属性。不要编写重复组件默认值的属性（例如
size={24}
、
color="currentColor"
、
strokeWidth={1.5}
）——仅在需要覆盖默认值时才传入属性。以下各属性表格中列出了默认值。

React

Install:

bash

npm install @hugeicons/react @hugeicons/core-free-icons

Render:

jsx

import { HugeiconsIcon } from '@hugeicons/react';
import { Search01Icon } from '@hugeicons/core-free-icons';

function App() {
  // Only `icon` is required; pass other props only to override a default.
  return <HugeiconsIcon icon={Search01Icon} />;
}

Props:

Prop	Type	Default	Description
`icon`	`IconSvgElement`	Required	The main icon to display (a named export from an icon package)
`altIcon`	`IconSvgElement`	-	Alternative icon for states, interactions, or dynamic swapping
`showAlt`	`boolean`	false	When true, displays `altIcon` instead of `icon`
`size`	`number \| string`	24	Icon size in pixels
`color`	`string`	currentColor	Icon color (any CSS color value)
`strokeWidth`	`number`	1.5	Width of the icon strokes
`absoluteStrokeWidth`	`boolean`	false	When true, stroke width is scaled relative to icon size
`primaryColor`	`string`	-	Primary color for multicolor Pro icons (Bulk, Duotone, Twotone)
`secondaryColor`	`string`	-	Secondary color for multicolor Pro icons
`disableSecondaryOpacity`	`boolean`	false	Disables default opacity applied to the secondary color
`className`	`string`	-	Additional CSS classes

安装：

bash

npm install @hugeicons/react @hugeicons/core-free-icons

渲染：

jsx

import { HugeiconsIcon } from '@hugeicons/react';
import { Search01Icon } from '@hugeicons/core-free-icons';

function App() {
  // 仅`icon`为必填；仅在需要覆盖默认值时传入其他属性。
  return <HugeiconsIcon icon={Search01Icon} />;
}

属性：

属性	类型	默认值	说明
`icon`	`IconSvgElement`	必填	要显示的主图标（从图标包中导出的命名项）
`altIcon`	`IconSvgElement`	-	用于状态切换、交互或动态替换的备选图标
`showAlt`	`boolean`	false	设为true时，显示 `altIcon` 而非主图标
`size`	`number \| string`	24	图标尺寸（像素）
`color`	`string`	currentColor	图标颜色（支持任意CSS颜色值）
`strokeWidth`	`number`	1.5	图标描边宽度
`absoluteStrokeWidth`	`boolean`	false	设为true时，描边宽度会随图标尺寸缩放
`primaryColor`	`string`	-	多色Pro版图标（Bulk、Duotone、Twotone）的主色调
`secondaryColor`	`string`	-	多色Pro版图标的次色调
`disableSecondaryOpacity`	`boolean`	false	禁用次色调的默认透明度效果
`className`	`string`	-	额外的CSS类名

Vue

Install:

bash

npm install @hugeicons/vue @hugeicons/core-free-icons

Render:

vue

<script setup>
import { HugeiconsIcon } from '@hugeicons/vue'
import { Search01Icon } from '@hugeicons/core-free-icons'
</script>

<template>
  <!-- Only :icon is required; pass other props only to override a default. -->
  <HugeiconsIcon :icon="Search01Icon" />
</template>

Props:

Prop	Type	Default	Description
`icon`	`IconSvgObject`	Required	The main icon to display (a named export from an icon package)
`altIcon`	`IconSvgObject`	-	Alternative icon for states, interactions, or animations
`showAlt`	`boolean`	false	When true, displays `altIcon` instead of `icon`
`size`	`number`	24	Icon size in pixels
`color`	`string`	currentColor	Icon color (any CSS color value)
`strokeWidth`	`number`	1.5	Width of the icon strokes
`class`	`string`	-	Additional CSS classes

安装：

bash

npm install @hugeicons/vue @hugeicons/core-free-icons

渲染：

vue

<script setup>
import { HugeiconsIcon } from '@hugeicons/vue'
import { Search01Icon } from '@hugeicons/core-free-icons'
</script>

<template>
  <!-- 仅:icon为必填；仅在需要覆盖默认值时传入其他属性。 -->
  <HugeiconsIcon :icon="Search01Icon" />
</template>

属性：

属性	类型	默认值	说明
`icon`	`IconSvgObject`	必填	要显示的主图标（从图标包中导出的命名项）
`altIcon`	`IconSvgObject`	-	用于状态切换、交互或动画的备选图标
`showAlt`	`boolean`	false	设为true时，显示 `altIcon` 而非主图标
`size`	`number`	24	图标尺寸（像素）
`color`	`string`	currentColor	图标颜色（支持任意CSS颜色值）
`strokeWidth`	`number`	1.5	图标描边宽度
`class`	`string`	-	额外的CSS类名

Svelte

Install:

bash

npm install @hugeicons/svelte @hugeicons/core-free-icons

Render:

svelte

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte'
  import { Search01Icon } from '@hugeicons/core-free-icons'
</script>

<!-- Only icon is required; pass other props only to override a default. -->
<HugeiconsIcon icon={Search01Icon} />

Props:

Prop	Type	Default	Description
`icon`	`IconSvgObject`	Required	The main icon to display (a named export from an icon package)
`altIcon`	`IconSvgObject`	-	Alternative icon for states, interactions, or animations
`showAlt`	`boolean`	false	When true, displays `altIcon` instead of `icon`
`size`	`number`	24	Icon size in pixels
`color`	`string`	currentColor	Icon color (any CSS color value)
`strokeWidth`	`number`	1.5	Width of the icon strokes
`class`	`string`	-	Additional CSS classes

安装：

bash

npm install @hugeicons/svelte @hugeicons/core-free-icons

渲染：

svelte

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte'
  import { Search01Icon } from '@hugeicons/core-free-icons'
</script>

<!-- 仅icon为必填；仅在需要覆盖默认值时传入其他属性。 -->
<HugeiconsIcon icon={Search01Icon} />

属性：

属性	类型	默认值	说明
`icon`	`IconSvgObject`	必填	要显示的主图标（从图标包中导出的命名项）
`altIcon`	`IconSvgObject`	-	用于状态切换、交互或动画的备选图标
`showAlt`	`boolean`	false	设为true时，显示 `altIcon` 而非主图标
`size`	`number`	24	图标尺寸（像素）
`color`	`string`	currentColor	图标颜色（支持任意CSS颜色值）
`strokeWidth`	`number`	1.5	图标描边宽度
`class`	`string`	-	额外的CSS类名

Angular

Install:

bash

npm install @hugeicons/angular @hugeicons/core-free-icons

Note: The component is
HugeiconsIconComponent
, rendered via the
<hugeicons-icon>
selector. Import the icon in the component class and bind it with
[icon]
.

Render:

typescript

// example.component.ts
import { Component } from '@angular/core'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import { Search01Icon } from '@hugeicons/core-free-icons'

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [HugeiconsIconComponent],
  // Only [icon] is required; bind other props only to override a default.
  template: `<hugeicons-icon [icon]="searchIcon" />`,
})
export class ExampleComponent {
  searchIcon = Search01Icon
}

Props:

Prop	Type	Default	Description
`icon`	`IconSvgObject`	Required	The main icon to display (a named export from an icon package)
`altIcon`	`IconSvgObject`	-	Alternative icon for states, interactions, or animations
`showAlt`	`boolean`	false	When true, displays `altIcon` instead of `icon`
`size`	`number`	24	Icon size in pixels
`color`	`string`	currentColor	Icon color (any CSS color value)
`strokeWidth`	`number`	1.5	Width of the icon strokes
`class`	`string`	-	Additional CSS classes

安装：

bash

npm install @hugeicons/angular @hugeicons/core-free-icons

注意： 组件为
HugeiconsIconComponent
，通过
<hugeicons-icon>
选择器渲染。在组件类中导入图标，并使用
[icon]
绑定。

渲染：

typescript

// example.component.ts
import { Component } from '@angular/core'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import { Search01Icon } from '@hugeicons/core-free-icons'

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [HugeiconsIconComponent],
  // 仅[icon]为必填；仅在需要覆盖默认值时绑定其他属性。
  template: `<hugeicons-icon [icon]="searchIcon" />`,
})
export class ExampleComponent {
  searchIcon = Search01Icon
}

属性：

属性	类型	默认值	说明
`icon`	`IconSvgObject`	必填	要显示的主图标（从图标包中导出的命名项）
`altIcon`	`IconSvgObject`	-	用于状态切换、交互或动画的备选图标
`showAlt`	`boolean`	false	设为true时，显示 `altIcon` 而非主图标
`size`	`number`	24	图标尺寸（像素）
`color`	`string`	currentColor	图标颜色（支持任意CSS颜色值）
`strokeWidth`	`number`	1.5	图标描边宽度
`class`	`string`	-	额外的CSS类名

React Native

Install:

bash

npm install @hugeicons/react-native @hugeicons/core-free-icons

Note: Color defaults to
#000000
(not
currentColor
) because React Native has no CSS color inheritance.

Render:

jsx

import { HugeiconsIcon } from '@hugeicons/react-native'
import { Search01Icon } from '@hugeicons/core-free-icons'

export default function App() {
  // Only `icon` is required; pass other props only to override a default.
  return <HugeiconsIcon icon={Search01Icon} />
}

Props:

Prop	Type	Default	Description
`icon`	`IconSvgObject`	Required	The main icon to display (a named export from an icon package)
`altIcon`	`IconSvgObject`	-	Alternative icon for states, interactions, or animations
`showAlt`	`boolean`	false	When true, displays `altIcon` instead of `icon`
`size`	`number`	24	Icon size in pixels
`color`	`string`	#000000	Icon color (color string)
`strokeWidth`	`number`	1.5	Width of the icon strokes

安装：

bash

npm install @hugeicons/react-native @hugeicons/core-free-icons

注意： 颜色默认值为
#000000
（而非
currentColor
），因为React Native不支持CSS颜色继承。

渲染：

jsx

import { HugeiconsIcon } from '@hugeicons/react-native'
import { Search01Icon } from '@hugeicons/core-free-icons'

export default function App() {
  // 仅`icon`为必填；仅在需要覆盖默认值时传入其他属性。
  return <HugeiconsIcon icon={Search01Icon} />
}

属性：

属性	类型	默认值	说明
`icon`	`IconSvgObject`	必填	要显示的主图标（从图标包中导出的命名项）
`altIcon`	`IconSvgObject`	-	用于状态切换、交互或动画的备选图标
`showAlt`	`boolean`	false	设为true时，显示 `altIcon` 而非主图标
`size`	`number`	24	图标尺寸（像素）
`color`	`string`	#000000	图标颜色（颜色字符串）
`strokeWidth`	`number`	1.5	图标描边宽度

Flutter

Install:

bash

flutter pub add hugeicons

Note: Flutter bundles the icon data directly:
HugeIcons.*
constants are
List<List<dynamic>>
SVG path data, not
IconData
. Render with
HugeIcon
, never Flutter's
Icon
.

Render:

dart

import 'package:hugeicons/hugeicons.dart';

// Only `icon` is required; color and size fall back to the ambient IconTheme.
// Pass color/size only to override those defaults.
HugeIcon(
  icon: HugeIcons.strokeRoundedHome01,
  color: Colors.black,
)

Props:

Prop	Type	Default	Description
`icon`	`List<List<dynamic>>`	Required	The icon data (a `HugeIcons.*` constant) — NOT a Flutter `IconData`
`color`	`Color`	IconTheme color	Icon color; falls back to the ambient `IconTheme`
`size`	`double`	24.0	Icon size in logical pixels; falls back to `IconTheme` size
`strokeWidth`	`double`	-	Stroke thickness for stroke-style icons

安装：

bash

flutter pub add hugeicons

注意： Flutter直接内置图标数据：
HugeIcons.*
常量是
List<List<dynamic>>
类型的SVG路径数据，而非
IconData
。需使用
HugeIcon
组件渲染，切勿使用Flutter的
Icon
组件。

渲染：

dart

import 'package:hugeicons/hugeicons.dart';

// 仅`icon`为必填；颜色和尺寸会继承环境中的IconTheme设置。
// 仅在需要覆盖默认值时传入color/size属性。
HugeIcon(
  icon: HugeIcons.strokeRoundedHome01,
  color: Colors.black,
)

属性：

属性	类型	默认值	说明
`icon`	`List<List<dynamic>>`	必填	图标数据（ `HugeIcons.*` 常量）——并非Flutter的 `IconData`
`color`	`Color`	IconTheme颜色	图标颜色；会继承环境中的 `IconTheme` 设置
`size`	`double`	24.0	图标尺寸（逻辑像素）；会继承 `IconTheme` 的尺寸设置
`strokeWidth`	`double`	-	描边样式图标的描边厚度

4. Find an icon

4. 查找图标

React, Vue, Svelte, Angular, React Native — PascalCase named exports ending in
```
Icon
```
(e.g.
```
Search01Icon
```
,
```
Home01Icon
```
,
```
Notification03Icon
```
). Number words are spelled out:
```
1st-bracket
```
→
```
FirstBracketIcon
```
,
```
3d-view
```
→
```
ThreeDViewIcon
```
. Import from
```
@hugeicons/core-free-icons
```
. Full list: references/icon-list.md (5,471 icons).
Flutter —
```
HugeIcons.strokeRounded<Name>
```
constants (e.g.
```
HugeIcons.strokeRoundedSearch01
```
). Full list: references/icon-list-flutter.md (4,547 icons).

Grep these files — don't read them whole (see the warning at the top). Search for a term, copy the exact matching name, and don't guess: many icons have numbered variants (

) — pick the one that best fits.

React、Vue、Svelte、Angular、React Native —— 采用大驼峰命名且以
```
Icon
```
结尾的导出项（例如
```
Search01Icon
```
、
```
Home01Icon
```
、
```
Notification03Icon
```
）。数字会拼写为英文单词：
```
1st-bracket
```
→
```
FirstBracketIcon
```
，
```
3d-view
```
→
```
ThreeDViewIcon
```
。从
```
@hugeicons/core-free-icons
```
导入。完整列表：references/icon-list.md（5471个图标）。
Flutter ——
```
HugeIcons.strokeRounded<Name>
```
格式的常量（例如
```
HugeIcons.strokeRoundedSearch01
```
）。完整列表：references/icon-list-flutter.md（4547个图标）。

请使用grep搜索这些文件——切勿完整查看（见顶部警告）。搜索关键词，复制精确匹配的名称，不要自行猜测：许多图标带有编号变体（

、

）——请选择最符合需求的版本。

5. Free vs Pro icons

5. 免费版 vs Pro版图标

Free (default):
```
@hugeicons/core-free-icons
```
— 5,100+ stroke-rounded icons. Suggest only these unless the user has a Pro license.

Pro (license required, authenticated install):

@hugeicons-pro/core-stroke-rounded

@hugeicons-pro/core-stroke-sharp

@hugeicons-pro/core-stroke-standard

@hugeicons-pro/core-solid-rounded

@hugeicons-pro/core-solid-sharp

@hugeicons-pro/core-solid-standard

@hugeicons-pro/core-bulk-rounded

@hugeicons-pro/core-duotone-rounded

@hugeicons-pro/core-duotone-standard

@hugeicons-pro/core-twotone-rounded

Never suggest a Pro-only icon to a free user — the import will fail.

免费版（默认）：
```
@hugeicons/core-free-icons
```
—— 包含5100+个描边圆角图标。除非用户拥有Pro版授权，否则仅推荐使用免费版。

Pro版（需授权，需认证安装）：

@hugeicons-pro/core-stroke-rounded

、

@hugeicons-pro/core-stroke-sharp

、

@hugeicons-pro/core-stroke-standard

、

@hugeicons-pro/core-solid-rounded

、

@hugeicons-pro/core-solid-sharp

、

@hugeicons-pro/core-solid-standard

、

@hugeicons-pro/core-bulk-rounded

、

@hugeicons-pro/core-duotone-rounded

、

@hugeicons-pro/core-duotone-standard

、

@hugeicons-pro/core-twotone-rounded

。

切勿向免费用户推荐仅Pro版可用的图标——否则导入会失败。

Troubleshooting

故障排查

Icon not rendering: confirm
```
icon
```
is a valid export/constant and not null.
JS import fails: the name is misspelled or Pro-only. Check the exact export in
```
references/icon-list.md
```
.
Flutter type error expecting
IconData
: wrong type — Hugeicons constants are
```
List<List<dynamic>>
```
. Render with
```
HugeIcon
```
, not
```
Icon
```
.

图标未渲染：确认
```
icon
```
是有效的导出项/常量且不为null。
JS导入失败：名称拼写错误或该图标仅Pro版可用。请在
```
references/icon-list.md
```
中检查精确的导出项。
Flutter类型错误，期望
IconData
：类型不匹配——Hugeicons常量是
```
List<List<dynamic>>
```
类型。请使用
```
HugeIcon
```
组件渲染，而非
```
Icon
```
组件。