> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-docs-automation-github-pr-review.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 图标

> 使用图标组件将 Font Awesome、Lucide、Tabler 或自定义来源的图标添加到文档页面，支持尺寸和颜色选项。

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

<Icon icon="flag" size={32} />

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

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

当在句子、段落或标题中使用时，图标会以内联形式呈现。 <Icon icon="flag" iconType="solid" /> 你可以将图标用于装饰，或用于强化视觉重点。

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

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

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

  可选值：

  * 如果在 `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) 的名称
  * 指向外部托管图标的 URL
  * 项目中图标文件的路径
</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>