refactor(core): replace ai icons (#10637)

2026-02-13 21:05:19 +00:00 · 2025-03-06 04:23:52 +00:00
parent edd37b5d54
commit 824f573ff9
15 changed files with 250 additions and 1193 deletions
--- a/packages/frontend/core/src/blocksuite/ai/_common/chat-actions-handle.ts
+++ b/packages/frontend/core/src/blocksuite/ai/_common/chat-actions-handle.ts
@@ -25,6 +25,13 @@ import {
  type SerializedXYWH,
 } from '@blocksuite/affine/global/gfx';
 import type { Store } from '@blocksuite/affine/store';
+import {
+  BlockIcon,
+  InsertBleowIcon as InsertBelowIcon,
+  LinkedPageIcon,
+  PageIcon,
+  ReplaceIcon,
+} from '@blocksuite/icons/lit';
 import type { TemplateResult } from 'lit';

 import { insertFromMarkdown } from '../../utils';
@@ -32,7 +39,6 @@ import type { ChatMessage } from '../blocks';
 import { AIProvider, type AIUserInfo } from '../provider';
 import { reportResponse } from '../utils/action-reporter';
 import { insertBelow, replace } from '../utils/editor-actions';
-import { BlockIcon, CreateIcon, InsertBelowIcon, ReplaceIcon } from './icons';

 type Selections = {
  text?: TextSelection;
@@ -193,7 +199,7 @@ export function promptDocTitle(host: EditorHost, autofill?: string) {
 }

 const REPLACE_SELECTION = {
-  icon: ReplaceIcon,
+  icon: ReplaceIcon({ width: '20px', height: '20px' }),
  title: 'Replace selection',
  showWhen: (host: EditorHost) => {
    if (host.std.store.readonly$.value) {
@@ -250,7 +256,7 @@ const REPLACE_SELECTION = {
 };

 const INSERT_BELOW = {
-  icon: InsertBelowIcon,
+  icon: InsertBelowIcon({ width: '20px', height: '20px' }),
  title: 'Insert below',
  showWhen: (host: EditorHost) => {
    if (host.std.store.readonly$.value) {
@@ -284,7 +290,7 @@ const INSERT_BELOW = {
 };

 const SAVE_CHAT_TO_BLOCK_ACTION: ChatAction = {
-  icon: BlockIcon,
+  icon: BlockIcon({ width: '20px', height: '20px' }),
  title: 'Save chat to block',
  toast: 'Successfully saved chat to a block',
  showWhen: (host: EditorHost) => {
@@ -379,7 +385,7 @@ const SAVE_CHAT_TO_BLOCK_ACTION: ChatAction = {
 };

 const ADD_TO_EDGELESS_AS_NOTE = {
-  icon: CreateIcon,
+  icon: PageIcon({ width: '20px', height: '20px' }),
  title: 'Add to edgeless as note',
  showWhen: (host: EditorHost) => {
    if (host.std.store.readonly$.value) {
@@ -420,7 +426,7 @@ const ADD_TO_EDGELESS_AS_NOTE = {
 };

 const CREATE_AS_DOC = {
-  icon: CreateIcon,
+  icon: PageIcon({ width: '20px', height: '20px' }),
  title: 'Create as a doc',
  showWhen: () => true,
  toast: 'New doc created',
@@ -455,7 +461,7 @@ const CREATE_AS_DOC = {
 };

 const CREATE_AS_LINKED_DOC = {
-  icon: CreateIcon,
+  icon: LinkedPageIcon({ width: '20px', height: '20px' }),
  title: 'Create as a linked doc',
  showWhen: (host: EditorHost) => {
    if (host.std.store.readonly$.value) {
--- a/packages/frontend/core/src/blocksuite/ai/_common/config.ts
+++ b/packages/frontend/core/src/blocksuite/ai/_common/config.ts
@@ -7,6 +7,23 @@ import {
  matchModels,
  ParagraphBlockModel,
 } from '@blocksuite/affine/blocks';
+import {
+  CommentIcon,
+  DoneIcon,
+  ExplainIcon,
+  ImageIcon,
+  ImproveWritingIcon,
+  LanguageIcon,
+  LongerIcon,
+  MakeItRealIcon,
+  MindmapIcon,
+  PenIcon,
+  PresentationIcon,
+  SearchIcon,
+  SelectionIcon,
+  ShorterIcon,
+  ToneIcon,
+} from '@blocksuite/icons/lit';

 import { actionToHandler } from '../actions/doc-handler';
 import {
@@ -22,26 +39,11 @@ import type {
 import { AIProvider } from '../provider';
 import { getAIPanelWidget } from '../utils/ai-widgets';
 import {
-  AIDoneIcon,
-  AIImageIcon,
  AIImageIconWithAnimation,
-  AIMindMapIcon,
-  AIPenIcon,
  AIPenIconWithAnimation,
-  AIPresentationIcon,
  AIPresentationIconWithAnimation,
-  AISearchIcon,
  AIStarIconWithAnimation,
-  CommentIcon,
-  ExplainIcon,
-  ImproveWritingIcon,
-  LanguageIcon,
-  LongerIcon,
-  MakeItRealIcon,
  MakeItRealIconWithAnimation,
-  SelectionIcon,
-  ShorterIcon,
-  ToneIcon,
 } from './icons';

 export const translateSubItem: AISubItemConfig[] = translateLangs.map(lang => {
@@ -144,37 +146,37 @@ const EditAIGroup: AIItemGroupConfig = {
  items: [
    {
      name: 'Translate to',
-      icon: LanguageIcon,
+      icon: LanguageIcon(),
      showWhen: textBlockShowWhen,
      subItem: translateSubItem,
    },
    {
      name: 'Change tone to',
-      icon: ToneIcon,
+      icon: ToneIcon(),
      showWhen: textBlockShowWhen,
      subItem: toneSubItem,
    },
    {
      name: 'Improve writing',
-      icon: ImproveWritingIcon,
+      icon: ImproveWritingIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('improveWriting', AIStarIconWithAnimation),
    },
    {
      name: 'Make it longer',
-      icon: LongerIcon,
+      icon: LongerIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('makeLonger', AIStarIconWithAnimation),
    },
    {
      name: 'Make it shorter',
-      icon: ShorterIcon,
+      icon: ShorterIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('makeShorter', AIStarIconWithAnimation),
    },
    {
      name: 'Continue writing',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('continueWriting', AIPenIconWithAnimation),
    },
@@ -186,31 +188,31 @@ const DraftAIGroup: AIItemGroupConfig = {
  items: [
    {
      name: 'Write an article about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('writeArticle', AIPenIconWithAnimation),
    },
    {
      name: 'Write a tweet about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('writeTwitterPost', AIPenIconWithAnimation),
    },
    {
      name: 'Write a poem about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('writePoem', AIPenIconWithAnimation),
    },
    {
      name: 'Write a blog post about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('writeBlogPost', AIPenIconWithAnimation),
    },
    {
      name: 'Brainstorm ideas about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('brainstorm', AIPenIconWithAnimation),
    },
@@ -222,37 +224,37 @@ const ReviewWIthAIGroup: AIItemGroupConfig = {
  items: [
    {
      name: 'Fix spelling',
-      icon: AIDoneIcon,
+      icon: DoneIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('fixSpelling', AIStarIconWithAnimation),
    },
    {
      name: 'Fix grammar',
-      icon: AIDoneIcon,
+      icon: DoneIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('improveGrammar', AIStarIconWithAnimation),
    },
    {
      name: 'Explain this image',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: imageBlockShowWhen,
      handler: actionToHandler('explainImage', AIStarIconWithAnimation),
    },
    {
      name: 'Explain this code',
-      icon: ExplainIcon,
+      icon: ExplainIcon(),
      showWhen: codeBlockShowWhen,
      handler: actionToHandler('explainCode', AIStarIconWithAnimation),
    },
    {
      name: 'Check code error',
-      icon: ExplainIcon,
+      icon: ExplainIcon(),
      showWhen: codeBlockShowWhen,
      handler: actionToHandler('checkCodeErrors', AIStarIconWithAnimation),
    },
    {
      name: 'Explain selection',
-      icon: SelectionIcon,
+      icon: SelectionIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('explain', AIStarIconWithAnimation),
    },
@@ -264,13 +266,13 @@ const GenerateWithAIGroup: AIItemGroupConfig = {
  items: [
    {
      name: 'Summarize',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('summary', AIPenIconWithAnimation),
    },
    {
      name: 'Generate headings',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      beta: true,
      handler: actionToHandler('createHeadings', AIPenIconWithAnimation),
      showWhen: chain => {
@@ -291,39 +293,39 @@ const GenerateWithAIGroup: AIItemGroupConfig = {
    },
    {
      name: 'Generate an image',
-      icon: AIImageIcon,
+      icon: ImageIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('createImage', AIImageIconWithAnimation),
    },
    {
      name: 'Generate outline',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('writeOutline', AIPenIconWithAnimation),
    },
    {
      name: 'Brainstorm ideas with mind map',
-      icon: AIMindMapIcon,
+      icon: MindmapIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('brainstormMindmap', AIPenIconWithAnimation),
    },
    {
      name: 'Generate presentation',
-      icon: AIPresentationIcon,
+      icon: PresentationIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('createSlides', AIPresentationIconWithAnimation),
      beta: true,
    },
    {
      name: 'Make it real',
-      icon: MakeItRealIcon,
+      icon: MakeItRealIcon(),
      beta: true,
      showWhen: textBlockShowWhen,
      handler: actionToHandler('makeItReal', MakeItRealIconWithAnimation),
    },
    {
      name: 'Find actions',
-      icon: AISearchIcon,
+      icon: SearchIcon(),
      showWhen: textBlockShowWhen,
      handler: actionToHandler('findActions', AIStarIconWithAnimation),
      beta: true,
@@ -336,7 +338,7 @@ const OthersAIGroup: AIItemGroupConfig = {
  items: [
    {
      name: 'Continue with AI',
-      icon: CommentIcon,
+      icon: CommentIcon(),
      handler: host => {
        const panel = getAIPanelWidget(host);
        AIProvider.slots.requestOpenWithChat.emit({
@@ -364,7 +366,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
      items: [
        {
          name: 'Explain this image',
-          icon: AIImageIcon,
+          icon: ImageIcon(),
          showWhen: () => true,
          handler: actionToHandler(
            'explainImage',
@@ -380,7 +382,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
      items: [
        {
          name: 'Generate an image',
-          icon: AIImageIcon,
+          icon: ImageIcon(),
          showWhen: () => true,
          handler: actionToHandler(
            'createImage',
@@ -391,7 +393,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
        },
        {
          name: 'Image processing',
-          icon: AIImageIcon,
+          icon: ImageIcon(),
          showWhen: () => true,
          subItem: createImageProcessingSubItem(blockActionTrackerOptions),
          subItemOffset: [12, -6],
@@ -399,7 +401,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
        },
        {
          name: 'AI image filter',
-          icon: ImproveWritingIcon,
+          icon: ImproveWritingIcon(),
          showWhen: () => true,
          subItem: createImageFilterSubItem(blockActionTrackerOptions),
          subItemOffset: [12, -4],
@@ -407,7 +409,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
        },
        {
          name: 'Generate a caption',
-          icon: AIPenIcon,
+          icon: PenIcon(),
          showWhen: () => true,
          beta: true,
          handler: actionToHandler(
@@ -430,7 +432,7 @@ export function buildAICodeItemGroups(): AIItemGroupConfig[] {
      items: [
        {
          name: 'Explain this code',
-          icon: ExplainIcon,
+          icon: ExplainIcon(),
          showWhen: () => true,
          handler: actionToHandler(
            'explainCode',
@@ -441,7 +443,7 @@ export function buildAICodeItemGroups(): AIItemGroupConfig[] {
        },
        {
          name: 'Check code error',
-          icon: ExplainIcon,
+          icon: ExplainIcon(),
          showWhen: () => true,
          handler: actionToHandler(
            'checkCodeErrors',
--- a/packages/frontend/core/src/blocksuite/ai/_common/icons.ts
+++ b/packages/frontend/core/src/blocksuite/ai/_common/icons.ts
--- a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts
+++ b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts
@@ -7,7 +7,6 @@ import type {
 } from '@blocksuite/affine/blocks';
 import {
  addImages,
-  DeleteIcon,
  EDGELESS_ELEMENT_TOOLBAR_WIDGET,
  EDGELESS_TEXT_BLOCK_MIN_HEIGHT,
  EDGELESS_TEXT_BLOCK_MIN_WIDTH,
@@ -15,19 +14,23 @@ import {
  fitContent,
  getSurfaceBlock,
  ImageBlockModel,
-  InsertBelowIcon,
  LightLoadingIcon,
  MindmapUtils,
  NoteDisplayMode,
-  ResetIcon,
  TelemetryProvider,
 } from '@blocksuite/affine/blocks';
 import { Bound } from '@blocksuite/affine/global/gfx';
+import {
+  ChatWithAiIcon,
+  DeleteIcon,
+  InsertBleowIcon as InsertBelowIcon,
+  PenIcon,
+  ResetIcon,
+} from '@blocksuite/icons/lit';
 import { html, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';

 import { insertFromMarkdown } from '../../utils';
-import { AIPenIcon, ChatWithAIIcon } from '../_common/icons';
 import type { AIItemConfig } from '../components/ai-item/types';
 import { AIProvider } from '../provider';
 import { reportResponse } from '../utils/action-reporter';
@@ -80,7 +83,7 @@ export function discard(
 ): AIItemConfig {
  return {
    name: 'Discard',
-    icon: DeleteIcon,
+    icon: DeleteIcon(),
    showWhen: () => !!panel.answer,
    handler: () => {
      panel.discard();
@@ -91,7 +94,7 @@ export function discard(
 export function retry(panel: AffineAIPanelWidget): AIItemConfig {
  return {
    name: 'Retry',
-    icon: ResetIcon,
+    icon: ResetIcon(),
    handler: () => {
      reportResponse('result:retry');
      panel.generate();
@@ -132,7 +135,7 @@ export function createInsertItems<T extends keyof BlockSuitePresets.AIActions>(
    },
    {
      name: buttonText,
-      icon: InsertBelowIcon,
+      icon: InsertBelowIcon(),
      showWhen: () => {
        const panel = getAIPanelWidget(host);
        const data = ctx.get();
@@ -186,7 +189,7 @@ export function asCaption<T extends keyof BlockSuitePresets.AIActions>(
 ): AIItemConfig {
  return {
    name: 'Use as caption',
-    icon: AIPenIcon,
+    icon: PenIcon(),
    showWhen: () => {
      const panel = getAIPanelWidget(host);
      return id === 'generateCaption' && !!panel.answer;
@@ -552,7 +555,7 @@ export function actionToResponse<T extends keyof BlockSuitePresets.AIActions>(
        items: [
          {
            name: 'Continue in chat',
-            icon: ChatWithAIIcon,
+            icon: ChatWithAiIcon({}),
            handler: () => {
              reportResponse('result:continue-in-chat');
              const panel = getAIPanelWidget(host);
--- a/packages/frontend/core/src/blocksuite/ai/ai-panel.ts
+++ b/packages/frontend/core/src/blocksuite/ai/ai-panel.ts
@@ -9,21 +9,21 @@ import {
  NoteDisplayMode,
 } from '@blocksuite/affine/blocks';
 import { Bound } from '@blocksuite/affine/global/gfx';
+import {
+  ChatWithAiIcon,
+  DeleteIcon,
+  InsertBleowIcon as InsertBelowIcon,
+  InsertTopIcon,
+  PageIcon,
+  PenIcon,
+  ReplaceIcon,
+  ResetIcon,
+} from '@blocksuite/icons/lit';
 import type { FrameworkProvider } from '@toeverything/infra';
 import type { TemplateResult } from 'lit';

 import { insertFromMarkdown } from '../utils';
-import {
-  AIPenIcon,
-  AIStarIconWithAnimation,
-  ChatWithAIIcon,
-  CreateIcon,
-  DiscardIcon,
-  InsertBelowIcon,
-  InsertTopIcon,
-  ReplaceIcon,
-  RetryIcon,
-} from './_common/icons';
+import { AIStarIconWithAnimation } from './_common/icons';
 import {
  EXCLUDING_REPLACE_ACTIONS,
  INSERT_ABOVE_ACTIONS,
@@ -50,7 +50,7 @@ function asCaption<T extends keyof BlockSuitePresets.AIActions>(
 ): AIItemConfig {
  return {
    name: 'Use as caption',
-    icon: AIPenIcon,
+    icon: PenIcon(),
    showWhen: () => {
      const panel = getAIPanelWidget(host);
      return id === 'generateCaption' && !!panel.answer;
@@ -76,7 +76,7 @@ function asCaption<T extends keyof BlockSuitePresets.AIActions>(
 function createNewNote(host: EditorHost): AIItemConfig {
  return {
    name: 'Create new note',
-    icon: CreateIcon,
+    icon: PageIcon(),
    showWhen: () => {
      const panel = getAIPanelWidget(host);
      return !!panel.answer && isInsideEdgelessEditor(host);
@@ -148,7 +148,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
      items: [
        {
          name: 'Insert below',
-          icon: InsertBelowIcon,
+          icon: InsertBelowIcon(),
          showWhen: () =>
            !!panel.answer && (!id || !INSERT_ABOVE_ACTIONS.includes(id)),
          handler: () => {
@@ -159,7 +159,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
        },
        {
          name: 'Insert above',
-          icon: InsertTopIcon,
+          icon: InsertTopIcon(),
          showWhen: () =>
            !!panel.answer && !!id && INSERT_ABOVE_ACTIONS.includes(id),
          handler: () => {
@@ -171,7 +171,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
        asCaption(host, id),
        {
          name: 'Replace selection',
-          icon: ReplaceIcon,
+          icon: ReplaceIcon(),
          showWhen: () =>
            !!panel.answer && !EXCLUDING_REPLACE_ACTIONS.includes(id),
          handler: () => {
@@ -188,7 +188,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
      items: [
        {
          name: 'Continue in chat',
-          icon: ChatWithAIIcon,
+          icon: ChatWithAiIcon(),
          handler: () => {
            reportResponse('result:continue-in-chat');
            AIProvider.slots.requestOpenWithChat.emit({ host });
@@ -197,7 +197,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
        },
        {
          name: 'Regenerate',
-          icon: RetryIcon,
+          icon: ResetIcon(),
          handler: () => {
            reportResponse('result:retry');
            panel.generate();
@@ -205,7 +205,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
        },
        {
          name: 'Discard',
-          icon: DiscardIcon,
+          icon: DeleteIcon(),
          handler: () => {
            panel.discard();
          },
@@ -222,7 +222,7 @@ export function buildErrorResponseConfig(panel: AffineAIPanelWidget) {
      items: [
        {
          name: 'Retry',
-          icon: RetryIcon,
+          icon: ResetIcon(),
          showWhen: () => true,
          handler: () => {
            reportResponse('result:retry');
@@ -231,7 +231,7 @@ export function buildErrorResponseConfig(panel: AffineAIPanelWidget) {
        },
        {
          name: 'Discard',
-          icon: DiscardIcon,
+          icon: DeleteIcon(),
          showWhen: () => !!panel.answer,
          handler: () => {
            panel.discard();
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts
@@ -1,62 +1,62 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
 import { WithDisposable } from '@blocksuite/affine/global/utils';
+import {
+  ArrowDownBigIcon as ArrowDownIcon,
+  ArrowUpBigIcon as ArrowUpIcon,
+  DoneIcon,
+  ExplainIcon,
+  ImageIcon,
+  ImproveWritingIcon,
+  LanguageIcon,
+  LongerIcon,
+  MakeItRealIcon,
+  MindmapIcon,
+  MindmapNodeIcon,
+  PenIcon,
+  PresentationIcon,
+  SearchIcon,
+  SelectionIcon,
+  ShorterIcon,
+  ToneIcon,
+} from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';

-import {
-  ActionIcon,
-  AIChangeToneIcon,
-  AIDoneIcon,
-  AIExpandMindMapIcon,
-  AIExplainIcon,
-  AIExplainSelectionIcon,
-  AIFindActionsIcon,
-  AIImageIcon,
-  AIImproveWritingIcon,
-  AIMakeLongerIcon,
-  AIMakeRealIcon,
-  AIMakeShorterIcon,
-  AIMindMapIcon,
-  AIPenIcon,
-  AIPresentationIcon,
-  ArrowDownIcon,
-  ArrowUpIcon,
-} from '../../_common/icons';
 import { createTextRenderer } from '../../components/text-renderer';
 import type { ChatAction } from '../chat-context';
 import { renderImages } from '../components/images';
 import { HISTORY_IMAGE_ACTIONS } from '../const';

 const icons: Record<string, TemplateResult<1>> = {
-  'Fix spelling for it': AIDoneIcon,
-  'Improve grammar for it': AIDoneIcon,
-  'Explain this code': AIExplainIcon,
-  'Check code error': AIExplainIcon,
-  'Explain this': AIExplainSelectionIcon,
-  Translate: ActionIcon,
-  'Change tone': AIChangeToneIcon,
-  'Improve writing for it': AIImproveWritingIcon,
-  'Make it longer': AIMakeLongerIcon,
-  'Make it shorter': AIMakeShorterIcon,
-  'Continue writing': AIPenIcon,
-  'Make it real': AIMakeRealIcon,
-  'Find action items from it': AIFindActionsIcon,
-  Summary: AIPenIcon,
-  'Create headings': AIPenIcon,
-  'Write outline': AIPenIcon,
-  image: AIImageIcon,
-  'Brainstorm mindmap': AIMindMapIcon,
-  'Expand mind map': AIExpandMindMapIcon,
-  'Create a presentation': AIPresentationIcon,
-  'Write a poem about this': AIPenIcon,
-  'Write a blog post about this': AIPenIcon,
-  'AI image filter clay style': AIImageIcon,
-  'AI image filter sketch style': AIImageIcon,
-  'AI image filter anime style': AIImageIcon,
-  'AI image filter pixel style': AIImageIcon,
-  Clearer: AIImageIcon,
-  'Remove background': AIImageIcon,
-  'Convert to sticker': AIImageIcon,
+  'Fix spelling for it': DoneIcon(),
+  'Improve grammar for it': DoneIcon(),
+  'Explain this code': ExplainIcon(),
+  'Check code error': SearchIcon(),
+  'Explain this': SelectionIcon(),
+  Translate: LanguageIcon(),
+  'Change tone': ToneIcon(),
+  'Improve writing for it': ImproveWritingIcon(),
+  'Make it longer': LongerIcon(),
+  'Make it shorter': ShorterIcon(),
+  'Continue writing': PenIcon(),
+  'Make it real': MakeItRealIcon(),
+  'Find action items from it': SearchIcon(),
+  Summary: PenIcon(),
+  'Create headings': PenIcon(),
+  'Write outline': PenIcon(),
+  image: ImageIcon(),
+  'Brainstorm mindmap': MindmapIcon(),
+  'Expand mind map': MindmapNodeIcon(),
+  'Create a presentation': PresentationIcon(),
+  'Write a poem about this': PenIcon(),
+  'Write a blog post about this': PenIcon(),
+  'AI image filter clay style': ImageIcon(),
+  'AI image filter sketch style': ImageIcon(),
+  'AI image filter anime style': ImageIcon(),
+  'AI image filter pixel style': ImageIcon(),
+  Clearer: ImageIcon(),
+  'Remove background': ImageIcon(),
+  'Convert to sticker': ImageIcon(),
 };

 export class ActionWrapper extends WithDisposable(LitElement) {
@@ -130,10 +130,10 @@ export class ActionWrapper extends WithDisposable(LitElement) {
        class="action-name"
        @click=${() => (this.promptShow = !this.promptShow)}
      >
-        ${icons[item.action] ? icons[item.action] : ActionIcon}
+        ${icons[item.action] ? icons[item.action] : DoneIcon()}
        <div>
          <div>${item.action}</div>
-          <div>${this.promptShow ? ArrowDownIcon : ArrowUpIcon}</div>
+          <div>${this.promptShow ? ArrowDownIcon() : ArrowUpIcon()}</div>
        </div>
      </div>
      ${this.promptShow
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-input.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-input.ts
@@ -2,17 +2,17 @@ import { stopPropagation } from '@affine/core/utils';
 import type { EditorHost } from '@blocksuite/affine/block-std';
 import { openFileOrFiles, unsafeCSSVarV2 } from '@blocksuite/affine/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/utils';
-import { ImageIcon, PublishIcon } from '@blocksuite/icons/lit';
+import {
+  BroomIcon,
+  CloseIcon,
+  ImageIcon,
+  PublishIcon,
+} from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';

-import {
-  ChatAbortIcon,
-  ChatClearIcon,
-  ChatSendIcon,
-  CloseIcon,
-} from '../_common/icons';
+import { ChatAbortIcon, ChatSendIcon } from '../_common/icons';
 import type { AIError } from '../components/ai-item/types';
 import { AIProvider } from '../provider';
 import { reportResponse } from '../utils/action-reporter';
@@ -110,6 +110,7 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
      }

      .image-upload,
+      .chat-history-clear,
      .chat-network-search {
        display: flex;
        justify-content: center;
@@ -120,6 +121,9 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
          color: ${unsafeCSSVarV2('icon/primary')};
        }
      }
+      .chat-history-clear svg {
+        color: var(--affine-text-secondary-color);
+      }
      .chat-network-search[data-active='true'] svg {
        color: ${unsafeCSSVarV2('icon/activated')};
      }
@@ -326,7 +330,7 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
                  this.updateContext({ quote: '', markdown: '' });
                }}
              >
-                ${CloseIcon}
+                ${CloseIcon()}
              </div>
            </div>`
          : nothing}
@@ -379,7 +383,7 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
            }}
            data-testid="chat-panel-clear"
          >
-            ${ChatClearIcon}
+            ${BroomIcon()}
          </div>
          ${this.networkSearchConfig.visible.value
            ? html`
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
@@ -8,6 +8,10 @@ import {
 } from '@blocksuite/affine/blocks';
 import { WithDisposable } from '@blocksuite/affine/global/utils';
 import type { BaseSelection } from '@blocksuite/affine/store';
+import {
+  AiIcon,
+  ArrowDownBigIcon as ArrowDownIcon,
+} from '@blocksuite/icons/lit';
 import { css, html, nothing, type PropertyValues } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -17,7 +21,7 @@ import {
  EdgelessEditorActions,
  PageEditorActions,
 } from '../_common/chat-actions-handle';
-import { AffineAvatarIcon, AffineIcon, DownArrowIcon } from '../_common/icons';
+import { AffineIcon } from '../_common/icons';
 import {
  type AIError,
  PaymentRequiredError,
@@ -34,6 +38,12 @@ import {
 import { HISTORY_IMAGE_ACTIONS } from './const';
 import { AIPreloadConfig } from './preload-config';

+const AffineAvatarIcon = AiIcon({
+  width: '20px',
+  height: '20px',
+  style: 'color: var(--affine-primary-color)',
+});
+
 export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
  static override styles = css`
    chat-panel-messages {
@@ -94,6 +104,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
+      color: var(--affine-text-secondary-color);
    }

    .onboarding-item-text {
@@ -285,7 +296,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
      </div>
      ${showDownIndicator && filteredItems.length > 0
        ? html`<div class="down-indicator" @click=${this._onDownIndicatorClick}>
-            ${DownArrowIcon}
+            ${ArrowDownIcon()}
          </div>`
        : nothing}
    `;
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts
@@ -9,13 +9,13 @@ import {
 } from '@blocksuite/affine/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/utils';
 import type { Store } from '@blocksuite/affine/store';
+import { HelpIcon, InformationIcon } from '@blocksuite/icons/lit';
 import { css, html, type PropertyValues } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { throttle } from 'lodash-es';

-import { AIHelpIcon, SmallHintIcon } from '../_common/icons';
 import { AIProvider } from '../provider';
 import { extractSelectedContent } from '../utils/extract';
 import {
@@ -87,6 +87,12 @@ export class ChatPanel extends SignalWatcher(
        align-items: center;
        cursor: pointer;
      }
+
+      svg {
+        width: 18px;
+        height: 18px;
+        color: var(--affine-text-secondary-color);
+      }
    }

    chat-panel-messages {
@@ -448,7 +454,7 @@ export class ChatPanel extends SignalWatcher(
            AIProvider.toggleGeneralAIOnboarding?.(true);
          }}
        >
-          ${AIHelpIcon}
+          ${HelpIcon()}
        </div>
      </div>
      <chat-panel-messages
@@ -477,7 +483,7 @@ export class ChatPanel extends SignalWatcher(
        .cleanupHistories=${this._cleanupHistories}
      ></chat-panel-input>
      <div class="chat-panel-footer">
-        ${SmallHintIcon}
+        ${InformationIcon()}
        <div>AI outputs can be misleading or wrong</div>
      </div>
    </div>`;
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/preload-config.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/preload-config.ts
@@ -1,10 +1,11 @@
 import {
-  ArticleIcon,
-  CommunicateIcon,
+  ImageIcon,
+  LanguageIcon,
  MindmapIcon,
-  PreloadImageIcon,
-  PreloadPenIcon,
-} from '../_common/icons.js';
+  PenIcon,
+  SendIcon,
+} from '@blocksuite/icons/lit';
+
 import { AIProvider } from '../provider/ai-provider.js';
 import completeWritingWithAI from './templates/completeWritingWithAI.zip';
 import freelyCommunicateWithAI from './templates/freelyCommunicateWithAI.zip';
@@ -14,7 +15,7 @@ import TidyMindMapV3 from './templates/TidyMindMapV3.zip';

 export const AIPreloadConfig = [
  {
-    icon: ArticleIcon,
+    icon: LanguageIcon(),
    text: 'Read a foreign language article with AI',
    handler: () => {
      AIProvider.slots.requestInsertTemplate.emit({
@@ -24,7 +25,7 @@ export const AIPreloadConfig = [
    },
  },
  {
-    icon: MindmapIcon,
+    icon: MindmapIcon(),
    text: 'Tidy an article with AI MindMap Action',
    handler: () => {
      AIProvider.slots.requestInsertTemplate.emit({
@@ -34,7 +35,7 @@ export const AIPreloadConfig = [
    },
  },
  {
-    icon: PreloadImageIcon,
+    icon: ImageIcon(),
    text: 'Add illustrations to the article',
    handler: () => {
      AIProvider.slots.requestInsertTemplate.emit({
@@ -44,7 +45,7 @@ export const AIPreloadConfig = [
    },
  },
  {
-    icon: PreloadPenIcon,
+    icon: PenIcon(),
    text: 'Complete writing with AI',
    handler: () => {
      AIProvider.slots.requestInsertTemplate.emit({
@@ -54,7 +55,7 @@ export const AIPreloadConfig = [
    },
  },
  {
-    icon: CommunicateIcon,
+    icon: SendIcon(),
    text: 'Freely communicate with AI',
    handler: () => {
      AIProvider.slots.requestInsertTemplate.emit({
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-item/styles.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-item/styles.ts
@@ -20,6 +20,11 @@ export const menuItemStyles = css`
  .item-icon {
    display: flex;
    color: var(--item-icon-color, var(--affine-brand-color));
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
  }
  .menu-item:hover .item-icon {
    color: var(--item-icon-hover-color, var(--affine-brand-color));
--- a/packages/frontend/core/src/blocksuite/ai/entries/edgeless/actions-config.ts
+++ b/packages/frontend/core/src/blocksuite/ai/entries/edgeless/actions-config.ts
@@ -5,28 +5,30 @@ import {
  splitElements,
  TextElementModel,
 } from '@blocksuite/affine/blocks';
-
 import {
-  AIExpandMindMapIcon,
-  AIImageIcon,
-  AIImageIconWithAnimation,
-  AIMindMapIcon,
-  AIMindMapIconWithAnimation,
-  AIPenIcon,
-  AIPenIconWithAnimation,
-  AIPresentationIcon,
-  AIPresentationIconWithAnimation,
-  AISearchIcon,
  CommentIcon,
  ExplainIcon,
+  ImageIcon,
  ImproveWritingIcon,
  LanguageIcon,
  LongerIcon,
  MakeItRealIcon,
-  MakeItRealIconWithAnimation,
+  MindmapIcon,
+  MindmapNodeIcon,
+  PenIcon,
+  PresentationIcon,
+  SearchIcon,
  SelectionIcon,
  ShorterIcon,
  ToneIcon,
+} from '@blocksuite/icons/lit';
+
+import {
+  AIImageIconWithAnimation,
+  AIMindMapIconWithAnimation,
+  AIPenIconWithAnimation,
+  AIPresentationIconWithAnimation,
+  MakeItRealIconWithAnimation,
 } from '../../_common/icons';
 import {
  actionToHandler,
@@ -101,7 +103,7 @@ const othersGroup: AIItemGroupConfig = {
  items: [
    {
      name: 'Continue with AI',
-      icon: CommentIcon,
+      icon: CommentIcon({ width: '20px', height: '20px' }),
      showWhen: () => true,
      handler: host => {
        const panel = getAIPanelWidget(host);
@@ -121,38 +123,38 @@ const editGroup: AIItemGroupConfig = {
  items: [
    {
      name: 'Translate to',
-      icon: LanguageIcon,
+      icon: LanguageIcon(),
      showWhen: noteBlockOrTextShowWhen,
      subItem: translateSubItem,
    },
    {
      name: 'Change tone to',
-      icon: ToneIcon,
+      icon: ToneIcon(),
      showWhen: noteBlockOrTextShowWhen,
      subItem: toneSubItem,
    },
    {
      name: 'Improve writing',
-      icon: ImproveWritingIcon,
+      icon: ImproveWritingIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('improveWriting', AIStarIconWithAnimation),
    },

    {
      name: 'Make it longer',
-      icon: LongerIcon,
+      icon: LongerIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('makeLonger', AIStarIconWithAnimation),
    },
    {
      name: 'Make it shorter',
-      icon: ShorterIcon,
+      icon: ShorterIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('makeShorter', AIStarIconWithAnimation),
    },
    {
      name: 'Continue writing',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('continueWriting', AIPenIconWithAnimation),
    },
@@ -164,31 +166,31 @@ const draftGroup: AIItemGroupConfig = {
  items: [
    {
      name: 'Write an article about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('writeArticle', AIPenIconWithAnimation),
    },
    {
      name: 'Write a tweet about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('writeTwitterPost', AIPenIconWithAnimation),
    },
    {
      name: 'Write a poem about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('writePoem', AIPenIconWithAnimation),
    },
    {
      name: 'Write a blog post about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('writeBlogPost', AIPenIconWithAnimation),
    },
    {
      name: 'Brainstorm ideas about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('brainstorm', AIPenIconWithAnimation),
    },
@@ -200,19 +202,19 @@ const reviewGroup: AIItemGroupConfig = {
  items: [
    {
      name: 'Fix spelling',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('fixSpelling', AIStarIconWithAnimation),
    },
    {
      name: 'Fix grammar',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('improveGrammar', AIStarIconWithAnimation),
    },
    {
      name: 'Explain this image',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: imageOnlyShowWhen,
      handler: actionToHandler(
        'explainImage',
@@ -223,19 +225,19 @@ const reviewGroup: AIItemGroupConfig = {
    },
    {
      name: 'Explain this code',
-      icon: ExplainIcon,
+      icon: ExplainIcon(),
      showWhen: noteWithCodeBlockShowWen,
      handler: actionToHandler('explainCode', AIStarIconWithAnimation),
    },
    {
      name: 'Check code error',
-      icon: ExplainIcon,
+      icon: ExplainIcon(),
      showWhen: noteWithCodeBlockShowWen,
      handler: actionToHandler('checkCodeErrors', AIStarIconWithAnimation),
    },
    {
      name: 'Explain selection',
-      icon: SelectionIcon,
+      icon: SelectionIcon({ width: '20px', height: '20px' }),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('explain', AIStarIconWithAnimation),
    },
@@ -247,20 +249,20 @@ const generateGroup: AIItemGroupConfig = {
  items: [
    {
      name: 'Summarize',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('summary', AIPenIconWithAnimation),
    },
    {
      name: 'Generate headings',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      handler: actionToHandler('createHeadings', AIPenIconWithAnimation),
      showWhen: noteBlockOrTextShowWhen,
      beta: true,
    },
    {
      name: 'Generate an image',
-      icon: AIImageIcon,
+      icon: ImageIcon(),
      showWhen: notAllAIChatBlockShowWhen,
      handler: actionToHandler(
        'createImage',
@@ -335,13 +337,13 @@ const generateGroup: AIItemGroupConfig = {
    },
    {
      name: 'Generate outline',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('writeOutline', AIPenIconWithAnimation),
    },
    {
      name: 'Expand from this mind map node',
-      icon: AIExpandMindMapIcon,
+      icon: MindmapNodeIcon(),
      showWhen: mindmapChildShowWhen,
      handler: actionToHandler(
        'expandMindmap',
@@ -366,13 +368,13 @@ const generateGroup: AIItemGroupConfig = {
    },
    {
      name: 'Brainstorm ideas with mind map',
-      icon: AIMindMapIcon,
+      icon: MindmapIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('brainstormMindmap', AIMindMapIconWithAnimation),
    },
    {
      name: 'Regenerate mind map',
-      icon: AIMindMapIcon,
+      icon: MindmapIcon(),
      showWhen: mindmapRootShowWhen,
      handler: actionToHandler(
        'brainstormMindmap',
@@ -384,14 +386,14 @@ const generateGroup: AIItemGroupConfig = {
    },
    {
      name: 'Generate presentation',
-      icon: AIPresentationIcon,
+      icon: PresentationIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('createSlides', AIPresentationIconWithAnimation),
      beta: true,
    },
    {
      name: 'Make it real',
-      icon: MakeItRealIcon,
+      icon: MakeItRealIcon({ width: '20px', height: '20px' }),
      beta: true,
      showWhen: notAllAIChatBlockShowWhen,
      handler: actionToHandler(
@@ -469,7 +471,7 @@ const generateGroup: AIItemGroupConfig = {
    },
    {
      name: 'AI image filter',
-      icon: ImproveWritingIcon,
+      icon: PenIcon(),
      showWhen: imageOnlyShowWhen,
      subItem: imageFilterSubItem,
      subItemOffset: [12, -4],
@@ -477,7 +479,7 @@ const generateGroup: AIItemGroupConfig = {
    },
    {
      name: 'Image processing',
-      icon: AIImageIcon,
+      icon: ImageIcon(),
      showWhen: imageOnlyShowWhen,
      subItem: imageProcessingSubItem,
      subItemOffset: [12, -6],
@@ -485,7 +487,7 @@ const generateGroup: AIItemGroupConfig = {
    },
    {
      name: 'Generate a caption',
-      icon: AIPenIcon,
+      icon: PenIcon(),
      showWhen: imageOnlyShowWhen,
      beta: true,
      handler: actionToHandler(
@@ -497,7 +499,7 @@ const generateGroup: AIItemGroupConfig = {
    },
    {
      name: 'Find actions',
-      icon: AISearchIcon,
+      icon: SearchIcon(),
      showWhen: noteBlockOrTextShowWhen,
      handler: actionToHandler('findActions', AIStarIconWithAnimation),
      beta: true,
--- a/packages/frontend/core/src/blocksuite/ai/messages/error.ts
+++ b/packages/frontend/core/src/blocksuite/ai/messages/error.ts
@@ -1,13 +1,12 @@
 import { type EditorHost } from '@blocksuite/affine/block-std';
 import { scrollbarStyle, unsafeCSSVarV2 } from '@blocksuite/affine/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/utils';
-import { ToggleDownIcon } from '@blocksuite/icons/lit';
+import { InformationIcon, ToggleDownIcon } from '@blocksuite/icons/lit';
 import { signal } from '@preact/signals-core';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';

-import { ErrorTipIcon } from '../_common/icons';
 import {
  type AIError,
  PaymentRequiredError,
@@ -121,7 +120,7 @@ export class AIErrorWrapper extends SignalWatcher(WithDisposable(LitElement)) {
  protected override render() {
    return html` <div class="error-wrapper">
      <div class="content">
-        <div class="icon">${ErrorTipIcon}</div>
+        <div class="icon">${InformationIcon()}</div>
        <div class="text-container">
          <div>${this.text}</div>
          ${this.showDetailPanel
--- a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-input.ts
+++ b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-input.ts
@@ -1,12 +1,12 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
 import { openFileOrFiles, unsafeCSSVarV2 } from '@blocksuite/affine/blocks';
 import { SignalWatcher } from '@blocksuite/affine/global/utils';
-import { ImageIcon, PublishIcon } from '@blocksuite/icons/lit';
+import { BroomIcon, ImageIcon, PublishIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';

-import { ChatAbortIcon, ChatClearIcon, ChatSendIcon } from '../_common/icons';
+import { ChatAbortIcon, ChatSendIcon } from '../_common/icons';
 import type { ChatMessage } from '../blocks';
 import type { AINetworkSearchConfig } from '../chat-panel/chat-config';
 import {
@@ -95,6 +95,7 @@ export class ChatBlockInput extends SignalWatcher(LitElement) {
      }

      .image-upload,
+      .chat-history-clear,
      .chat-network-search {
        display: flex;
        justify-content: center;
@@ -167,7 +168,7 @@ export class ChatBlockInput extends SignalWatcher(LitElement) {
        ></textarea>
        <div class="chat-panel-input-actions">
          <div class=${cleanButtonClasses} @click=${this._handleCleanup}>
-            ${ChatClearIcon}
+            ${BroomIcon()}
          </div>
          ${this.networkSearchConfig.visible.value
            ? html`
--- a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts
+++ b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts
@@ -9,6 +9,7 @@ import {
  type SpecBuilder,
  TelemetryProvider,
 } from '@blocksuite/affine/blocks';
+import { InformationIcon } from '@blocksuite/icons/lit';
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -19,7 +20,6 @@ import {
  constructUserInfoWithMessages,
  queryHistoryMessages,
 } from '../_common/chat-actions-handle';
-import { SmallHintIcon } from '../_common/icons';
 import {
  type AIChatBlockModel,
  type ChatMessage,
@@ -515,7 +515,7 @@ export class AIChatBlockPeekView extends LitElement {
        .networkSearchConfig=${networkSearchConfig}
      ></chat-block-input>
      <div class="peek-view-footer">
-        ${SmallHintIcon}
+        ${InformationIcon()}
        <div>AI outputs can be misleading or wrong</div>
      </div>
    </div> `;