# Univer Icons 简介

- Human documentation: [https://docs.univer.ai/zh-CN/guides/icons](https://docs.univer.ai/zh-CN/guides/icons)

- Agent Markdown: [https://docs.univer.ai/zh-CN/guides/icons.md](https://docs.univer.ai/zh-CN/guides/icons.md)

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [icons/index.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/index.zh-CN.mdx)

---

Univer Icons 是适用于工具栏、菜单和文档编辑界面的图标库。你可以在 React 或 Vue 3 项目中使用它，并按需导入界面需要的图标。

图标包版本： `^1.38.0`

## 选择集成方式

根据项目使用的框架安装对应包。两个包使用相同的组件名，例如 `CopyIcon` 和 `SearchIcon`。

| 框架    | 安装包                   |
| ----- | --------------------- |
| React | `@univerjs/icons`     |
| Vue 3 | `@univerjs/icons-vue` |

## 找到合适的图标

打开[图标预览](https://docs.univer.ai/zh-CN/guides/icons/all-icons.md)，按分类浏览，或输入 `copy`、`search` 等英文关键词查找图标。调整尺寸和颜色，确认效果后点击图标，即可复制 React 导入语句。

如果你使用 AI Agent，可以连接 [MCP 服务](https://docs.univer.ai/zh-CN/guides/icons/ai.md)，描述图标需要表达的操作。AI Agent 会查找候选图标，并获取对应的 React 或 Vue 用法。

## 开始使用

- [MCP 服务](https://docs.univer.ai/zh-CN/guides/icons/ai.md)

- [在 React 中集成](https://docs.univer.ai/zh-CN/guides/icons/react.md)

- [在 Vue 中集成](https://docs.univer.ai/zh-CN/guides/icons/vue.md)

- [图标预览](https://docs.univer.ai/zh-CN/guides/icons/all-icons.md)

源码和问题反馈请访问 [dream-num/univer-icons](https://github.com/dream-num/univer-icons)。