diff --git a/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.css.ts b/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.css.ts
index 89aa208ad0..fdc18aa977 100644
--- a/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.css.ts
+++ b/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.css.ts
@@ -16,6 +16,7 @@ export const contentRoot = style({
 export const iconPicker = style({
   padding: 0,
   lineHeight: 1,
+  color: cssVarV2.icon.primary,
 });
 globalStyle(`${iconPicker} span:has(svg)`, {
   lineHeight: 0,
diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.css.ts b/packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.css.ts
index 6711032de6..2addcad785 100644
--- a/packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.css.ts
+++ b/packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.css.ts
@@ -10,6 +10,9 @@ export const docIconPickerTrigger = style({
       fontSize: 60,
       lineHeight: 1,
     },
+    '&[data-icon-type="emoji"]': {
+      fontFamily: 'emoji',
+    },
   },
 });