# Introduction to Univer Icons

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

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

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

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

---

Univer Icons is an icon library for toolbars, menus, and document editing interfaces. Use it in React or Vue 3, and import the icons your interface needs.

Icon package version: `^1.38.0`

## Choose your integration

Install the package for your framework. Both packages use the same component names, such as `CopyIcon` and `SearchIcon`.

| Framework | Package               |
| --------- | --------------------- |
| React     | `@univerjs/icons`     |
| Vue 3     | `@univerjs/icons-vue` |

## Find an icon

Open the [icon preview](https://docs.univer.ai/guides/icons/all-icons.md) to browse by category or search with an English keyword such as `copy` or `search`. Adjust the size and colors to see how an icon fits your interface, then click it to copy its React import.

If you use an AI Agent, connect [MCP](https://docs.univer.ai/guides/icons/ai.md) and describe the action you want to represent. Your AI Agent can look up matching icons and their React or Vue usage.

## Start using icons

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

- [Integrate with React](https://docs.univer.ai/guides/icons/react.md)

- [Integrate with Vue](https://docs.univer.ai/guides/icons/vue.md)

- [Icon preview](https://docs.univer.ai/guides/icons/all-icons.md)

For source code and issue reports, visit [dream-num/univer-icons](https://github.com/dream-num/univer-icons).