feat(component): emoji and icon picker (#13638)

![CleanShot 2025-09-23 at 17 11 13](https://github.com/user-attachments/assets/0a4a9d09-1149-4042-bc73-e068a428f335)  ## Summary by CodeRabbit - **New Features** - Icon Picker added with Emoji and Icon panels, search/filtering, recent selections, color selection, skin tone options, and smooth group navigation. - **Documentation** - Storybook example added to preview and test the Icon Picker. - **Chores** - Bumped icon library dependency to a newer minor version. - Added emoji data dependency to support the Emoji Picker.
2026-02-04 00:28:33 +00:00 · 2025-09-24 15:14:54 +08:00
parent 812c2d86d4
commit ca9811792d
89 changed files with 36266 additions and 132 deletions
--- a/blocksuite/affine/blocks/attachment/package.json
+++ b/blocksuite/affine/blocks/attachment/package.json
@@ -17,7 +17,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/bookmark/package.json
+++ b/blocksuite/affine/blocks/bookmark/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/blocks/callout/package.json
+++ b/blocksuite/affine/blocks/callout/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@emoji-mart/data": "^1.2.1",
--- a/blocksuite/affine/blocks/code/package.json
+++ b/blocksuite/affine/blocks/code/package.json
@@ -22,7 +22,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/data-view/package.json
+++ b/blocksuite/affine/blocks/data-view/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/database/package.json
+++ b/blocksuite/affine/blocks/database/package.json
@@ -21,7 +21,7 @@
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@emotion/css": "^11.13.5",
--- a/blocksuite/affine/blocks/edgeless-text/package.json
+++ b/blocksuite/affine/blocks/edgeless-text/package.json
@@ -20,7 +20,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/embed-doc/package.json
+++ b/blocksuite/affine/blocks/embed-doc/package.json
@@ -20,7 +20,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/embed/package.json
+++ b/blocksuite/affine/blocks/embed/package.json
@@ -20,7 +20,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/frame/package.json
+++ b/blocksuite/affine/blocks/frame/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/affine-widget-frame-title": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/image/package.json
+++ b/blocksuite/affine/blocks/image/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/latex/package.json
+++ b/blocksuite/affine/blocks/latex/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/list/package.json
+++ b/blocksuite/affine/blocks/list/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/note/package.json
+++ b/blocksuite/affine/blocks/note/package.json
@@ -22,7 +22,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/blocks/root/package.json
+++ b/blocksuite/affine/blocks/root/package.json
@@ -38,7 +38,7 @@
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/surface-ref/package.json
+++ b/blocksuite/affine/blocks/surface-ref/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/table/package.json
+++ b/blocksuite/affine/blocks/table/package.json
@@ -20,7 +20,7 @@
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@emotion/css": "^11.13.5",
--- a/blocksuite/affine/components/package.json
+++ b/blocksuite/affine/components/package.json
@@ -13,7 +13,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@blocksuite/sync": "workspace:*",
--- a/blocksuite/affine/data-view/package.json
+++ b/blocksuite/affine/data-view/package.json
@@ -13,7 +13,7 @@
    "@blocksuite/affine-components": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@emotion/css": "^11.13.5",
--- a/blocksuite/affine/foundation/package.json
+++ b/blocksuite/affine/foundation/package.json
@@ -16,7 +16,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/fragments/adapter-panel/package.json
+++ b/blocksuite/affine/fragments/adapter-panel/package.json
@@ -15,7 +15,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/fragments/doc-title/package.json
+++ b/blocksuite/affine/fragments/doc-title/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/fragments/frame-panel/package.json
+++ b/blocksuite/affine/fragments/frame-panel/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/fragments/outline/package.json
+++ b/blocksuite/affine/fragments/outline/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/gfx/brush/package.json
+++ b/blocksuite/affine/gfx/brush/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/connector/package.json
+++ b/blocksuite/affine/gfx/connector/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/group/package.json
+++ b/blocksuite/affine/gfx/group/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/link/package.json
+++ b/blocksuite/affine/gfx/link/package.json
@@ -21,7 +21,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/mindmap/package.json
+++ b/blocksuite/affine/gfx/mindmap/package.json
@@ -25,7 +25,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/note/package.json
+++ b/blocksuite/affine/gfx/note/package.json
@@ -21,7 +21,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/pointer/package.json
+++ b/blocksuite/affine/gfx/pointer/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/shape/package.json
+++ b/blocksuite/affine/gfx/shape/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/template/package.json
+++ b/blocksuite/affine/gfx/template/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/gfx/text/package.json
+++ b/blocksuite/affine/gfx/text/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/inlines/footnote/package.json
+++ b/blocksuite/affine/inlines/footnote/package.json
@@ -16,7 +16,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/inlines/latex/package.json
+++ b/blocksuite/affine/inlines/latex/package.json
@@ -17,7 +17,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/inlines/link/package.json
+++ b/blocksuite/affine/inlines/link/package.json
@@ -16,7 +16,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/inlines/mention/package.json
+++ b/blocksuite/affine/inlines/mention/package.json
@@ -15,7 +15,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/inlines/preset/package.json
+++ b/blocksuite/affine/inlines/preset/package.json
@@ -22,7 +22,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/inlines/reference/package.json
+++ b/blocksuite/affine/inlines/reference/package.json
@@ -15,7 +15,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/rich-text/package.json
+++ b/blocksuite/affine/rich-text/package.json
@@ -14,7 +14,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/shared/package.json
+++ b/blocksuite/affine/shared/package.json
@@ -12,7 +12,7 @@
  "dependencies": {
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/widgets/drag-handle/package.json
+++ b/blocksuite/affine/widgets/drag-handle/package.json
@@ -21,7 +21,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/widgets/edgeless-auto-connect/package.json
+++ b/blocksuite/affine/widgets/edgeless-auto-connect/package.json
@@ -17,7 +17,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@preact/signals-core": "^1.8.0",
    "@toeverything/theme": "^1.1.16",
--- a/blocksuite/affine/widgets/edgeless-dragging-area/package.json
+++ b/blocksuite/affine/widgets/edgeless-dragging-area/package.json
@@ -17,7 +17,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
--- a/blocksuite/affine/widgets/edgeless-selected-rect/package.json
+++ b/blocksuite/affine/widgets/edgeless-selected-rect/package.json
@@ -21,7 +21,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
--- a/blocksuite/affine/widgets/edgeless-toolbar/package.json
+++ b/blocksuite/affine/widgets/edgeless-toolbar/package.json
@@ -17,7 +17,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/widgets/edgeless-zoom-toolbar/package.json
+++ b/blocksuite/affine/widgets/edgeless-zoom-toolbar/package.json
@@ -16,7 +16,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
    "@preact/signals-core": "^1.8.0",
--- a/blocksuite/affine/widgets/keyboard-toolbar/package.json
+++ b/blocksuite/affine/widgets/keyboard-toolbar/package.json
@@ -33,7 +33,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/widgets/linked-doc/package.json
+++ b/blocksuite/affine/widgets/linked-doc/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/widgets/note-slicer/package.json
+++ b/blocksuite/affine/widgets/note-slicer/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-selected-rect": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
--- a/blocksuite/affine/widgets/page-dragging-area/package.json
+++ b/blocksuite/affine/widgets/page-dragging-area/package.json
@@ -15,7 +15,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/widgets/remote-selection/package.json
+++ b/blocksuite/affine/widgets/remote-selection/package.json
@@ -16,7 +16,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@preact/signals-core": "^1.8.0",
    "@toeverything/theme": "^1.1.16",
--- a/blocksuite/affine/widgets/slash-menu/package.json
+++ b/blocksuite/affine/widgets/slash-menu/package.json
@@ -15,7 +15,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/widgets/toolbar/package.json
+++ b/blocksuite/affine/widgets/toolbar/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
    "@preact/signals-core": "^1.8.0",
--- a/blocksuite/affine/widgets/viewport-overlay/package.json
+++ b/blocksuite/affine/widgets/viewport-overlay/package.json
@@ -15,7 +15,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
    "@preact/signals-core": "^1.8.0",
--- a/blocksuite/integration-test/package.json
+++ b/blocksuite/integration-test/package.json
@@ -14,7 +14,7 @@
  "license": "MIT",
  "dependencies": {
    "@blocksuite/affine": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@floating-ui/dom": "^1.6.13",
    "@lit/context": "^1.1.3",
    "@lottiefiles/dotlottie-wc": "^0.5.0",
--- a/blocksuite/playground/package.json
+++ b/blocksuite/playground/package.json
@@ -14,7 +14,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/integration-test": "workspace:*",
    "@preact/signals-core": "^1.8.0",
    "@shoelace-style/shoelace": "2.20.1",
--- a/packages/frontend/admin/package.json
+++ b/packages/frontend/admin/package.json
@@ -8,7 +8,7 @@
    "@affine/error": "workspace:*",
    "@affine/graphql": "workspace:*",
    "@affine/routes": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@radix-ui/react-accordion": "^1.2.2",
    "@radix-ui/react-alert-dialog": "^1.1.3",
    "@radix-ui/react-aspect-ratio": "^1.1.1",
--- a/packages/frontend/apps/android/package.json
+++ b/packages/frontend/apps/android/package.json
@@ -17,7 +17,7 @@
    "@affine/i18n": "workspace:*",
    "@affine/nbstore": "workspace:*",
    "@blocksuite/affine": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@capacitor/android": "^7.0.0",
    "@capacitor/app": "^7.0.0",
    "@capacitor/core": "^7.0.0",
--- a/packages/frontend/apps/ios/package.json
+++ b/packages/frontend/apps/ios/package.json
@@ -20,7 +20,7 @@
    "@affine/i18n": "workspace:*",
    "@affine/nbstore": "workspace:*",
    "@blocksuite/affine": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@capacitor/app": "^7.0.0",
    "@capacitor/browser": "^7.0.0",
    "@capacitor/core": "^7.0.0",
--- a/packages/frontend/apps/mobile/package.json
+++ b/packages/frontend/apps/mobile/package.json
@@ -15,7 +15,7 @@
    "@affine/i18n": "workspace:*",
    "@affine/nbstore": "workspace:*",
    "@blocksuite/affine": "workspace:*",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@sentry/react": "^9.2.0",
    "@toeverything/infra": "workspace:*",
    "react": "^19.0.0",
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -27,7 +27,7 @@
    "@affine/i18n": "workspace:*",
    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/icons": "^2.2.17",
    "@emoji-mart/data": "^1.2.1",
    "@emoji-mart/react": "^1.1.1",
    "@emotion/react": "^11.14.0",
@@ -54,6 +54,7 @@
    "clsx": "^2.1.1",
    "dayjs": "^1.11.13",
    "emoji-mart": "^5.6.0",
+    "emojibase-data": "^16.0.3",
    "foxact": "^0.2.45",
    "jotai": "^2.10.3",
    "lit": "^3.2.1",
--- a/packages/frontend/component/src/index.ts
+++ b/packages/frontend/component/src/index.ts
@@ -13,6 +13,7 @@ export * from './ui/editable';
 export * from './ui/empty';
 export * from './ui/error-message';
 export * from './ui/icon-name-editor';
+export * from './ui/icon-picker';
 export * from './ui/input';
 export * from './ui/layout';
 export * from './ui/loading';
--- a/packages/frontend/component/src/ui/icon-picker/icon-picker.css.ts
+++ b/packages/frontend/component/src/ui/icon-picker/icon-picker.css.ts
@@ -0,0 +1,31 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  width: 390,
+  maxWidth: '100%',
+  height: 400,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const header = style({
+  padding: '12px 12px 0px 12px',
+});
+export const headerContent = style({
+  borderBottom: `0.5px solid ${cssVarV2.layer.insideBorder.border}`,
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+export const headerNav = style({
+  backgroundColor: 'transparent',
+});
+export const headerNavItem = style({
+  marginBottom: 6,
+  fontSize: 14,
+});
+
+export const main = style({
+  height: 0,
+  flexGrow: 1,
+});
--- a/packages/frontend/component/src/ui/icon-picker/icon-picker.stories.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/icon-picker.stories.tsx
@@ -0,0 +1,20 @@
+import { IconPicker } from './icon-picker';
+
+export default {
+  title: 'UI/IconPicker',
+  component: IconPicker,
+};
+
+export const Default = () => {
+  return (
+    <>
+      <div>Selected: // TODO</div>
+      <IconPicker
+        style={{
+          border: '1px solid rgba(100, 100, 100, 0.2)',
+          borderRadius: 8,
+        }}
+      />
+    </>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/icon-picker.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/icon-picker.tsx
@@ -0,0 +1,71 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import clsx from 'clsx';
+import { type HTMLAttributes, useState } from 'react';
+
+import { Button } from '../button';
+import { RadioGroup, type RadioItem } from '../radio';
+import * as styles from './icon-picker.css';
+import { AffineIconPicker } from './picker/affine-icon/affine-icon-picker';
+import { EmojiPicker } from './picker/emoji/emoji-picker';
+
+const panels: Array<RadioItem> = [
+  { value: 'Emoji', className: styles.headerNavItem },
+  { value: 'Icons', className: styles.headerNavItem },
+];
+
+export const IconPicker = ({
+  className,
+  style,
+}: HTMLAttributes<HTMLDivElement> & {
+  onSelect?: (
+    type: 'emoji' | 'affine-icon',
+    data: { icon?: string; color?: string }
+  ) => void;
+}) => {
+  const [activePanel, setActivePanel] = useState<string>('Icons');
+
+  // const ActivePanel = panels.find(
+  //   panel => panel.value === activePanel
+  // )?.component;
+
+  return (
+    <div className={clsx(styles.container, className)} style={{ ...style }}>
+      <header className={styles.header}>
+        <div className={styles.headerContent}>
+          {/* Nav */}
+          <RadioGroup
+            items={panels}
+            value={activePanel}
+            onChange={setActivePanel}
+            gap={12}
+            padding={0}
+            borderRadius={4}
+            className={styles.headerNav}
+            indicatorStyle={{
+              backgroundColor: cssVarV2.button.primary,
+              height: 2,
+              bottom: -6,
+              top: 'unset',
+            }}
+          />
+
+          {/* Remove */}
+          <Button
+            variant="plain"
+            style={{ color: cssVarV2.text.secondary, fontWeight: 500 }}
+            onClick={() => void 0}
+          >
+            Remove
+          </Button>
+        </div>
+      </header>
+      <main className={styles.main}>
+        {activePanel === 'Emoji' ? (
+          <EmojiPicker />
+        ) : activePanel === 'Icons' ? (
+          <AffineIconPicker />
+        ) : null}
+      </main>
+    </div>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/index.ts
+++ b/packages/frontend/component/src/ui/icon-picker/index.ts
@@ -0,0 +1 @@
+export * from './icon-picker';
--- a/packages/frontend/component/src/ui/icon-picker/picker/affine-icon/affine-icon-picker.css.ts
+++ b/packages/frontend/component/src/ui/icon-picker/picker/affine-icon/affine-icon-picker.css.ts
@@ -0,0 +1,17 @@
+import { style } from '@vanilla-extract/css';
+
+export const colorList = style({
+  display: 'flex',
+  gap: 4,
+});
+
+export const colorItem = style({
+  padding: 2,
+});
+
+export const colorDot = style({
+  width: '1em',
+  height: '1em',
+  borderRadius: '50%',
+  background: 'currentColor',
+});
--- a/packages/frontend/component/src/ui/icon-picker/picker/affine-icon/affine-icon-picker.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/affine-icon/affine-icon-picker.tsx
@@ -0,0 +1,201 @@
+import keywords from '@blocksuite/icons/keywords/en.json';
+import * as allIcons from '@blocksuite/icons/rc';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { startTransition, useCallback, useEffect, useState } from 'react';
+
+import { IconButton } from '../../../button';
+import Input from '../../../input';
+import { Menu } from '../../../menu';
+import { Scrollable } from '../../../scrollbar';
+import { AffineIconRenderer } from '../../renderer/affine-icon';
+import * as pickerStyles from '../picker.css';
+import * as styles from './affine-icon-picker.css';
+
+type Icon = {
+  name: string;
+  keywords: string[];
+};
+
+const icons = keywords['Emoji Panel'] as Icon[];
+
+const colorList: string[] = [
+  cssVarV2.block.callout.icon.red,
+  cssVarV2.block.callout.icon.orange,
+  cssVarV2.block.callout.icon.yellow,
+  cssVarV2.block.callout.icon.green,
+  cssVarV2.block.callout.icon.teal,
+  cssVarV2.block.callout.icon.blue,
+  cssVarV2.block.callout.icon.purple,
+  cssVarV2.block.callout.icon.magenta,
+  cssVarV2.block.callout.icon.grey,
+];
+
+const useRecentIcons = () => {
+  const [recentIcons, setRecentIcons] = useState<Array<string>>([]);
+
+  useEffect(() => {
+    const recentIcons = localStorage.getItem('recentIcons');
+    setRecentIcons(recentIcons ? recentIcons.split(',') : []);
+  }, []);
+
+  const add = useCallback((icon: string) => {
+    setRecentIcons(prevRecentIcons => {
+      const newRecentIcons = [
+        icon,
+        ...prevRecentIcons.filter(e => e !== icon),
+      ].slice(0, 10);
+      localStorage.setItem('recentIcons', newRecentIcons.join(','));
+      return newRecentIcons;
+    });
+  }, []);
+
+  return {
+    recentIcons,
+    add,
+  };
+};
+
+export const AffineIconPicker = ({
+  onSelect,
+}: {
+  onSelect?: (icon: string, color: string) => void;
+}) => {
+  const [filteredIcons, setFilteredIcons] = useState<Icon[]>([]);
+  const [keyword, setKeyword] = useState('');
+  const [color, setColor] = useState<string>(cssVarV2.block.callout.icon.blue);
+
+  const { recentIcons, add: addRecentIcon } = useRecentIcons();
+
+  useEffect(() => {
+    startTransition(() => {
+      if (!keyword) {
+        setFilteredIcons(icons);
+        return;
+      }
+
+      setFilteredIcons(
+        icons.filter(icon =>
+          icon.keywords.some(kw => kw.includes(keyword.toLowerCase()))
+        )
+      );
+    });
+  }, [keyword]);
+
+  const handleIconSelect = useCallback(
+    (icon: string) => {
+      addRecentIcon(icon);
+      onSelect?.(icon, color);
+    },
+    [addRecentIcon, onSelect, color]
+  );
+
+  return (
+    <div className={pickerStyles.root}>
+      {/* Search */}
+      <header className={pickerStyles.searchContainer}>
+        <Input
+          value={keyword}
+          onChange={setKeyword}
+          className={pickerStyles.searchInput}
+          preFix={
+            <div style={{ marginLeft: 10, lineHeight: 0 }}>
+              <allIcons.SearchIcon
+                style={{ color: cssVarV2.icon.primary, fontSize: 16 }}
+              />
+            </div>
+          }
+          placeholder="Filter..."
+        />
+
+        {/* Color Picker */}
+        <Menu
+          contentOptions={{
+            side: 'bottom',
+            align: 'center',
+            sideOffset: 4,
+          }}
+          items={
+            <div className={styles.colorList}>
+              {colorList.map(color => (
+                <IconButton
+                  key={color}
+                  size={18}
+                  style={{ padding: 2 }}
+                  icon={
+                    <div
+                      className={styles.colorDot}
+                      style={{ background: color }}
+                    />
+                  }
+                  onClick={() => setColor(color)}
+                />
+              ))}
+            </div>
+          }
+        >
+          <IconButton
+            size={18}
+            style={{
+              width: 32,
+              height: 32,
+              border: `1px solid ${cssVarV2.layer.insideBorder.border}`,
+            }}
+            icon={
+              <div className={styles.colorDot} style={{ background: color }} />
+            }
+          />
+        </Menu>
+      </header>
+
+      {/* Content */}
+      <Scrollable.Root className={pickerStyles.scrollRoot}>
+        <Scrollable.Viewport className={pickerStyles.scrollViewport}>
+          {/* Recent */}
+          {recentIcons.length ? (
+            <div className={pickerStyles.group}>
+              <div className={pickerStyles.groupName} data-group-name="Recent">
+                Recent
+              </div>
+              <div className={pickerStyles.groupGrid}>
+                {recentIcons.map(iconName => (
+                  <IconButton
+                    size={24}
+                    style={{ padding: 4 }}
+                    key={iconName}
+                    icon={
+                      <AffineIconRenderer style={{ color }} name={iconName} />
+                    }
+                    onClick={() => handleIconSelect(iconName)}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          {/* Groups */}
+          <div className={pickerStyles.group}>
+            <div className={pickerStyles.groupName} data-group-name="Recent">
+              Icons
+            </div>
+            <div className={pickerStyles.groupGrid}>
+              {filteredIcons.map(icon => {
+                return (
+                  <IconButton
+                    size={24}
+                    style={{ padding: 4 }}
+                    key={icon.name}
+                    icon={
+                      <AffineIconRenderer style={{ color }} name={icon.name} />
+                    }
+                    onClick={() => handleIconSelect(icon.name)}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </Scrollable.Viewport>
+        <Scrollable.Scrollbar />
+      </Scrollable.Root>
+    </div>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/constants.ts
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/constants.ts
@@ -0,0 +1,43 @@
+import type { ComponentType, SVGProps } from 'react';
+
+import { ActivityIcon } from './icons/activity';
+import { AnimalIcon } from './icons/animal';
+import { FlagIcon } from './icons/flag';
+import { FoodIcon } from './icons/food';
+import { ObjectIcon } from './icons/object';
+import { SmileIcon } from './icons/smile';
+import { SymbolIcon } from './icons/symbol';
+import { TravelIcon } from './icons/travel';
+
+export type GroupName =
+  | 'Smileys & People'
+  | 'Animals & Nature'
+  | 'Food & Drink'
+  | 'Activity'
+  | 'Travel & Places'
+  | 'Objects'
+  | 'Symbols'
+  | 'Flags';
+export const GROUPS: GroupName[] = [
+  'Smileys & People',
+  'Animals & Nature',
+  'Food & Drink',
+  'Activity',
+  'Travel & Places',
+  'Objects',
+  'Symbols',
+  'Flags',
+];
+export const GROUP_ICON_MAP: Record<
+  GroupName,
+  ComponentType<SVGProps<SVGSVGElement>>
+> = {
+  'Smileys & People': SmileIcon,
+  'Animals & Nature': AnimalIcon,
+  'Food & Drink': FoodIcon,
+  Activity: ActivityIcon,
+  'Travel & Places': TravelIcon,
+  Objects: ObjectIcon,
+  Symbols: SymbolIcon,
+  Flags: FlagIcon,
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/data/en.json
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/data/en.json
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-picker.css.ts
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-picker.css.ts
@@ -0,0 +1,42 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const skinTrigger = style({});
+
+// header skin
+export const skinList = style({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: 2,
+});
+export const skinItem = style({});
+
+// content
+export const loadingWrapper = style({
+  height: 120,
+  flexGrow: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: 12,
+  color: cssVarV2.text.secondary,
+});
+
+export const footer = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '8px 16px',
+  borderTop: `0.5px solid ${cssVarV2.layer.insideBorder.border}`,
+});
+
+export const footerButton = style({});
+export const footerButtonActive = style({
+  backgroundColor: cssVarV2.layer.background.hoverOverlay,
+});
+export const footerIcon = style({
+  color: cssVarV2.icon.secondary,
+});
+export const footerIconActive = style({
+  color: cssVarV2.icon.primary,
+});
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-picker.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-picker.tsx
@@ -0,0 +1,332 @@
+import { RecentIcon, SearchIcon } from '@blocksuite/icons/rc';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import clsx from 'clsx';
+import {
+  memo,
+  startTransition,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { IconButton } from '../../../button';
+import Input from '../../../input';
+import { Loading } from '../../../loading';
+import { Menu } from '../../../menu';
+import { Scrollable } from '../../../scrollbar';
+import * as pickerStyles from '../picker.css';
+import { GROUP_ICON_MAP, type GroupName, GROUPS } from './constants';
+import rawData from './data/en.json';
+// import { emojiGroupList } from './gen-data';
+import * as styles from './emoji-picker.css';
+import type { CompactEmoji } from './type';
+
+type EmojiGroup = {
+  name: string;
+  emojis: Array<CompactEmoji>;
+};
+const emojiGroupList = rawData as EmojiGroup[];
+
+const useRecentEmojis = () => {
+  const [recentEmojis, setRecentEmojis] = useState<Array<string>>([]);
+
+  useEffect(() => {
+    const recentEmojis = localStorage.getItem('recentEmojis');
+    setRecentEmojis(recentEmojis ? recentEmojis.split(',') : []);
+  }, []);
+
+  const add = useCallback((emoji: string) => {
+    setRecentEmojis(prevRecentEmojis => {
+      const newRecentEmojis = [
+        emoji,
+        ...prevRecentEmojis.filter(e => e !== emoji),
+      ].slice(0, 10);
+      localStorage.setItem('recentEmojis', newRecentEmojis.join(','));
+      return newRecentEmojis;
+    });
+  }, []);
+
+  return {
+    recentEmojis,
+    add,
+  };
+};
+
+// Memoized individual emoji button to prevent unnecessary re-renders
+const EmojiButton = memo(function EmojiButton({
+  emoji,
+  onSelect,
+}: {
+  emoji: string;
+  onSelect: (emoji: string) => void;
+}) {
+  const handleClick = useCallback(() => {
+    onSelect(emoji);
+  }, [emoji, onSelect]);
+
+  return (
+    <IconButton
+      key={emoji}
+      size={24}
+      style={{ padding: 4 }}
+      icon={<span>{emoji}</span>}
+      onClick={handleClick}
+    />
+  );
+});
+
+// Memoized emoji groups to prevent unnecessary re-renders
+const EmojiGroups = memo(function EmojiGroups({
+  onSelect,
+  keyword,
+  skin,
+}: {
+  onSelect: (emoji: string) => void;
+  keyword?: string;
+  skin?: number;
+}) {
+  const [groups, setGroups] = useState<EmojiGroup[]>([]);
+
+  const loading = !keyword && !groups.length;
+
+  useEffect(() => {
+    startTransition(() => {
+      if (!keyword) {
+        setGroups(emojiGroupList);
+        return;
+      }
+
+      setGroups(
+        emojiGroupList
+          .map(group => ({
+            ...group,
+            emojis: group.emojis.filter(emoji =>
+              emoji.tags?.some(tag => tag.includes(keyword.toLowerCase()))
+            ),
+          }))
+          .filter(group => group.emojis.length > 0)
+      );
+    });
+  }, [keyword]);
+
+  if (loading) {
+    return (
+      <div className={styles.loadingWrapper}>
+        <Loading size={16} />
+        <span style={{ marginLeft: 4 }}>Loading emojis...</span>
+      </div>
+    );
+  }
+
+  return groups.map(group => (
+    <div key={group.name} className={pickerStyles.group}>
+      <div className={pickerStyles.groupName} data-group-name={group.name}>
+        {group.name}
+      </div>
+      <div className={pickerStyles.groupGrid}>
+        {group.emojis.map(emoji => (
+          <EmojiButton
+            key={emoji.label}
+            emoji={
+              skin !== undefined && emoji.skins
+                ? (emoji.skins[skin]?.unicode ?? emoji.unicode)
+                : emoji.unicode
+            }
+            onSelect={onSelect}
+          />
+        ))}
+      </div>
+    </div>
+  ));
+});
+
+const skinList = [
+  { unicode: '👋', value: undefined },
+  { unicode: '👋🏻', value: 0 },
+  { unicode: '👋🏼', value: 1 },
+  { unicode: '👋🏽', value: 2 },
+  { unicode: '👋🏾', value: 3 },
+  { unicode: '👋🏿', value: 4 },
+];
+
+export const EmojiPicker = ({
+  onSelect,
+}: {
+  onSelect?: (emoji: string) => void;
+}) => {
+  const scrollableRef = useRef<HTMLDivElement>(null);
+
+  const [keyword, setKeyword] = useState<string>('');
+  const [activeGroupId, setActiveGroupId] = useState<string | undefined>(
+    undefined
+  );
+  const [skin, setSkin] = useState<number | undefined>(undefined);
+  const { recentEmojis, add: addRecent } = useRecentEmojis();
+
+  const checkActiveGroup = useCallback(() => {
+    const scrollable = scrollableRef.current;
+    if (!scrollable) return;
+
+    // get actual scrollable element
+    const viewport = scrollable.querySelector(
+      '[data-radix-scroll-area-viewport]'
+    ) as HTMLElement;
+    if (!viewport) return;
+
+    const scrollTop = viewport.scrollTop;
+
+    // find the first group that is at the top of the scrollable element
+    for (let i = emojiGroupList.length - 1; i >= 0; i--) {
+      const group = emojiGroupList[i];
+      const groupElement = viewport.querySelector(
+        `[data-group-name="${group.name}"]`
+      ) as HTMLElement;
+      if (!groupElement) continue;
+
+      // use offsetTop to get the position of the element relative to the scrollable element
+      const elementTop = groupElement.offsetTop;
+
+      if (elementTop <= scrollTop + 50) {
+        setActiveGroupId(group.name);
+        return;
+      }
+    }
+  }, []);
+
+  const jumpToGroup = useCallback((groupName: string) => {
+    const groupElement = scrollableRef.current?.querySelector(
+      `[data-group-name="${groupName}"]`
+    ) as HTMLElement;
+    if (!groupElement) return;
+
+    setActiveGroupId(groupName);
+    groupElement.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+
+  const handleEmojiSelect = useCallback(
+    (emoji: string) => {
+      addRecent(emoji);
+      onSelect?.(emoji);
+    },
+    [addRecent, onSelect]
+  );
+
+  useEffect(() => {
+    checkActiveGroup();
+  }, [checkActiveGroup]);
+
+  return (
+    <div className={pickerStyles.root}>
+      <header className={pickerStyles.searchContainer}>
+        <Input
+          value={keyword}
+          onChange={setKeyword}
+          className={pickerStyles.searchInput}
+          preFix={
+            <div style={{ marginLeft: 10, lineHeight: 0 }}>
+              <SearchIcon
+                style={{ color: cssVarV2.icon.primary, fontSize: 16 }}
+              />
+            </div>
+          }
+          placeholder="Filter..."
+        />
+        <Menu
+          contentOptions={{
+            align: 'center',
+            side: 'bottom',
+            sideOffset: 4,
+            style: { minWidth: 140 },
+          }}
+          items={
+            <ul className={styles.skinList}>
+              {skinList.map(skin => (
+                <IconButton
+                  key={skin.unicode}
+                  className={styles.skinItem}
+                  style={{ padding: 3 }}
+                  size={18}
+                  icon={<span>{skin.unicode}</span>}
+                  onClick={() => setSkin(skin.value)}
+                />
+              ))}
+            </ul>
+          }
+        >
+          <IconButton
+            size={18}
+            style={{
+              width: 32,
+              height: 32,
+              border: `1px solid ${cssVarV2.layer.insideBorder.border}`,
+            }}
+            icon={
+              <span>
+                {skin !== undefined
+                  ? skinList[skin + 1].unicode
+                  : skinList[0].unicode}
+              </span>
+            }
+          />
+        </Menu>
+      </header>
+      <Scrollable.Root className={pickerStyles.scrollRoot} ref={scrollableRef}>
+        <Scrollable.Viewport
+          onScrollEnd={checkActiveGroup}
+          className={pickerStyles.scrollViewport}
+        >
+          {/* Recent */}
+          {recentEmojis.length ? (
+            <div className={pickerStyles.group}>
+              <div className={pickerStyles.groupName} data-group-name="Recent">
+                Recent
+              </div>
+              <div className={pickerStyles.groupGrid}>
+                {recentEmojis.map(emoji => (
+                  <EmojiButton
+                    key={emoji}
+                    emoji={emoji}
+                    onSelect={handleEmojiSelect}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          {/* Groups */}
+          <EmojiGroups
+            onSelect={handleEmojiSelect}
+            keyword={keyword}
+            skin={skin}
+          />
+        </Scrollable.Viewport>
+        <Scrollable.Scrollbar />
+      </Scrollable.Root>
+      <div className={styles.footer}>
+        {['Recent', ...GROUPS].map(group => {
+          const Icon = GROUP_ICON_MAP[group as GroupName] ?? RecentIcon;
+          const active = activeGroupId === group;
+          return (
+            <IconButton
+              size={18}
+              style={{ padding: 3 }}
+              key={group}
+              icon={
+                <Icon
+                  className={
+                    active ? styles.footerIconActive : styles.footerIcon
+                  }
+                />
+              }
+              className={clsx(
+                active ? styles.footerButtonActive : styles.footerButton
+              )}
+              onClick={() => jumpToGroup(group)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/gen-data.ts
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/gen-data.ts
@@ -0,0 +1,59 @@
+import compactEmojis from 'emojibase-data/en/compact.json';
+
+import { type GroupName, GROUPS } from './constants';
+import type { CompactEmoji } from './type';
+
+const emojiGroupObj = GROUPS.reduce(
+  (acc, name) => ({
+    ...acc,
+    [name]: {
+      emojis: [] as CompactEmoji[],
+    },
+  }),
+  {} as Record<GroupName, { emojis: CompactEmoji[] }>
+);
+compactEmojis.forEach((emoji: CompactEmoji) => {
+  const group = emoji.group;
+  if (group === undefined) return;
+
+  switch (group) {
+    case 0:
+    case 1:
+      emojiGroupObj['Smileys & People'].emojis.push(emoji);
+      break;
+    case 2:
+      // 🏻🏼🏽🏾🏿🦰🦱🦳🦲
+      break;
+    case 3:
+      emojiGroupObj['Animals & Nature'].emojis.push(emoji);
+      break;
+    case 4:
+      emojiGroupObj['Food & Drink'].emojis.push(emoji);
+      break;
+    case 5:
+      emojiGroupObj['Travel & Places'].emojis.push(emoji);
+      break;
+    case 6:
+      emojiGroupObj['Activity'].emojis.push(emoji);
+      break;
+    case 7:
+      emojiGroupObj['Objects'].emojis.push(emoji);
+      break;
+    case 8:
+      emojiGroupObj['Symbols'].emojis.push(emoji);
+      break;
+    case 9:
+      emojiGroupObj['Flags'].emojis.push(emoji);
+      break;
+  }
+});
+
+export const emojiGroupList = GROUPS.map(name => ({
+  name,
+  emojis: emojiGroupObj[name].emojis.sort((a, b) => a.order - b.order),
+}));
+
+// it may take 300~500ms to group and sort the emojis in runtime
+// so for now we just generate the data in build time
+// and save it to ./data
+console.log(JSON.stringify(emojiGroupList));
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/activity.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/activity.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+export const ActivityIcon = (attrs: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attrs}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.272705 8.99998C0.272705 13.8199 4.18004 17.7273 8.99998 17.7273C13.8199 17.7273 17.7273 13.8199 17.7273 8.99998C17.7273 4.18004 13.8199 0.272705 8.99998 0.272705C4.18004 0.272705 0.272705 4.18004 0.272705 8.99998ZM15.0688 9.96914L15.0566 9.94983L16.5223 9.61165L16.6728 9.89278C16.4351 11.9539 15.3858 13.7681 13.8529 15.0076L13.2597 14.8573L13.2622 12.6806L15.0688 9.96914ZM12.5263 15.2406L12.5764 13.0386L10.4502 12.2417L7.87885 13.6261V15.2117L11.0638 16.3722L11.0543 16.2873L12.5263 15.2406ZM10.085 8.889V11.6662L7.52639 13.045L4.85417 11.5601L4.8403 8.59732L7.03189 7.17608L10.085 8.889ZM12.5833 7.26476L10.494 8.33591L7.45262 6.62772L7.27654 4.29911L10.3377 2.70615L12.5869 4.12333L12.5833 7.26476ZM13.2666 4.3858L13.2631 7.10798L14.6654 9.32987L16.444 8.85652L16.6387 7.84613C16.4026 6.26683 15.6882 4.84381 14.6478 3.7291L13.2666 4.3858ZM10.0663 2.06501V1.34714C9.7178 1.299 9.36183 1.27413 8.99998 1.27413C7.36344 1.27413 5.84576 1.7831 4.59661 2.6514L4.88145 3.59018H7.13557L10.0663 2.06501ZM4.15974 8.54588L4.17331 11.6769L2.98586 12.8643L3.04083 12.9271L2.40923 13.0279C1.69038 11.8548 1.27599 10.4749 1.27599 8.99813C1.27599 8.49604 1.32389 8.00513 1.41539 7.52974L2.94611 6.84689L4.15974 8.54588ZM2.84307 6.08157L1.65094 6.61407C2.09772 5.23584 2.92143 4.02735 4.00048 3.11021L4.24242 3.84277L2.84307 6.08157ZM2.8271 13.6417L3.56267 13.5235L5.23445 15.4342L5.22688 15.7394C4.28842 15.213 3.47105 14.4964 2.8271 13.6417ZM5.89891 16.0744L5.90475 15.8755H7.60689L9.74856 16.6863C9.50223 16.71 9.25252 16.7222 8.99998 16.7222C7.89704 16.7222 6.84806 16.4909 5.89891 16.0744Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/animal.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/animal.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+export const AnimalIcon = ({ ...attrs }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="19"
+      height="18"
+      viewBox="0 0 19 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attrs}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.3482 7.37157C17.3892 6.16494 18.7866 3.42989 16.856 1.3898C16.1792 0.674785 15.3389 0.288854 14.425 0.273549C12.6246 0.243298 11.1601 1.63943 10.9991 1.79869C10.6052 1.72034 10.1827 1.67624 9.72907 1.67624C9.14165 1.67624 8.6015 1.75095 8.10243 1.87851L8.0181 1.80125L8.01519 1.79905C7.85416 1.63943 6.38966 0.243298 4.58929 0.273178C3.67584 0.288483 2.83508 0.674425 2.1579 1.39016C0.23176 3.42551 1.61921 6.15256 2.65915 7.36355C1.93836 8.04213 0.25575 9.93358 0.928208 12.322C1.9111 15.8154 4.98476 15.9335 5.19051 15.9372H5.7441C6.69136 17.1719 8.30999 17.7273 9.5062 17.7273C10.6047 17.7273 12.2342 17.2561 13.2444 15.9372H13.7987C14.0154 15.9335 17.089 15.8154 18.0719 12.322C18.7425 9.93827 17.0686 8.05051 16.3482 7.37157ZM17.0221 12.0256C16.2643 14.7198 14.0394 14.8397 13.7987 14.8449H12.8496C12.5606 14.8449 12.3262 15.0705 12.3073 15.3554C11.5189 16.3073 10.2561 16.6346 9.5062 16.6346C8.77272 16.6346 7.52595 16.319 6.73208 15.413C6.73225 15.4094 6.73282 15.4061 6.73337 15.4029C6.734 15.399 6.73463 15.3953 6.73463 15.3915C6.73463 15.089 6.49072 14.8449 6.18939 14.8449H5.2116C4.96043 14.8397 2.73551 14.7198 1.97763 12.0256C1.34696 9.78576 3.53737 8.03799 3.62751 7.96728L3.89977 7.75519L4.00372 7.4272C4.06334 7.23733 5.52493 2.7705 9.72907 2.7705C13.8637 2.7705 14.9306 7.15825 14.9732 7.34119L15.0625 7.72458L15.369 7.96437C15.4625 8.03798 17.6525 9.78576 17.0221 12.0256ZM4.60745 1.36609C4.05458 1.3752 3.47918 1.5822 2.94884 2.14233C1.55123 3.61937 2.69694 5.57709 3.25781 6.35479C3.74307 5.28008 4.87062 3.31252 6.93524 2.30596C6.47725 1.94299 5.5787 1.34969 4.60745 1.36609ZM14.4063 1.36608C14.9592 1.37483 15.535 1.58182 16.0646 2.14196C17.4372 3.59167 16.3594 5.50348 15.7887 6.30886C15.3653 5.17877 14.3417 3.14159 12.2287 2.19079C12.7169 1.83036 13.533 1.35151 14.4063 1.36608ZM9.9742 14.6642C10.0261 14.7182 10.1069 14.7587 10.229 14.7587C10.6002 14.7587 10.6158 14.3993 10.6158 14.3953L11.3424 14.4281V14.4314C11.3195 14.9438 10.9214 15.4875 10.229 15.4875C9.94878 15.4875 9.69504 15.3888 9.50205 15.213C9.30865 15.3888 9.05494 15.4875 8.77504 15.4875C8.0826 15.4875 7.68494 14.9438 7.66167 14.4314V14.4281L8.38829 14.3953C8.38829 14.3993 8.40428 14.7587 8.77504 14.7587C8.89718 14.7587 8.9775 14.7182 9.02985 14.6642C9.13381 14.5575 9.1298 14.3993 9.1298 14.3993V13.6023C8.55986 13.3417 7.89758 12.595 7.89758 12.1114C7.89758 11.517 8.49697 11.517 8.49697 11.517H9.49621H10.4962C10.4962 11.517 11.096 11.517 11.096 12.1114C11.096 12.5925 10.4417 13.3319 9.87384 13.5969V14.3993C9.87384 14.3993 9.87024 14.5575 9.9742 14.6642ZM12.7626 8.23575C12.361 8.23575 12.0351 8.72554 12.0351 9.32944C12.0351 9.93249 12.361 10.4223 12.7626 10.4223C13.1645 10.4223 13.49 9.93249 13.49 9.32944C13.49 8.72554 13.1645 8.23575 12.7626 8.23575ZM5.49217 9.32944C5.49217 8.72554 5.81807 8.23575 6.21961 8.23575C6.62151 8.23575 6.94704 8.72554 6.94704 9.32944C6.94704 9.93249 6.62151 10.4223 6.21961 10.4223C5.81807 10.4223 5.49217 9.93249 5.49217 9.32944Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/flag.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/flag.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+export const FlagIcon = (attrs: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attrs}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.46982 2.77709C9.46982 2.77709 10.7556 2.09091 11.7273 2.09091C12.5008 2.1122 13.2526 2.33574 13.9091 2.73577V9.13393C13.2276 8.81364 12.4835 8.64324 11.7273 8.63636C10.8144 8.67138 9.91909 8.89807 9.09963 9.30182C8.34943 9.74287 7.50513 9.99924 6.63636 10.0499C4.81819 10.0499 4.09091 8.97269 4.09091 8.97269V2.79782C4.09091 2.79782 4.81819 3.46327 6.63636 3.46327C7.61956 3.44377 8.58662 3.20957 9.46982 2.77709ZM4.09091 1.33636V1.32255H3V16.5953H4.09091V10.3313C4.09091 10.3313 4.81819 11.0996 6.63636 11.0996C7.61956 11.0801 8.58662 10.8459 9.46982 10.4135C9.46982 10.4135 10.7556 9.72727 11.7273 9.72727C12.6204 9.73535 13.4966 9.97153 14.2727 10.4135L15 10.8938V10.0499V9.80287V3.25745V2.31709V2.16654L14.2727 1.68618C13.4966 1.24428 12.6204 1.00807 11.7273 1C10.8144 1.03496 9.91909 1.2617 9.09963 1.66545C8.34943 2.10647 7.50513 2.36284 6.63636 2.41346C4.81819 2.41346 4.09091 1.33636 4.09091 1.33636Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/food.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/food.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+export const FoodIcon = ({ ...attrs }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attrs}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.3955 11.0771C17.4122 11.2711 16.7888 11.4947 16.7888 11.4947L17.9773 12.1823C17.9773 12.1823 17.8093 12.3854 17.4709 12.57C17.8975 12.9077 17.9623 13.2827 17.9623 13.6769C17.9623 14.1622 17.7754 14.5834 17.1466 14.9772C17.4592 15.2615 17.767 16.3098 17.767 16.6338C17.767 17.1879 16.1881 17.7211 15.8245 17.7211C15.4598 17.7211 12.5325 17.7252 10.5423 17.7252C9.65732 17.7252 8.81535 17.7299 8.03607 17.7252L1.9206 17.7088L0.522705 4.2525H6.92598L7.8182 0.664385H7.82003C7.87722 0.439789 8.07905 0.272705 8.32133 0.272705C8.36833 0.272705 8.41314 0.281443 8.45612 0.292723L8.45721 0.290901L8.52171 0.313112C8.5228 0.313472 8.52316 0.313472 8.52389 0.314203L12.0604 1.52164L11.7251 2.50268L8.68819 1.46522L7.9949 4.2525H9.63103L9.30791 7.56688C9.73194 7.54504 10.167 7.53303 10.6125 7.53303C14.5279 7.53303 17.7161 8.35971 17.7161 10.3112C17.7161 10.6752 17.5201 10.6884 17.3153 11.0185C17.3422 11.0364 17.3929 11.0433 17.3955 11.0771ZM5.05697 16.3468C5.42603 16.7116 6.28035 16.6333 6.28035 16.6333H10.3447H15.4456C15.4456 16.6333 15.8762 16.63 16.2077 16.3024C16.6831 15.8324 16.0991 15.1678 15.5079 15.1678C14.3439 15.1678 6.99369 15.1583 5.64534 15.1583C5.04167 15.1583 4.68792 15.9814 5.05697 16.3468ZM10.6449 14.4043L17.1047 12.2661H4.44861L10.6449 14.4043ZM1.66742 5.34478L2.79171 16.634H3.45367C3.44492 16.31 3.83075 15.2959 4.1426 15.0116C3.51378 14.6182 3.22051 14.265 3.22051 13.7795C3.22051 13.363 3.33308 12.7987 3.80524 12.4467C3.21759 12.2447 3.11995 11.8309 3.49703 11.7198C3.9149 11.5957 3.96189 11.8818 4.21 11.563C3.72655 11.0849 3.45367 10.8833 3.45367 10.3115C3.45367 8.7658 5.49168 7.92856 8.28236 7.64609L8.53776 5.34478H1.66742ZM10.6122 8.59107C8.50243 8.59107 4.44902 9.05659 4.52552 10.3303C4.54885 10.7154 5.97296 11.1734 5.97296 11.1734H10.6352H15.2631C15.2631 11.1734 16.6698 10.6736 16.6796 10.3303C16.7171 9.0555 12.6554 8.59107 10.6122 8.59107ZM0.522705 4.2525C0.522705 4.28305 0.536887 4.41432 0.522705 4.2525V4.2525Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/object.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/object.tsx
@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'react';
+
+export const ObjectIcon = (attrs: HTMLAttributes<SVGSVGElement>) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attrs}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.7411 16.352L11.6936 16.3508H11.7411V14.221L11.8531 13.2727C12.0078 12.0256 12.6199 10.8805 13.5709 10.0592C14.7684 8.98145 15.4263 7.42816 15.3672 5.81815C15.3672 2.61016 12.5938 0 9.18546 0C5.77711 0 3.00367 2.61016 3.00367 5.81815C2.94453 7.42816 3.60247 8.98145 4.80003 10.0592C5.75102 10.8805 6.36318 12.0256 6.51784 13.2727L6.62984 14.2221V16.352C6.64093 16.8341 6.9989 17.2378 7.47638 17.3064C8.04164 17.3978 8.6129 17.4473 9.18546 17.4544C9.75797 17.4473 10.3293 17.3978 10.8946 17.3064C11.3721 17.2378 11.73 16.8341 11.7411 16.352ZM12.8411 9.24829C11.7142 10.2213 10.974 11.594 10.7766 13.0908H7.59429C7.39484 11.5901 6.65497 10.2197 5.51306 9.23356C4.5725 8.38684 4.04657 7.14517 4.09458 5.81815C4.09458 3.22799 6.36526 1.0909 9.18546 1.0909C12.0057 1.0909 14.2763 3.22799 14.2771 5.85819C14.3244 7.14517 13.7985 8.38684 12.8411 9.24829ZM7.72074 14.2221V14.1817H10.6502V16.2407C10.1503 16.3173 9.66153 16.3575 9.17186 16.3636C8.70265 16.3574 8.20974 16.3163 7.72047 16.2406L7.72074 14.2221ZM9.91277 8.36359C9.91277 8.4211 9.91942 8.47704 9.93197 8.5307L9.18565 9.21916L8.43896 8.53043C8.45154 8.47685 8.45819 8.421 8.45819 8.36359C8.45819 7.96194 8.13258 7.63632 7.73092 7.63632C7.32927 7.63632 7.00365 7.96194 7.00365 8.36359C7.00365 8.76524 7.32927 9.09087 7.73092 9.09087C7.79203 9.09087 7.85139 9.08335 7.90809 9.06916L8.82183 9.91189V12.3636H9.54906V9.91233L10.4631 9.06916C10.5198 9.08335 10.579 9.09087 10.64 9.09087C11.0416 9.09087 11.3673 8.76524 11.3673 8.36359C11.3673 7.96194 11.0416 7.63632 10.64 7.63632C10.2383 7.63632 9.91277 7.96194 9.91277 8.36359ZM7.73092 15.6363H9.18546V14.909H7.73092V15.6363Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/smile.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/smile.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+export const SmileIcon = ({ ...attrs }: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attrs}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.4773 8.99998C17.4773 4.18004 13.5699 0.272705 8.74998 0.272705C3.93004 0.272705 0.0227051 4.18004 0.0227051 8.99998C0.0227051 13.8199 3.93004 17.7273 8.74998 17.7273C13.5699 17.7273 17.4773 13.8199 17.4773 8.99998ZM16.3976 8.99998C16.3976 4.78253 12.9787 1.36361 8.76121 1.36361C4.5438 1.36361 1.12488 4.78253 1.12488 8.99998C1.12488 13.2174 4.5438 16.6363 8.76121 16.6363C12.9787 16.6363 16.3976 13.2174 16.3976 8.99998ZM11.75 5.72725C12.2019 5.72725 12.5682 6.21562 12.5682 6.81816C12.5682 7.4207 12.2019 7.90907 11.75 7.90907C11.298 7.90907 10.9318 7.4207 10.9318 6.81816C10.9318 6.21562 11.298 5.72725 11.75 5.72725ZM7.10998 6.81816C7.10998 6.21525 6.74453 5.72725 6.29361 5.72725C5.84271 5.72725 5.47725 6.21525 5.47725 6.81816C5.47725 7.42107 5.84088 7.90907 6.29361 7.90907C6.74634 7.90907 7.10998 7.42107 7.10998 6.81816ZM8.75652 10.828C10.2804 10.828 11.6583 10.4985 12.6481 10.2618C13.6148 10.0306 14.2111 9.88798 14.2111 10.2276C14.2111 13.2401 11.769 15.6821 8.75652 15.6821C5.74406 15.6821 3.30198 13.2401 3.30198 10.2276C3.30198 9.88798 3.89826 10.0306 4.86496 10.2618C5.85466 10.4985 7.23263 10.828 8.75652 10.828ZM12.1273 11.3263C11.3654 11.5257 10.1976 11.8312 8.74998 11.8312C7.30237 11.8312 6.13453 11.5257 5.3726 11.3263C4.73924 11.1606 4.38634 11.0682 4.38634 11.2858C4.38634 13.3738 7.55871 13.4676 8.74998 13.4676C10.0874 13.4676 13.1136 13.3734 13.1136 11.2858C13.1136 11.0682 12.7607 11.1606 12.1273 11.3263Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/symbol.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/symbol.tsx
@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'react';
+
+export const SymbolIcon = (attrs: HTMLAttributes<SVGSVGElement>) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attrs}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.6299 5.49382L12.6564 0C14.3934 0 16.2727 1.07782 16.22 3.70109C16.1956 4.87563 14.864 6.10328 14.864 6.10328C14.6313 5.87894 14.7939 5.5866 15.0059 5.20537C15.2203 4.81969 15.4853 4.34304 15.4429 3.75382C15.3349 2.25019 13.7513 1.44655 13.7513 1.44655V6.14582C13.7513 8.49491 10.4546 9.08291 10.016 7.86472C9.76545 7.16909 9.75858 6.27164 10.8927 5.63927C11.6044 5.24364 12.6299 5.49382 12.6299 5.49382ZM6.78182 17.4349H8.12727L6.692 15.9153C7.12684 15.148 7.3329 14.2723 7.28582 13.3917V13.0771H6.33345V13.3593C6.36165 13.9892 6.2378 14.6164 5.97236 15.1884L4.41491 13.3873C5.23309 12.948 5.94473 12.4219 5.94473 11.4993C5.94473 10.4741 5.08909 9.78295 4.04618 9.78295C2.93891 9.78295 2.14764 10.5553 2.14764 11.492C2.14764 12.1647 2.56472 12.6745 3.04619 13.1899C2.94473 13.2385 2.84836 13.2873 2.75745 13.3418C1.94546 13.7997 1.35564 14.392 1.35564 15.3567C1.35564 16.6531 2.42 17.4905 3.82109 17.4905C4.64616 17.4796 5.43945 17.1707 6.05454 16.6208L6.78182 17.4349ZM3.36146 13.9462C3.43636 13.9029 3.51127 13.8647 3.59127 13.8269L5.43127 15.8916C5.01124 16.2872 4.44906 16.4957 3.87272 16.4702C3.08109 16.4702 2.38837 16.1378 2.38837 15.2752C2.388 14.6465 2.78364 14.2607 3.36146 13.9462ZM4.98182 11.5484C4.98182 12.1449 4.51707 12.4703 3.87017 12.8011C3.30901 12.2427 3.12727 11.9287 3.12727 11.5538C3.1097 11.2118 3.28178 10.888 3.57498 10.7112C3.86819 10.5344 4.23492 10.5333 4.52916 10.7084C4.8234 10.8835 4.99737 11.2064 4.98182 11.5484ZM10.9472 17.4789L13.5545 13.648L16.5272 9.80291H15.24L12.5524 13.5193L9.62222 17.5131L10.9472 17.4789ZM8.63636 2.90199H1V3.99508L4.27273 3.99415V8.35654H5.36364V3.99383L8.63636 3.9929V2.90199ZM8.63636 0.719269H1V1.81018H8.63636V0.719269ZM14.5341 15.5048C14.5341 14.9131 14.7567 14.4767 15.2116 14.4767C15.648 14.4767 15.8797 14.8887 15.8797 15.5146V15.5582C15.8797 16.1888 15.6283 16.6007 15.2069 16.6007C14.7757 16.6007 14.5341 16.1789 14.5341 15.5484V15.5048ZM15.1957 17.4491C14.2382 17.4491 13.6927 16.6334 13.6927 15.6044V15.4524C13.6927 14.4499 14.2538 13.6342 15.2061 13.6342C16.1585 13.6342 16.72 14.4385 16.72 15.4622V15.6153C16.72 16.6061 16.1691 17.4491 15.1957 17.4491ZM10.1738 11.6771C10.1738 11.0883 10.3957 10.6538 10.8484 10.6538C11.2821 10.6538 11.5134 11.064 11.5134 11.6866V11.7298C11.5134 12.3575 11.2636 12.7677 10.8436 12.7677C10.4145 12.7677 10.1738 12.3477 10.1738 11.7204V11.6789V11.6771ZM10.832 13.6208C9.87455 13.6208 9.32909 12.8051 9.32909 11.776V11.6255C9.32909 10.6229 9.89015 9.80727 10.8425 9.80727C11.7949 9.80727 12.3564 10.6116 12.3564 11.6353V11.7869C12.3564 12.7778 11.8055 13.6208 10.832 13.6208Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/travel.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/icons/travel.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+export const TravelIcon = (attrs: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attrs}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.65907 0.272705H11.2954V4.62507H17.4773V16.6251H16.3863V6.81816V5.72725H11.2954V6.81816H10.2045V1.36361H4.74997L4.74065 7.90907H1.11361V16.6251H0.0227051V6.80689H3.66658L3.65907 0.272705ZM2.20452 8.98871H3.29543V10.0797H2.20452V8.98871ZM9.11358 4.63634H8.0227V5.72725H9.11358V4.63634ZM5.84088 4.63634H6.93179V5.72725H5.84088V4.63634ZM15.2954 6.80689H14.2045V7.8978H15.2954V6.80689ZM14.2045 8.98871H15.2954V10.0797H14.2045V8.98871ZM6.93179 2.45452L5.84088 2.44325V3.54543H6.93179V2.45452ZM8.0227 2.45452H9.11358V3.54543H8.0227V2.45452ZM14.2045 11.9091H13.1136V10.8182C13.0491 8.9849 11.5389 7.53506 9.70452 7.54544H7.79543C5.96107 7.53506 4.45081 8.9849 4.38634 10.8182V11.9091H3.29543C2.89377 11.9091 2.56816 12.2346 2.56816 12.6363V15.5454C2.56816 15.9471 2.89377 16.2727 3.29543 16.2727V17.7273H5.47725V16.2727H12.0227V17.7273H14.2045V16.2727C14.6062 16.2727 14.9318 15.9471 14.9318 15.5454V12.6363C14.9318 12.2346 14.6062 11.9091 14.2045 11.9091ZM12.0227 11.9091C12.0227 10.2455 12.0227 8.63634 8.74998 8.63634C5.47725 8.63634 5.47725 10.2472 5.47725 11.9091H12.0227ZM4.54561 12.7159C4.99748 12.7159 5.3638 13.0823 5.3638 13.5341C5.3638 13.986 4.99748 14.3523 4.54561 14.3523C4.09375 14.3523 3.72743 13.986 3.72743 13.5341C3.72743 13.0823 4.09375 12.7159 4.54561 12.7159ZM13.7504 13.5341C13.7504 13.0823 13.3841 12.7159 12.9322 12.7159C12.4806 12.7162 12.114 13.0824 12.114 13.5341C12.114 13.986 12.4803 14.3523 12.9322 14.3523C13.3841 14.3523 13.7504 13.986 13.7504 13.5341ZM14.2045 14.8181V15.5342H11.1145C11.1142 15.5342 11.1147 15.5342 11.1145 15.5342H6.38634C6.38604 15.5342 6.38663 15.5342 6.38634 15.5342H3.29543V14.8181H6.02271V14.8069C6.02271 14.6061 6.18551 14.4433 6.38634 14.4433H11.1137C11.3145 14.4433 11.4773 14.6061 11.4773 14.8069V14.8181H14.2045Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/type.ts
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/type.ts
@@ -0,0 +1,11 @@
+export type CompactEmoji = {
+  label: string;
+  annotation?: string;
+  group: number;
+  hexcode: string;
+  order: number;
+  shortcodes: string[];
+  tags: string[];
+  unicode: string;
+  skins?: Array<Omit<CompactEmoji, 'skins'>>;
+};
--- a/packages/frontend/component/src/ui/icon-picker/picker/picker.css.ts
+++ b/packages/frontend/component/src/ui/icon-picker/picker/picker.css.ts
@@ -0,0 +1,69 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+// search
+
+export const searchContainer = style({
+  padding: '16px 12px 8px 12px',
+  display: 'flex',
+  gap: 8,
+});
+
+export const searchInput = style({
+  width: 0,
+  flexGrow: 1,
+  height: `32px !important`,
+  borderRadius: `4px !important`,
+  gap: `0px !important`,
+});
+
+// content scroll
+export const scrollRoot = style({
+  height: 0,
+  flexGrow: 1,
+  padding: '0px 12px',
+});
+
+export const scrollViewport = style({
+  padding: '8px 0px',
+});
+
+// group
+export const group = style({
+  selectors: {
+    '&:not(:last-child)': {
+      marginBottom: 8,
+    },
+  },
+});
+
+export const groupName = style({
+  fontSize: 12,
+  fontWeight: 500,
+  lineHeight: '18px',
+  color: cssVarV2.text.secondary,
+  height: 30,
+  display: 'flex',
+  alignItems: 'center',
+  padding: '0px 4px',
+});
+
+export const groupGrid = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'space-between',
+  gap: 4,
+
+  // fill the last row with empty space
+  '::after': {
+    content: '""',
+    flex: 'auto',
+    minWidth: '24px',
+  },
+});
--- a/packages/frontend/component/src/ui/icon-picker/renderer.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/renderer.tsx
@@ -0,0 +1,18 @@
+import { AffineIconRenderer } from './renderer/affine-icon';
+
+export const IconRenderer = ({
+  iconType,
+  icon,
+}: {
+  iconType: 'emoji' | 'affine-icon';
+  icon: string;
+}) => {
+  if (iconType === 'emoji') {
+    return icon;
+  }
+  if (iconType === 'affine-icon') {
+    return <AffineIconRenderer name={icon} />;
+  }
+
+  return null;
+};
--- a/packages/frontend/component/src/ui/icon-picker/renderer/affine-icon.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/renderer/affine-icon.tsx
@@ -0,0 +1,19 @@
+import * as allIcons from '@blocksuite/icons/rc';
+import type { SVGProps } from 'react';
+
+export const AffineIconRenderer = ({
+  name,
+  ...props
+}: {
+  name: string;
+} & SVGProps<SVGSVGElement>) => {
+  const Icon = allIcons[
+    `${name}Icon` as keyof typeof allIcons
+  ] as React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+  if (!Icon) {
+    return null;
+  }
+
+  return <Icon {...props} />;
+};
--- a/packages/frontend/core/package.json
+++ b/packages/frontend/core/package.json
@@ -24,7 +24,7 @@
    "@blocksuite/affine-components": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.13",
+    "@blocksuite/icons": "^2.2.17",
    "@blocksuite/std": "workspace:*",
    "@dotlottie/player-component": "^2.7.12",
    "@emotion/cache": "^11.14.0",
--- a/yarn.lock
+++ b/yarn.lock
@@ -184,7 +184,7 @@ __metadata:
    "@affine/error": "workspace:*"
    "@affine/graphql": "workspace:*"
    "@affine/routes": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@radix-ui/react-accordion": "npm:^1.2.2"
    "@radix-ui/react-alert-dialog": "npm:^1.1.3"
    "@radix-ui/react-aspect-ratio": "npm:^1.1.1"
@@ -253,7 +253,7 @@ __metadata:
    "@affine/i18n": "workspace:*"
    "@affine/nbstore": "workspace:*"
    "@blocksuite/affine": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@capacitor/android": "npm:^7.0.0"
    "@capacitor/app": "npm:^7.0.0"
    "@capacitor/cli": "npm:^7.0.0"
@@ -312,7 +312,7 @@ __metadata:
    "@atlaskit/pragmatic-drag-and-drop": "npm:^1.4.0"
    "@atlaskit/pragmatic-drag-and-drop-hitbox": "npm:^1.0.3"
    "@blocksuite/affine": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@chromatic-com/storybook": "npm:^4.0.0"
    "@emoji-mart/data": "npm:^1.2.1"
    "@emoji-mart/react": "npm:^1.1.1"
@@ -348,6 +348,7 @@ __metadata:
    clsx: "npm:^2.1.1"
    dayjs: "npm:^1.11.13"
    emoji-mart: "npm:^5.6.0"
+    emojibase-data: "npm:^16.0.3"
    foxact: "npm:^0.2.45"
    jotai: "npm:^2.10.3"
    lit: "npm:^3.2.1"
@@ -409,7 +410,7 @@ __metadata:
    "@blocksuite/affine-ext-loader": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.13"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@dotlottie/player-component": "npm:^2.7.12"
    "@emotion/cache": "npm:^11.14.0"
@@ -687,7 +688,7 @@ __metadata:
    "@affine/native": "workspace:*"
    "@affine/nbstore": "workspace:*"
    "@blocksuite/affine": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@capacitor/app": "npm:^7.0.0"
    "@capacitor/browser": "npm:^7.0.0"
    "@capacitor/cli": "npm:^7.0.0"
@@ -754,7 +755,7 @@ __metadata:
    "@affine/i18n": "workspace:*"
    "@affine/nbstore": "workspace:*"
    "@blocksuite/affine": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@sentry/react": "npm:^9.2.0"
    "@toeverything/infra": "workspace:*"
    "@types/react": "npm:^19.0.1"
@@ -2434,7 +2435,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -2462,7 +2463,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -2489,7 +2490,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@emoji-mart/data": "npm:^1.2.1"
@@ -2522,7 +2523,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -2550,7 +2551,7 @@ __metadata:
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/data-view": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -2580,7 +2581,7 @@ __metadata:
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/data-view": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@emotion/css": "npm:^11.13.5"
@@ -2636,7 +2637,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -2664,7 +2665,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -2696,7 +2697,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -2727,7 +2728,7 @@ __metadata:
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/affine-widget-frame-title": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -2756,7 +2757,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -2784,7 +2785,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -2814,7 +2815,7 @@ __metadata:
    "@blocksuite/affine-rich-text": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -2846,7 +2847,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -2921,7 +2922,7 @@ __metadata:
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/data-view": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -2953,7 +2954,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3013,7 +3014,7 @@ __metadata:
    "@blocksuite/affine-widget-slash-menu": "workspace:*"
    "@blocksuite/data-view": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@emotion/css": "npm:^11.13.5"
@@ -3033,7 +3034,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@blocksuite/sync": "workspace:*"
@@ -3081,7 +3082,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/data-view": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3106,7 +3107,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3130,7 +3131,7 @@ __metadata:
    "@blocksuite/affine-rich-text": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3156,7 +3157,7 @@ __metadata:
    "@blocksuite/affine-rich-text": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3184,7 +3185,7 @@ __metadata:
    "@blocksuite/affine-rich-text": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3211,7 +3212,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -3240,7 +3241,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -3269,7 +3270,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -3300,7 +3301,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -3335,7 +3336,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -3367,7 +3368,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -3395,7 +3396,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -3424,7 +3425,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -3453,7 +3454,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3482,7 +3483,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -3544,7 +3545,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3575,7 +3576,7 @@ __metadata:
    "@blocksuite/affine-rich-text": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3609,7 +3610,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3637,7 +3638,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3672,7 +3673,7 @@ __metadata:
    "@blocksuite/affine-rich-text": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3706,7 +3707,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3750,7 +3751,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3775,7 +3776,7 @@ __metadata:
  dependencies:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3834,7 +3835,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -3861,7 +3862,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@preact/signals-core": "npm:^1.8.0"
    "@toeverything/theme": "npm:^1.1.16"
@@ -3881,7 +3882,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@lit/context": "npm:^1.1.2"
    "@preact/signals-core": "npm:^1.8.0"
@@ -3907,7 +3908,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@lit/context": "npm:^1.1.2"
    "@preact/signals-core": "npm:^1.8.0"
@@ -3929,7 +3930,7 @@ __metadata:
    "@blocksuite/affine-rich-text": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
    "@lit/context": "npm:^1.1.2"
@@ -3952,7 +3953,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
    "@preact/signals-core": "npm:^1.8.0"
@@ -4011,7 +4012,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/data-view": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -4037,7 +4038,7 @@ __metadata:
    "@blocksuite/affine-rich-text": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -4064,7 +4065,7 @@ __metadata:
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/affine-widget-edgeless-selected-rect": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@lit/context": "npm:^1.1.2"
    "@preact/signals-core": "npm:^1.8.0"
@@ -4084,7 +4085,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@lit/context": "npm:^1.1.2"
@@ -4108,7 +4109,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@preact/signals-core": "npm:^1.8.0"
    "@toeverything/theme": "npm:^1.1.16"
@@ -4144,7 +4145,7 @@ __metadata:
    "@blocksuite/affine-rich-text": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
@@ -4169,7 +4170,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
    "@preact/signals-core": "npm:^1.8.0"
@@ -4190,7 +4191,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@floating-ui/dom": "npm:^1.6.13"
    "@preact/signals-core": "npm:^1.8.0"
@@ -4299,7 +4300,7 @@ __metadata:
    "@blocksuite/affine-components": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/global": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/std": "workspace:*"
    "@blocksuite/store": "workspace:*"
    "@emotion/css": "npm:^11.13.5"
@@ -4333,9 +4334,9 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@blocksuite/icons@npm:^2.2.12, @blocksuite/icons@npm:^2.2.13":
-  version: 2.2.15
-  resolution: "@blocksuite/icons@npm:2.2.15"
+"@blocksuite/icons@npm:^2.2.17":
+  version: 2.2.17
+  resolution: "@blocksuite/icons@npm:2.2.17"
  peerDependencies:
    "@types/react": ^18.0.25
    change-case: 4.1.2
@@ -4346,7 +4347,7 @@ __metadata:
      optional: true
    react:
      optional: true
-  checksum: 10/891c646b5a1c5ee8f4e42752053a7aab7e55ed8f6f6a08e0fe9371172c92ad5b861355d017175426871a422f6364a8d18aa88a1f96aa33029bf2a48d33f70c40
+  checksum: 10/a9f0f96507bb1df537479d59693f6468f230e5b18bcab9fcfb62458650ee9ccf7d0972fb21029ad9594f7f312b5f92692ad5acff9a7281bc5288351769d73409
  languageName: node
  linkType: hard

@@ -4355,7 +4356,7 @@ __metadata:
  resolution: "@blocksuite/integration-test@workspace:blocksuite/integration-test"
  dependencies:
    "@blocksuite/affine": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@floating-ui/dom": "npm:^1.6.13"
    "@lit/context": "npm:^1.1.3"
    "@lottiefiles/dotlottie-wc": "npm:^0.5.0"
@@ -4383,7 +4384,7 @@ __metadata:
    "@blocksuite/affine-model": "workspace:*"
    "@blocksuite/affine-shared": "workspace:*"
    "@blocksuite/data-view": "workspace:*"
-    "@blocksuite/icons": "npm:^2.2.12"
+    "@blocksuite/icons": "npm:^2.2.17"
    "@blocksuite/integration-test": "workspace:*"
    "@preact/signals-core": "npm:^1.8.0"
    "@shoelace-style/shoelace": "npm:2.20.1"
@@ -20950,6 +20951,15 @@ __metadata:
  languageName: node
  linkType: hard

+"emojibase-data@npm:^16.0.3":
+  version: 16.0.3
+  resolution: "emojibase-data@npm:16.0.3"
+  peerDependencies:
+    emojibase: "*"
+  checksum: 10/d9cd4b961ea5bca483b857bc84e670e77c3dcbeac41ce3b672086a9256a43bc027b34d4adc9f9a2be85e2b76c85a2b5e91280b6518335432bdbd4c671eeba1ec
+  languageName: node
+  linkType: hard
+
 "emojis-list@npm:^3.0.0":
  version: 3.0.0
  resolution: "emojis-list@npm:3.0.0"