diff --git a/blocksuite/affine/inlines/reference/src/reference-node/reference-node.ts b/blocksuite/affine/inlines/reference/src/reference-node/reference-node.ts
index b4fe032545..e9c0a957cc 100644
--- a/blocksuite/affine/inlines/reference/src/reference-node/reference-node.ts
+++ b/blocksuite/affine/inlines/reference/src/reference-node/reference-node.ts
@@ -49,10 +49,6 @@ export class AffineReference extends WithDisposable(ShadowlessElement) {
       cursor: pointer;
       user-select: none;
       padding: 1px 2px 1px 0;
-
-      svg {
-        margin-bottom: 0.1em;
-      }
     }
     .affine-reference:hover {
       background: var(--affine-hover-color);
diff --git a/packages/frontend/component/src/ui/icon-picker/renderer.tsx b/packages/frontend/component/src/ui/icon-picker/renderer.tsx
index 3410798565..d6842d66c2 100644
--- a/packages/frontend/component/src/ui/icon-picker/renderer.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/renderer.tsx
@@ -6,6 +6,7 @@ import { type IconData, IconType } from './type';
 export const IconRenderer = ({
   data,
   fallback,
+  ...props
 }: {
   data?: IconData;
   fallback?: ReactNode;
@@ -18,7 +19,9 @@ export const IconRenderer = ({
     return data.unicode;
   }
   if (data.type === IconType.AffineIcon && data.name) {
-    return <AffineIconRenderer name={data.name} color={data.color} />;
+    return (
+      <AffineIconRenderer name={data.name} color={data.color} {...props} />
+    );
   }
   if (data.type === IconType.Blob) {
     // Not supported yet
diff --git a/packages/frontend/core/src/components/affine/reference-link/styles.css.ts b/packages/frontend/core/src/components/affine/reference-link/styles.css.ts
index 3bb23f49c4..53c487472b 100644
--- a/packages/frontend/core/src/components/affine/reference-link/styles.css.ts
+++ b/packages/frontend/core/src/components/affine/reference-link/styles.css.ts
@@ -5,7 +5,7 @@ export const pageReferenceIcon = style({
   verticalAlign: 'middle',
   fontSize: '1.1em',
   transform: 'translate(2px, -1px)',
-  color: cssVarV2('icon/primary'),
+  // color: cssVarV2('icon/primary'),
 });
 
 export const pageReferenceLink = style({
diff --git a/packages/frontend/core/src/modules/doc-display-meta/services/icon.tsx b/packages/frontend/core/src/modules/doc-display-meta/services/icon.tsx
index ec0fc6e7f5..1a1ff2c16c 100644
--- a/packages/frontend/core/src/modules/doc-display-meta/services/icon.tsx
+++ b/packages/frontend/core/src/modules/doc-display-meta/services/icon.tsx
@@ -3,7 +3,9 @@ import * as litIcons from '@blocksuite/icons/lit';
 import { html } from 'lit';
 
 export const getDocIconComponent = (icon: IconData) => {
-  const Icon = () => <IconRenderer data={icon} />;
+  const Icon = (props: React.SVGProps<SVGSVGElement>) => (
+    <IconRenderer data={icon} {...props} />
+  );
   Icon.displayName = 'DocIcon';
   return Icon;
 };