diff --git a/packages/docs-ui/src/views/paragraph-setting/Setting.tsx b/packages/docs-ui/src/views/paragraph-setting/Setting.tsx
index 6dcaf3cc7e39..822a4aff7db1 100644
--- a/packages/docs-ui/src/views/paragraph-setting/Setting.tsx
+++ b/packages/docs-ui/src/views/paragraph-setting/Setting.tsx
@@ -16,8 +16,7 @@
 
 import { HorizontalAlign, LocaleService, SpacingRule } from '@univerjs/core';
 import { borderClassName, clsx, InputNumber, Select, Tooltip } from '@univerjs/design';
-import { AlignTextBothIcon, HorizontallyIcon, LeftJustifyingIcon, RightJustifyingIcon } from '@univerjs/icons';
-import { useDependency } from '@univerjs/ui';
+import { ComponentManager, useDependency } from '@univerjs/ui';
 import { useMemo, useRef } from 'react';
 import {
     useCurrentParagraph,
@@ -64,6 +63,12 @@ const AutoFocusInputNumber = (props: {
 };
 export function ParagraphSetting() {
     const localeService = useDependency(LocaleService);
+    const componentManager = useDependency(ComponentManager);
+
+    const LeftJustifyingIcon = componentManager.get('LeftJustifyingIcon');
+    const HorizontallyIcon = componentManager.get('HorizontallyIcon');
+    const RightJustifyingIcon = componentManager.get('RightJustifyingIcon');
+    const AlignTextBothIcon = componentManager.get('AlignTextBothIcon');
 
     const alignmentOptions = useMemo(() => [
         { label: localeService.t('toolbar.alignLeft'), value: String(HorizontalAlign.LEFT), icon: <LeftJustifyingIcon /> },