# Univer Icons の紹介

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

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

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.2.0`

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

---

Univer Icons は、ツールバー、メニュー、文書編集画面で使えるアイコンライブラリです。React と Vue 3 に対応し、必要なアイコンを個別にインポートできます。



## フレームワークを選ぶ

使用するフレームワークに合わせてパッケージを選びます。どちらも `CopyIcon` や `SearchIcon` など、同じコンポーネント名を使います。

| フレームワーク | パッケージ                 |
| ------- | --------------------- |
| React   | `@univerjs/icons`     |
| Vue 3   | `@univerjs/icons-vue` |

## アイコンを探す

[アイコンプレビュー](https://docs.univer.ai/ja-JP/guides/icons/all-icons.md)で分類から探すか、`copy` や `search` などの英語キーワードで検索します。サイズと色を調整して確認し、アイコンをクリックすると React のインポート文をコピーできます。

AI Agentを使う場合は、[MCP サービス](https://docs.univer.ai/ja-JP/guides/icons/ai.md)に接続して表現したい操作を伝えます。AI Agentが候補と React または Vue での使い方を調べます。

## 使い始める

- [MCP サービス](https://docs.univer.ai/ja-JP/guides/icons/ai.md)

- [React への組み込み](https://docs.univer.ai/ja-JP/guides/icons/react.md)

- [Vue への組み込み](https://docs.univer.ai/ja-JP/guides/icons/vue.md)

- [アイコンプレビュー](https://docs.univer.ai/ja-JP/guides/icons/all-icons.md)

ソースコードと問題の報告は [dream-num/univer-icons](https://github.com/dream-num/univer-icons)をご覧ください。