# 图标 (/zh/components/icons)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 751 · updated: 2026-07-30 -->
Related: [折叠面板](/zh/components/accordions.md), [徽章](/zh/components/badge.md), [横幅](/zh/components/banner.md), [标注框](/zh/components/callouts.md), [卡片](/zh/components/cards.md), [代码分组](/zh/components/code-groups.md)

使用来自 Font Awesome、Lucide、Tabler、SVG、外部 URL 或项目文件的图标，丰富你的文档。

<Icon icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M5.0249 21C5.04385 19.2643 5.04366 17.5541 5.0366 15.9209M5.0366 15.9209C5.01301 10.4614 4.91276 5.86186 5.19475 4.04271C5.5611 1.67939 9.39301 3.82993 13.9703 5.59842L16.0328 6.48729C17.5508 7.1415 19.7187 8.30352 18.7662 9.66084C18.3738 10.22 17.56 10.8596 16.0575 11.567L5.0366 15.9209Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" size="32" />

```mdx title="Icon example"
<Icon icon="flag" size={32} />
```

## 自定义图像图标 [#自定义图像图标]

使用 `src` 属性将自定义图像显示为图标。该图像可以是项目中的文件，也可以是外部托管的 URL。

```mdx title="Custom image icon examples"
<Icon src="/images/my-icon.svg" />

<Icon src="https://example.com/icon.png" />
```

<div id="inline-icons">
  ## 行内图标 [#行内图标]
</div>

当在句子、段落或标题中使用时，图标会以内联形式呈现。 <Icon icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M5.0249 21C5.04385 19.2643 5.04366 17.5541 5.0366 15.9209M5.0366 15.9209C5.01301 10.4614 4.91276 5.86186 5.19475 4.04271C5.5611 1.67939 9.39301 3.82993 13.9703 5.59842L16.0328 6.48729C17.5508 7.1415 19.7187 8.30352 18.7662 9.66084C18.3738 10.22 17.56 10.8596 16.0575 11.567L5.0366 15.9209Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" iconType="solid" /> 你可以将图标用于装饰，或用于强化视觉重点。

```markdown title="Inline icon example"
图标在句子、段落或标题中使用时会内联显示。<Icon icon="flag" iconType="solid" /> 使用图标可以起到装饰作用或增强视觉效果。
```

<div id="properties">
  ## 属性 [#属性]
</div>

<Info>
  必须提供 `icon` 或 `src` 之一。
</Info>

<ResponseField name="icon" type="string">
  要从图标库中显示的图标。

  可选值：

  * 如果在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `fontawesome`，则为 [Font Awesome 图标](https://fontawesome.com/icons) 的名称
  * 如果在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `lucide`，则为 [Lucide 图标](https://lucide.dev/icons) 的名称
  * 如果在 `docs.json` 中将 `icons.library` [属性](/zh/organize/settings#param-icons) 设置为 `tabler`，则为 [Tabler 图标](https://tabler.io/icons) 的名称
</ResponseField>

<ResponseField name="src" type="string">
  用作图标的图像的路径或 URL。当你希望使用自定义图像而不是图标库中的图标时，请使用 `src` 代替 `icon`。

  可选值：

  * 项目中图像文件的路径（例如，`/images/my-icon.svg`）
  * 外部托管图像的 URL（例如，`https://example.com/icon.png`）
</ResponseField>

<ResponseField name="iconType" type="string">
  [Font Awesome](https://fontawesome.com/icons) 的图标样式。仅在使用 Font Awesome 图标时有效。

  可选值：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
</ResponseField>

<ResponseField name="color" type="string">
  icon 的颜色，使用十六进制色值（例如 `#FF5733`）。
</ResponseField>

<ResponseField name="size" type="number">
  icon 的尺寸（像素）。
</ResponseField>

<ResponseField name="className" type="string">
  应用于 icon 的自定义 CSS 类名。
</ResponseField>