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)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## 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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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:*",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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';

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,
+});

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,
+        }}
+      />
+    </>
+  );
+};

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>
+  );
+};

packages/frontend/component/src/ui/icon-picker/index.ts

@@ -0,0 +1 @@
+export * from './icon-picker';

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',
+});

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>
+  );
+};

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,
+};

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,
+});

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>
+  );
+};

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));

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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'>>;
+};

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',
+  },
+});

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;
+};

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} />;
+};

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",

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":
+"@blocksuite/icons@npm:^2.2.17":
-  version: 2.2.15
+  version: 2.2.17
-  resolution: "@blocksuite/icons@npm:2.2.15"
+  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"