diff --git a/packages/docs-ui/src/controllers/menu/menu.ts b/packages/docs-ui/src/controllers/menu/menu.ts
index 366a85131be..10ea8cb0301 100644
--- a/packages/docs-ui/src/controllers/menu/menu.ts
+++ b/packages/docs-ui/src/controllers/menu/menu.ts
@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+import type { IAccessor, PresetListType } from '@univerjs/core';
+import type { IMenuButtonItem, IMenuItem, IMenuSelectorItem } from '@univerjs/ui';
+import type { Subscription } from 'rxjs';
 import {
     BaselineOffset,
     BooleanNumber,
@@ -36,11 +39,8 @@ import {
     getMenuHiddenObservable,
     MenuItemType,
 } from '@univerjs/ui';
-import { combineLatest, map, Observable } from 'rxjs';
-import type { IAccessor, PresetListType } from '@univerjs/core';
-import type { IMenuButtonItem, IMenuItem, IMenuSelectorItem } from '@univerjs/ui';
 
-import type { Subscription } from 'rxjs';
+import { combineLatest, map, Observable } from 'rxjs';
 import { OpenHeaderFooterPanelCommand } from '../../commands/commands/doc-header-footer.command';
 import { ResetInlineFormatTextBackgroundColorCommand, SetInlineFormatBoldCommand, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatUnderlineCommand } from '../../commands/commands/inline-format.command';
 import { BulletListCommand, CheckListCommand, getParagraphsInRange, OrderListCommand } from '../../commands/commands/list.command';
@@ -526,7 +526,7 @@ export function HeaderFooterMenuItemFactory(accessor: IAccessor): IMenuButtonIte
     return {
         id: OpenHeaderFooterPanelCommand.id,
         type: MenuItemType.BUTTON,
-        icon: 'FreezeRowSingle',
+        icon: 'HeaderFooterSingle',
         tooltip: 'toolbar.headerFooter',
         hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getHeaderFooterMenuHiddenObservable(accessor), (one, two) => {
             return one || two;
diff --git a/packages/ui/src/common/component-manager.ts b/packages/ui/src/common/component-manager.ts
index 9641148329b..6eab0800328 100644
--- a/packages/ui/src/common/component-manager.ts
+++ b/packages/ui/src/common/component-manager.ts
@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
+import type { IDisposable } from '@univerjs/core';
+import type React from 'react';
+import type { defineComponent } from 'vue';
 import { toDisposable } from '@univerjs/core';
+
 import {
     AddDigitsSingle,
     AdjustHeight,
@@ -58,6 +62,7 @@ import {
     FreezeToSelectedSingle,
     FunctionSingle,
     GridSingle,
+    HeaderFooterSingle,
     Hide,
     HorizontalBorder,
     HorizontallySingle,
@@ -118,10 +123,6 @@ import {
     VerticalIntegrationSingle,
     VerticalTextSingle,
 } from '@univerjs/icons';
-import type { IDisposable } from '@univerjs/core';
-import type { defineComponent } from 'vue';
-
-import type React from 'react';
 import { cloneElement, createElement, useEffect, useRef } from 'react';
 
 type ComponentFramework = 'vue3' | 'react';
@@ -230,6 +231,7 @@ export class ComponentManager {
             FreezeColumnSingle,
             FreezeRowSingle,
             GridSingle,
+            HeaderFooterSingle,
             FreezeToSelectedSingle,
             CodeSingle,
             FontSizeIncreaseSingle,