diff --git a/packages/s2-core/__tests__/spreadsheet/header-action-icons-spec.ts b/packages/s2-core/__tests__/spreadsheet/header-action-icons-spec.ts
new file mode 100644
index 0000000000..993e89ef0d
--- /dev/null
+++ b/packages/s2-core/__tests__/spreadsheet/header-action-icons-spec.ts
@@ -0,0 +1,297 @@
+import { get, pick } from 'lodash';
+import { type SpreadSheet, type S2Options, OriginEventType } from '../../src';
+import { createFederatedMouseEvent, createPivotSheet } from '../util/helpers';
+
+const s2Options: S2Options = {
+  width: 600,
+  height: 400,
+};
+
+describe('HeaderActionIcons Tests', () => {
+  let s2: SpreadSheet;
+
+  beforeEach(async () => {
+    s2 = createPivotSheet(s2Options);
+    await s2.render();
+  });
+
+  afterEach(() => {
+    s2.destroy();
+  });
+
+  test('should render custom header action icons', async () => {
+    const rowCellDisplayConditionFn = jest.fn();
+    const colCellDisplayConditionFn = jest.fn();
+    const cornerCellDisplayConditionFn = jest.fn();
+
+    s2.setOptions({
+      headerActionIcons: [
+        {
+          icons: ['Plus'],
+          belongsCell: 'rowCell',
+          displayCondition: rowCellDisplayConditionFn,
+        },
+        {
+          icons: ['Trend'],
+          belongsCell: 'colCell',
+          displayCondition: colCellDisplayConditionFn,
+        },
+        {
+          icons: ['Minus'],
+          belongsCell: 'cornerCell',
+          displayCondition: cornerCellDisplayConditionFn,
+        },
+      ],
+    });
+
+    await s2.render(false);
+
+    [
+      ...s2.facet.getRowCells(),
+      ...s2.facet.getColCells(),
+      ...s2.facet.getCornerCells(),
+    ].forEach((cell) => {
+      expect(cell.getActionIcons()).toHaveLength(1);
+    });
+
+    expect(rowCellDisplayConditionFn).toHaveBeenCalled();
+    expect(colCellDisplayConditionFn).toHaveBeenCalled();
+    expect(cornerCellDisplayConditionFn).toHaveBeenCalled();
+  });
+
+  test('should custom icon fill color', async () => {
+    s2.setOptions({
+      headerActionIcons: [
+        {
+          icons: [
+            {
+              name: 'Plus',
+              position: 'right',
+              fill: 'red',
+            },
+          ],
+          belongsCell: 'rowCell',
+        },
+      ],
+    });
+
+    await s2.render(false);
+
+    s2.facet.getRowCells().forEach((cell) => {
+      expect(get(cell.getActionIcons()[0], 'cfg.fill')).toEqual('red');
+    });
+  });
+
+  test('should default hide icon', async () => {
+    const innerDefaultHide = jest.fn(() => true);
+    const defaultHide = jest.fn(() => false);
+
+    s2.setOptions({
+      headerActionIcons: [
+        {
+          icons: [
+            {
+              name: 'Plus',
+              position: 'right',
+              defaultHide: innerDefaultHide,
+            },
+          ],
+          belongsCell: 'rowCell',
+          defaultHide,
+        },
+      ],
+    });
+
+    await s2.render(false);
+
+    s2.facet.getRowCells().forEach((cell) => {
+      expect(cell.getActionIcons()[0].parsedStyle.visibility).toEqual('hidden');
+    });
+
+    expect(innerDefaultHide).toHaveBeenCalled();
+    expect(defaultHide).not.toHaveBeenCalled();
+  });
+
+  test('should not render icons by displayCondition', async () => {
+    const innerDisplayCondition = jest.fn(() => false);
+    const displayCondition = jest.fn(() => true);
+
+    s2.setOptions({
+      headerActionIcons: [
+        {
+          icons: [
+            {
+              name: 'Plus',
+              position: 'right',
+              displayCondition: innerDisplayCondition,
+            },
+          ],
+          belongsCell: 'rowCell',
+          displayCondition,
+        },
+      ],
+    });
+
+    await s2.render(false);
+
+    s2.facet.getRowCells().forEach((cell) => {
+      expect(cell.getActionIcons()).toBeEmpty();
+    });
+
+    expect(innerDisplayCondition).toHaveBeenCalled();
+    expect(displayCondition).not.toHaveBeenCalled();
+  });
+
+  test('should render multiple custom position', async () => {
+    s2.setOptions({
+      headerActionIcons: [
+        {
+          icons: [
+            {
+              name: 'Plus',
+              position: 'right',
+            },
+            {
+              name: 'Trend',
+              position: 'left',
+            },
+          ],
+          belongsCell: 'rowCell',
+        },
+      ],
+    });
+
+    await s2.render(false);
+
+    const positions = s2.facet.getRowCells().map((cell) => {
+      return cell
+        .getActionIcons()
+        .map((icon) => pick(icon.iconImageShape.attributes, ['x', 'y']));
+    });
+
+    expect(positions).toMatchInlineSnapshot(`
+      Array [
+        Array [
+          Object {
+            "x": 9,
+            "y": 24.5,
+          },
+          Object {
+            "x": 51,
+            "y": 24.5,
+          },
+        ],
+        Array [
+          Object {
+            "x": 158,
+            "y": 9.5,
+          },
+          Object {
+            "x": 200,
+            "y": 9.5,
+          },
+        ],
+        Array [
+          Object {
+            "x": 158,
+            "y": 39.5,
+          },
+          Object {
+            "x": 200,
+            "y": 39.5,
+          },
+        ],
+      ]
+    `);
+  });
+
+  test('should not render icons by displayCondition1', async () => {
+    const onPlusClick = jest.fn();
+    const onPlusHover = jest.fn();
+    const onTrendClick = jest.fn();
+    const onTrendHover = jest.fn();
+
+    const onClick = jest.fn();
+    const onHover = jest.fn();
+
+    s2.setOptions({
+      headerActionIcons: [
+        {
+          icons: [
+            {
+              name: 'Plus',
+              position: 'right',
+              onClick: onPlusClick,
+              onHover: onPlusHover,
+            },
+            {
+              name: 'Trend',
+              position: 'right',
+              onClick: onTrendClick,
+              onHover: onTrendHover,
+            },
+          ],
+          belongsCell: 'rowCell',
+          onClick,
+          onHover,
+        },
+      ],
+    });
+
+    await s2.render(false);
+
+    const events = [onTrendClick, onTrendHover, onClick, onHover];
+
+    const plusIcon = s2.facet.getRowCells()[0].getActionIcons()[0];
+
+    plusIcon.dispatchEvent(
+      createFederatedMouseEvent(s2, OriginEventType.CLICK),
+    );
+
+    events.forEach((fn) => {
+      expect(fn).not.toHaveBeenCalled();
+    });
+
+    expect(onPlusClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('should render default right position', async () => {
+    s2.setOptions({
+      headerActionIcons: [
+        {
+          icons: ['Trend'],
+          belongsCell: 'rowCell',
+        },
+      ],
+    });
+
+    await s2.render(false);
+
+    const positions = s2.facet
+      .getRowCells()
+      .map((cell) => pick(cell.getActionIcons()[0], ['cfg.x', 'cfg.y']));
+
+    expect(positions).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "cfg": Object {
+            "x": 37,
+            "y": 24.5,
+          },
+        },
+        Object {
+          "cfg": Object {
+            "x": 186,
+            "y": 9.5,
+          },
+        },
+        Object {
+          "cfg": Object {
+            "x": 186,
+            "y": 39.5,
+          },
+        },
+      ]
+    `);
+  });
+});
diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts
index 6452f1ffea..333bf2940c 100644
--- a/packages/s2-core/src/cell/base-cell.ts
+++ b/packages/s2-core/src/cell/base-cell.ts
@@ -41,7 +41,7 @@ import {
   CellClipBox,
   CellBorderPosition,
   type InteractionStateTheme,
-  type FullyIconName,
+  type HeaderActionNameOptions,
   type IconPosition,
   type InternalFullyTheme,
   type InternalFullyCellTheme,
@@ -607,7 +607,7 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     };
   }
 
-  public getIconConditionResult(): FullyIconName | undefined {
+  public getIconConditionResult(): HeaderActionNameOptions | undefined {
     const iconCondition = this.findFieldCondition(
       this.conditions?.icon,
     ) as IconCondition;
diff --git a/packages/s2-core/src/cell/data-cell.ts b/packages/s2-core/src/cell/data-cell.ts
index a07ef22650..eac193a9db 100644
--- a/packages/s2-core/src/cell/data-cell.ts
+++ b/packages/s2-core/src/cell/data-cell.ts
@@ -9,7 +9,7 @@ import {
 import {
   CellBorderPosition,
   CellClipBox,
-  type FullyIconName,
+  type HeaderActionNameOptions,
   type IconCondition,
   type InteractionStateTheme,
 } from '../common/interface';
@@ -241,7 +241,7 @@ export class DataCell extends BaseCell<ViewMeta> {
         // 此时 name 是什么值都无所谓，因为后面会根据 mappingResult 来决定
         name: '',
         position: getIconPosition(iconCondition),
-      } as FullyIconName);
+      } as HeaderActionNameOptions);
 
     this.groupedIcons = groupIconsByPosition([], iconCfg);
   }
diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts
index 496cabec00..e90fbd2658 100644
--- a/packages/s2-core/src/cell/header-cell.ts
+++ b/packages/s2-core/src/cell/header-cell.ts
@@ -1,6 +1,6 @@
 import type {
-  FederatedPointerEvent as CanvasEvent,
   DisplayObject,
+  FederatedPointerEvent as CanvasEvent,
   PointLike,
 } from '@antv/g';
 import {
@@ -15,7 +15,6 @@ import {
   map,
   merge,
 } from 'lodash';
-import { renderIcon } from '../utils/g-renders';
 import { BaseCell } from '../cell/base-cell';
 import {
   CellType,
@@ -25,14 +24,15 @@ import {
 } from '../common/constant';
 import { InteractionStateName } from '../common/constant/interaction';
 import { GuiIcon } from '../common/icons';
+import type { GuiIconCfg } from '../common/icons/gui-icon';
 import type {
   CellMeta,
   Condition,
+  ConditionMappingResult,
   FormatResult,
-  FullyIconName,
   HeaderActionIconOptions,
+  HeaderActionNameOptions,
   InternalFullyHeaderActionIcon,
-  ConditionMappingResult,
   TextTheme,
 } from '../common/interface';
 import type { BaseHeaderConfig } from '../facet/header';
@@ -42,6 +42,7 @@ import {
   getActionIconConfig,
   groupIconsByPosition,
 } from '../utils/cell/header-cell';
+import { renderIcon } from '../utils/g-renders';
 import { getSortTypeIcon } from '../utils/sort-action';
 
 export abstract class HeaderCell extends BaseCell<Node> {
@@ -57,7 +58,7 @@ export abstract class HeaderCell extends BaseCell<Node> {
 
   protected hasDefaultHiddenIcon: boolean;
 
-  protected conditionIconMappingResult: FullyIconName | undefined;
+  protected conditionIconMappingResult: HeaderActionNameOptions | undefined;
 
   /** left icon 绘制起始坐标 */
   protected leftIconPosition: PointLike;
@@ -157,11 +158,9 @@ export abstract class HeaderCell extends BaseCell<Node> {
     return false;
   }
 
-  protected getActionIconsCount() {
-    return this.groupedIcons.left.length + this.groupedIcons.right.length;
-  }
-
-  protected getActionIconStyle() {
+  protected getActionIconStyle(
+    options: Partial<HeaderActionIconOptions>,
+  ): Partial<GuiIconCfg> {
     const { icon } = this.getStyle()!;
     const conditionStyle = this.getTextConditionMappingResult();
     const defaultTextFill = conditionStyle?.fill || this.getTextStyle().fill!;
@@ -169,8 +168,9 @@ export abstract class HeaderCell extends BaseCell<Node> {
     return {
       width: icon?.size,
       height: icon?.size,
-      // 主题 icon 颜色配置优先，若无则默认为文本条件格式颜色优先
-      fill: icon?.fill || defaultTextFill,
+      // 优先级: 单个 icon 颜色配置 > 全部 icon 颜色配置 > 主题 icon 颜色配置 > 文本默认颜色
+      fill: options?.fill || icon?.fill || defaultTextFill,
+      cursor: 'pointer',
     };
   }
 
@@ -180,14 +180,13 @@ export abstract class HeaderCell extends BaseCell<Node> {
   }
 
   protected addActionIcon(options: HeaderActionIconOptions) {
-    const { x, y, iconName, defaultHide, onClick, onHover, isSortIcon } =
-      options;
+    const { x, y, name, defaultHide, onClick, onHover, isSortIcon } = options;
 
     const icon = new GuiIcon({
-      name: iconName,
+      ...this.getActionIconStyle(options),
+      name,
       x,
       y,
-      ...this.getActionIconStyle(),
     });
 
     // 默认隐藏，hover 可见
@@ -197,7 +196,7 @@ export abstract class HeaderCell extends BaseCell<Node> {
       this.spreadsheet.emit(S2Event.GLOBAL_ACTION_ICON_HOVER, event);
       onHover?.({
         hovering: true,
-        iconName,
+        name,
         meta: this.meta,
         event,
       });
@@ -207,27 +206,27 @@ export abstract class HeaderCell extends BaseCell<Node> {
       this.spreadsheet.emit(S2Event.GLOBAL_ACTION_ICON_HOVER_OFF, event);
       onHover?.({
         hovering: false,
-        iconName,
+        name,
         meta: this.meta,
         event,
       });
     });
 
-    if (isSortIcon) {
-      icon.addEventListener('click', (event: CanvasEvent) => {
-        this.spreadsheet.emit(S2Event.GLOBAL_ACTION_ICON_CLICK, event);
+    icon.addEventListener('click', (event: CanvasEvent) => {
+      this.spreadsheet.emit(S2Event.GLOBAL_ACTION_ICON_CLICK, event);
+
+      if (isSortIcon) {
         this.spreadsheet.handleGroupSort(event, this.meta);
+
+        return;
+      }
+
+      onClick?.({
+        name,
+        meta: this.meta,
+        event,
       });
-    } else {
-      icon.addEventListener('click', (event: CanvasEvent) => {
-        this.spreadsheet.emit(S2Event.GLOBAL_ACTION_ICON_CLICK, event);
-        onClick?.({
-          iconName,
-          meta: this.meta,
-          event,
-        });
-      });
-    }
+    });
 
     this.actionIcons.push(icon);
     this.appendChild(icon);
@@ -257,10 +256,10 @@ export abstract class HeaderCell extends BaseCell<Node> {
           this.conditionIconShape = renderIcon(this, {
             x,
             y,
-            name: icon?.name!,
+            name: icon.name,
             width: size,
             height: size,
-            fill: icon?.fill,
+            fill: icon.fill,
           });
           this.addConditionIconShape(this.conditionIconShape);
 
@@ -270,22 +269,24 @@ export abstract class HeaderCell extends BaseCell<Node> {
         const { onClick, onHover, defaultHide, isSortIcon } =
           this.actionIconConfig!;
 
+        const defaultHideHandler = icon.defaultHide ?? defaultHide;
         const iconDefaultHide =
-          typeof defaultHide === 'function'
-            ? defaultHide(this.meta, icon.name)
-            : defaultHide;
+          typeof defaultHideHandler === 'function'
+            ? defaultHideHandler(this.meta, icon.name)
+            : defaultHideHandler;
 
         if (iconDefaultHide) {
           this.hasDefaultHiddenIcon = true;
         }
 
         this.addActionIcon({
-          iconName: icon.name,
+          name: icon.name,
+          fill: icon.fill,
           x,
           y,
           defaultHide: iconDefaultHide,
-          onClick,
-          onHover,
+          onClick: icon.onClick ?? onClick,
+          onHover: icon.onHover ?? onHover,
           isSortIcon,
         });
       });
@@ -451,4 +452,8 @@ export abstract class HeaderCell extends BaseCell<Node> {
   public getTreeIcon() {
     return this.treeIcon;
   }
+
+  public getActionIcons() {
+    return this.actionIcons;
+  }
 }
diff --git a/packages/s2-core/src/common/interface/basic.ts b/packages/s2-core/src/common/interface/basic.ts
index 4ddf65caec..2618198ea4 100644
--- a/packages/s2-core/src/common/interface/basic.ts
+++ b/packages/s2-core/src/common/interface/basic.ts
@@ -1,5 +1,5 @@
 import type { FederatedPointerEvent as Event, Group } from '@antv/g';
-import type { CellType } from '../../common/constant';
+import type { MergedCell } from '../../cell';
 import type {
   CustomTreeNode,
   Data,
@@ -13,13 +13,13 @@ import type { CellData } from '../../data-set/cell-data';
 import type { BaseHeaderConfig, Frame } from '../../facet/header';
 import type { Node } from '../../facet/layout/node';
 import type { SpreadSheet } from '../../sheet-type';
-import type { MergedCell } from '../../cell';
+import type { CellType } from '../constant';
 import type { S2CellType } from './interaction';
 import type { DataItem } from './s2DataConfig';
 
 export type { GetCellMeta, LayoutResult } from './facet';
 
-/*
+/**
  * 第二个参数在以下情况会传入：
  * 1. data cell 格式化
  * 2. copy/export
@@ -228,19 +228,29 @@ export interface Pagination {
 }
 
 export interface CustomSVGIcon {
-  /** icon 名称 */
+  /**
+   * icon 名称
+   */
   name: string;
 
   /**
-   * 1、base 64
-   * 2、svg本地文件（兼容老方式，可以改颜色）
-   * 3、线上支持的图片地址
+   * @example 1、base64
+   * @example 2. svg本地文件 (兼容老方式, 可以改颜色)
+
+   import Icon from 'path/to/xxx.svg'
+
+   => { name: 'iconA', svg: Icon }
+   => { name: 'iconB', svg: '<svg>...</svg>' }
+
+   * @example 3. 线上支持的图片地址
+    带后缀: https://gw.alipayobjects.com/zos/antfincdn/gu1Fsz3fw0/filter%26sort_filter.svg
+    无后缀: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*5nsESLuvc_EAAAAAAAAAAAAADmJ7AQ/original
    */
   svg: string;
 }
 
 export interface HeaderIconClickParams {
-  iconName: string;
+  name: string;
   meta: Node;
   event?: Event;
 }
@@ -251,44 +261,86 @@ export interface HeaderIconHoverParams extends HeaderIconClickParams {
   hovering: boolean;
 }
 
-export interface HeaderActionIconOptions {
-  iconName: string;
+export interface HeaderActionIconOptions extends HeaderActionIconBaseOptions {
+  fill?: string;
+  name: string;
   x: number;
   y: number;
-  onClick?: (headerIconClickParams: HeaderIconClickParams) => void;
-  onHover?: (headerIconHoverParams: HeaderIconHoverParams) => void;
   isSortIcon?: boolean;
-  defaultHide?: boolean;
 }
 
-export type FullyIconName = {
-  name: string;
-  position: IconPosition;
+export type HeaderActionNameOptions = HeaderActionIconBaseOptions & {
+  /**
+   * icon 颜色配置
+   * @description 优先级: 单个 icon > 主题 icon 配置 > 文本颜色
+   */
   fill?: string;
+
+  /**
+   * icon 名称
+   */
+  name: string;
+
+  /**
+   * icon 相对文本的位置
+   * 可选: 'left' | 'right'
+   */
+  position?: IconPosition;
+
+  /**
+   * 是否是条件格式的 icon
+   */
   isConditionIcon?: boolean;
 };
-export type ActionIconName = string | FullyIconName;
 
-export interface HeaderActionIcon {
+export type HeaderActionName =
+  | string
+  | Omit<HeaderActionNameOptions, 'isConditionIcon'>;
+
+export interface HeaderActionIconBaseOptions {
   /**
-   * 已注册的 icon 类型或自定义的 icon 类型名
-   * 如果是 string[], 则默认 icon 位置为右侧
+   * 是否默认隐藏， 开启后 hover 后才显示,  关闭后则始终显示, 可根据当前单元格信息动态判断
+   * @example defaultHide: (meta, iconName) => meta.id === 'xxx'
+   * @default false
    */
-  icons: ActionIconName[];
-  // 所属的 cell 类型
-  belongsCell: Omit<CellType, 'dataCell'>;
-  /** 是否默认隐藏， true 为 hover后显示, false 为一直显示 */
   defaultHide?: boolean | ((meta: Node, iconName: string) => boolean);
-  /** 是否展示当前 iconNames 配置的 icon */
+
+  /**
+   * 是否展示, 可根据当前单元格信息动态判断
+   * @example displayCondition: (meta, iconName) => !meta.isTotals
+   */
   displayCondition?: (mete: Node, iconName: string) => boolean;
-  /** 点击回调函数 */
+
+  /**
+   * 点击回调函数
+   */
   onClick?: (headerIconClickParams: HeaderIconClickParams) => void;
-  /** 悬停回调函数 */
+
+  /**
+   * 悬停回调函数
+   */
   onHover?: (headerIconHoverParams: HeaderIconHoverParams) => void;
 }
 
+export interface HeaderActionIcon extends HeaderActionIconBaseOptions {
+  /**
+   * 内置 icon 或通过 @customSVGIcons 自定义的 icon 名称
+   * 如果是 string[], 则默认 icon 位置为右侧
+   * @see https://s2.antv.antgroup.com/manual/advanced/custom/custom-icon
+   * @example icons: ['iconNameA', 'iconNameB']
+   * @example icons: [{ name: 'iconNameA', position: "left", fill: "red" }]
+   */
+  icons: HeaderActionName[];
+
+  /**
+   * 所属的 cell 类型, 即当前 icon 展示在哪种类型单元格中
+   * @example belongsCell: 'rowCell'
+   */
+  belongsCell: Omit<CellType, 'dataCell' | 'mergedCell' | 'seriesNumberCell'>;
+}
+
 export interface InternalFullyHeaderActionIcon extends HeaderActionIcon {
-  icons: FullyIconName[];
+  icons: HeaderActionNameOptions[];
   isSortIcon?: boolean;
 }
 
diff --git a/packages/s2-core/src/common/interface/theme.ts b/packages/s2-core/src/common/interface/theme.ts
index bea0b7994f..5a39ef5db0 100644
--- a/packages/s2-core/src/common/interface/theme.ts
+++ b/packages/s2-core/src/common/interface/theme.ts
@@ -1,7 +1,7 @@
 import type { LineStyleProps } from '@antv/g';
+import type { CellType } from '../../common/constant/interaction';
 import type { InteractionStateName } from '../constant';
 import type { PALETTE_MAP } from '../constant/theme';
-import type { CellType } from '../../common/constant/interaction';
 import type { DeepRequired } from './util';
 
 // 文本内容的水平对齐方式, 默认 left
diff --git a/packages/s2-core/src/utils/cell/header-cell.ts b/packages/s2-core/src/utils/cell/header-cell.ts
index 9e7758d1c6..f3968efb4b 100644
--- a/packages/s2-core/src/utils/cell/header-cell.ts
+++ b/packages/s2-core/src/utils/cell/header-cell.ts
@@ -1,20 +1,20 @@
 import { find, groupBy, isEmpty, isEqual, merge } from 'lodash';
 import type {
-  FullyIconName,
+  HeaderActionNameOptions,
   IconPosition,
   IconTheme,
   InternalFullyHeaderActionIcon,
 } from '../../common/interface';
 import { CellType, EXTRA_FIELD } from '../../common/constant';
 import type {
-  ActionIconName,
+  HeaderActionName,
   FormatResult,
   HeaderActionIcon,
 } from '../../common/interface/basic';
 import type { Node } from '../../facet/layout/node';
 
 const normalizeIcons = (
-  icons: ActionIconName[],
+  icons: HeaderActionName[],
   position: IconPosition = 'right',
 ) =>
   icons.map((icon) => {
@@ -53,13 +53,13 @@ const shouldShowActionIcons = (
     return false;
   }
 
-  if (!displayCondition) {
-    // 没有展示条件参数默认全展示
-    return true;
-  }
-
   // 有任意 iconName 命中展示，则使用当前 headerActionIcon config
-  return icons.some((icon) => displayCondition(meta, icon.name));
+  return icons.some(
+    (icon) =>
+      icon.displayCondition?.(meta, icon.name) ??
+      displayCondition?.(meta, icon.name) ??
+      true,
+  );
 };
 
 /**
@@ -85,22 +85,21 @@ export const getActionIconConfig = (
   }
 
   // 使用配置的 displayCondition 进一步筛选需要展示的 icon
-  let nextIcons = iconConfig.icons;
-
-  if (iconConfig.displayCondition) {
-    nextIcons = nextIcons.filter((iconName) =>
-      iconConfig.displayCondition?.(meta, iconName.name),
-    );
-  }
+  const displayIcons = iconConfig.icons.filter(
+    (icon) =>
+      icon.displayCondition?.(meta, icon.name) ??
+      iconConfig.displayCondition?.(meta, icon.name) ??
+      true,
+  );
 
   return {
     ...iconConfig,
-    icons: nextIcons,
+    icons: displayIcons,
   };
 };
 
 export const getIconTotalWidth = (
-  icons: FullyIconName[] = [],
+  icons: HeaderActionNameOptions[] = [],
   iconTheme: IconTheme,
 ): number => {
   if (isEmpty(icons)) {
@@ -117,12 +116,12 @@ export const getIconTotalWidth = (
 };
 
 export type GroupedIcons = {
-  [key in IconPosition]: FullyIconName[];
+  [key in IconPosition]: HeaderActionNameOptions[];
 };
 
 export const groupIconsByPosition = (
-  icons: FullyIconName[] = [],
-  conditionIcon?: FullyIconName,
+  icons: HeaderActionNameOptions[] = [],
+  conditionIcon?: HeaderActionNameOptions,
 ) => {
   const groupedIcons = merge(
     {
diff --git a/packages/s2-react/__tests__/unit/components/drill-down/__snapshots__/index-spec.tsx.snap b/packages/s2-react/__tests__/unit/components/drill-down/__snapshots__/index-spec.tsx.snap
index c92cd07497..cf15fc38d6 100644
--- a/packages/s2-react/__tests__/unit/components/drill-down/__snapshots__/index-spec.tsx.snap
+++ b/packages/s2-react/__tests__/unit/components/drill-down/__snapshots__/index-spec.tsx.snap
@@ -65,6 +65,11 @@ exports[`DrillDown Component Tests should render component 1`] = `
         </span>
       </span>
     </span>
+    <div
+      class="antv-s2-drill-down-extra"
+    >
+      extra
+    </div>
     <div
       class="ant-empty antv-s2-drill-down-empty"
     >
@@ -138,7 +143,6 @@ exports[`DrillDown Component Tests should render component 1`] = `
         No data
       </div>
     </div>
-    extra
     <ul
       class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light antv-s2-drill-down-menu"
       data-menu-list="true"
diff --git a/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/index-spec.tsx
index eb15d5f444..33437a4f80 100644
--- a/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/index-spec.tsx
+++ b/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/index-spec.tsx
@@ -3,14 +3,14 @@ import React from 'react';
 import { DEFAULT_MOBILE_OPTIONS, DeviceType, SpreadSheet } from '@antv/s2';
 import { pick } from 'lodash';
 import * as mockDataConfig from '../../../../data/simple-data.json';
-import { MobileSheetComponent } from '../../../../../src/components/sheets/mobile-sheet';
+import { MobileSheet } from '../../../../../src/components/sheets/mobile-sheet';
 
 describe('MobileSheet Tests', () => {
   test('get mobile default option', async () => {
     let s2: SpreadSheet;
 
     render(
-      <MobileSheetComponent
+      <MobileSheet
         dataCfg={mockDataConfig}
         options={{ height: 300, devicePixelRatio: 2 }}
         onMounted={(s) => {
@@ -34,7 +34,7 @@ describe('MobileSheet Tests', () => {
 
   test('get mobile default fragment', () => {
     const { asFragment } = render(
-      <MobileSheetComponent
+      <MobileSheet
         dataCfg={mockDataConfig}
         options={{
           height: 300,
diff --git a/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/mobile-tooltip-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/mobile-tooltip-spec.tsx
index 63e5893861..f0be32ce65 100644
--- a/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/mobile-tooltip-spec.tsx
+++ b/packages/s2-react/__tests__/unit/components/sheets/mobile-sheet/mobile-tooltip-spec.tsx
@@ -1,7 +1,7 @@
 import { render, waitFor } from '@testing-library/react';
 import React from 'react';
 import type { SpreadSheet } from '@antv/s2';
-import { MobileSheetComponent } from '../../../../../src/components/sheets/mobile-sheet';
+import { MobileSheet } from '../../../../../src/components/sheets/mobile-sheet';
 import { SheetComponent } from '../../../../../src/components/sheets';
 import { CustomTooltip } from '../../../../../src';
 import * as mockDataConfig from '../../../../data/simple-data.json';
@@ -45,7 +45,7 @@ describe('Mobile Tooltip Different Tests', () => {
     let customTooltipInstance;
 
     render(
-      <MobileSheetComponent
+      <MobileSheet
         dataCfg={mockDataConfig}
         options={{
           tooltip: {
@@ -78,7 +78,7 @@ describe('Mobile Tooltip Different Tests', () => {
     let customTooltipInstance;
 
     render(
-      <MobileSheetComponent
+      <MobileSheet
         dataCfg={mockDataConfig}
         options={{
           tooltip: {
diff --git a/packages/s2-react/__tests__/unit/components/tooltip/index-spec.tsx b/packages/s2-react/__tests__/unit/components/tooltip/index-spec.tsx
index 84c3ace747..3a8839ff18 100644
--- a/packages/s2-react/__tests__/unit/components/tooltip/index-spec.tsx
+++ b/packages/s2-react/__tests__/unit/components/tooltip/index-spec.tsx
@@ -9,7 +9,7 @@ import {
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { CustomTooltip, TooltipComponent } from '../../../../src';
-import { MobileSheetComponent } from '../../../../src/components/sheets/mobile-sheet';
+import { MobileSheet } from '../../../../src/components/sheets/mobile-sheet';
 import { TooltipOperator } from '../../../../src/components/tooltip/components/operator';
 import { TooltipDetail } from '../../../../src/components/tooltip/components/detail';
 import { TooltipHead } from '../../../../src/components/tooltip/components/head-info';
@@ -55,7 +55,7 @@ describe('Tooltip Common Components Tests', () => {
     let s2: SpreadSheet;
 
     render(
-      <MobileSheetComponent
+      <MobileSheet
         dataCfg={mockDataConfig}
         options={{ height: 300 }}
         onMounted={(s) => {
diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts
index 658de99b15..aa6f993a05 100644
--- a/packages/s2-react/playground/config.ts
+++ b/packages/s2-react/playground/config.ts
@@ -266,8 +266,6 @@ export const s2Options: SheetComponentOptions = {
       ],
     },
   },
-
-  conditions: s2ConditionsOptions,
   style: {
     rowCell: {
       height: 50,
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
index 6bb5fb2b85..211807fcb9 100644
--- a/packages/s2-react/playground/index.tsx
+++ b/packages/s2-react/playground/index.tsx
@@ -201,7 +201,8 @@ function MainLayout() {
 
   const onColCellClick = (cellInfo: TargetCellInfo) => {
     logHandler('onColCellClick')(cellInfo);
-    if (!options.showDefaultHeaderActionIcon) {
+
+    if (showCustomTooltip) {
       const { event } = cellInfo;
 
       s2Ref.current?.showTooltip({
@@ -345,7 +346,7 @@ function MainLayout() {
         destroyInactiveTabPane
       >
         <TabPane tab="基础表" key="basic">
-          <Collapse defaultActiveKey={[]}>
+          <Collapse defaultActiveKey={['filter']}>
             <Collapse.Panel header="筛选器" key="filter">
               <Space>
                 <Tooltip title="表格类型">
@@ -565,8 +566,8 @@ function MainLayout() {
                   onChange={setShowTotals}
                 />
                 <Switch
-                  checkedChildren="默认actionIcons"
-                  unCheckedChildren="自定义actionIcons"
+                  checkedChildren="默认 headerActionIcons"
+                  unCheckedChildren="自定义 headerActionIcons"
                   checked={mergedOptions.showDefaultHeaderActionIcon}
                   onChange={(checked) => {
                     updateOptions({
@@ -917,89 +918,6 @@ function MainLayout() {
                     });
                   }}
                 />
-                <Switch
-                  checkedChildren="冻结行头开"
-                  unCheckedChildren="冻结行头关"
-                  defaultChecked={Boolean(mergedOptions.frozen?.rowHeader)}
-                  onChange={(checked) => {
-                    updateOptions({
-                      frozen: {
-                        rowHeader: checked,
-                      },
-                    });
-                  }}
-                  disabled={sheetType === 'table'}
-                />
-                <Switch
-                  checkedChildren="容器宽高自适应开"
-                  unCheckedChildren="容器宽高自适应关"
-                  defaultChecked={Boolean(adaptive)}
-                  onChange={setAdaptive}
-                />
-                <Switch
-                  checkedChildren="显示序号"
-                  unCheckedChildren="不显示序号"
-                  checked={mergedOptions.showSeriesNumber}
-                  onChange={(checked) => {
-                    updateOptions({
-                      showSeriesNumber: checked,
-                    });
-                  }}
-                />
-                <Switch
-                  checkedChildren="分页"
-                  unCheckedChildren="不分页"
-                  checked={showPagination}
-                  onChange={setShowPagination}
-                />
-                <Switch
-                  checkedChildren="汇总"
-                  unCheckedChildren="无汇总"
-                  checked={showTotals}
-                  onChange={setShowTotals}
-                />
-                <Switch
-                  checkedChildren="默认actionIcons"
-                  unCheckedChildren="自定义actionIcons"
-                  checked={mergedOptions.showDefaultHeaderActionIcon}
-                  onChange={(checked) => {
-                    updateOptions({
-                      showDefaultHeaderActionIcon: checked,
-                    });
-                  }}
-                />
-                <Switch
-                  checkedChildren="开启Tooltip"
-                  unCheckedChildren="关闭Tooltip"
-                  checked={mergedOptions.tooltip!.enable}
-                  onChange={(checked) => {
-                    updateOptions({
-                      tooltip: {
-                        enable: checked,
-                      },
-                    });
-                  }}
-                />
-                <Switch
-                  checkedChildren="自定义Tooltip"
-                  unCheckedChildren="默认Tooltip"
-                  checked={showCustomTooltip}
-                  onChange={setShowCustomTooltip}
-                />
-                <Switch
-                  checkedChildren="打开链接跳转"
-                  unCheckedChildren="无链接跳转"
-                  checked={!!mergedOptions.interaction!.linkFields!.length}
-                  onChange={(checked) => {
-                    updateOptions({
-                      interaction: {
-                        linkFields: checked
-                          ? ['province', 'city', 'number']
-                          : [],
-                      },
-                    });
-                  }}
-                />
                 <Tooltip title={<p>透视表树状模式默认行头展开层级配置</p>}>
                   <Select
                     style={{ width: 180 }}
diff --git a/packages/s2-react/src/components/drill-down/index.tsx b/packages/s2-react/src/components/drill-down/index.tsx
index 146fdcfd87..7e69117838 100644
--- a/packages/s2-react/src/components/drill-down/index.tsx
+++ b/packages/s2-react/src/components/drill-down/index.tsx
@@ -112,13 +112,13 @@ export const DrillDown: React.FC<DrillDownProps> = ({
           prefix={<SearchIcon />}
           allowClear
         />
+        <div className={`${DRILL_DOWN_PRE_CLASS}-extra`}>{extra}</div>
         {isEmpty(options) && (
           <Empty
             imageStyle={{ height: '64px' }}
             className={`${DRILL_DOWN_PRE_CLASS}-empty`}
           />
         )}
-        {extra}
         <Menu
           className={`${DRILL_DOWN_PRE_CLASS}-menu`}
           selectedKeys={drillFields}
diff --git a/packages/s2-react/src/components/sheets/base-sheet/index.tsx b/packages/s2-react/src/components/sheets/base-sheet/index.tsx
index cd1f8b09bd..ffd911bf0a 100644
--- a/packages/s2-react/src/components/sheets/base-sheet/index.tsx
+++ b/packages/s2-react/src/components/sheets/base-sheet/index.tsx
@@ -1,9 +1,8 @@
-import { getSafetyDataConfig, S2_PREFIX_CLS, SpreadSheet } from '@antv/s2';
+import { getSafetyDataConfig, S2_PREFIX_CLS } from '@antv/s2';
 import { Spin } from 'antd';
 import React from 'react';
 import { injectThemeVars } from '@antv/s2-shared';
 import { useSpreadSheet } from '../../../hooks/useSpreadSheet';
-import { SpreadSheetContext } from '../../../context/SpreadSheetContext';
 import { getSheetComponentOptions } from '../../../utils';
 import { Header } from '../../header';
 import { S2Pagination } from '../../pagination';
@@ -14,59 +13,41 @@ import type {
 
 import './index.less';
 
-export const BaseSheet = React.forwardRef<
-  SpreadSheet,
-  React.PropsWithChildren<SheetComponentsProps>
->((props, ref) => {
+export const BaseSheet: React.FC<SheetComponentsProps> = React.memo((props) => {
   const { dataCfg, options, header } = props;
   const { s2Ref, loading, containerRef, pagination, wrapperRef } =
     useSpreadSheet(props);
 
-  const [contextVal, setContextVal] = React.useState<SpreadSheet>(
-    s2Ref.current!,
-  );
-
-  // 同步实例
-  React.useEffect(() => {
-    if (ref) {
-      (ref as React.MutableRefObject<SpreadSheet>).current = s2Ref.current!;
-    }
-  }, [ref, s2Ref]);
-
-  React.useEffect(() => setContextVal(s2Ref.current!), [setContextVal, s2Ref]);
-
   React.useEffect(() => {
     injectThemeVars(props.themeCfg?.name);
   }, [props.themeCfg?.name]);
 
   return (
     <React.StrictMode>
-      <SpreadSheetContext.Provider value={contextVal}>
-        <Spin spinning={loading} wrapperClassName={`${S2_PREFIX_CLS}-spin`}>
-          <div ref={wrapperRef} className={`${S2_PREFIX_CLS}-wrapper`}>
-            {header && (
-              <Header
-                {...header}
-                sheet={s2Ref.current!}
-                style={{
-                  width: options?.width,
-                }}
-                dataCfg={getSafetyDataConfig(dataCfg)}
-                options={getSheetComponentOptions(options!)}
-              />
-            )}
-            <div ref={containerRef} className={`${S2_PREFIX_CLS}-container`} />
-            {pagination.showPagination && (
-              <S2Pagination
-                pagination={pagination.pagination}
-                onChange={pagination.onChange}
-                onShowSizeChange={pagination.onShowSizeChange}
-              />
-            )}
-            {props.children}
-          </div>
-        </Spin>
-      </SpreadSheetContext.Provider>
+      <Spin spinning={loading} wrapperClassName={`${S2_PREFIX_CLS}-spin`}>
+        <div ref={wrapperRef} className={`${S2_PREFIX_CLS}-wrapper`}>
+          {header && (
+            <Header
+              {...header}
+              sheet={s2Ref.current!}
+              style={{
+                width: options?.width,
+              }}
+              dataCfg={getSafetyDataConfig(dataCfg)}
+              options={getSheetComponentOptions(options!)}
+            />
+          )}
+          <div ref={containerRef} className={`${S2_PREFIX_CLS}-container`} />
+          {pagination.showPagination && (
+            <S2Pagination
+              pagination={pagination.pagination}
+              onChange={pagination.onChange}
+              onShowSizeChange={pagination.onShowSizeChange}
+            />
+          )}
+          {props.children}
+        </div>
+      </Spin>
     </React.StrictMode>
   );
 });
diff --git a/packages/s2-react/src/components/sheets/chart-sheet/index.tsx b/packages/s2-react/src/components/sheets/chart-sheet/index.tsx
index 9d45f7f55e..cf238b6562 100644
--- a/packages/s2-react/src/components/sheets/chart-sheet/index.tsx
+++ b/packages/s2-react/src/components/sheets/chart-sheet/index.tsx
@@ -1,11 +1,6 @@
-import React from 'react';
-import {
-  customMerge,
-  SpreadSheet,
-  renderToMountedCell,
-  type S2CellType,
-} from '@antv/s2';
+import { customMerge, renderToMountedCell, type S2CellType } from '@antv/s2';
 import { isEmpty, isFunction } from 'lodash';
+import React from 'react';
 import { BaseSheet } from '../base-sheet';
 import type { SheetComponentOptions, SheetComponentsProps } from '../interface';
 import { ChartCell } from './chart-cell';
@@ -13,7 +8,6 @@ import { ChartCell } from './chart-cell';
 export const ChartSheet: React.FC<SheetComponentsProps> = React.memo(
   (props) => {
     const { options, renderConfig, ...restProps } = props;
-    const s2Ref = React.useRef<SpreadSheet | null>(null);
     const s2Options = React.useMemo(
       () =>
         customMerge<SheetComponentOptions>(options, {
@@ -39,7 +33,6 @@ export const ChartSheet: React.FC<SheetComponentsProps> = React.memo(
       <BaseSheet
         options={s2Options}
         onLayoutCellMounted={onLayoutCellMounted}
-        ref={s2Ref}
         {...restProps}
       />
     );
diff --git a/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/drag-copy-mask.tsx b/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/drag-copy-mask.tsx
index 616779e610..9f55b63c63 100644
--- a/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/drag-copy-mask.tsx
+++ b/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/drag-copy-mask.tsx
@@ -8,14 +8,14 @@ import {
 } from '@antv/s2';
 import { throttle, pick, get } from 'lodash';
 import './drag-copy-mask.less';
-import { useSpreadSheetRef } from '../../../../context/SpreadSheetContext';
+import { useSpreadSheetInstance } from '../../../../context/SpreadSheetContext';
 
 type DragCopyProps = {
   onCopyFinished?: () => void;
 };
 
 export const DragCopyMask = memo(({ onCopyFinished }: DragCopyProps) => {
-  const spreadsheet = useSpreadSheetRef();
+  const spreadsheet = useSpreadSheetInstance();
 
   const [startCell, setStartCell] = useState<DataCell>();
   const [maskPosition, setMaskPosition] = useState({ right: 0, bottom: 0 });
diff --git a/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/index.tsx b/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/index.tsx
index ab36ccba2e..439aa3b8b8 100644
--- a/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/index.tsx
+++ b/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/index.tsx
@@ -3,13 +3,13 @@ import { DataCell, S2Event, S2_PREFIX_CLS, GEvent } from '@antv/s2';
 import type { ScrollOffset } from '@antv/s2';
 import { isEqual, pick } from 'lodash';
 import { useS2Event } from '../../../../hooks';
-import { useSpreadSheetRef } from '../../../../context/SpreadSheetContext';
+import { useSpreadSheetInstance } from '../../../../context/SpreadSheetContext';
 import { DragCopyMask } from './drag-copy-mask';
 
 import './drag-copy-point.less';
 
 export function DragCopyPoint() {
-  const spreadsheet = useSpreadSheetRef();
+  const spreadsheet = useSpreadSheetInstance();
 
   const [scroll, setScroll] = useState<
     ScrollOffset & { width?: number; overflow?: boolean }
diff --git a/packages/s2-react/src/components/sheets/editable-sheet/edit-cell/index.tsx b/packages/s2-react/src/components/sheets/editable-sheet/edit-cell/index.tsx
index 01c66986a1..bd9267e2ef 100644
--- a/packages/s2-react/src/components/sheets/editable-sheet/edit-cell/index.tsx
+++ b/packages/s2-react/src/components/sheets/editable-sheet/edit-cell/index.tsx
@@ -17,7 +17,7 @@ import {
 } from '@antv/s2';
 import { isNil, pick } from 'lodash';
 import { useS2Event } from '../../../../hooks';
-import { useSpreadSheetRef } from '../../../../context/SpreadSheetContext';
+import { useSpreadSheetInstance } from '../../../../context/SpreadSheetContext';
 import {
   invokeComponent,
   type InvokeComponentProps,
@@ -45,11 +45,11 @@ function EditCellComponent(
   props: InvokeComponentProps<{ cell: S2CellType } & onChangeProps>,
 ) {
   const { params, resolver } = props;
-  const spreadsheet = useSpreadSheetRef();
+  const s2 = useSpreadSheetInstance();
   const { cell, onChange, CustomComponent } = params;
 
   const { left, top, width, height } = useMemo(() => {
-    const rect = spreadsheet?.getCanvasElement().getBoundingClientRect();
+    const rect = s2?.getCanvasElement().getBoundingClientRect();
 
     const modified = {
       left: window.scrollX + rect.left,
@@ -59,7 +59,7 @@ function EditCellComponent(
     };
 
     return modified;
-  }, [spreadsheet]);
+  }, [s2]);
 
   const {
     x: cellLeft,
@@ -67,7 +67,7 @@ function EditCellComponent(
     width: cellWidth,
     height: cellHeight,
   } = useMemo(() => {
-    const scroll = spreadsheet.facet.getScrollOffset();
+    const scroll = s2.facet.getScrollOffset();
     const cellMeta = pick(cell?.getMeta(), ['x', 'y', 'width', 'height']);
 
     if (isNil(cellMeta.x) || isNil(cellMeta.y)) {
@@ -79,14 +79,14 @@ function EditCellComponent(
       };
     }
 
-    const sampleColNode = spreadsheet.facet.getColNodes()[0];
+    const sampleColNode = s2.facet.getColNodes()[0];
     const sampleColNodeHeight = sampleColNode?.height || 0;
 
     cellMeta.x -= scroll.scrollX || 0;
     cellMeta.y -= (scroll.scrollY || 0) - sampleColNodeHeight;
 
     return cellMeta;
-  }, [cell, spreadsheet]);
+  }, [cell, s2]);
 
   const [inputVal, setInputVal] = useState<DataItem>(
     cell?.getMeta()?.fieldValue,
@@ -115,11 +115,11 @@ function EditCellComponent(
 
     const { rowIndex, valueField } = cell.getMeta();
 
-    spreadsheet.dataSet.originData[rowIndex][valueField] = inputVal;
-    spreadsheet.render(true);
+    s2.dataSet.originData[rowIndex][valueField] = inputVal;
+    s2.render(true);
 
     if (onChange) {
-      onChange(spreadsheet.dataSet.originData);
+      onChange(s2.dataSet.originData);
     }
 
     resolver(true);
@@ -160,7 +160,7 @@ function EditCellComponent(
       {CustomComponent ? (
         <CustomComponent
           cell={cell}
-          spreadsheet={spreadsheet}
+          spreadsheet={s2}
           value={inputVal}
           style={styleProps}
           onChange={changeValue}
@@ -185,7 +185,7 @@ function EditCellComponent(
 }
 
 const EditCell = memo(({ onChange, CustomComponent }: onChangeProps) => {
-  const spreadsheet = useSpreadSheetRef();
+  const spreadsheet = useSpreadSheetInstance();
 
   const onEditCell = useCallback(
     (event: GEvent) => {
diff --git a/packages/s2-react/src/components/sheets/grid-analysis-sheet/index.tsx b/packages/s2-react/src/components/sheets/grid-analysis-sheet/index.tsx
index 2759e13d57..02dabc9c2d 100644
--- a/packages/s2-react/src/components/sheets/grid-analysis-sheet/index.tsx
+++ b/packages/s2-react/src/components/sheets/grid-analysis-sheet/index.tsx
@@ -1,4 +1,4 @@
-import { customMerge, SpreadSheet, type ThemeCfg } from '@antv/s2';
+import { customMerge, type ThemeCfg } from '@antv/s2';
 import React from 'react';
 import { BaseSheet } from '../base-sheet';
 import type { SheetComponentOptions, SheetComponentsProps } from '../interface';
@@ -9,7 +9,6 @@ export const GridAnalysisSheet: React.FC<SheetComponentsProps> = React.memo(
   (props) => {
     const { options, themeCfg, ...restProps } = props;
 
-    const s2Ref = React.useRef<SpreadSheet | null>(null);
     const s2Options = React.useMemo(
       () =>
         customMerge<SheetComponentOptions>(options, {
@@ -30,12 +29,7 @@ export const GridAnalysisSheet: React.FC<SheetComponentsProps> = React.memo(
     );
 
     return (
-      <BaseSheet
-        options={s2Options}
-        themeCfg={S2ThemeCfg}
-        ref={s2Ref}
-        {...restProps}
-      />
+      <BaseSheet options={s2Options} themeCfg={S2ThemeCfg} {...restProps} />
     );
   },
 );
diff --git a/packages/s2-react/src/components/sheets/index.tsx b/packages/s2-react/src/components/sheets/index.tsx
index eddc4dcd0e..78bffc0e4e 100644
--- a/packages/s2-react/src/components/sheets/index.tsx
+++ b/packages/s2-react/src/components/sheets/index.tsx
@@ -4,6 +4,7 @@ import zhCN from 'antd/es/locale/zh_CN';
 import enUS from 'antd/es/locale/en_US';
 import { getLang } from '@antv/s2';
 import { ConfigProvider } from 'antd';
+import { SpreadSheetContext } from '../../context/SpreadSheetContext';
 import { EditableSheet } from './editable-sheet';
 import { GridAnalysisSheet } from './grid-analysis-sheet';
 import type { SheetComponentsProps } from './interface';
@@ -16,6 +17,9 @@ const Sheet = React.forwardRef<SpreadSheet, SheetComponentsProps>(
   (props, ref) => {
     const { sheetType } = props;
 
+    const [s2Instance, setS2Instance] = React.useState<SpreadSheet | null>(
+      null,
+    );
     const sheetProps = React.useMemo<SheetComponentsProps>(() => {
       return {
         ...props,
@@ -24,6 +28,7 @@ const Sheet = React.forwardRef<SpreadSheet, SheetComponentsProps>(
             (ref as React.MutableRefObject<SpreadSheet>).current = instance;
           }
 
+          setS2Instance(instance);
           props.onMounted?.(instance);
         },
       };
@@ -50,7 +55,9 @@ const Sheet = React.forwardRef<SpreadSheet, SheetComponentsProps>(
 
     return (
       <React.StrictMode>
-        <ConfigProvider locale={locale}>{CurrentSheet}</ConfigProvider>
+        <SpreadSheetContext.Provider value={s2Instance!}>
+          <ConfigProvider locale={locale}>{CurrentSheet}</ConfigProvider>
+        </SpreadSheetContext.Provider>
       </React.StrictMode>
     );
   },
diff --git a/packages/s2-react/src/components/sheets/mobile-sheet/index.tsx b/packages/s2-react/src/components/sheets/mobile-sheet/index.tsx
index 4e28ae1970..af67a75d8b 100644
--- a/packages/s2-react/src/components/sheets/mobile-sheet/index.tsx
+++ b/packages/s2-react/src/components/sheets/mobile-sheet/index.tsx
@@ -1,21 +1,15 @@
 import React from 'react';
-import type { SpreadSheet } from '@antv/s2';
 import { getMobileSheetComponentOptions } from '@antv/s2-shared';
 import { SheetComponent } from '../index';
 import type { SheetComponentsProps } from '../interface';
 
-export const MobileSheet = React.forwardRef<SpreadSheet, SheetComponentsProps>(
-  (props, ref) => (
-    <>
-      <SheetComponent
-        {...props}
-        options={getMobileSheetComponentOptions(props.options!)}
-        ref={ref}
-      />
-    </>
+export const MobileSheet: React.FC<SheetComponentsProps> = React.memo(
+  (props) => (
+    <SheetComponent
+      {...props}
+      options={getMobileSheetComponentOptions(props.options!)}
+    />
   ),
 );
 
-export const MobileSheetComponent = React.memo(MobileSheet);
-
-MobileSheetComponent.displayName = 'MobileSheetComponent';
+MobileSheet.displayName = 'MobileSheet';
diff --git a/packages/s2-react/src/components/sheets/pivot-sheet/index.tsx b/packages/s2-react/src/components/sheets/pivot-sheet/index.tsx
index 9b6c88bf2f..66e4581185 100644
--- a/packages/s2-react/src/components/sheets/pivot-sheet/index.tsx
+++ b/packages/s2-react/src/components/sheets/pivot-sheet/index.tsx
@@ -1,15 +1,16 @@
-import { isEmpty, isObject } from 'lodash';
-import React from 'react';
-import { SpreadSheet, getTooltipOptions } from '@antv/s2';
-import { useLatest } from 'ahooks';
+import { getTooltipOptions } from '@antv/s2';
 import {
   buildDrillDownOptions,
   handleDrillDown,
   type ActionIconCallback,
 } from '@antv/s2-shared';
-import { BaseSheet } from '../base-sheet';
+import { useLatest } from 'ahooks';
+import { isEmpty, isObject } from 'lodash';
+import React from 'react';
+import { useSpreadSheetInstance } from '../../../context/SpreadSheetContext';
 import { usePivotSheetUpdate } from '../../../hooks';
 import { DrillDown } from '../../drill-down';
+import { BaseSheet } from '../base-sheet';
 import type { SheetComponentOptions, SheetComponentsProps } from '../interface';
 
 export const PivotSheet: React.FC<SheetComponentsProps> = React.memo(
@@ -17,7 +18,8 @@ export const PivotSheet: React.FC<SheetComponentsProps> = React.memo(
     const { options: pivotOptions, ...restProps } = props;
     const { dataCfg, partDrillDown } = restProps;
 
-    const s2Ref = React.useRef<SpreadSheet | null>(null);
+    const s2 = useSpreadSheetInstance();
+
     const [drillFields, setDrillFields] = React.useState<string[]>([]);
 
     const onDrillDownIconClick = useLatest<ActionIconCallback>(
@@ -68,7 +70,7 @@ export const PivotSheet: React.FC<SheetComponentsProps> = React.memo(
      * @param rowId 不传表示全部清空
      */
     const clearDrillDownInfo = (rowId?: string) => {
-      s2Ref.current?.clearDrillDownData(rowId);
+      s2?.clearDrillDownData(rowId);
     };
 
     /**
@@ -76,9 +78,9 @@ export const PivotSheet: React.FC<SheetComponentsProps> = React.memo(
      * 仅由 drillFields 驱动
      */
     React.useEffect(() => {
-      s2Ref.current?.hideTooltip();
+      s2?.hideTooltip();
       if (isEmpty(drillFields)) {
-        clearDrillDownInfo(s2Ref.current?.store.get('drillDownNode')?.id);
+        clearDrillDownInfo(s2?.store.get('drillDownNode')?.id);
       } else {
         // 执行下钻
         handleDrillDown({
@@ -86,7 +88,7 @@ export const PivotSheet: React.FC<SheetComponentsProps> = React.memo(
           drillFields,
           fetchData: partDrillDown?.fetchData,
           drillItemsNum: partDrillDown?.drillItemsNum,
-          spreadsheet: s2Ref.current!,
+          spreadsheet: s2!,
         });
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -110,7 +112,6 @@ export const PivotSheet: React.FC<SheetComponentsProps> = React.memo(
         {...restProps}
         options={options}
         onSheetUpdate={onSheetUpdate}
-        ref={s2Ref}
       />
     );
   },
diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx b/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx
index 87f1994359..6ac31c6ba4 100644
--- a/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx
+++ b/packages/s2-react/src/components/sheets/strategy-sheet/index.tsx
@@ -28,7 +28,6 @@ import {
 export const StrategySheet: React.FC<SheetComponentsProps> = React.memo(
   (props) => {
     const { options, themeCfg, dataCfg, ...restProps } = props;
-    const s2Ref = React.useRef<SpreadSheet | null>(null);
 
     const strategySheetOptions =
       React.useMemo<SheetComponentOptions | null>(() => {
@@ -91,7 +90,6 @@ export const StrategySheet: React.FC<SheetComponentsProps> = React.memo(
         options={s2Options}
         themeCfg={themeCfg}
         dataCfg={dataCfg}
-        ref={s2Ref}
         {...restProps}
       />
     );
diff --git a/packages/s2-react/src/components/sheets/table-sheet/index.tsx b/packages/s2-react/src/components/sheets/table-sheet/index.tsx
index 4b679b5f09..70ecdd7c7f 100644
--- a/packages/s2-react/src/components/sheets/table-sheet/index.tsx
+++ b/packages/s2-react/src/components/sheets/table-sheet/index.tsx
@@ -1,13 +1,10 @@
-import type { SpreadSheet } from '@antv/s2';
 import React from 'react';
 import { BaseSheet } from '../base-sheet';
 import type { SheetComponentsProps } from '../interface';
 
 export const TableSheet: React.FC<SheetComponentsProps> = React.memo(
   (props) => {
-    const s2Ref = React.useRef<SpreadSheet>(null);
-
-    return <BaseSheet {...props} ref={s2Ref} />;
+    return <BaseSheet {...props} />;
   },
 );
 
diff --git a/packages/s2-react/src/context/SpreadSheetContext.tsx b/packages/s2-react/src/context/SpreadSheetContext.tsx
index f8c16c2453..092a9ece31 100644
--- a/packages/s2-react/src/context/SpreadSheetContext.tsx
+++ b/packages/s2-react/src/context/SpreadSheetContext.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import type { SpreadSheet } from '@antv/s2';
 
-export const SpreadSheetContext = React.createContext<SpreadSheet>(null as any);
+export const SpreadSheetContext = React.createContext<SpreadSheet>(
+  null as unknown as SpreadSheet,
+);
 
-export function useSpreadSheetRef() {
+export function useSpreadSheetInstance() {
   return React.useContext(SpreadSheetContext);
 }
diff --git a/packages/s2-shared/src/interface.ts b/packages/s2-shared/src/interface.ts
index c98e1eaa10..9bffe0fc58 100644
--- a/packages/s2-shared/src/interface.ts
+++ b/packages/s2-shared/src/interface.ts
@@ -22,6 +22,7 @@ import type {
   ViewMetaData,
   RawData,
   RowCellCollapsedParams,
+  HeaderActionIcon,
 } from '@antv/s2';
 
 // 是否开启自适应宽高，并指定容器
@@ -251,7 +252,8 @@ export interface PartDrillDownInfo {
   drillField: string;
 }
 
-export interface PartDrillDown<T = BaseDrillDownComponentProps> {
+export interface PartDrillDown<T = BaseDrillDownComponentProps>
+  extends Pick<HeaderActionIcon, 'displayCondition'> {
   // The configuration of drill down
   drillConfig: T;
   // The numbers of drill down result
@@ -261,6 +263,4 @@ export interface PartDrillDown<T = BaseDrillDownComponentProps> {
   clearDrillDown?: {
     rowId: string;
   };
-  // Decide the drill down icon show conditions.
-  displayCondition?: (meta: Node) => boolean;
 }
diff --git a/packages/s2-shared/src/styles/drill-down.less b/packages/s2-shared/src/styles/drill-down.less
index 9236125751..c64c56f976 100644
--- a/packages/s2-shared/src/styles/drill-down.less
+++ b/packages/s2-shared/src/styles/drill-down.less
@@ -37,6 +37,10 @@
     }
   }
 
+  &-extra {
+    margin: 4px 16px;
+  }
+
   &-menu {
     max-height: 314px;
     overflow-y: auto;
@@ -67,7 +71,7 @@
   }
 
   &-empty {
-    padding: 18px 18px 0;
+    padding: 12px;
     font-size: 12px;
   }
 }
diff --git a/packages/s2-shared/src/utils/drill-down.ts b/packages/s2-shared/src/utils/drill-down.ts
index d4fc7316a1..b727f0811d 100644
--- a/packages/s2-shared/src/utils/drill-down.ts
+++ b/packages/s2-shared/src/utils/drill-down.ts
@@ -1,13 +1,12 @@
-import { S2Event } from '@antv/s2';
 import type {
-  HeaderActionIconProps,
-  PartDrillDownDataCache,
-  S2Options,
   GEvent,
   Node,
+  PartDrillDownDataCache,
   PivotDataSet,
+  S2Options,
   SpreadSheet,
 } from '@antv/s2';
+import { S2Event, type HeaderActionIcon } from '@antv/s2';
 import { clone, filter, isEmpty, size } from 'lodash';
 import type { PartDrillDown, PartDrillDownInfo } from '../interface';
 
@@ -138,24 +137,25 @@ export const buildDrillDownOptions = <T extends Omit<S2Options, 'tooltip'>>(
     : [];
 
   if (!isEmpty(partDrillDown)) {
-    const drillDownActionIcon = {
+    const drillDownActionIcon: HeaderActionIcon = {
+      icons: [
+        {
+          name: 'DrillDownIcon',
+          position: 'right',
+          onClick: ({ meta, event }) => {
+            meta.spreadsheet.store.set('drillDownNode', meta);
+            handleActionIconClick({
+              meta,
+              event,
+              callback,
+            });
+          },
+        },
+      ],
       belongsCell: 'rowCell',
-      icons: ['DrillDownIcon'],
-      defaultHide: true,
+      defaultHide: false,
       displayCondition:
-        partDrillDown.displayCondition || defaultPartDrillDownDisplayCondition,
-      onClick: (actionIconProps: HeaderActionIconProps) => {
-        const { iconName, meta, event } = actionIconProps;
-
-        if (iconName === 'DrillDownIcon') {
-          meta.spreadsheet.store.set('drillDownNode', meta);
-          handleActionIconClick({
-            meta,
-            event,
-            callback,
-          });
-        }
-      },
+        partDrillDown?.displayCondition || defaultPartDrillDownDisplayCondition,
     };
 
     nextHeaderIcons.push(drillDownActionIcon);
diff --git a/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx b/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
index 26162629fe..2027dd65b8 100644
--- a/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
+++ b/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.tsx
@@ -3,11 +3,11 @@ import ReactDOM from 'react-dom';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
-const CornerTooltip = <div>CornerTooltip</div>;
+const CornerTooltip = () => <div>CornerTooltip</div>;
 
-const RowTooltip = <div>RowTooltip</div>;
+const RowTooltip = () => <div>RowTooltip</div>;
 
-const ColTooltip = <div>ColTooltip</div>;
+const ColTooltip = () => <div>ColTooltip</div>;
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
@@ -28,10 +28,12 @@ fetch(
         {
           icons: ['SortDown'],
           belongsCell: 'colCell',
+          defaultHide: false,
           displayCondition: (meta) => meta.level > 0,
-          onClick: (props) => {
-            const { meta, event } = props;
-            console.log(meta);
+          onClick: (options) => {
+            console.log(options);
+            const { meta, event } = options;
+
             meta.spreadsheet.handleGroupSort(event, meta);
           },
         },
@@ -39,35 +41,59 @@ fetch(
           icons: ['Filter', { name: 'CellUp', position: 'left' }],
           belongsCell: 'colCell',
           displayCondition: (meta) => meta.id === 'root[&]家具',
-          onClick: (props) => {
-            const { meta, event } = props;
+          onClick: (options) => {
+            const { meta, event } = options;
+
             meta.spreadsheet.tooltip.show({
               position: { x: event.clientX, y: event.clientY },
-              content: ColTooltip,
+              content: <ColTooltip />,
             });
           },
         },
         {
           icons: ['SortUp'],
           belongsCell: 'cornerCell',
-          onClick: (props) => {
-            const { meta, event } = props;
+          defaultHide: true,
+          onClick: (options) => {
+            const { meta, event } = options;
+
             meta.spreadsheet.tooltip.show({
               position: { x: event.clientX, y: event.clientY },
-              content: CornerTooltip,
+              content: <CornerTooltip />,
             });
           },
         },
         {
-          icons: ['DrillDownIcon'],
+          icons: [
+            {
+              name: 'DrillDownIcon',
+              position: 'right',
+              fill: '#000',
+              onClick: (options) => {
+                const { meta, event } = options;
+
+                meta.spreadsheet.tooltip.show({
+                  position: { x: event.clientX, y: event.clientY },
+                  content: <RowTooltip />,
+                });
+              },
+            },
+            {
+              name: 'Plus',
+              position: 'left',
+              fill: '#06a',
+              displayCondition: (meta) => meta.rowIndex > 2,
+              onHover: (options) => {
+                const { meta, event } = options;
+
+                meta.spreadsheet.tooltip.show({
+                  position: { x: event.clientX, y: event.clientY },
+                  content: <RowTooltip />,
+                });
+              },
+            },
+          ],
           belongsCell: 'rowCell',
-          onClick: (props) => {
-            const { meta, event } = props;
-            meta.spreadsheet.tooltip.show({
-              position: { x: event.clientX, y: event.clientY },
-              content: RowTooltip,
-            });
-          },
         },
       ],
       style: {