refactor(editor): remove redundant edgeless icons (#10169)

Continue [BS-2240](https://linear.app/affine-design/issue/BS-2240/%E6%B8%85%E7%90%86%E9%87%8D%E5%A4%8D%E7%9A%84icon) This PR removes `icons/edgeless.ts` and refactor with `@blocksuite/icons` for reducing redundant icons
2026-02-20 07:47:19 +08:00 · 2025-02-14 05:03:26 +00:00
parent 1f6ac4b1fe
commit 9d08f446cc
90 changed files with 2309 additions and 2899 deletions
--- a/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts
@@ -3,11 +3,7 @@ import {
  CanvasElementType,
  EdgelessCRUDIdentifier,
 } from '@blocksuite/affine-block-surface';
-import {
-  FontFamilyIcon,
-  FrameIcon,
-  SmallNoteIcon,
-} from '@blocksuite/affine-components/icons';
+import { FontFamilyIcon } from '@blocksuite/affine-components/icons';
 import type {
  Connection,
  ConnectorElementModel,
@@ -44,6 +40,7 @@ import {
  Vec,
  WithDisposable,
 } from '@blocksuite/global/utils';
+import { FrameIcon, PageIcon } from '@blocksuite/icons/lit';
 import { consume } from '@lit/context';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
@@ -589,6 +586,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
      ({ name, generalIcon, scribbledIcon, tooltip }) => html`
        <edgeless-tool-icon-button
          .tooltip=${tooltip}
+          .iconSize=${'20px'}
          @pointerenter=${() => this._showOverlay(name)}
          @pointerleave=${() => this._removeOverlay()}
          @click=${() => this._autoComplete(name)}
@@ -603,6 +601,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {

      <edgeless-tool-icon-button
        .tooltip=${'Text'}
+        .iconSize=${'20px'}
        @pointerenter=${() => this._showOverlay('text')}
        @pointerleave=${() => this._removeOverlay()}
        @click=${() => this._autoComplete('text')}
@@ -611,19 +610,21 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
      </edgeless-tool-icon-button>
      <edgeless-tool-icon-button
        .tooltip=${'Note'}
+        .iconSize=${'20px'}
        @pointerenter=${() => this._showOverlay('note')}
        @pointerleave=${() => this._removeOverlay()}
        @click=${() => this._autoComplete('note')}
      >
-        ${SmallNoteIcon}
+        ${PageIcon()}
      </edgeless-tool-icon-button>
      <edgeless-tool-icon-button
        .tooltip=${'Frame'}
+        .iconSize=${'20px'}
        @pointerenter=${() => this._showOverlay('frame')}
        @pointerleave=${() => this._removeOverlay()}
        @click=${() => this._autoComplete('frame')}
      >
-        ${FrameIcon}
+        ${FrameIcon()}
      </edgeless-tool-icon-button>

      <edgeless-tool-icon-button
--- a/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts
@@ -8,12 +8,6 @@ import {
  OverlayIdentifier,
  type RoughCanvas,
 } from '@blocksuite/affine-block-surface';
-import {
-  AutoCompleteArrowIcon,
-  MindMapChildIcon,
-  MindMapSiblingIcon,
-  NoteAutoCompleteIcon,
-} from '@blocksuite/affine-components/icons';
 import type {
  Connection,
  ConnectorElementModel,
@@ -38,6 +32,12 @@ import {
  Vec,
  WithDisposable,
 } from '@blocksuite/global/utils';
+import {
+  ArrowUpBigIcon,
+  PlusIcon,
+  SiblingNodeIcon,
+  SubNodeIcon,
+} from '@blocksuite/icons/lit';
 import { consume } from '@lit/context';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -490,7 +490,8 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) {
    const Arrows = arrowDirections.map(type => {
      let transform = '';

-      const icon = isShape ? AutoCompleteArrowIcon : NoteAutoCompleteIcon;
+      const iconSize = { width: '16px', height: '16px' };
+      const icon = (isShape ? ArrowUpBigIcon : PlusIcon)(iconSize);

      switch (type) {
        case Direction.Top:
@@ -583,7 +584,10 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) {

      const [position, target, layout] = type;
      const isLeftLayout = layout === LayoutType.LEFT;
-      const icon = target === 'child' ? MindMapChildIcon : MindMapSiblingIcon;
+      const icon = (target === 'child' ? SubNodeIcon : SiblingNodeIcon)({
+        width: '16px',
+        height: '16px',
+      });

      switch (position) {
        case Direction.Bottom:
--- a/blocksuite/blocks/src/root-block/edgeless/components/buttons/tool-icon-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/buttons/tool-icon-button.ts
@@ -42,6 +42,7 @@ export class EdgelessToolIconButton extends LitElement {

    ::slotted(svg) {
      flex-shrink: 0;
+      width: var(--icon-size, unset);
      height: var(--icon-size, unset);
    }

--- a/blocksuite/blocks/src/root-block/edgeless/components/note-slicer/index.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/note-slicer/index.ts
@@ -1,5 +1,4 @@
 import { isNoteBlock } from '@blocksuite/affine-block-surface';
-import { SmallScissorsIcon } from '@blocksuite/affine-components/icons';
 import { DEFAULT_NOTE_HEIGHT } from '@blocksuite/affine-model';
 import { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/affine-shared/consts';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';
@@ -12,6 +11,7 @@ import {
  Point,
  serializeXYWH,
 } from '@blocksuite/global/utils';
+import { ScissorsIcon } from '@blocksuite/icons/lit';
 import { css, html, nothing, type PropertyValues } from 'lit';
 import { state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -387,7 +387,7 @@ export class NoteSlicer extends WidgetComponent<
          transform: 'translateY(-50%)',
        })}
      >
-        ${SmallScissorsIcon}
+        ${ScissorsIcon({ width: '16px', height: '16px' })}
      </div>
      ${this._divingLinePositions.map((pos, idx) => {
        const dividingLineClasses = classMap({
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/align-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/align-panel.ts
@@ -1,9 +1,9 @@
+import { TextAlign } from '@blocksuite/affine-model';
 import {
  TextAlignCenterIcon,
  TextAlignLeftIcon,
  TextAlignRightIcon,
-} from '@blocksuite/affine-components/icons';
-import { TextAlign } from '@blocksuite/affine-model';
+} from '@blocksuite/icons/lit';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -12,17 +12,17 @@ const TEXT_ALIGN_LIST = [
  {
    name: 'Left',
    value: TextAlign.Left,
-    icon: TextAlignLeftIcon,
+    icon: TextAlignLeftIcon(),
  },
  {
    name: 'Center',
    value: TextAlign.Center,
-    icon: TextAlignCenterIcon,
+    icon: TextAlignCenterIcon(),
  },
  {
    name: 'Right',
    value: TextAlign.Right,
-    icon: TextAlignRightIcon,
+    icon: TextAlignRightIcon(),
  },
 ];

@@ -53,6 +53,7 @@ export class EdgelessAlignPanel extends LitElement {
          aria-label=${name}
          .tooltip=${name}
          .active=${this.value === value}
+          .iconSize=${'20px'}
          @click=${() => this._onSelect(value)}
        >
          ${icon}
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/font-family-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/font-family-panel.ts
@@ -1,6 +1,6 @@
 import { TextUtils } from '@blocksuite/affine-block-surface';
-import { CheckIcon } from '@blocksuite/affine-components/icons';
 import { FontFamily, FontFamilyList } from '@blocksuite/affine-model';
+import { DoneIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -39,9 +39,10 @@ export class EdgelessFontFamilyPanel extends LitElement {
            .iconContainerPadding=${[4, 8]}
            .justify=${'space-between'}
            .active=${active}
+            .iconSize=${'20px'}
            @click=${() => this._onSelect(font)}
          >
-            ${name} ${active ? CheckIcon : nothing}
+            ${name} ${active ? DoneIcon() : nothing}
          </edgeless-tool-icon-button>
        `;
      }
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/font-weight-and-style-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/font-weight-and-style-panel.ts
@@ -1,11 +1,11 @@
 import { TextUtils } from '@blocksuite/affine-block-surface';
-import { CheckIcon } from '@blocksuite/affine-components/icons';
 import {
  FontFamily,
  FontFamilyMap,
  FontStyle,
  FontWeight,
 } from '@blocksuite/affine-model';
+import { DoneIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
@@ -95,11 +95,12 @@ export class EdgelessFontWeightAndStylePanel extends LitElement {
                    .justify=${'space-between'}
                    .disabled=${this._isDisabled(fontFace.weight as FontWeight)}
                    .active=${active}
+                    .iconSize=${'20px'}
                    @click=${() =>
                      this._onSelect(fontFace.weight as FontWeight)}
                  >
                    ${choose(fontFace.weight, FONT_WEIGHT_CHOOSE)}
-                    ${active ? CheckIcon : nothing}
+                    ${active ? DoneIcon() : nothing}
                  </edgeless-tool-icon-button>
                `;
              }
@@ -131,7 +132,7 @@ export class EdgelessFontWeightAndStylePanel extends LitElement {
                      )}
                  >
                    ${choose(fontFace.weight, FONT_WEIGHT_CHOOSE)} Italic
-                    ${active ? CheckIcon : nothing}
+                    ${active ? DoneIcon() : nothing}
                  </edgeless-tool-icon-button>
                `;
              }
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/icons.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/icons.ts
@@ -0,0 +1,84 @@
+import { html } from 'lit';
+
+export const NoteNoShadowIcon = html`
+  <svg
+    width="60"
+    height="72"
+    viewBox="0 0 60 72"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="60" height="72" />
+    <rect
+      x="0.5"
+      y="0.5"
+      width="58.0769"
+      height="71"
+      stroke="black"
+      stroke-opacity="0.1"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21.9576 26.8962L38.6423 43.5809C42.5269 38.9268 42.2845 31.993 37.9149 27.6235C33.5454 23.254 26.6117 23.0115 21.9576 26.8962ZM37.1193 45.1038L20.4346 28.4192C16.55 33.0732 16.7924 40.007 21.162 44.3765C25.5315 48.746 32.4652 48.9885 37.1193 45.1038ZM19.639 26.1005C25.1063 20.6332 33.9706 20.6332 39.4379 26.1005C44.9053 31.5678 44.9053 40.4322 39.4379 45.8995C33.9706 51.3668 25.1063 51.3668 19.639 45.8995C14.1716 40.4322 14.1716 31.5678 19.639 26.1005Z"
+      fill="black"
+      fill-opacity="0.1"
+    />
+  </svg>
+`;
+
+export const NoteShadowSampleIcon = html`
+  <svg
+    width="60"
+    height="72"
+    viewBox="0 0 60 72"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="60" height="72" />
+    <rect
+      x="9.23071"
+      y="12.0771"
+      width="32.3077"
+      height="4.61538"
+      rx="2"
+      fill="black"
+      fill-opacity="0.1"
+    />
+    <rect
+      x="9.23071"
+      y="25.8462"
+      width="40.6154"
+      height="2.76923"
+      rx="1.38462"
+      fill="black"
+      fill-opacity="0.1"
+    />
+    <rect
+      x="9.23071"
+      y="35.6152"
+      width="40.6154"
+      height="2.76923"
+      rx="1.38462"
+      fill="black"
+      fill-opacity="0.1"
+    />
+    <rect
+      x="9.23071"
+      y="45.3843"
+      width="40.6154"
+      height="2.76923"
+      rx="1.38462"
+      fill="black"
+      fill-opacity="0.1"
+    />
+    <rect
+      x="9.23071"
+      y="55.1533"
+      width="13.8462"
+      height="2.76923"
+      rx="1.38462"
+      fill="black"
+      fill-opacity="0.1"
+    />
+  </svg>
+`;
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts
@@ -1,9 +1,5 @@
-import {
-  BanIcon,
-  DashLineIcon,
-  StraightLineIcon,
-} from '@blocksuite/affine-components/icons';
 import { LineWidth, StrokeStyle } from '@blocksuite/affine-model';
+import { BanIcon, DashLineIcon, StraightLineIcon } from '@blocksuite/icons/lit';
 import { html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -31,17 +27,17 @@ const LINE_STYLE_LIST = [
  {
    name: 'Solid',
    value: StrokeStyle.Solid,
-    icon: StraightLineIcon,
+    icon: StraightLineIcon(),
  },
  {
    name: 'Dash',
    value: StrokeStyle.Dash,
-    icon: DashLineIcon,
+    icon: DashLineIcon(),
  },
  {
    name: 'None',
    value: StrokeStyle.None,
-    icon: BanIcon,
+    icon: BanIcon(),
  },
 ];

@@ -81,6 +77,7 @@ export function LineStylesPanel({
          .active=${active}
          .activeMode=${'background'}
          .tooltip=${name}
+          .iconSize=${'24px'}
          @click=${() =>
            onClick?.({
              type: 'lineStyle',
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/note-display-mode-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/note-display-mode-panel.ts
@@ -1,7 +1,7 @@
-import { EdgelessIcon, PageIcon } from '@blocksuite/affine-components/icons';
 import { NoteDisplayMode } from '@blocksuite/affine-model';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
+import { EdgelessIcon, PageIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -36,6 +36,11 @@ export class NoteDisplayModePanel extends WithDisposable(LitElement) {
      align-items: center;
      gap: 4px;
      color: var(--affine-icon-color);
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
    }
    .item:hover,
    .item.selected {
@@ -46,11 +51,11 @@ export class NoteDisplayModePanel extends WithDisposable(LitElement) {
  private _DisplayModeIcon(mode: NoteDisplayMode) {
    switch (mode) {
      case NoteDisplayMode.DocAndEdgeless:
-        return html`${PageIcon} ${EdgelessIcon}`;
+        return html`${PageIcon()} ${EdgelessIcon()}`;
      case NoteDisplayMode.DocOnly:
-        return html`${PageIcon}`;
+        return html`${PageIcon()}`;
      case NoteDisplayMode.EdgelessOnly:
-        return html`${EdgelessIcon}`;
+        return html`${EdgelessIcon()}`;
    }
  }

--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/note-shadow-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/note-shadow-panel.ts
@@ -1,7 +1,3 @@
-import {
-  NoteNoShadowIcon,
-  NoteShadowSampleIcon,
-} from '@blocksuite/affine-components/icons';
 import { ColorScheme, NoteShadow } from '@blocksuite/affine-model';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement } from 'lit';
@@ -9,6 +5,8 @@ import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';

+import { NoteNoShadowIcon, NoteShadowSampleIcon } from './icons';
+
 const SHADOWS = [
  {
    type: NoteShadow.None,
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-panel.ts
@@ -41,6 +41,7 @@ export class EdgelessShapePanel extends LitElement {
          .tooltip=${tooltip}
          .active=${this.selectedShape === name}
          .activeMode=${'background'}
+          .iconSize=${'20px'}
          @click=${() => {
            if (disabled) return;
            this._onSelect(name);
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-style-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/shape-style-panel.ts
@@ -1,8 +1,5 @@
-import {
-  GeneralStyleIcon,
-  ScribbledStyleIcon,
-} from '@blocksuite/affine-components/icons';
 import { ShapeStyle } from '@blocksuite/affine-model';
+import { StyleGeneralIcon, StyleScribbleIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -10,11 +7,11 @@ import { repeat } from 'lit/directives/repeat.js';
 const SHAPE_STYLE_LIST = [
  {
    value: ShapeStyle.General,
-    icon: GeneralStyleIcon,
+    icon: StyleGeneralIcon(),
  },
  {
    value: ShapeStyle.Scribbled,
-    icon: ScribbledStyleIcon,
+    icon: StyleScribbleIcon(),
  },
 ];

@@ -46,6 +43,7 @@ export class EdgelessShapeStylePanel extends LitElement {
          aria-label=${value}
          .tooltip=${value}
          .active=${this.value === value}
+          .iconSize=${'20px'}
          @click=${() => this._onSelect(value)}
        >
          ${icon}
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/size-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/size-panel.ts
@@ -1,5 +1,5 @@
-import { CheckIcon } from '@blocksuite/affine-components/icons';
 import { clamp, stopPropagation } from '@blocksuite/affine-shared/utils';
+import { DoneIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -81,9 +81,10 @@ export class EdgelessSizePanel extends LitElement {
        .iconContainerPadding=${[4, 8]}
        .justify=${'space-between'}
        .active=${active}
+        .iconSize=${'20px'}
        @click=${() => this._onSelect(value)}
      >
-        ${name ?? value} ${active ? CheckIcon : nothing}
+        ${name ?? value} ${active ? DoneIcon() : nothing}
      </edgeless-tool-icon-button>
    `;
  };
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-tool-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-tool-button.ts
@@ -1,7 +1,3 @@
-import {
-  EdgelessPenDarkIcon,
-  EdgelessPenLightIcon,
-} from '@blocksuite/affine-components/icons';
 import {
  EditPropsStore,
  ThemeProvider,
@@ -13,6 +9,7 @@ import { styleMap } from 'lit/directives/style-map.js';

 import { getTooltipWithShortcut } from '../../utils.js';
 import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
+import { EdgelessPenDarkIcon, EdgelessPenLightIcon } from './icons.js';

 export class EdgelessBrushToolButton extends EdgelessToolbarToolMixin(
  SignalWatcher(LitElement)
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/icons.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/icons.ts
@@ -0,0 +1,273 @@
+import { html } from 'lit';
+
+export const EdgelessPenLightIcon = html`
+  <svg
+    width="36"
+    height="60"
+    viewBox="0 0 36 60"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    id="edgeless-pen-icon"
+  >
+    <g filter="url(#filter0_d_5310_64454)">
+      <path
+        d="M8 38.8965L12.2828 37.4689V106.538H8V38.8965Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8 38.8965L12.2828 37.4689V106.538H8V38.8965Z"
+        fill="white"
+        fill-opacity="0.1"
+      />
+      <path
+        d="M12.2832 36.993H17.5177V106.538H12.2832V36.993Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.5176 36.993H22.7521V106.538H17.5176V36.993Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.5176 36.993H22.7521V106.538H17.5176V36.993Z"
+        fill="black"
+        fill-opacity="0.1"
+      />
+      <path
+        d="M22.752 30.9448L27.0347 38.8965V106.538H22.752V30.9448Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22.752 30.9448L27.0347 38.8965V106.538H22.752V30.9448Z"
+        fill="black"
+        fill-opacity="0.2"
+      />
+      <path
+        d="M16.5909 2.88078C16.8233 1.90625 18.2099 1.90623 18.4423 2.88075L19.896 8.97414L22.2755 18.9483L27.0345 38.8965L23.9871 38.0231C23.1982 37.7969 22.3511 37.9039 21.6431 38.3189L18.023 40.4414C17.7107 40.6245 17.3238 40.6245 17.0115 40.4414L13.0218 38.1023C12.5499 37.8256 11.9851 37.7543 11.4592 37.905L8 38.8965L12.7583 18.9483L15.1374 8.97414L16.5909 2.88078Z"
+        fill="#F1F1F1"
+      />
+      <path
+        d="M16.5909 2.88078C16.8233 1.90625 18.2099 1.90623 18.4423 2.88075L19.896 8.97414L22.2755 18.9483L27.0345 38.8965L23.9871 38.0231C23.1982 37.7969 22.3511 37.9039 21.6431 38.3189L18.023 40.4414C17.7107 40.6245 17.3238 40.6245 17.0115 40.4414L13.0218 38.1023C12.5499 37.8256 11.9851 37.7543 11.4592 37.905L8 38.8965L12.7583 18.9483L15.1374 8.97414L16.5909 2.88078Z"
+        fill="url(#paint0_linear_5310_64454)"
+        fill-opacity="0.1"
+      />
+      <g filter="url(#filter1_b_5310_64454)">
+        <path
+          d="M16.7391 2.26209C16.9345 1.44293 18.1 1.44293 18.2954 2.26209L20.3725 10.969H14.6621L16.7391 2.26209Z"
+          fill="currentColor"
+        />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_5310_64454"
+        x="0"
+        y="-5"
+        width="35.0352"
+        height="124"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="4" />
+        <feGaussianBlur stdDeviation="4" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_5310_64454"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_5310_64454"
+          result="shape"
+        />
+      </filter>
+      <filter
+        id="filter1_b_5310_64454"
+        x="12.7587"
+        y="-0.255743"
+        width="9.51686"
+        height="13.1282"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feGaussianBlur in="BackgroundImageFix" stdDeviation="0.951724" />
+        <feComposite
+          in2="SourceAlpha"
+          operator="in"
+          result="effect1_backgroundBlur_5310_64454"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_backgroundBlur_5310_64454"
+          result="shape"
+        />
+      </filter>
+      <linearGradient
+        id="paint0_linear_5310_64454"
+        x1="22.1949"
+        y1="19.2552"
+        x2="11.0983"
+        y2="21.5941"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop />
+        <stop offset="0.3125" stop-opacity="0" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+`;
+export const EdgelessPenDarkIcon = html`<svg
+  width="34"
+  height="60"
+  viewBox="0 0 34 60"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  id="edgeless-pen-icon"
+>
+  <g filter="url(#filter0_d_5310_64464)">
+    <path
+      d="M7 38.8965L11.2828 37.4689V106.538H7V38.8965Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7 38.8965L11.2828 37.4689V106.538H7V38.8965Z"
+      fill="black"
+      fill-opacity="0.1"
+    />
+    <path
+      d="M11.2832 36.993H16.5177V106.538H11.2832V36.993Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11.2832 36.993H16.5177V106.538H11.2832V36.993Z"
+      fill="black"
+      fill-opacity="0.26"
+    />
+    <path
+      d="M16.5176 36.993H21.7521V106.538H16.5176V36.993Z"
+      fill="currentColor"
+    />
+    <path
+      d="M16.5176 36.993H21.7521V106.538H16.5176V36.993Z"
+      fill="black"
+      fill-opacity="0.4"
+    />
+    <path
+      d="M21.752 30.9448L26.0347 38.8965V106.538H21.752V30.9448Z"
+      fill="currentColor"
+    />
+    <path
+      d="M21.752 30.9448L26.0347 38.8965V106.538H21.752V30.9448Z"
+      fill="black"
+      fill-opacity="0.6"
+    />
+    <path
+      d="M15.5909 2.88078C15.8233 1.90625 17.2099 1.90623 17.4423 2.88075L18.896 8.97414L21.2755 18.9483L26.0345 38.8965L22.9871 38.0231C22.1982 37.7969 21.3511 37.9039 20.6431 38.3189L17.023 40.4414C16.7107 40.6245 16.3238 40.6245 16.0115 40.4414L12.0218 38.1023C11.5499 37.8256 10.9851 37.7543 10.4592 37.905L7 38.8965L11.7583 18.9483L14.1374 8.97414L15.5909 2.88078Z"
+      fill="#C1C1C1"
+    />
+    <path
+      d="M15.5909 2.88078C15.8233 1.90625 17.2099 1.90623 17.4423 2.88075L18.896 8.97414L21.2755 18.9483L26.0345 38.8965L22.9871 38.0231C22.1982 37.7969 21.3511 37.9039 20.6431 38.3189L17.023 40.4414C16.7107 40.6245 16.3238 40.6245 16.0115 40.4414L12.0218 38.1023C11.5499 37.8256 10.9851 37.7543 10.4592 37.905L7 38.8965L11.7583 18.9483L14.1374 8.97414L15.5909 2.88078Z"
+      fill="url(#paint0_linear_5310_64464)"
+      fill-opacity="0.1"
+    />
+    <g filter="url(#filter1_b_5310_64464)">
+      <path
+        d="M15.7391 2.26209C15.9345 1.44293 17.1 1.44293 17.2954 2.26209L19.3725 10.969H13.6621L15.7391 2.26209Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.7391 2.26209C15.9345 1.44293 17.1 1.44293 17.2954 2.26209L19.3725 10.969H13.6621L15.7391 2.26209Z"
+        fill="black"
+        fill-opacity="0.2"
+      />
+    </g>
+  </g>
+  <defs>
+    <filter
+      id="filter0_d_5310_64464"
+      x="0"
+      y="-6"
+      width="33.0352"
+      height="122"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="2" />
+      <feGaussianBlur stdDeviation="3.5" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.78 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_5310_64464"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_5310_64464"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter1_b_5310_64464"
+      x="11.7587"
+      y="-0.255743"
+      width="9.51686"
+      height="13.1282"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="0.951724" />
+      <feComposite
+        in2="SourceAlpha"
+        operator="in"
+        result="effect1_backgroundBlur_5310_64464"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_backgroundBlur_5310_64464"
+        result="shape"
+      />
+    </filter>
+    <linearGradient
+      id="paint0_linear_5310_64464"
+      x1="21.1949"
+      y1="19.2552"
+      x2="11.5553"
+      y2="21.8444"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop />
+      <stop offset="0.302413" stop-opacity="0" />
+      <stop offset="0.557292" stop-opacity="0" />
+      <stop offset="1" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+</svg>`;
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/common/slide-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/common/slide-menu.ts
@@ -1,5 +1,5 @@
-import { ArrowRightSmallIcon } from '@blocksuite/affine-components/icons';
 import { WithDisposable } from '@blocksuite/global/utils';
+import { ArrowRightSmallIcon } from '@blocksuite/icons/lit';
 import { consume } from '@lit/context';
 import { css, html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -126,6 +126,8 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) {
  }

  override render() {
+    const iconSize = { width: '32px', height: '32px' };
+
    return html`
      <div class="slide-menu-wrapper">
        <div
@@ -133,7 +135,7 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) {
          @click=${() => this._handleSlideButtonClick('left')}
          style=${styleMap({ opacity: this.showPrevious ? '1' : '0' })}
        >
-          ${ArrowRightSmallIcon}
+          ${ArrowRightSmallIcon(iconSize)}
        </div>
        <div
          class="menu-container"
@@ -148,7 +150,7 @@ export class EdgelessSlideMenu extends WithDisposable(LitElement) {
          class="next-slide-button"
          @click=${() => this._handleSlideButtonClick('right')}
        >
-          ${ArrowRightSmallIcon}
+          ${ArrowRightSmallIcon(iconSize)}
        </div>
      </div>
    `;
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/common/toolbar-arrow-up-icon.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/common/toolbar-arrow-up-icon.ts
@@ -0,0 +1,23 @@
+import { ShadowlessElement } from '@blocksuite/block-std';
+import { ArrowUpSmallIcon } from '@blocksuite/icons/lit';
+import { css, html } from 'lit';
+
+export class ToolbarArrowUpIcon extends ShadowlessElement {
+  static override styles = css`
+    .arrow-up-icon {
+      position: absolute;
+      top: -2px;
+      right: -2px;
+    }
+  `;
+
+  override render() {
+    return html`<span class="arrow-up-icon"> ${ArrowUpSmallIcon()} </span>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'toolbar-arrow-up-icon': ToolbarArrowUpIcon;
+  }
+}
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-dense-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-dense-menu.ts
@@ -1,12 +1,11 @@
 import { menu } from '@blocksuite/affine-components/context-menu';
-import {
-  ConnectorCWithArrowIcon,
-  ConnectorIcon,
-  ConnectorLWithArrowIcon,
-  ConnectorXWithArrowIcon,
-} from '@blocksuite/affine-components/icons';
 import { ConnectorMode } from '@blocksuite/affine-model';
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
+import {
+  ConnectorCIcon,
+  ConnectorEIcon,
+  ConnectorLIcon,
+} from '@blocksuite/icons/lit';

 import type { DenseMenuBuilder } from '../common/type.js';

@@ -26,28 +25,29 @@ export const buildConnectorDenseMenu: DenseMenuBuilder = edgeless => {
        edgeless.std.get(EditPropsStore).recordLastProps('connector', { mode });
    };

+  const iconSize = { width: '20', height: '20' };
  return menu.subMenu({
    name: 'Connector',
-    prefix: ConnectorIcon,
+    prefix: ConnectorCIcon(iconSize),
    select: createSelect(prevMode, false),
    isSelected,
    options: {
      items: [
        menu.action({
          name: 'Curve',
-          prefix: ConnectorCWithArrowIcon,
+          prefix: ConnectorCIcon(iconSize),
          select: createSelect(ConnectorMode.Curve),
          isSelected: isSelected && prevMode === ConnectorMode.Curve,
        }),
        menu.action({
          name: 'Elbowed',
-          prefix: ConnectorXWithArrowIcon,
+          prefix: ConnectorEIcon(iconSize),
          select: createSelect(ConnectorMode.Orthogonal),
          isSelected: isSelected && prevMode === ConnectorMode.Orthogonal,
        }),
        menu.action({
          name: 'Straight',
-          prefix: ConnectorLWithArrowIcon,
+          prefix: ConnectorLIcon(iconSize),
          select: createSelect(ConnectorMode.Straight),
          isSelected: isSelected && prevMode === ConnectorMode.Straight,
        }),
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts
@@ -1,8 +1,3 @@
-import {
-  ConnectorCWithArrowIcon,
-  ConnectorLWithArrowIcon,
-  ConnectorXWithArrowIcon,
-} from '@blocksuite/affine-components/icons';
 import { ConnectorMode, DefaultTheme } from '@blocksuite/affine-model';
 import {
  EditPropsStore,
@@ -12,6 +7,11 @@ import {
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { SignalWatcher } from '@blocksuite/global/utils';
+import {
+  ConnectorCIcon,
+  ConnectorEIcon,
+  ConnectorLIcon,
+} from '@blocksuite/icons/lit';
 import { computed } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -34,25 +34,28 @@ function ConnectorModeButtonGroup(
        .active=${mode === ConnectorMode.Curve}
        .activeMode=${'background'}
        .tooltip=${'Curve'}
+        .iconSize=${'20px'}
        @click=${() => setConnectorMode({ mode: ConnectorMode.Curve })}
      >
-        ${ConnectorCWithArrowIcon}
+        ${ConnectorCIcon()}
      </edgeless-tool-icon-button>
      <edgeless-tool-icon-button
        .active=${mode === ConnectorMode.Orthogonal}
        .activeMode=${'background'}
        .tooltip=${'Elbowed'}
+        .iconSize=${'20px'}
        @click=${() => setConnectorMode({ mode: ConnectorMode.Orthogonal })}
      >
-        ${ConnectorXWithArrowIcon}
+        ${ConnectorEIcon()}
      </edgeless-tool-icon-button>
      <edgeless-tool-icon-button
        .active=${mode === ConnectorMode.Straight}
        .activeMode=${'background'}
        .tooltip=${'Straight'}
+        .iconSize=${'20px'}
        @click=${() => setConnectorMode({ mode: ConnectorMode.Straight })}
      >
-        ${ConnectorLWithArrowIcon}
+        ${ConnectorLIcon()}
      </edgeless-tool-icon-button>
    </div>
  `;
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-tool-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-tool-button.ts
@@ -1,23 +1,21 @@
-import {
-  ArrowUpIcon,
-  ConnectorCWithArrowIcon,
-  ConnectorLWithArrowIcon,
-  ConnectorXWithArrowIcon,
-} from '@blocksuite/affine-components/icons';
 import { ConnectorMode, getConnectorModeName } from '@blocksuite/affine-model';
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
 import { SignalWatcher } from '@blocksuite/global/utils';
+import {
+  ConnectorCIcon,
+  ConnectorEIcon,
+  ConnectorLIcon,
+} from '@blocksuite/icons/lit';
 import { computed } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';

 import { getTooltipWithShortcut } from '../../utils.js';
 import { QuickToolMixin } from '../mixins/quick-tool.mixin.js';

 const IcomMap = {
-  [ConnectorMode.Straight]: ConnectorLWithArrowIcon,
-  [ConnectorMode.Orthogonal]: ConnectorXWithArrowIcon,
-  [ConnectorMode.Curve]: ConnectorCWithArrowIcon,
+  [ConnectorMode.Straight]: ConnectorLIcon(),
+  [ConnectorMode.Orthogonal]: ConnectorEIcon(),
+  [ConnectorMode.Curve]: ConnectorCIcon(),
 };

 export class EdgelessConnectorToolButton extends QuickToolMixin(
@@ -27,16 +25,6 @@ export class EdgelessConnectorToolButton extends QuickToolMixin(
    :host {
      display: flex;
    }
-    .edgeless-connector-button {
-      display: flex;
-      position: relative;
-    }
-    .arrow-up-icon {
-      position: absolute;
-      top: 4px;
-      right: 2px;
-      font-size: 0;
-    }
  `;

  private readonly _mode$ = computed(() => {
@@ -62,16 +50,16 @@ export class EdgelessConnectorToolButton extends QuickToolMixin(
  override render() {
    const { active } = this;
    const mode = this._mode$.value;
-    const arrowColor = active ? 'currentColor' : 'var(--affine-icon-secondary)';
    return html`
      <edgeless-tool-icon-button
+        class="edgeless-connector-button"
        .tooltip=${this.popper
          ? ''
          : getTooltipWithShortcut(getConnectorModeName(mode), 'C')}
        .tooltipOffset=${17}
        .active=${active}
        .iconContainerPadding=${6}
-        class="edgeless-connector-button"
+        .iconSize=${'24px'}
        @click=${() => {
          // don't update tool before toggling menu
          this._toggleMenu();
@@ -81,9 +69,7 @@ export class EdgelessConnectorToolButton extends QuickToolMixin(
        }}
      >
        ${IcomMap[mode]}
-        <span class="arrow-up-icon" style=${styleMap({ color: arrowColor })}>
-          ${ArrowUpIcon}
-        </span>
+        <toolbar-arrow-up-icon></toolbar-arrow-up-icon>
      </edgeless-tool-icon-button>
    `;
  }
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/default/default-tool-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/default/default-tool-button.ts
@@ -1,35 +1,20 @@
-import {
-  ArrowUpIcon,
-  HandIcon,
-  SelectIcon,
-} from '@blocksuite/affine-components/icons';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
+import { HandIcon, SelectIcon } from '@blocksuite/icons/lit';
 import { effect } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { query } from 'lit/decorators.js';

 import { getTooltipWithShortcut } from '../../utils.js';
 import { QuickToolMixin } from '../mixins/quick-tool.mixin.js';
-
 export class EdgelessDefaultToolButton extends QuickToolMixin(LitElement) {
  static override styles = css`
    .current-icon {
      transition: 100ms;
-      width: 24px;
-      height: 24px;
    }
    .current-icon > svg {
      display: block;
-    }
-    .arrow-up-icon {
-      position: absolute;
-      top: 4px;
-      right: 2px;
-      font-size: 0;
-      color: var(--affine-icon-secondary);
-    }
-    .active .arrow-up-icon {
-      color: inherit;
+      width: 24px;
+      height: 24px;
    }
  `;

@@ -91,19 +76,20 @@ export class EdgelessDefaultToolButton extends QuickToolMixin(LitElement) {
    const { active } = this;
    return html`
      <edgeless-tool-icon-button
-        class="edgeless-default-button ${type} ${active ? 'active' : ''}"
+        class="edgeless-default-button ${type}"
        .tooltip=${type === 'pan'
          ? getTooltipWithShortcut('Hand', 'H')
          : getTooltipWithShortcut('Select', 'V')}
        .tooltipOffset=${17}
        .active=${active}
        .iconContainerPadding=${6}
+        .iconSize=${'24px'}
        @click=${this._changeTool}
      >
-        <span class="current-icon">
-          ${localStorage.defaultTool === 'default' ? SelectIcon : HandIcon}
-        </span>
-        <span class="arrow-up-icon">${ArrowUpIcon}</span>
+        <div class="current-icon">
+          ${localStorage.defaultTool === 'default' ? SelectIcon() : HandIcon()}
+        </div>
+        <toolbar-arrow-up-icon></toolbar-arrow-up-icon>
      </edgeless-tool-icon-button>
    `;
  }
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts
@@ -4,11 +4,6 @@ import {
  popMenu,
  popupTargetFromElement,
 } from '@blocksuite/affine-components/context-menu';
-import {
-  ArrowLeftSmallIcon,
-  ArrowRightSmallIcon,
-  MoreHorizontalIcon,
-} from '@blocksuite/affine-components/icons';
 import {
  darkToolbarStyles,
  lightToolbarStyles,
@@ -22,6 +17,11 @@ import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { WidgetComponent } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import { debounce, Slot } from '@blocksuite/global/utils';
+import {
+  ArrowLeftSmallIcon,
+  ArrowRightSmallIcon,
+  MoreHorizontalIcon,
+} from '@blocksuite/icons/lit';
 import { autoPlacement, offset } from '@floating-ui/dom';
 import { ContextProvider } from '@lit/context';
 import { computed } from '@preact/signals-core';
@@ -499,7 +499,7 @@ export class EdgelessToolbarWidget extends WidgetComponent<
            .slice(this._visibleQuickToolSize)
            .some(tool => tool.type === this.edgelessTool?.type)}
        >
-          ${MoreHorizontalIcon}
+          ${MoreHorizontalIcon({ width: '20px', height: '20px' })}
          <affine-tooltip tip-position="top" .offset=${25}>
            More Tools
          </affine-tooltip>
@@ -513,7 +513,7 @@ export class EdgelessToolbarWidget extends WidgetComponent<
          ?disabled=${this._seniorScrollPrevDisabled}
          @click=${this._onSeniorNavPrev}
        >
-          ${ArrowLeftSmallIcon}
+          ${ArrowLeftSmallIcon({ width: '20px', height: '20px' })}
          ${cache(
            this._seniorPrevTooltip
              ? html` <affine-tooltip tip-position="top" .offset=${4}>
@@ -540,7 +540,7 @@ export class EdgelessToolbarWidget extends WidgetComponent<
          ?disabled=${this._seniorScrollNextDisabled}
          @click=${this._onSeniorNavNext}
        >
-          ${ArrowRightSmallIcon}
+          ${ArrowRightSmallIcon({ width: '20px', height: '20px' })}
          ${cache(
            this._seniorNextTooltip
              ? html` <affine-tooltip tip-position="top" .offset=${4}>
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/eraser/eraser-tool-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/eraser/eraser-tool-button.ts
@@ -1,13 +1,10 @@
-import {
-  EdgelessEraserDarkIcon,
-  EdgelessEraserLightIcon,
-} from '@blocksuite/affine-components/icons';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { css, html, LitElement } from 'lit';

 import { getTooltipWithShortcut } from '../../utils.js';
 import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
+import { EdgelessEraserDarkIcon, EdgelessEraserLightIcon } from './icons.js';

 export class EdgelessEraserToolButton extends EdgelessToolbarToolMixin(
  LitElement
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/eraser/icons.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/eraser/icons.ts
@@ -0,0 +1,422 @@
+import { html } from 'lit';
+
+export const EdgelessEraserLightIcon = html`<svg
+  width="44"
+  height="49"
+  viewBox="0 0 44 49"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  id="edgeless-eraser-icon"
+>
+  <g filter="url(#filter0_d_5310_64451)">
+    <rect x="6" y="2" width="32" height="59" rx="5.75" fill="#F1F1F1" />
+    <rect x="6.5" y="2.5" width="31" height="58" rx="5.25" stroke="#E3E2E4" />
+  </g>
+  <g filter="url(#filter1_f_5310_64451)">
+    <rect
+      x="36.2002"
+      y="4.44995"
+      width="18.4"
+      height="3.45"
+      rx="1.725"
+      transform="rotate(90 36.2002 4.44995)"
+      fill="white"
+      fill-opacity="0.78"
+    />
+  </g>
+  <g filter="url(#filter2_f_5310_64451)">
+    <path
+      d="M4 60H40V22C40 18.6863 37.3137 16 34 16H10C6.68629 16 4 18.6863 4 22V60Z"
+      fill="#343434"
+      fill-opacity="0.22"
+    />
+  </g>
+  <path
+    d="M16.5 16.5H11H9.37046C8.79521 16.5 8.29403 16.8921 8.15566 17.4505L8.14174 17.5067C7.93847 18.3269 7.27583 18.9534 6.44553 19.1105C5.89708 19.2142 5.5 19.6934 5.5 20.2516V21.75V27.5V39V61.5H16.5V16.5Z"
+    fill="#173654"
+  />
+  <path
+    d="M16.5 16.5H11H9.37046C8.79521 16.5 8.29403 16.8921 8.15566 17.4505L8.14174 17.5067C7.93847 18.3269 7.27583 18.9534 6.44553 19.1105C5.89708 19.2142 5.5 19.6934 5.5 20.2516V21.75V27.5V39V61.5H16.5V16.5Z"
+    fill="url(#paint0_linear_5310_64451)"
+    fill-opacity="0.2"
+  />
+  <path
+    d="M16.5 16.5H11H9.37046C8.79521 16.5 8.29403 16.8921 8.15566 17.4505L8.14174 17.5067C7.93847 18.3269 7.27583 18.9534 6.44553 19.1105C5.89708 19.2142 5.5 19.6934 5.5 20.2516V21.75V27.5V39V61.5H16.5V16.5Z"
+    stroke="#E7E7E7"
+  />
+  <path
+    d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"
+    fill="#1E96EB"
+  />
+  <path
+    d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"
+    fill="url(#paint1_linear_5310_64451)"
+    fill-opacity="0.2"
+  />
+  <path
+    d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"
+    stroke="#E7E7E7"
+  />
+  <rect
+    x="-0.5"
+    y="0.5"
+    width="11"
+    height="45"
+    transform="matrix(-1 0 0 1 27 16)"
+    fill="#EFFAFF"
+  />
+  <rect
+    x="-0.5"
+    y="0.5"
+    width="11"
+    height="45"
+    transform="matrix(-1 0 0 1 27 16)"
+    fill="url(#paint2_linear_5310_64451)"
+    fill-opacity="0.2"
+  />
+  <rect
+    x="-0.5"
+    y="0.5"
+    width="11"
+    height="45"
+    transform="matrix(-1 0 0 1 27 16)"
+    stroke="#E7E7E7"
+  />
+  <defs>
+    <filter
+      id="filter0_d_5310_64451"
+      x="2"
+      y="2"
+      width="40"
+      height="67"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="4" />
+      <feGaussianBlur stdDeviation="2" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0.258824 0 0 0 0 0.254902 0 0 0 0 0.286275 0 0 0 0.18 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_5310_64451"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_5310_64451"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter1_f_5310_64451"
+      x="30.45"
+      y="2.14995"
+      width="8.0502"
+      height="23"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feGaussianBlur
+        stdDeviation="1.15"
+        result="effect1_foregroundBlur_5310_64451"
+      />
+    </filter>
+    <filter
+      id="filter2_f_5310_64451"
+      x="0"
+      y="12"
+      width="44"
+      height="52"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feGaussianBlur
+        stdDeviation="2"
+        result="effect1_foregroundBlur_5310_64451"
+      />
+    </filter>
+    <linearGradient
+      id="paint0_linear_5310_64451"
+      x1="11"
+      y1="16"
+      x2="11"
+      y2="62"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-opacity="0" />
+      <stop offset="1" />
+    </linearGradient>
+    <linearGradient
+      id="paint1_linear_5310_64451"
+      x1="33"
+      y1="16"
+      x2="33"
+      y2="62"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="white" />
+      <stop offset="1" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient
+      id="paint2_linear_5310_64451"
+      x1="6"
+      y1="0"
+      x2="6"
+      y2="46"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#FFF8F8" stop-opacity="0" />
+      <stop offset="1" />
+    </linearGradient>
+  </defs>
+</svg>`;
+export const EdgelessEraserDarkIcon = html`<svg
+  width="44"
+  height="49"
+  viewBox="0 0 44 49"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  id="edgeless-eraser-icon"
+>
+  <g filter="url(#filter0_d_5310_64471)">
+    <path
+      d="M6 7.75C6 4.57436 8.57436 2 11.75 2H32.25C35.4256 2 38 4.57436 38 7.75V61H6V7.75Z"
+      fill="#C1C1C1"
+    />
+    <path
+      d="M6.5 7.75C6.5 4.85051 8.85051 2.5 11.75 2.5H32.25C35.1495 2.5 37.5 4.85051 37.5 7.75V60.5H6.5V7.75Z"
+      stroke="#DDDDDD"
+    />
+    <path
+      d="M6.5 7.75C6.5 4.85051 8.85051 2.5 11.75 2.5H32.25C35.1495 2.5 37.5 4.85051 37.5 7.75V60.5H6.5V7.75Z"
+      stroke="black"
+      stroke-opacity="0.3"
+    />
+  </g>
+  <g filter="url(#filter1_f_5310_64471)">
+    <rect
+      x="36.2002"
+      y="4.44995"
+      width="18.4"
+      height="3.45"
+      rx="1.725"
+      transform="rotate(90 36.2002 4.44995)"
+      fill="white"
+      fill-opacity="0.38"
+    />
+  </g>
+  <g filter="url(#filter2_f_5310_64471)">
+    <path
+      d="M4 62H40V23C40 19.6863 37.3137 17 34 17H10C6.68629 17 4 19.6863 4 23V62Z"
+      fill="black"
+      fill-opacity="0.44"
+    />
+  </g>
+  <path
+    d="M16.5 16.5H11H9.37046C8.79521 16.5 8.29403 16.8921 8.15566 17.4505L8.14174 17.5067C7.93847 18.3269 7.27583 18.9534 6.44553 19.1105C5.89708 19.2142 5.5 19.6934 5.5 20.2516V21.75V27.5V39V61.5H16.5V16.5Z"
+    fill="#0D2338"
+  />
+  <path
+    d="M16.5 16.5H11H9.37046C8.79521 16.5 8.29403 16.8921 8.15566 17.4505L8.14174 17.5067C7.93847 18.3269 7.27583 18.9534 6.44553 19.1105C5.89708 19.2142 5.5 19.6934 5.5 20.2516V21.75V27.5V39V61.5H16.5V16.5Z"
+    fill="url(#paint0_linear_5310_64471)"
+    fill-opacity="0.2"
+  />
+  <path
+    d="M16.5 16.5H11H9.37046C8.79521 16.5 8.29403 16.8921 8.15566 17.4505L8.14174 17.5067C7.93847 18.3269 7.27583 18.9534 6.44553 19.1105C5.89708 19.2142 5.5 19.6934 5.5 20.2516V21.75V27.5V39V61.5H16.5V16.5Z"
+    stroke="#D3D3D3"
+  />
+  <path
+    d="M16.5 16.5H11H9.37046C8.79521 16.5 8.29403 16.8921 8.15566 17.4505L8.14174 17.5067C7.93847 18.3269 7.27583 18.9534 6.44553 19.1105C5.89708 19.2142 5.5 19.6934 5.5 20.2516V21.75V27.5V39V61.5H16.5V16.5Z"
+    stroke="black"
+    stroke-opacity="0.4"
+  />
+  <path
+    d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"
+    fill="#1A7CC1"
+  />
+  <path
+    d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"
+    fill="url(#paint1_linear_5310_64471)"
+    fill-opacity="0.2"
+  />
+  <path
+    d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"
+    stroke="#D3D3D3"
+  />
+  <path
+    d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"
+    stroke="black"
+    stroke-opacity="0.4"
+  />
+  <rect
+    x="-0.5"
+    y="0.5"
+    width="11"
+    height="45"
+    transform="matrix(-1 0 0 1 27 16)"
+    fill="#D0DFE5"
+  />
+  <rect
+    x="-0.5"
+    y="0.5"
+    width="11"
+    height="45"
+    transform="matrix(-1 0 0 1 27 16)"
+    fill="url(#paint2_linear_5310_64471)"
+    fill-opacity="0.2"
+  />
+  <rect
+    x="-0.5"
+    y="0.5"
+    width="11"
+    height="45"
+    transform="matrix(-1 0 0 1 27 16)"
+    stroke="#D3D3D3"
+  />
+  <rect
+    x="-0.5"
+    y="0.5"
+    width="11"
+    height="45"
+    transform="matrix(-1 0 0 1 27 16)"
+    stroke="black"
+    stroke-opacity="0.4"
+  />
+  <defs>
+    <filter
+      id="filter0_d_5310_64471"
+      x="2"
+      y="0"
+      width="40"
+      height="67"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="2" />
+      <feGaussianBlur stdDeviation="2" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0.195003 0 0 0 0 0.0133398 0 0 0 0 0.0133398 0 0 0 0.66 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_5310_64471"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_5310_64471"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter1_f_5310_64471"
+      x="30.45"
+      y="2.14995"
+      width="8.0502"
+      height="23"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feGaussianBlur
+        stdDeviation="1.15"
+        result="effect1_foregroundBlur_5310_64471"
+      />
+    </filter>
+    <filter
+      id="filter2_f_5310_64471"
+      x="0"
+      y="13"
+      width="44"
+      height="53"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feGaussianBlur
+        stdDeviation="2"
+        result="effect1_foregroundBlur_5310_64471"
+      />
+    </filter>
+    <linearGradient
+      id="paint0_linear_5310_64471"
+      x1="11"
+      y1="16"
+      x2="11"
+      y2="62"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-opacity="0" />
+      <stop offset="1" />
+    </linearGradient>
+    <linearGradient
+      id="paint1_linear_5310_64471"
+      x1="33"
+      y1="16"
+      x2="33"
+      y2="62"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="white" />
+      <stop offset="1" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient
+      id="paint2_linear_5310_64471"
+      x1="6"
+      y1="0"
+      x2="6"
+      y2="46"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#FFF8F8" stop-opacity="0" />
+      <stop offset="1" />
+    </linearGradient>
+  </defs>
+</svg>`;
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-dense-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-dense-menu.ts
@@ -1,5 +1,5 @@
 import { menu } from '@blocksuite/affine-components/context-menu';
-import { FrameIcon } from '@blocksuite/affine-components/icons';
+import { FrameIcon } from '@blocksuite/icons/lit';

 import type { DenseMenuBuilder } from '../common/type.js';
 import { FrameConfig } from './config.js';
@@ -7,7 +7,7 @@ import { FrameConfig } from './config.js';
 export const buildFrameDenseMenu: DenseMenuBuilder = edgeless =>
  menu.subMenu({
    name: 'Frame',
-    prefix: FrameIcon,
+    prefix: FrameIcon({ width: '20px', height: '20px' }),
    select: () => edgeless.gfx.tool.setTool({ type: 'frame' }),
    isSelected: edgeless.gfx.tool.currentToolName$.peek() === 'frame',
    options: {
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-tool-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/frame/frame-tool-button.ts
@@ -1,10 +1,6 @@
-import {
-  ArrowUpIcon,
-  LargeFrameIcon,
-} from '@blocksuite/affine-components/icons';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
+import { FrameIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';

 import { getTooltipWithShortcut } from '../../../components/utils.js';
 import { QuickToolMixin } from '../mixins/quick-tool.mixin.js';
@@ -14,13 +10,6 @@ export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) {
    :host {
      display: flex;
    }
-
-    .arrow-up-icon {
-      position: absolute;
-      top: 4px;
-      right: 2px;
-      font-size: 0;
-    }
  `;

  override type: GfxToolsFullOptionValue['type'] = 'frame';
@@ -34,13 +23,12 @@ export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) {

  override render() {
    const type = this.edgelessTool?.type;
-    const arrowColor =
-      type === 'frame' ? 'currentColor' : 'var(--affine-icon-secondary)';
    return html`
      <edgeless-tool-icon-button
        class="edgeless-frame-button"
        .tooltip=${this.popper ? '' : getTooltipWithShortcut('Frame', 'F')}
        .tooltipOffset=${17}
+        .iconSize=${'24px'}
        .active=${type === 'frame'}
        .iconContainerPadding=${6}
        @click=${() => {
@@ -49,10 +37,8 @@ export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) {
          this.setEdgelessTool({ type: 'frame' });
        }}
      >
-        ${LargeFrameIcon}
-        <span class="arrow-up-icon" style=${styleMap({ color: arrowColor })}>
-          ${ArrowUpIcon}
-        </span>
+        ${FrameIcon()}
+        <toolbar-arrow-up-icon></toolbar-arrow-up-icon>
      </edgeless-tool-icon-button>
    `;
  }
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/icons.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/icons.ts
@@ -0,0 +1,71 @@
+import { html } from 'lit';
+
+export const LassoFreeHandIcon = html`
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.03152 18.9667C8.07902 18.9667 8.92819 18.1175 8.92819 17.07C8.92819 16.0225 8.07902 15.1733 7.03152 15.1733C5.98402 15.1733 5.13485 16.0225 5.13485 17.07C5.13485 18.1175 5.98402 18.9667 7.03152 18.9667ZM7.03152 20.2667C8.79699 20.2667 10.2282 18.8355 10.2282 17.07C10.2282 15.3045 8.79699 13.8733 7.03152 13.8733C5.26605 13.8733 3.83485 15.3045 3.83485 17.07C3.83485 18.8355 5.26605 20.2667 7.03152 20.2667Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.75714 19.6175C4.75714 19.3949 4.81661 19.145 4.93113 18.856C5.02405 18.6215 5.30218 18.5315 5.52776 18.6442C5.75334 18.757 5.83848 19.0293 5.75223 19.2663C5.68785 19.4432 5.67047 19.5529 5.67047 19.6175C5.67047 19.6727 5.67683 19.6824 5.71909 19.7205C5.74837 19.7468 5.77881 19.7695 5.82813 19.8062C5.8416 19.8162 5.85647 19.8273 5.87312 19.8398C5.94101 19.8907 6.03269 19.9615 6.119 20.0543C6.31218 20.2619 6.44109 20.5388 6.44109 20.9276C6.44109 21.3166 6.3093 21.6272 6.02789 21.8443C5.80114 22.0192 5.50339 22.1052 5.27045 22.1724C5.26524 22.1739 5.26006 22.1754 5.25492 22.1769C5.24264 22.1804 5.23031 22.184 5.21794 22.1876C4.8171 22.3032 4.37177 22.4316 3.91148 22.7773C3.70983 22.9288 3.42276 22.9326 3.24443 22.7542C3.06609 22.5759 3.06453 22.2842 3.26124 22.1263C3.89506 21.6177 4.50962 21.4409 4.94956 21.3144C4.96714 21.3093 4.98443 21.3044 5.00143 21.2994C5.28007 21.2189 5.40217 21.1735 5.47003 21.1211C5.471 21.1204 5.47202 21.1196 5.47311 21.1188C5.49238 21.1045 5.52776 21.0781 5.52776 20.9276C5.52776 20.7684 5.48543 20.7141 5.45027 20.6763C5.42241 20.6464 5.38566 20.6159 5.32511 20.5705C5.31683 20.5642 5.30753 20.5574 5.29743 20.5499C5.24552 20.5114 5.17247 20.4573 5.1081 20.3994C4.92203 20.2319 4.75714 19.9905 4.75714 19.6175Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.2086 12.6149C11.9968 11.7531 12.903 11.0458 13.6876 11.4606L22.0945 15.905C22.9737 16.3698 22.7465 17.6876 21.7625 17.8313L17.8897 18.3968C17.8383 18.4043 17.7946 18.4384 17.7749 18.4867L16.3978 21.8656C16.0219 22.7881 14.685 22.6903 14.4473 21.7229L12.2086 12.6149ZM13.2757 12.2397C13.1636 12.1804 13.0342 12.2815 13.0644 12.4046L15.3031 21.5126C15.3371 21.6508 15.528 21.6648 15.5817 21.533L16.9588 18.1541C17.0963 17.8167 17.402 17.5773 17.7624 17.5247L21.6352 16.9593C21.7758 16.9388 21.8082 16.7505 21.6826 16.6841L13.2757 12.2397Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M19.1489 14.9806C20.1975 13.7474 20.8015 12.2466 20.8015 10.6767C20.8015 6.775 17.0709 3.3 12.0549 3.3C7.03878 3.3 3.30818 6.775 3.30818 10.6767C3.30818 12.1636 3.85 13.5886 4.7983 14.7828C4.47298 15.1005 4.21518 15.4871 4.04843 15.9189C2.76805 14.4626 2.00818 12.6463 2.00818 10.6767C2.00818 5.88468 6.50623 2 12.0549 2C17.6035 2 22.1015 5.88468 22.1015 10.6767C22.1015 12.4784 21.4656 14.1519 20.3771 15.5389L19.1489 14.9806ZM13.9695 17.8785C13.3575 17.9927 12.7174 18.0534 12.0549 18.0534C11.3871 18.0534 10.7422 17.9918 10.1258 17.8758C10.0103 18.3206 9.80141 18.7278 9.52133 19.0751C10.3307 19.2567 11.1797 19.3533 12.0549 19.3533C12.8212 19.3533 13.5675 19.2793 14.2846 19.1389L13.9695 17.8785Z"
+      fill="currentColor"
+    />
+  </svg>
+`;
+
+export const LassoPolygonalIcon = html`
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.1538 12.3949C11.9419 11.533 12.8482 10.8257 13.6328 11.2405L22.0397 15.6849C22.9188 16.1497 22.6917 17.4676 21.7077 17.6112L17.8349 18.1767C17.7834 18.1842 17.7397 18.2184 17.7201 18.2666L16.343 21.6455C15.967 22.568 14.6302 22.4703 14.3924 21.5029L12.1538 12.3949ZM13.2209 12.0196C13.1088 11.9604 12.9793 12.0614 13.0096 12.1845L15.2482 21.2926C15.2822 21.4308 15.4732 21.4447 15.5269 21.3129L16.9039 17.934C17.0414 17.5967 17.3471 17.3573 17.7076 17.3047L21.5804 16.7393C21.7209 16.7187 21.7534 16.5304 21.6278 16.4641L13.2209 12.0196Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.11 18.9667C10.1575 18.9667 11.0067 18.1175 11.0067 17.07C11.0067 16.0225 10.1575 15.1733 9.11 15.1733C8.0625 15.1733 7.21333 16.0225 7.21333 17.07C7.21333 18.1175 8.0625 18.9667 9.11 18.9667ZM9.11 20.2667C10.8755 20.2667 12.3067 18.8355 12.3067 17.07C12.3067 15.3045 10.8755 13.8733 9.11 13.8733C7.34453 13.8733 5.91333 15.3045 5.91333 17.07C5.91333 18.8355 7.34453 20.2667 9.11 20.2667Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20.15 1.78546V12.8479L18.2895 14.0882L17.0275 13.3671L18.85 12.1521V4.21453L10.565 9.7379L3.78505 6.77169L7.24943 14.4703C6.85977 14.7497 6.5355 15.1145 6.30404 15.5374L1.21497 4.22831L10.4351 8.26209L20.15 1.78546ZM12.0942 18.2184L13.8336 17.0588L13.443 15.7568L12.2635 16.5431C12.2919 16.7146 12.3067 16.8905 12.3067 17.07C12.3067 17.4748 12.2315 17.862 12.0942 18.2184Z"
+      fill="currentColor"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.83562 19.6175C6.83562 19.3949 6.89509 19.145 7.00962 18.856C7.10254 18.6215 7.38066 18.5314 7.60625 18.6442C7.83183 18.757 7.91697 19.0293 7.83072 19.2663C7.76634 19.4432 7.74896 19.5529 7.74896 19.6175C7.74896 19.6726 7.75531 19.6824 7.79757 19.7204C7.82686 19.7468 7.8573 19.7695 7.90662 19.8062C7.92009 19.8162 7.93496 19.8273 7.9516 19.8398C8.0195 19.8907 8.11118 19.9615 8.19749 20.0542C8.39066 20.2619 8.51958 20.5387 8.51958 20.9276C8.51958 21.3165 8.38779 21.6272 8.10638 21.8443C7.87962 22.0192 7.58188 22.1051 7.34894 22.1724C7.34373 22.1739 7.33855 22.1754 7.33341 22.1769C7.32112 22.1804 7.3088 22.184 7.29643 22.1875C6.89559 22.3031 6.45026 22.4316 5.98997 22.7773C5.78832 22.9288 5.50125 22.9326 5.32291 22.7542C5.14457 22.5759 5.14302 22.2841 5.33973 22.1263C5.97355 21.6177 6.58811 21.4409 7.02805 21.3144C7.04562 21.3093 7.06292 21.3043 7.07992 21.2994C7.35856 21.2189 7.48065 21.1735 7.54851 21.1211C7.54948 21.1204 7.55051 21.1196 7.55159 21.1188C7.57087 21.1044 7.60625 21.0781 7.60625 20.9276C7.60625 20.7684 7.56391 20.7141 7.52876 20.6763C7.5009 20.6464 7.46415 20.6158 7.4036 20.5704C7.39532 20.5642 7.38602 20.5573 7.37592 20.5498C7.324 20.5114 7.25095 20.4573 7.18659 20.3993C7.00052 20.2319 6.83562 19.9905 6.83562 19.6175Z"
+      fill="currentColor"
+    />
+  </svg>
+`;
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-dense-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-dense-menu.ts
@@ -1,11 +1,8 @@
 import { menu } from '@blocksuite/affine-components/context-menu';
-import {
-  LassoFreeHandIcon,
-  LassoPolygonalIcon,
-} from '@blocksuite/affine-components/icons';
 import { LassoMode } from '@blocksuite/affine-shared/types';

 import type { DenseMenuBuilder } from '../common/type.js';
+import { LassoFreeHandIcon, LassoPolygonalIcon } from './icons.js';

 export const buildLassoDenseMenu: DenseMenuBuilder = edgeless => {
  // TODO: active state
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-tool-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/lasso/lasso-tool-button.ts
@@ -1,17 +1,12 @@
-import {
-  ArrowUpIcon,
-  LassoFreeHandIcon,
-  LassoPolygonalIcon,
-} from '@blocksuite/affine-components/icons';
 import { LassoMode } from '@blocksuite/affine-shared/types';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { effect } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { query, state } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';

 import { getTooltipWithShortcut } from '../../utils.js';
 import { QuickToolMixin } from '../mixins/quick-tool.mixin.js';
+import { LassoFreeHandIcon, LassoPolygonalIcon } from './icons.js';

 export class EdgelessLassoToolButton extends QuickToolMixin(
  WithDisposable(LitElement)
@@ -25,12 +20,6 @@ export class EdgelessLassoToolButton extends QuickToolMixin(
    .current-icon > svg {
      display: block;
    }
-    .arrow-up-icon {
-      position: absolute;
-      top: 4px;
-      right: 2px;
-      font-size: 0;
-    }
  `;

  private readonly _changeTool = () => {
@@ -80,8 +69,6 @@ export class EdgelessLassoToolButton extends QuickToolMixin(
    const type = this.edgelessTool?.type;
    const mode = this.curMode === LassoMode.FreeHand ? 'freehand' : 'polygonal';

-    const arrowColor =
-      type === 'lasso' ? 'currentColor' : 'var(--affine-icon-secondary)';
    return html`
      <edgeless-tool-icon-button
        class="edgeless-lasso-button ${mode}"
@@ -89,6 +76,7 @@ export class EdgelessLassoToolButton extends QuickToolMixin(
        .tooltipOffset=${17}
        .active=${type === 'lasso'}
        .iconContainerPadding=${6}
+        .iconSize=${'24px'}
        @click=${this._changeTool}
      >
        <span class="current-icon">
@@ -96,9 +84,7 @@ export class EdgelessLassoToolButton extends QuickToolMixin(
            ? LassoFreeHandIcon
            : LassoPolygonalIcon}
        </span>
-        <span class="arrow-up-icon" style=${styleMap({ color: arrowColor })}>
-          ${ArrowUpIcon}
-        </span>
+        <toolbar-arrow-up-icon></toolbar-arrow-up-icon>
      </edgeless-tool-icon-button>
    `;
  }
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts
@@ -1,9 +1,8 @@
-import { ArrowUpIcon, NoteIcon } from '@blocksuite/affine-components/icons';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
+import { PageIcon } from '@blocksuite/icons/lit';
 import { effect } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { state } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';

 import { getTooltipWithShortcut } from '../../../components/utils.js';
 import type { NoteToolOption } from '../../../gfx-tool/note-tool.js';
@@ -16,13 +15,6 @@ export class EdgelessNoteToolButton extends QuickToolMixin(LitElement) {
    :host {
      display: flex;
    }
-
-    .arrow-up-icon {
-      position: absolute;
-      top: 4px;
-      right: 2px;
-      font-size: 0;
-    }
  `;

  private _noteMenu: MenuPopper<EdgelessNoteMenu> | null = null;
@@ -93,7 +85,6 @@ export class EdgelessNoteToolButton extends QuickToolMixin(LitElement) {

  override render() {
    const { active } = this;
-    const arrowColor = active ? 'currentColor' : 'var(--affine-icon-secondary)';
    return html`
      <edgeless-tool-icon-button
        class="edgeless-note-button"
@@ -101,14 +92,13 @@ export class EdgelessNoteToolButton extends QuickToolMixin(LitElement) {
        .tooltipOffset=${17}
        .active=${active}
        .iconContainerPadding=${6}
+        .iconSize=${'24px'}
        @click=${() => {
          this._toggleNoteMenu();
        }}
      >
-        ${NoteIcon}
-        <span class="arrow-up-icon" style=${styleMap({ color: arrowColor })}>
-          ${ArrowUpIcon}
-        </span>
+        ${PageIcon()}
+        <toolbar-arrow-up-icon></toolbar-arrow-up-icon>
      </edgeless-tool-icon-button>
    `;
  }
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/frame-order-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/frame-order-button.ts
@@ -1,7 +1,7 @@
-import { FrameOrderAdjustmentIcon } from '@blocksuite/affine-components/icons';
 import type { FrameBlockModel } from '@blocksuite/affine-model';
 import { createButtonPopper } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
+import { LayerIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';

@@ -49,6 +49,7 @@ export class EdgelessFrameOrderButton extends WithDisposable(LitElement) {
      </style>
      <edgeless-tool-icon-button
        class="edgeless-frame-order-button"
+        .iconSize=${'24px'}
        .tooltip=${this.popperShow ? '' : 'Frame Order'}
        @click=${() => {
          if (readonly) return;
@@ -56,7 +57,7 @@ export class EdgelessFrameOrderButton extends WithDisposable(LitElement) {
        }}
        .iconContainerPadding=${0}
      >
-        ${FrameOrderAdjustmentIcon}
+        ${LayerIcon()}
      </edgeless-tool-icon-button>
      <edgeless-frame-order-menu .edgeless=${this.edgeless}>
      </edgeless-frame-order-menu>
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/navigator-setting-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/navigator-setting-button.ts
@@ -1,7 +1,7 @@
-import { NavigatorSettingsIcon } from '@blocksuite/affine-components/icons';
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
 import { createButtonPopper } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
+import { SettingsIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';

@@ -111,12 +111,13 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
      <edgeless-tool-icon-button
        class="navigator-setting-button"
        .tooltip=${this.popperShow ? '' : 'Settings'}
+        .iconSize=${'24px'}
        @click=${() => {
          this._navigatorSettingPopper?.toggle();
        }}
        .iconContainerPadding=${0}
      >
-        ${NavigatorSettingsIcon}
+        ${SettingsIcon()}
      </edgeless-tool-icon-button>

      <div
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/present-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/present/present-button.ts
@@ -1,5 +1,5 @@
-import { FrameNavigatorIcon } from '@blocksuite/affine-components/icons';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
+import { PresentationIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement } from 'lit';

 import { QuickToolMixin } from '../mixins/quick-tool.mixin.js';
@@ -16,12 +16,6 @@ export class EdgelessPresentButton extends QuickToolMixin(
      display: flex;
      position: relative;
    }
-    .arrow-up-icon {
-      position: absolute;
-      top: 4px;
-      right: 2px;
-      font-size: 0;
-    }
  `;

  override type: GfxToolsFullOptionValue['type'] = 'frameNavigator';
@@ -32,13 +26,14 @@ export class EdgelessPresentButton extends QuickToolMixin(
    .tooltip=${'Present'}
    .tooltipOffset=${17}
    .iconContainerPadding=${6}
+    .iconSize=${'24px'}
    @click=${() => {
      this.setEdgelessTool({
        type: 'frameNavigator',
      });
    }}
  >
-    ${FrameNavigatorIcon}
+    ${PresentationIcon()}
    </edgeless-tool-icon-button>
  </div>`;
  }
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts
@@ -1,15 +1,15 @@
-import {
-  FrameNavigatorNextIcon,
-  FrameNavigatorPrevIcon,
-  NavigatorExitFullScreenIcon,
-  NavigatorFullScreenIcon,
-  StopAIIcon,
-} from '@blocksuite/affine-components/icons';
 import { toast } from '@blocksuite/affine-components/toast';
 import type { FrameBlockModel } from '@blocksuite/affine-model';
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { Bound, clamp, SignalWatcher } from '@blocksuite/global/utils';
+import {
+  EndPointArrowIcon,
+  ExpandCloseIcon,
+  ExpandFullIcon,
+  StartPointArrowIcon,
+  StopAiIcon,
+} from '@blocksuite/icons/lit';
 import { effect } from '@preact/signals-core';
 import { cssVar } from '@toeverything/theme';
 import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
@@ -83,6 +83,9 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(

      svg {
        display: block;
+        width: 24px;
+        height: 24px;
+        color: white;
      }
    }
    .edgeless-frame-navigator-stop::before {
@@ -325,9 +328,10 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
      <edgeless-tool-icon-button
        .iconContainerPadding=${0}
        .tooltip=${'Previous'}
+        .iconSize=${'24px'}
        @click=${() => this._previousFrame()}
      >
-        ${FrameNavigatorPrevIcon}
+        ${StartPointArrowIcon()}
      </edgeless-tool-icon-button>

      <div class="edgeless-frame-navigator ${this.dense ? 'dense' : ''}">
@@ -350,8 +354,9 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
        .tooltip=${'Next'}
        @click=${() => this._nextFrame()}
        .iconContainerPadding=${0}
+        .iconSize=${'24px'}
      >
-        ${FrameNavigatorNextIcon}
+        ${EndPointArrowIcon()}
      </edgeless-tool-icon-button>

      <div class="full-divider"></div>
@@ -364,10 +369,9 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
          @click=${() => this._toggleFullScreen()}
          .iconContainerPadding=${0}
          .iconContainerWidth=${'24px'}
+          .iconSize=${'24px'}
        >
-          ${document.fullscreenElement
-            ? NavigatorExitFullScreenIcon
-            : NavigatorFullScreenIcon}
+          ${document.fullscreenElement ? ExpandCloseIcon() : ExpandFullIcon()}
        </edgeless-tool-icon-button>

        ${this.dense
@@ -399,7 +403,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
        @click=${this._exitPresentation}
        style="background: ${cssVar('warningColor')}"
      >
-        ${StopAIIcon}
+        ${StopAiIcon()}
      </button>
    `;
  }
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/icons.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/icons.ts
@@ -0,0 +1,255 @@
+import { html } from 'lit';
+
+export const ScribbledSquareIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.45993 3.83639C2.64271 3.81446 2.80866 3.94487 2.83059 4.12765C2.92285 4.89681 3.01537 5.61006 3.10321 6.28727C3.55933 9.80379 3.88941 12.3486 3.40424 16.7043C3.38386 16.8872 3.21901 17.019 3.03605 16.9986C2.85309 16.9783 2.72129 16.8134 2.74167 16.6304C3.21749 12.3587 2.89776 9.89136 2.44329 6.38415C2.3552 5.70441 2.26206 4.98561 2.16867 4.20705C2.14674 4.02427 2.27714 3.85832 2.45993 3.83639Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M14.6788 16.6731C13.5378 16.6615 12.1261 16.6616 11.0279 16.7078C9.45128 16.7741 7.43455 16.9812 5.80651 17.1726C4.99366 17.2682 4.27987 17.3596 3.76935 17.4271C3.51411 17.4609 3.30974 17.4887 3.16929 17.508L3.00817 17.5303L2.95355 17.538L2.90588 17.2081L2.85912 16.878L2.91585 16.8701L3.07845 16.8475C3.21994 16.8281 3.42545 16.8001 3.68194 16.7662C4.19488 16.6984 4.91194 16.6066 5.72866 16.5105C7.35976 16.3187 9.39704 16.1091 10.9999 16.0417C12.1163 15.9947 13.5424 15.9948 14.6856 16.0065C15.258 16.0123 15.761 16.0211 16.1209 16.0284C16.3009 16.032 16.4451 16.0353 16.5445 16.0377L16.6586 16.0405L16.6978 16.0415L16.6895 16.3747L16.6805 16.708L16.6416 16.7069L16.5285 16.7042C16.4299 16.7018 16.2865 16.6985 16.1074 16.6949C15.7492 16.6876 15.2485 16.6789 14.6788 16.6731ZM17.0228 16.3837C17.0178 16.5677 16.8646 16.7129 16.6805 16.708L16.6895 16.3747L16.6978 16.0415C16.8819 16.0465 17.0277 16.1997 17.0228 16.3837ZM2.57586 17.2549C2.54999 17.0727 2.67685 16.9039 2.85912 16.878L2.90588 17.2081L2.95355 17.538C2.77128 17.5639 2.60173 17.4372 2.57586 17.2549Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M16.2785 3.00004C16.4626 2.99705 16.6142 3.14384 16.6172 3.32791L16.2839 3.33333L15.9506 3.33875C15.9476 3.15468 16.0944 3.00304 16.2785 3.00004ZM15.8785 17.5L15.5461 17.4759L15.5604 17.2746C15.5695 17.1442 15.5827 16.9546 15.5988 16.7179C15.631 16.2445 15.6746 15.5827 15.7206 14.8294C15.8126 13.3217 15.9136 11.4516 15.9507 9.99154C15.9836 8.69575 15.9836 7.03343 15.9754 5.69274C15.9712 5.02289 15.9651 4.43425 15.9599 4.01309C15.9573 3.80252 15.955 3.63385 15.9533 3.51786L15.9506 3.33875L16.2839 3.33333L16.6172 3.32791L16.6199 3.50823C16.6216 3.62466 16.6239 3.79382 16.6265 4.00493C16.6317 4.42711 16.6379 5.01714 16.642 5.68864C16.6503 7.03063 16.6503 8.70165 16.6171 10.0085C16.5797 11.4809 16.4781 13.3608 16.386 14.87C16.3399 15.6251 16.2962 16.2885 16.2639 16.7631C16.2478 17.0004 16.2346 17.1905 16.2254 17.3214L16.211 17.5232L15.8785 17.5ZM15.8785 17.5L15.5461 17.4759C15.5327 17.6595 15.6708 17.8192 15.8544 17.8325C16.038 17.8458 16.1977 17.7077 16.211 17.5241L15.8785 17.5Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17.8222 4.25378L17.8204 4.26045L17.8149 4.2812L17.7936 4.36248C17.7751 4.43352 17.7485 4.53713 17.7161 4.66674C17.6512 4.92604 17.5634 5.28896 17.4713 5.70299C17.2862 6.53525 17.0878 7.55848 17.0216 8.36138C16.9302 9.47192 16.9847 10.3393 17.0561 11.223C17.0633 11.3116 17.0706 11.4004 17.078 11.4898C17.1443 12.2918 17.2137 13.1322 17.1847 14.1766C17.1687 14.7528 17.1279 15.4868 17.0913 16.0741C17.073 16.3683 17.0556 16.6267 17.0429 16.8116C17.0365 16.9041 17.0312 16.9782 17.0276 17.0292L17.0219 17.1081L16.6894 17.084L16.357 17.0596L16.3626 16.9817C16.3662 16.9312 16.3714 16.8576 16.3778 16.7657C16.3905 16.5819 16.4077 16.325 16.4259 16.0326C16.4624 15.4467 16.5027 14.7223 16.5183 14.1581C16.5462 13.1522 16.4798 12.3467 16.4135 11.5437C16.4062 11.4547 16.3988 11.3658 16.3916 11.2767C16.3193 10.3821 16.2613 9.47185 16.3572 8.30666C16.4273 7.45607 16.6342 6.39597 16.8205 5.55827C16.9141 5.13732 17.0034 4.7686 17.0693 4.50502C17.1023 4.37318 17.1294 4.26753 17.1484 4.19467L17.1704 4.11077L17.1762 4.08879L17.1781 4.08154C17.2259 3.90374 17.4089 3.79769 17.5867 3.84542C17.7645 3.89315 17.8699 4.07598 17.8222 4.25378ZM16.6894 17.084L16.357 17.0596C16.3435 17.2432 16.4814 17.403 16.665 17.4165C16.8486 17.4299 17.0084 17.2917 17.0219 17.1081L16.6894 17.084Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.17283 3.02528C2.20726 2.84434 2.38177 2.72526 2.5626 2.75931L2.50025 3.08692L2.43789 3.41454C2.25707 3.38049 2.13839 3.20622 2.17283 3.02528ZM16.7595 4.58093L16.7545 4.91426L16.7174 4.91377L16.6111 4.91221C16.5186 4.9108 16.3842 4.9086 16.2166 4.90547C15.8815 4.89921 15.4131 4.88922 14.8802 4.87428C13.8159 4.84446 12.4887 4.79477 11.451 4.71525C9.67135 4.57888 7.41581 4.25301 5.61119 3.96257C4.70758 3.81715 3.91464 3.68021 3.34754 3.57961C3.06396 3.52931 2.83678 3.48809 2.68039 3.45942C2.60219 3.44508 2.54168 3.43388 2.50067 3.42626L2.43789 3.41454C2.43784 3.41453 2.43789 3.41454 2.50025 3.08692L2.5626 2.75931L2.62388 2.77075C2.66438 2.77828 2.72434 2.78937 2.80196 2.80361C2.95722 2.83207 3.18314 2.87307 3.46534 2.92312C4.0298 3.02325 4.81916 3.15957 5.7185 3.30431C7.51977 3.59421 9.75269 3.91632 11.5034 4.05047C12.5242 4.1287 13.8381 4.17805 14.9003 4.20782C15.4307 4.22268 15.8969 4.23263 16.2305 4.23886C16.3973 4.24197 16.5309 4.24416 16.6228 4.24556L16.7281 4.24711L16.7638 4.24758L16.7595 4.58093ZM16.7595 4.58093L16.7545 4.91426C16.9386 4.91657 17.09 4.76919 17.0927 4.5851C17.0954 4.401 16.9479 4.24989 16.7638 4.24758L16.7595 4.58093Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.28443 2.99528C6.67178 2.78395 8.41647 2.57209 9.79924 2.58239C11.1018 2.59209 12.7438 2.80384 14.0493 3.01027C14.7044 3.11385 15.2791 3.21681 15.6901 3.29389C15.8957 3.33244 16.0604 3.36454 16.174 3.38705C16.2308 3.3983 16.2747 3.40715 16.3046 3.41322L16.3387 3.42017L16.3499 3.42246C16.3499 3.42247 16.3508 3.42264 16.2832 3.74905L16.2156 4.07546L16.2049 4.07326L16.1721 4.06658C16.1432 4.06071 16.1001 4.05205 16.0444 4.041C15.9328 4.01889 15.7703 3.98723 15.5672 3.94914C15.1609 3.87294 14.5926 3.77113 13.9452 3.66876C12.6456 3.46327 11.0445 3.25835 9.79428 3.24904C8.46713 3.23916 6.7659 3.44397 5.38482 3.65435C4.69677 3.75916 4.09275 3.86462 3.66085 3.94386C3.44495 3.98348 3.2722 4.01651 3.15363 4.0396C3.09434 4.05115 3.04861 4.0602 3.01781 4.06635L2.98298 4.07334L2.97218 4.07553L2.90493 3.74905C2.83827 3.42245 2.83831 3.42244 2.83836 3.42243L2.85104 3.41986L2.8873 3.41259C2.91908 3.40624 2.96584 3.39698 3.0262 3.38523C3.1469 3.36172 3.32204 3.32823 3.54054 3.28814C3.97744 3.20798 4.58826 3.10133 5.28443 2.99528ZM2.90493 3.74905L2.83836 3.42243C2.65798 3.45925 2.54151 3.63533 2.57833 3.81571C2.61514 3.99608 2.7918 4.11234 2.97218 4.07553L2.90493 3.74905ZM16.6096 3.81662C16.5723 3.99689 16.3959 4.11278 16.2156 4.07546L16.2832 3.74905L16.3508 3.42264C16.531 3.45996 16.6469 3.63635 16.6096 3.81662Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3.28464 4.25107C3.46815 4.23644 3.62878 4.37334 3.64341 4.55685L3.31113 4.58335L2.97886 4.60985C2.96422 4.42634 3.10112 4.26571 3.28464 4.25107ZM4.12194 17.0834L3.78903 17.1002L3.77925 16.9095C3.77288 16.7861 3.76358 16.6067 3.75184 16.3828C3.72836 15.9349 3.69511 15.3089 3.65607 14.5966C3.57795 13.1716 3.47669 11.4024 3.38395 10.0224C3.31295 8.96574 3.2117 7.61287 3.12814 6.52347C3.08637 5.97892 3.04905 5.50047 3.02217 5.15816L2.97886 4.60985L3.31113 4.58335L3.64341 4.55685L3.68679 5.10597C3.71369 5.44858 3.75105 5.92744 3.79285 6.47249C3.87644 7.56228 3.97789 8.91775 4.04912 9.97767C4.14215 11.362 4.24359 13.1346 4.32174 14.5601C4.36082 15.2731 4.39409 15.8996 4.41759 16.3479C4.42935 16.572 4.43866 16.7516 4.44503 16.8752L4.4548 17.0656L4.12194 17.0834ZM4.12194 17.0834L3.78903 17.1002C3.79838 17.2841 3.95501 17.4256 4.13887 17.4163C4.32272 17.4069 4.46415 17.2495 4.4548 17.0656L4.12194 17.0834Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.60257 16.7254C6.90834 16.7169 8.53454 16.7169 9.80648 16.751C11.2396 16.7895 13.0691 16.894 14.5375 16.9886C15.2723 17.036 15.9178 17.0809 16.3797 17.1141C16.6106 17.1306 16.7956 17.1442 16.923 17.1537L17.1194 17.1685L17.0948 17.5009L17.0693 17.8333L16.8735 17.8185C16.7467 17.8091 16.5623 17.7956 16.332 17.779C15.8714 17.746 15.2275 17.7011 14.4947 17.6539C13.0278 17.5594 11.2086 17.4555 9.78861 17.4174C8.52831 17.3836 6.91129 17.3836 5.60691 17.3921C4.95524 17.3963 4.38257 17.4027 3.97284 17.408C3.76798 17.4106 3.60389 17.413 3.49105 17.4147L3.31753 17.4175L3.31112 17.0842L3.30545 16.7509L3.48089 16.7481C3.59419 16.7464 3.7588 16.744 3.96421 16.7414C4.37503 16.7361 4.94916 16.7297 5.60257 16.7254ZM3.31112 17.0842L3.30545 16.7509C3.12138 16.7541 2.97467 16.9059 2.97783 17.09C2.981 17.274 3.13346 17.4207 3.31753 17.4175L3.31112 17.0842ZM17.4271 17.5263C17.4131 17.7099 17.2529 17.8473 17.0693 17.8333L17.0948 17.5009L17.1202 17.1685C17.3038 17.1826 17.4412 17.3428 17.4271 17.5263Z"
+  />
+</svg>`;
+
+export const ScribbledEllipseIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.55739 3.93568C7.46902 0.8947 12.2002 1.1564 15.2608 3.91876C16.5142 5.04996 17.2816 6.49066 17.5878 8.01768C18.0083 8.94994 18.234 9.92054 18.249 10.8891C18.2779 12.7636 17.5162 14.6002 15.9043 16.0977C14.392 17.5028 12.5814 18.2375 10.7098 18.2491C9.97219 18.2537 9.22899 18.146 8.49453 17.9255C6.64295 17.767 4.87334 16.9658 3.58343 15.4367C1.676 13.1755 1.2832 10.344 2.28148 7.79433C2.57576 6.38916 3.46976 5.07164 4.55739 3.93568ZM2.42485 10.2275C2.34071 11.9006 2.88716 13.5774 4.093 15.0069C4.3286 15.2861 4.5828 15.5389 4.85254 15.7656C3.68056 14.5772 3.28103 13.0713 3.22018 11.7016C3.04507 11.4605 2.8826 11.214 2.75731 10.9819C2.62124 10.7297 2.51108 10.4781 2.42485 10.2275ZM3.2485 10.4782C2.84526 9.64052 2.76482 8.80019 2.9267 7.97457C3.20512 7.28242 3.59656 6.61183 4.09876 5.98247C6.83382 2.55491 12.419 2.76331 15.4335 6.00168C16.083 6.69948 16.589 7.44767 16.9464 8.21807C17.3965 10.5743 16.656 13.1556 14.8033 14.9846C13.1298 16.6366 10.8047 17.4377 8.61442 17.265C7.6035 16.9502 6.60135 16.3988 5.65306 15.5988C4.68607 14.7829 4.20276 13.7377 4.0001 12.6734C4.13559 12.8295 4.25734 12.9645 4.35215 13.0679C4.41501 13.1364 4.46616 13.1911 4.50176 13.2288L4.54306 13.2724L4.5541 13.2839L4.55706 13.287L4.55788 13.2879C4.6857 13.4204 4.8971 13.4246 5.02959 13.2967C5.16207 13.1689 5.16587 12.9579 5.03807 12.8254C5.03807 12.8254 5.03808 12.8254 5.03807 12.8254L5.03746 12.8248L5.03511 12.8224L5.02535 12.8121L4.98676 12.7714C4.95304 12.7357 4.90399 12.6832 4.84339 12.6172C4.7221 12.485 4.55505 12.2989 4.3723 12.0836C4.21091 11.8934 4.04049 11.6842 3.87965 11.4717C3.87539 11.2461 3.88058 11.0233 3.89318 10.8054C3.9396 10.0027 4.08633 9.28214 4.22199 8.76145C4.2897 8.50157 4.35434 8.29272 4.40167 8.14979C4.42533 8.07836 4.44464 8.02349 4.45781 7.98704C4.4644 7.96882 4.46945 7.95521 4.47274 7.94645L4.47632 7.93698L4.47707 7.93503C4.47705 7.93508 4.47709 7.93498 4.47707 7.93503C4.47705 7.9351 4.4771 7.93496 4.16643 7.81414M12.2502 17.3881C13.3911 17.104 14.4816 16.5096 15.4506 15.6093C16.8479 14.3111 17.5284 12.7623 17.5799 11.1863C17.2636 12.7577 16.4855 14.2608 15.2717 15.459C14.4028 16.3168 13.3632 16.9667 12.2502 17.3881ZM15.4936 5.12111C12.8787 2.70257 8.80143 2.11296 5.76705 3.74252C8.4055 1.71255 12.2223 2.07439 14.8142 4.41366C15.0612 4.63662 15.2876 4.87313 15.4936 5.12111Z"
+  />
+</svg>`;
+
+export const ScribbledDiamondIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M11.1077 1.89441C11.212 2.04607 11.1737 2.25361 11.022 2.35797L11.0139 2.36353L10.9891 2.38073C10.9672 2.39597 10.9346 2.41866 10.8925 2.44821C10.8083 2.50731 10.686 2.59381 10.5341 2.70295C10.2302 2.9213 9.80858 3.22993 9.33796 3.59077C8.39262 4.31558 7.26483 5.23952 6.49268 6.06158C5.75373 6.84829 4.9324 7.97618 4.29023 8.91779C3.97053 9.38655 3.69777 9.80539 3.50499 10.1069C3.40863 10.2577 3.33233 10.379 3.28022 10.4625C3.25417 10.5042 3.23417 10.5364 3.22074 10.5582L3.20559 10.5827L3.20093 10.5903C3.10482 10.7473 2.89938 10.7971 2.74236 10.701C2.58535 10.6049 2.53598 10.3997 2.63209 10.2427L2.63771 10.2335L2.65361 10.2077C2.66756 10.1852 2.6881 10.152 2.71472 10.1094C2.76796 10.0241 2.84553 9.90079 2.94329 9.74786C3.13876 9.4421 3.41522 9.01758 3.73945 8.54216C4.38514 7.5954 5.23047 6.43162 6.00676 5.60515C6.81794 4.74154 7.98182 3.79048 8.93232 3.06171C9.40961 2.69576 9.83695 2.38295 10.1451 2.16156C10.2992 2.05083 10.4235 1.96289 10.5096 1.90251C10.5526 1.87232 10.586 1.84901 10.6088 1.83319L10.6349 1.81514L10.6434 1.80924C10.6434 1.80921 10.6441 1.80876 10.8331 2.08336L10.6441 1.80876C10.7958 1.7044 11.0033 1.74275 11.1077 1.89441Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1.82582 10.6214C1.94287 10.4793 2.15295 10.459 2.29504 10.5761L2.0831 10.8333L1.87116 11.0906C1.72907 10.9736 1.70877 10.7635 1.82582 10.6214ZM9.16643 17.9167L8.90914 18.1286L8.88737 18.1022L8.82364 18.0254C8.768 17.9584 8.68686 17.8611 8.58513 17.7399C8.38164 17.4975 8.09589 17.1598 7.76706 16.7791C7.1079 16.0159 6.28112 15.0861 5.5974 14.4024C4.91367 13.7187 3.98383 12.8919 3.22065 12.2327C2.83993 11.9039 2.5023 11.6181 2.25988 11.4146C2.1387 11.3129 2.04135 11.2318 1.97438 11.1761L1.89753 11.1124L1.87116 11.0906L2.0831 10.8333L2.29504 10.5761L2.32245 10.5987L2.40042 10.6634C2.46817 10.7197 2.56638 10.8015 2.68852 10.904C2.93274 11.1091 3.27283 11.3969 3.65642 11.7282C4.42187 12.3893 5.36702 13.2292 6.0688 13.931C6.77058 14.6328 7.61046 15.5779 8.27159 16.3434C8.60291 16.7269 8.89072 17.067 9.09574 17.3113C9.19826 17.4334 9.28012 17.5316 9.33641 17.5993L9.40107 17.6773L9.4233 17.7042L9.16643 17.9167ZM9.16643 17.9167L8.90914 18.1286C9.0262 18.2707 9.23628 18.291 9.37837 18.174C9.52046 18.0569 9.54035 17.8463 9.4233 17.7042L9.16643 17.9167Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17.6976 10.1657C17.8365 10.045 18.0471 10.0597 18.1678 10.1987C18.2886 10.3376 18.2739 10.5481 18.1349 10.6689L17.9162 10.4173L17.6976 10.1657ZM9.99958 17.9173L9.76008 17.6855L9.86002 17.5825C9.9246 17.516 10.0185 17.4195 10.1358 17.2992C10.3704 17.0587 10.6989 16.7232 11.0744 16.343C11.8247 15.5834 12.7652 14.6428 13.52 13.9257C14.3177 13.1677 15.3629 12.2271 16.2067 11.4776C16.629 11.1026 17.0016 10.7747 17.2686 10.5406C17.4022 10.4235 17.5093 10.3299 17.5831 10.2654L17.6976 10.1657L17.9162 10.4173L18.1349 10.6689L18.0215 10.7678C17.948 10.8319 17.8412 10.9252 17.7081 11.0419C17.4419 11.2753 17.0704 11.6022 16.6494 11.9761C15.8066 12.7246 14.7684 13.6591 13.9792 14.409C13.2325 15.1184 12.2981 16.0528 11.5487 16.8115C11.1744 17.1905 10.8469 17.525 10.613 17.7648C10.496 17.8846 10.4025 17.9808 10.3382 18.047L10.2395 18.1487L9.99958 17.9173ZM9.99958 17.9173L9.76008 17.6855C9.63205 17.8178 9.63548 18.0288 9.76777 18.1569C9.90005 18.2849 10.1115 18.281 10.2395 18.1487L9.99958 17.9173Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.86605 1.93879C8.94592 1.77293 9.14513 1.70321 9.31099 1.78308L9.16638 2.08341C9.31099 1.78308 9.31095 1.78306 9.31099 1.78308L9.31301 1.78405L9.31817 1.78655L9.33763 1.79603C9.35457 1.80431 9.37932 1.81647 9.41107 1.83223C9.47457 1.86376 9.56614 1.90976 9.67943 1.9681C9.90588 2.08472 10.2198 2.251 10.57 2.44996C11.2644 2.84444 12.1242 3.37987 12.7228 3.91908C13.7803 4.87171 14.411 5.77009 15.1185 6.77795C15.4184 7.20516 15.7321 7.65205 16.0979 8.13108C16.36 8.47421 16.6824 9.01299 16.9328 9.45249C17.0596 9.67498 17.1707 9.87686 17.2501 10.0231C17.2898 10.0963 17.3217 10.1556 17.3437 10.1968L17.369 10.2444L17.3756 10.257L17.3778 10.2611C17.4636 10.4241 17.4012 10.626 17.2383 10.7117C17.0754 10.7975 16.8738 10.7349 16.7881 10.572C16.7881 10.572 16.7881 10.572 16.7881 10.572L16.7861 10.5682L16.7799 10.5565L16.7555 10.5107C16.7342 10.4708 16.7031 10.4128 16.6642 10.3412C16.5864 10.1978 16.4776 10.0001 16.3536 9.78259C16.1026 9.34207 15.7999 8.83917 15.5681 8.53574C15.1665 8.00993 14.837 7.54007 14.5307 7.10341C13.845 6.12584 13.2759 5.31463 12.2766 4.41441C11.7346 3.92618 10.9278 3.41994 10.2407 3.02962C9.90015 2.83617 9.59455 2.67427 9.37421 2.56079C9.2641 2.50409 9.17545 2.45957 9.11458 2.42934C9.08414 2.41423 9.06066 2.4027 9.04493 2.39501L9.02723 2.38639L9.02293 2.3843L9.02195 2.38383C9.02194 2.38383 9.02196 2.38383 9.02195 2.38383C8.8561 2.30395 8.78618 2.10465 8.86605 1.93879Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10.1351 1.77876C10.3033 1.85355 10.379 2.05054 10.3042 2.21876L9.99966 2.08335C10.3042 2.21876 10.3043 2.21867 10.3042 2.21876L10.3038 2.21976L10.303 2.22152L10.3004 2.2273L10.291 2.24778C10.2828 2.26534 10.2709 2.29066 10.255 2.32333C10.2233 2.38866 10.1759 2.48339 10.1117 2.60425C9.9834 2.84595 9.78793 3.19226 9.51656 3.61699C8.97388 4.46634 8.12722 5.63001 6.90645 6.89788C5.76129 8.08722 4.70343 8.93382 3.92952 9.48433C3.54251 9.75963 3.22631 9.96102 3.00544 10.0943C2.89499 10.161 2.80836 10.2106 2.7486 10.244C2.71871 10.2607 2.69555 10.2733 2.67948 10.2819L2.66074 10.2919L2.65545 10.2947L2.65384 10.2955L2.65309 10.2959C2.65301 10.296 2.65293 10.296 2.49966 10L2.65309 10.2959C2.48961 10.3806 2.2883 10.3168 2.20366 10.1533C2.11903 9.98984 2.18288 9.78875 2.34627 9.70407C2.34623 9.70409 2.34631 9.70405 2.34627 9.70407L2.34968 9.70228L2.36383 9.69474C2.37682 9.68775 2.39686 9.67685 2.42359 9.66193C2.47703 9.63209 2.55716 9.5862 2.66095 9.52356C2.86854 9.39827 3.17066 9.206 3.54309 8.94108C4.28804 8.41117 5.31352 7.5911 6.42621 6.43548C7.61256 5.20335 8.43257 4.07535 8.95477 3.25804C9.21585 2.84943 9.40237 2.51866 9.52292 2.29161C9.5832 2.1781 9.62696 2.09053 9.6553 2.03217C9.66947 2.00298 9.67978 1.9811 9.68636 1.96693L9.69346 1.9515L9.69495 1.94821C9.76978 1.78008 9.9669 1.70399 10.1351 1.77876Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.20044 11.1035C2.28101 10.938 2.48051 10.8691 2.64604 10.9497L2.65448 10.9538L2.67799 10.9654C2.69853 10.9755 2.72864 10.9904 2.76738 11.0097C2.84485 11.0484 2.95685 11.1047 3.09572 11.176C3.37337 11.3186 3.75901 11.5212 4.19138 11.7614C5.05137 12.2392 6.11398 12.8756 6.87603 13.4899C7.75522 14.1987 8.71011 15.2618 9.43707 16.1347C9.80256 16.5736 10.1142 16.969 10.3345 17.2547C10.4447 17.3977 10.5322 17.5133 10.5923 17.5934C10.6223 17.6335 10.6455 17.6647 10.6613 17.686L10.6793 17.7104L10.684 17.7167L10.6852 17.7184C10.6853 17.7185 10.6857 17.7191 10.4168 17.9161L10.6857 17.7191C10.7945 17.8676 10.7623 18.0762 10.6138 18.185C10.4653 18.2938 10.2567 18.2616 10.1479 18.1131C10.1479 18.1131 10.1479 18.1131 10.1479 18.1131L10.1425 18.1057L10.1256 18.0828C10.1105 18.0625 10.0881 18.0324 10.0589 17.9934C10.0004 17.9154 9.91477 17.8021 9.80657 17.6618C9.59008 17.381 9.28376 16.9924 8.92478 16.5613C8.20281 15.6944 7.2827 14.6741 6.45761 14.0089C5.74236 13.4323 4.72163 12.8186 3.86761 12.3442C3.44298 12.1083 3.06395 11.9092 2.79118 11.7691C2.65485 11.6991 2.54519 11.6439 2.46982 11.6063C2.43213 11.5875 2.40303 11.5731 2.38345 11.5635L2.36135 11.5526L2.3546 11.5493"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M11.1157 2.32268C11.1157 2.32267 11.1157 2.32268 11.1157 2.32268L11.1168 2.32437L11.1208 2.33079L11.1378 2.35749C11.1531 2.38131 11.1762 2.417 11.2067 2.46344C11.2679 2.55632 11.3589 2.69213 11.4775 2.86197C11.7147 3.20175 12.0615 3.67705 12.4984 4.21674C13.3744 5.29881 14.6027 6.6276 16.0268 7.64481C16.362 7.88419 16.7818 8.19911 17.1162 8.45286C17.2837 8.58001 17.4305 8.69231 17.5354 8.77284L17.6588 8.86774L17.7036 8.90235L17.4997 9.16606L17.2958 9.42971L17.2518 9.39574L17.1294 9.30165C17.0253 9.2217 16.8795 9.11016 16.7132 8.98393C16.3797 8.7309 15.9662 8.42081 15.6393 8.1873C14.1468 7.12119 12.8751 5.74164 11.9802 4.63621C11.5317 4.08215 11.1754 3.5939 10.9308 3.24358C10.8085 3.06837 10.714 2.92749 10.6498 2.82994C10.6177 2.78116 10.5932 2.7432 10.5765 2.71718L10.5575 2.68725L10.5524 2.67926L10.551 2.67705L10.5505 2.67619C10.5504 2.67612 10.5504 2.67606 10.8331 2.49939L10.5505 2.67619C10.4529 2.52008 10.5003 2.31429 10.6564 2.21672C10.8125 2.11917 11.0181 2.16661 11.1157 2.32268ZM17.4997 9.16606L17.2958 9.42971C17.4414 9.54235 17.6508 9.51562 17.7634 9.37001C17.876 9.22439 17.8492 9.01499 17.7036 8.90235L17.4997 9.16606Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17.0171 9.57164C17.1434 9.43772 17.3544 9.43155 17.4883 9.55787C17.6222 9.68418 17.6284 9.89515 17.5021 10.0291L17.2596 9.80035L17.0171 9.57164ZM11.0737 17.7016L10.794 17.5203L10.8145 17.4887L10.8734 17.3985C10.9246 17.3201 10.9992 17.2065 11.0926 17.065C11.2796 16.7822 11.5424 16.388 11.8458 15.9426C12.4514 15.0538 13.2238 13.9538 13.8796 13.1278C14.459 12.3981 15.2447 11.5079 15.8823 10.8034C16.2017 10.4504 16.4852 10.1427 16.6889 9.92319C16.7908 9.81342 16.8727 9.72566 16.9292 9.66529L16.9943 9.59593L17.0171 9.57164L17.2596 9.80035L17.5021 10.0291L17.48 10.0525L17.4159 10.1209C17.36 10.1806 17.2787 10.2677 17.1776 10.3766C16.9754 10.5946 16.6938 10.9003 16.3766 11.2508C15.7408 11.9532 14.9671 12.8304 14.4017 13.5424C13.7618 14.3484 13.0007 15.4316 12.3968 16.318C12.0954 16.7603 11.8344 17.1517 11.6488 17.4326C11.556 17.573 11.4821 17.6857 11.4314 17.7633L11.3734 17.8522L11.3538 17.8824L11.0737 17.7016ZM11.0737 17.7016L10.794 17.5203C10.6939 17.6748 10.738 17.8813 10.8925 17.9814C11.047 18.0814 11.2537 18.0369 11.3538 17.8824L11.0737 17.7016Z"
+  />
+</svg>`;
+
+export const ScribbledTriangleIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10.1042 1.55591C10.2801 1.61017 10.3787 1.79676 10.3245 1.97268L10.0059 1.87444L9.6874 1.7762C9.74166 1.60028 9.92825 1.50165 10.1042 1.55591ZM2.92782 15.5656L2.66613 15.3592L2.67298 15.3505L2.69374 15.324C2.71206 15.3007 2.7392 15.2659 2.77423 15.2209C2.84431 15.1308 2.94597 14.9995 3.07196 14.8347C3.32399 14.5053 3.6731 14.0427 4.0612 13.5107C4.83961 12.4437 5.76667 11.1085 6.38444 10.0089C7.22603 8.51089 8.05125 6.4576 8.66899 4.76689C8.97699 3.92394 9.23181 3.17556 9.4096 2.63803C9.49848 2.36931 9.56806 2.15343 9.61536 2.00491C9.63902 1.93066 9.65709 1.87326 9.66922 1.83453L9.68291 1.79067L9.6874 1.7762L10.0059 1.87444C10.3245 1.97268 10.3245 1.97262 10.3245 1.97268L10.3241 1.97381L10.3195 1.98852L10.3054 2.0338C10.293 2.0735 10.2746 2.13192 10.2506 2.20723C10.2026 2.35785 10.1323 2.5761 10.0425 2.84738C9.86313 3.38983 9.60604 4.14488 9.29517 4.99568C8.67521 6.69249 7.835 8.78805 6.96567 10.3354C6.32758 11.4712 5.38103 12.8327 4.59978 13.9036C4.20806 14.4406 3.85583 14.9073 3.60148 15.2398C3.47429 15.4061 3.3715 15.5389 3.30042 15.6303C3.26488 15.6759 3.23727 15.7113 3.21848 15.7352L3.19704 15.7626L3.19006 15.7714L2.92782 15.5656ZM2.92782 15.5656L2.66613 15.3592C2.55211 15.5037 2.57684 15.7133 2.72137 15.8274C2.86591 15.9414 3.07551 15.9166 3.18953 15.7721L2.92782 15.5656Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.15809 16.0728C6.66763 16.0543 8.54993 16.0541 10.0224 16.1288C11.5853 16.2081 13.5722 16.4167 15.1634 16.6046C15.9601 16.6987 16.6596 16.7879 17.1599 16.8535C17.4101 16.8863 17.6106 16.9133 17.7486 16.932L17.9071 16.9537L17.9624 16.9614C18.1448 16.9869 18.272 17.1554 18.2465 17.3377C18.221 17.52 18.0525 17.6471 17.8702 17.6216L17.816 17.6141L17.6588 17.5926C17.5217 17.574 17.3223 17.5472 17.0732 17.5145C16.575 17.4492 15.8785 17.3604 15.0853 17.2667C13.4967 17.0791 11.5282 16.8728 9.98864 16.7947C8.53815 16.7211 6.67322 16.7209 5.16628 16.7394C4.4138 16.7487 3.7524 16.7626 3.27918 16.7741C3.04259 16.7799 2.85308 16.7851 2.72281 16.7889L2.57336 16.7933L2.52264 16.7949L2.51107 16.4618L2.50033 16.1286L2.55289 16.1269L2.70361 16.1225C2.83476 16.1187 3.02524 16.1135 3.26289 16.1077C3.73816 16.096 4.40233 16.0821 5.15809 16.0728ZM2.17791 16.4726C2.17194 16.2886 2.31633 16.1346 2.50033 16.1286L2.51107 16.4618L2.52264 16.7949C2.33865 16.8009 2.18388 16.6566 2.17791 16.4726Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.94721 2.04509C9.08267 1.92043 9.29354 1.92918 9.41821 2.06464L9.17293 2.29037L8.92766 2.51609C8.803 2.38063 8.81175 2.16976 8.94721 2.04509ZM17.5001 16.3965L17.1832 16.4996L17.1792 16.4874L17.1669 16.4503C17.1561 16.4175 17.14 16.3688 17.1189 16.3058C17.0767 16.1799 17.0146 15.9968 16.9356 15.7688C16.7775 15.3128 16.5516 14.6777 16.2801 13.9621C15.7356 12.5263 15.0142 10.7827 14.2952 9.50708C13.4583 8.02226 12.1209 6.27766 10.9829 4.89499C10.4157 4.20581 9.90135 3.61049 9.52889 3.18756C9.34269 2.97614 9.19206 2.80792 9.08812 2.69271C9.03616 2.63511 8.99587 2.59077 8.96866 2.56093L8.93783 2.52718L8.92766 2.51609L9.17293 2.29037C9.41821 2.06464 9.41816 2.06459 9.41821 2.06464L9.42942 2.07686L9.46134 2.1118C9.48929 2.14246 9.53035 2.18765 9.58312 2.24614C9.68866 2.36312 9.84107 2.53334 10.0292 2.74696C10.4054 3.17409 10.9247 3.77517 11.4976 4.47135C12.64 5.85938 14.0089 7.64131 14.876 9.17975C15.6209 10.5013 16.3567 12.2842 16.9035 13.7257C17.1777 14.4486 17.4059 15.0899 17.5655 15.5505C17.6454 15.7808 17.7081 15.9661 17.751 16.094C17.7724 16.158 17.7889 16.2076 17.8 16.2413L17.8127 16.2798L17.817 16.2932C17.8171 16.2932 17.8171 16.2933 17.5001 16.3965ZM17.5001 16.3965L17.1832 16.4996C17.2401 16.6747 17.4283 16.7704 17.6033 16.7134C17.7784 16.6564 17.874 16.4682 17.817 16.2932L17.5001 16.3965Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M9.73652 3.33805C9.84503 3.18934 10.0536 3.15674 10.2023 3.26525C10.351 3.37377 10.3836 3.58229 10.2751 3.731L10.0058 3.53453L9.73652 3.33805ZM3.76041 15.5662L3.44364 15.4624L3.44694 15.4524L3.4565 15.4234L3.4934 15.3123C3.52562 15.2158 3.57267 15.0759 3.63218 14.9017C3.75116 14.5534 3.92007 14.0677 4.11982 13.5182C4.51824 12.422 5.04339 11.0605 5.54203 10.0278C6.21751 8.62874 7.26905 6.95347 8.14522 5.63598C8.5845 4.97543 8.98196 4.40146 9.26965 3.99255C9.41352 3.78805 9.53001 3.62474 9.61064 3.51241C9.65096 3.45624 9.68231 3.41281 9.70364 3.38334L9.72799 3.34977L9.73652 3.33805C9.73655 3.33801 9.73652 3.33805 10.0058 3.53453L10.2751 3.731L10.2673 3.74174L10.2436 3.77428C10.2228 3.80305 10.192 3.84574 10.1522 3.90114C10.0727 4.01194 9.95745 4.17354 9.81489 4.37615C9.52974 4.78146 9.13569 5.35051 8.70034 6.00515C7.82723 7.31804 6.79698 8.96185 6.14238 10.3176C5.65914 11.3185 5.14339 12.6537 4.74638 13.7459C4.54842 14.2905 4.38098 14.772 4.26305 15.1172C4.20409 15.2898 4.15754 15.4282 4.12577 15.5234L4.0895 15.6326L4.08024 15.6606L4.07736 15.6694L3.76041 15.5662ZM3.76041 15.5662L3.44364 15.4624C3.38636 15.6374 3.48174 15.8257 3.6567 15.883C3.83166 15.9403 4.02009 15.8444 4.07736 15.6694L3.76041 15.5662Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10.3149 2.38886C10.4893 2.32971 10.6785 2.42308 10.7377 2.59741L10.422 2.70452L10.1064 2.81163C10.0472 2.6373 10.1406 2.44802 10.3149 2.38886ZM10.422 2.70452C10.1064 2.81163 10.1064 2.81156 10.1064 2.81163L10.108 2.8163L10.1124 2.82938L10.1298 2.87998C10.1452 2.92432 10.1678 2.98953 10.1974 3.07354C10.2565 3.24157 10.3432 3.48485 10.4541 3.78682C10.6757 4.39063 10.9939 5.22977 11.3805 6.17156C12.1512 8.04929 13.2023 10.3568 14.3082 12.0168C14.83 12.7999 15.5668 13.7434 16.1684 14.486C16.4702 14.8584 16.7397 15.1824 16.9338 15.4134C17.0308 15.5289 17.1091 15.6212 17.1632 15.6847L17.2255 15.7577L17.2471 15.7829C17.3672 15.9225 17.5781 15.9387 17.7176 15.8186C17.8571 15.6985 17.8729 15.488 17.7528 15.3485L17.7476 15.3425L17.7319 15.3241L17.6708 15.2525C17.6175 15.19 17.5402 15.0988 17.4441 14.9845C17.252 14.7558 16.9851 14.435 16.6864 14.0663C16.0871 13.3267 15.3667 12.4031 14.863 11.6472C13.7957 10.0451 12.765 7.78891 11.9972 5.91841C11.6145 4.98608 11.2994 4.15499 11.0799 3.5571C10.9702 3.25822 10.8845 3.01778 10.8263 2.85229C10.7971 2.76955 10.7749 2.70557 10.76 2.6624L10.7432 2.61351L10.739 2.60126L10.7377 2.59741L10.422 2.70452Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.61027 17.5168C2.43001 17.5541 2.25355 17.4382 2.21619 17.2579C2.17883 17.0776 2.29468 16.9013 2.47494 16.864L2.54259 17.1904C2.47496 16.864 2.47489 16.864 2.47494 16.864L2.49141 16.8606L2.53887 16.8509C2.58054 16.8424 2.64195 16.83 2.7213 16.8142C2.87999 16.7825 3.11044 16.7372 3.3981 16.6823C3.97333 16.5726 4.77773 16.4247 5.69478 16.2721C7.52506 15.9674 9.81818 15.6413 11.634 15.5644C12.7876 15.5156 14.259 15.5457 15.4363 15.5876C16.0262 15.6086 16.5444 15.6325 16.9153 15.6513C17.1008 15.6607 17.2495 15.6688 17.3519 15.6745L17.4696 15.6812L17.5102 15.6836C17.6939 15.6947 17.8347 15.8527 17.8236 16.0365C17.8126 16.2202 17.6547 16.3602 17.4709 16.3491L17.4311 16.3467L17.3149 16.3401C17.2136 16.3344 17.0661 16.3264 16.8819 16.3171C16.5136 16.2985 15.9987 16.2746 15.4129 16.2538C14.2389 16.2121 12.7889 16.1828 11.6625 16.2305C9.88958 16.3055 7.62989 16.6259 5.80453 16.9297C4.89375 17.0813 4.09463 17.2282 3.52328 17.3372C3.23765 17.3916 3.00905 17.4366 2.85202 17.4679C2.77351 17.4836 2.71289 17.4959 2.67198 17.5042L2.62565 17.5136L2.61027 17.5168Z"
+  />
+</svg>`;
+
+export const ScribbledRoundedRectangleIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.44887 6.33792C2.63082 6.30988 2.80104 6.43465 2.82908 6.61659C2.92357 7.22966 3.01845 7.79891 3.10866 8.34005C3.57794 11.1554 3.92041 13.2099 3.41887 16.7146C3.39279 16.8968 3.22391 17.0234 3.04168 16.9973C2.85944 16.9713 2.73284 16.8024 2.75892 16.6201C3.24508 13.2229 2.91967 11.2677 2.45308 8.4641C2.36247 7.91969 2.26654 7.34329 2.1702 6.71814C2.14216 6.53619 2.26692 6.36596 2.44887 6.33792Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M15.1061 16.1731C13.9651 16.1615 12.5534 16.1616 11.4552 16.2078C9.87853 16.2741 7.86179 16.4812 6.23376 16.6726C5.42091 16.7682 4.70712 16.8596 4.19659 16.9271C3.94136 16.9609 3.73699 16.9887 3.59653 17.008L3.43542 17.0303L3.38079 17.038L3.33313 16.7081L3.28636 16.378L3.34309 16.3701L3.50569 16.3475C3.64718 16.3281 3.8527 16.3001 4.10919 16.2662C4.62212 16.1984 5.33918 16.1066 6.1559 16.0105C7.787 15.8187 9.82429 15.6091 11.4272 15.5417C12.5436 15.4947 13.9697 15.4948 15.1129 15.5065C15.6853 15.5123 16.1882 15.5211 16.5482 15.5284C16.7281 15.532 16.8724 15.5353 16.9717 15.5377L17.0859 15.5405L17.1251 15.5415L17.1168 15.8747L17.1078 16.208L17.0689 16.2069L16.9558 16.2042C16.8572 16.2018 16.7137 16.1985 16.5346 16.1949C16.1764 16.1876 15.6757 16.1789 15.1061 16.1731ZM17.45 15.8837C17.445 16.0677 17.2918 16.2129 17.1078 16.208L17.1168 15.8747L17.1251 15.5415C17.3091 15.5465 17.455 15.6997 17.45 15.8837ZM3.0031 16.7549C2.97723 16.5727 3.10409 16.4039 3.28636 16.378L3.33313 16.7081L3.38079 17.038C3.19852 17.0639 3.02898 16.9372 3.0031 16.7549Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17.4298 5.50028C17.6138 5.49278 17.769 5.63582 17.7765 5.81976L17.4434 5.83334L17.1104 5.84691C17.1029 5.66297 17.2459 5.50778 17.4298 5.50028ZM16.6664 16.6667L16.3384 16.6071L16.3454 16.5681L16.3657 16.4543C16.3832 16.355 16.4084 16.2105 16.4391 16.03C16.5006 15.6689 16.584 15.1641 16.6719 14.5896C16.848 13.4377 17.0404 12.016 17.1108 10.9102C17.1732 9.92887 17.1734 8.66525 17.1576 7.64117C17.1498 7.13036 17.1379 6.68143 17.1281 6.36026C17.1231 6.1997 17.1187 6.07114 17.1155 5.98282L17.1117 5.88158L17.1104 5.84691L17.4434 5.83334L17.7765 5.81976L17.7779 5.85588L17.7817 5.95871C17.785 6.04812 17.7894 6.17791 17.7944 6.3398C17.8044 6.66354 17.8163 7.11595 17.8242 7.63088C17.8401 8.65825 17.8403 9.94366 17.7761 10.9526C17.7037 12.0892 17.5076 13.5351 17.3309 14.6903C17.2423 15.2693 17.1583 15.7779 17.0963 16.1418C17.0654 16.3238 17.0399 16.4696 17.0222 16.5701L17.0017 16.6857L16.9945 16.7255L16.6664 16.6667ZM16.6664 16.6667L16.3384 16.6071C16.3055 16.7882 16.4257 16.9617 16.6068 16.9946C16.788 17.0275 16.9616 16.9066 16.9945 16.7255L16.6664 16.6667Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M18.6816 4.25378C18.6816 4.25378 18.6816 4.25377 18.6816 4.25378L18.6798 4.26045L18.6743 4.2812L18.653 4.36248C18.6345 4.43352 18.6079 4.53713 18.5755 4.66674C18.5106 4.92604 18.4227 5.28896 18.3307 5.70299C18.1456 6.53525 17.9471 7.55848 17.881 8.36138C17.7896 9.47192 17.8441 10.3393 17.9155 11.223C17.9227 11.3116 17.93 11.4004 17.9374 11.4898C18.0036 12.2918 18.0731 13.1322 18.0441 14.1766C18.0281 14.7528 17.9873 15.4868 17.9507 16.0741C17.9323 16.3683 17.915 16.6267 17.9022 16.8116C17.8958 16.9041 17.8906 16.9782 17.887 17.0292L17.8813 17.1081L17.5488 17.084L17.2164 17.0596L17.222 16.9817C17.2256 16.9312 17.2308 16.8576 17.2371 16.7657C17.2498 16.5819 17.2671 16.325 17.2853 16.0326C17.3218 15.4467 17.362 14.7223 17.3777 14.1581C17.4056 13.1522 17.3391 12.3467 17.2729 11.5437C17.2655 11.4547 17.2582 11.3658 17.251 11.2767C17.1787 10.3821 17.1206 9.47185 17.2166 8.30666C17.2867 7.45607 17.4936 6.39597 17.6799 5.55827C17.7735 5.13732 17.8628 4.7686 17.9287 4.50502C17.9617 4.37318 17.9888 4.26753 18.0078 4.19467L18.0298 4.11077L18.0356 4.08879L18.0375 4.08154C18.0852 3.90374 18.2682 3.79769 18.446 3.84542C18.6238 3.89315 18.7293 4.07598 18.6816 4.25378ZM17.5488 17.084L17.2164 17.0596C17.2029 17.2432 17.3408 17.403 17.5244 17.4165C17.708 17.4299 17.8678 17.2917 17.8813 17.1081L17.5488 17.084Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3.83426 4.14247C3.84818 3.95882 4.00824 3.82092 4.19176 3.83446L4.16655 4.16698L4.14133 4.49951C3.95782 4.48597 3.82033 4.32611 3.83426 4.14247ZM4.16655 4.16698L4.14133 4.49951L4.18765 4.50286L4.32 4.5122C4.43514 4.5202 4.60234 4.53155 4.81097 4.54497C5.22818 4.5718 5.81134 4.60694 6.47532 4.64014C7.80099 4.70644 9.45741 4.76549 10.7588 4.73432C11.5177 4.71615 12.4849 4.65942 13.2592 4.60755C13.647 4.58156 13.9877 4.55671 14.2315 4.53835C14.3534 4.52917 14.4511 4.52161 14.5184 4.51634L14.6223 4.50811C14.8058 4.49328 14.9433 4.33243 14.9289 4.14888C14.9144 3.96534 14.754 3.82856 14.5705 3.84339L14.4678 3.85152C14.4011 3.85675 14.304 3.86425 14.1829 3.87338C13.9405 3.89163 13.6017 3.91635 13.2161 3.94218C12.4435 3.99394 11.4882 4.04985 10.7443 4.06766C9.46869 4.09821 7.8326 4.04026 6.51001 3.97412C5.84987 3.94111 5.26996 3.90617 4.85514 3.87949C4.64776 3.86615 4.48171 3.85488 4.36759 3.84695L4.23672 3.83772L4.19176 3.83446L4.16655 4.16698Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6.90557 4.249C8.03011 4.03755 9.45202 3.82395 10.5835 3.83435C11.6494 3.84415 12.9876 4.05759 14.0458 4.26413C14.5778 4.36796 15.0444 4.47116 15.3782 4.54842C15.5451 4.58707 15.679 4.61926 15.7713 4.64185C15.8175 4.65315 15.8533 4.66204 15.8777 4.66815L15.9056 4.67516L15.9148 4.6775C15.9148 4.67751 15.9155 4.67769 15.833 5.00065L15.9148 4.6775C16.0931 4.72308 16.2015 4.90481 16.156 5.08318C16.1104 5.26154 15.9288 5.36918 15.7505 5.32361M5.0811 5.32388L5.08316 5.32337L5.09006 5.32164L5.11799 5.31473C5.14274 5.30863 5.17957 5.29962 5.22737 5.28813C5.32297 5.26515 5.46239 5.23224 5.63671 5.19276C5.98546 5.11377 6.47323 5.00865 7.02876 4.90419C8.14602 4.6941 9.51451 4.49122 10.5774 4.50099C11.5787 4.51019 12.8668 4.71325 13.9181 4.91845C14.4408 5.02048 14.8997 5.12196 15.2278 5.19791C15.3918 5.23588 15.523 5.26742 15.6129 5.28942C15.6578 5.30042 15.6925 5.30903 15.7158 5.31486L15.742 5.32147L15.7505 5.32361M4.99967 5.00065C4.91823 4.67742 4.91827 4.67741 4.91832 4.67739L4.9211 4.6767L4.92884 4.67476L4.95848 4.66742C4.9844 4.66103 5.02247 4.65173 5.07155 4.63993C5.16971 4.61633 5.312 4.58275 5.48945 4.54256C5.84422 4.46221 6.3402 4.35531 6.90557 4.249M4.99967 5.00065L4.91832 4.67739C4.73981 4.72237 4.63146 4.90357 4.67643 5.08208C4.72141 5.2606 4.90259 5.36885 5.0811 5.32388"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.09851 7.16634C2.28243 7.17439 2.425 7.33002 2.41694 7.51394L2.08393 7.49935L1.75092 7.48477C1.75897 7.30085 1.91459 7.15829 2.09851 7.16634ZM2.91732 16.666L2.59179 16.7377L2.5897 16.7282L2.58376 16.7009L2.56129 16.5965C2.5419 16.5058 2.5141 16.3741 2.48032 16.2097C2.41279 15.8811 2.32128 15.4215 2.22534 14.8975C2.0341 13.8528 1.82281 12.5389 1.75124 11.4944C1.69721 10.7057 1.6975 9.70092 1.71081 8.89957C1.71749 8.49756 1.7275 8.14425 1.73585 7.89139C1.74002 7.76493 1.74377 7.66352 1.74649 7.59361L1.74972 7.51316L1.75092 7.48477L2.08393 7.49935L2.41694 7.51394L2.41581 7.54077L2.41266 7.61951C2.40998 7.68825 2.40627 7.78834 2.40215 7.91337C2.3939 8.16348 2.38399 8.51306 2.37739 8.91065C2.36413 9.7085 2.36435 10.6898 2.41635 11.4488C2.48522 12.454 2.6907 13.7373 2.88111 14.7774C2.976 15.2957 3.06654 15.7505 3.13334 16.0755C3.16674 16.238 3.19418 16.368 3.21324 16.4573L3.23525 16.5595L3.24096 16.5857L3.24274 16.5938L2.91732 16.666ZM2.91732 16.666L2.59179 16.7377C2.63141 16.9175 2.80929 17.0312 2.98907 16.9915C3.16885 16.9519 3.28237 16.7736 3.24274 16.5938L2.91732 16.666Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.62454 15.5047C6.93031 15.4962 8.55651 15.4962 9.82846 15.5303C11.2616 15.5688 13.0911 15.6733 14.5595 15.7679C15.2943 15.8153 15.9398 15.8602 16.4016 15.8934C16.6326 15.9099 16.8176 15.9235 16.9449 15.933L17.1413 15.9478L17.1167 16.2802L17.0913 16.6126L16.8955 16.5978C16.7687 16.5884 16.5842 16.5748 16.3539 16.5583C15.8933 16.5253 15.2495 16.4804 14.5166 16.4332C13.0497 16.3387 11.2306 16.2348 9.81058 16.1967C8.55028 16.1629 6.93327 16.1629 5.62888 16.1714C4.97721 16.1756 4.40454 16.182 3.99481 16.1873C3.78996 16.1899 3.62586 16.1923 3.51303 16.194L3.3395 16.1968L3.33309 15.8635L3.32742 15.5302L3.50286 15.5274C3.61616 15.5257 3.78077 15.5233 3.98619 15.5207C4.397 15.5154 4.97114 15.509 5.62454 15.5047ZM3.33309 15.8635L3.32742 15.5302C3.14335 15.5334 2.99664 15.6852 2.99981 15.8693C3.00297 16.0533 3.15543 16.2 3.3395 16.1968L3.33309 15.8635ZM17.4491 16.3056C17.4351 16.4892 17.2748 16.6266 17.0913 16.6126L17.1167 16.2802L17.1422 15.9478C17.3257 15.9619 17.4632 16.1221 17.4491 16.3056Z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M15.4164 4.16586L15.3112 3.84959C15.1365 3.90772 15.042 4.09645 15.1002 4.27112C15.1583 4.4458 15.347 4.54027 15.5217 4.48214M15.4164 4.16586C15.3112 3.84959 15.3111 3.84961 15.3112 3.84959L15.312 3.8493L15.3136 3.8488L15.3186 3.84714L15.3364 3.84145C15.3515 3.83665 15.3731 3.82992 15.4003 3.82175C15.4547 3.80544 15.5319 3.78331 15.6251 3.75941C15.8101 3.71193 16.0639 3.65588 16.3298 3.62566C16.59 3.59607 16.8897 3.58772 17.1539 3.65441C17.4241 3.72264 17.7106 3.88695 17.8181 4.23381C17.8763 4.42122 17.8713 4.64093 17.8612 4.78275C17.8557 4.85982 17.8475 4.92756 17.8407 4.97617C17.8373 5.0006 17.8342 5.02054 17.8319 5.03479L17.829 5.05185L17.8281 5.05697L17.8278 5.05862L17.8276 5.05946C17.8276 5.05951 17.8276 5.05967 17.4998 4.9992L17.8276 5.05946C17.7942 5.2405 17.6203 5.3604 17.4393 5.327C17.2584 5.29363 17.1387 5.12 17.1719 4.9391"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3.77882 6.55857C3.83811 6.73279 3.74499 6.92211 3.57078 6.98148C3.39653 7.04086 3.20713 6.94774 3.14774 6.77348L3.46323 6.66597C3.14774 6.77348 3.14777 6.77356 3.14774 6.77348L3.14716 6.77175L3.14616 6.76876L3.14299 6.7591C3.14038 6.75108 3.13683 6.73992 3.13255 6.72595C3.12399 6.69804 3.11247 6.65872 3.09978 6.61065C3.07458 6.51517 3.04391 6.38195 3.02326 6.23325C3.00283 6.08609 2.99073 5.91351 3.00806 5.74242C3.02512 5.57403 3.07338 5.38024 3.19659 5.21596C3.36782 4.98767 3.65782 4.85635 3.84492 4.7863C3.94807 4.74768 4.0425 4.71975 4.11102 4.70144C4.14549 4.69222 4.17396 4.6853 4.19437 4.68056L4.21882 4.67505L4.22612 4.67349L4.22846 4.673L4.2293 4.67283C4.22936 4.67281 4.2299 4.6727 4.29659 4.9993L4.2293 4.67283C4.40967 4.63599 4.58636 4.75223 4.62319 4.93261M4.36352 5.32584C4.36356 5.32583 4.36377 5.32579 4.36352 5.32584V5.32584Z"
+    fill="currentColor"
+  />
+</svg>`;
+
+export const ellipseSvg = html`<svg
+  width="48"
+  height="48"
+  viewBox="0 0 48 48"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <circle cx="24" cy="24" r="23.5" fill="currentColor" stroke="inherit" />
+</svg> `;
+
+export const triangleSvg = html`<svg
+  width="62"
+  height="50"
+  viewBox="0 0 62 50"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M0.8 49.2L31 0.8L61.2 49.2H0.8Z"
+    fill="currentColor"
+    stroke="inherit"
+  />
+</svg> `;
+
+export const roundedSvg = html`<svg
+  width="48"
+  height="48"
+  viewBox="0 0 48 48"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <rect
+    x="0.5"
+    y="0.5"
+    width="47"
+    height="47"
+    rx="5"
+    fill="currentColor"
+    stroke="inherit"
+  />
+</svg> `;
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-draggable.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-draggable.ts
@@ -2,11 +2,6 @@ import {
  CanvasElementType,
  EdgelessCRUDIdentifier,
 } from '@blocksuite/affine-block-surface';
-import {
-  ellipseSvg,
-  roundedSvg,
-  triangleSvg,
-} from '@blocksuite/affine-components/icons';
 import {
  getShapeRadius,
  getShapeType,
@@ -27,6 +22,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { ShapeTool } from '../../../gfx-tool/shape-tool.js';
 import { EdgelessDraggableElementController } from '../common/draggable/draggable-element.controller.js';
 import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
+import { ellipseSvg, roundedSvg, triangleSvg } from './icons.js';
 import type { DraggableShape } from './utils.js';
 import { buildVariablesObject } from './utils.js';

--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts
@@ -1,19 +1,21 @@
+import { ShapeType } from '@blocksuite/affine-model';
 import {
  DiamondIcon,
  EllipseIcon,
  RoundedRectangleIcon,
+  SquareIcon,
+  TriangleIcon,
+} from '@blocksuite/icons/lit';
+import type { TemplateResult } from 'lit';
+
+import type { ShapeToolOption } from '../../../gfx-tool/shape-tool';
+import {
  ScribbledDiamondIcon,
  ScribbledEllipseIcon,
  ScribbledRoundedRectangleIcon,
  ScribbledSquareIcon,
  ScribbledTriangleIcon,
-  SquareIcon,
-  TriangleIcon,
-} from '@blocksuite/affine-components/icons';
-import { ShapeType } from '@blocksuite/affine-model';
-import type { TemplateResult } from 'lit';
-
-import type { ShapeToolOption } from '../../../gfx-tool/shape-tool.js';
+} from './icons';

 type Config = {
  name: ShapeToolOption['shapeName'];
@@ -26,35 +28,35 @@ type Config = {
 export const ShapeComponentConfig: Config[] = [
  {
    name: ShapeType.Rect,
-    generalIcon: SquareIcon,
+    generalIcon: SquareIcon(),
    scribbledIcon: ScribbledSquareIcon,
    tooltip: 'Square',
    disabled: false,
  },
  {
    name: ShapeType.Ellipse,
-    generalIcon: EllipseIcon,
+    generalIcon: EllipseIcon(),
    scribbledIcon: ScribbledEllipseIcon,
    tooltip: 'Ellipse',
    disabled: false,
  },
  {
    name: ShapeType.Diamond,
-    generalIcon: DiamondIcon,
+    generalIcon: DiamondIcon(),
    scribbledIcon: ScribbledDiamondIcon,
    tooltip: 'Diamond',
    disabled: false,
  },
  {
    name: ShapeType.Triangle,
-    generalIcon: TriangleIcon,
+    generalIcon: TriangleIcon(),
    scribbledIcon: ScribbledTriangleIcon,
    tooltip: 'Triangle',
    disabled: false,
  },
  {
    name: 'roundedRect',
-    generalIcon: RoundedRectangleIcon,
+    generalIcon: RoundedRectangleIcon(),
    scribbledIcon: ScribbledRoundedRectangleIcon,
    tooltip: 'Rounded rectangle',
    disabled: false,
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts
@@ -1,7 +1,3 @@
-import {
-  GeneralStyleIcon,
-  ScribbledStyleIcon,
-} from '@blocksuite/affine-components/icons';
 import {
  DefaultTheme,
  isTransparent,
@@ -17,6 +13,7 @@ import {
 } from '@blocksuite/affine-shared/services';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
+import { StyleGeneralIcon, StyleScribbleIcon } from '@blocksuite/icons/lit';
 import { computed, effect, type Signal, signal } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -132,21 +129,23 @@ export class EdgelessShapeMenu extends SignalWatcher(
              .tooltip=${'General'}
              .active=${shapeStyle === ShapeStyle.General}
              .activeMode=${'background'}
+              .iconSize=${'20px'}
              @click=${() => {
                this._setShapeStyle(ShapeStyle.General);
              }}
            >
-              ${GeneralStyleIcon}
+              ${StyleGeneralIcon()}
            </edgeless-tool-icon-button>
            <edgeless-tool-icon-button
              .tooltip=${'Scribbled'}
              .active=${shapeStyle === ShapeStyle.Scribbled}
              .activeMode=${'background'}
+              .iconSize=${'20px'}
              @click=${() => {
                this._setShapeStyle(ShapeStyle.Scribbled);
              }}
            >
-              ${ScribbledStyleIcon}
+              ${StyleScribbleIcon()}
            </edgeless-tool-icon-button>
          </div>
          <menu-divider .vertical=${true}></menu-divider>
@@ -158,6 +157,7 @@ export class EdgelessShapeMenu extends SignalWatcher(
                    .tooltip=${tooltip}
                    .active=${shapeName === name}
                    .activeMode=${'background'}
+                    .iconSize=${'20px'}
                    @click=${() => this.onChange(name)}
                  >
                    ${shapeStyle === ShapeStyle.General
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/cards.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/cards.ts
@@ -1,6 +1,6 @@
 import { html, svg } from 'lit';

-export const ArrowIcon = html`
+export const Triangle = html`
  <svg
    width="24"
    height="18"
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/template-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/template-panel.ts
@@ -21,7 +21,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js';
 import { EdgelessDraggableElementController } from '../common/draggable/draggable-element.controller.js';
 import { builtInTemplates } from './builtin-templates.js';
-import { ArrowIcon, defaultPreview } from './icon.js';
+import { defaultPreview, Triangle } from './cards.js';
 import type { Template } from './template-type.js';
 import { cloneDeep } from './utils.js';

@@ -482,7 +482,7 @@ export class EdgelessTemplatePanel extends WithDisposable(LitElement) {
          </div>
          <overlay-scrollbar></overlay-scrollbar>
        </div>
-        <div class="arrow">${ArrowIcon}</div>
+        <div class="arrow">${Triangle}</div>
      </div>
    `;
  }
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/template-tool-button.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/template/template-tool-button.ts
@@ -14,7 +14,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';

 import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
-import { TemplateCard1, TemplateCard2, TemplateCard3 } from './icon.js';
+import { TemplateCard1, TemplateCard2, TemplateCard3 } from './cards.js';
 import type { EdgelessTemplatePanel } from './template-panel.js';

 export class EdgelessTemplateButton extends EdgelessToolbarToolMixin(
--- a/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts
@@ -1,7 +1,7 @@
-import { MoreIcon } from '@blocksuite/affine-components/icons';
 import { createLitPortal } from '@blocksuite/affine-components/portal';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
+import { MoreHorizontalIcon } from '@blocksuite/icons/lit';
 import { offset } from '@floating-ui/dom';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
@@ -89,9 +89,10 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) {
          .arrow=${false}
          .activeMode=${'background'}
          .iconContainerPadding=${6}
+          .iconSize=${'24px'}
          @click=${() => this._toggleZoomMenu()}
        >
-          ${MoreIcon}
+          ${MoreHorizontalIcon()}
        </edgeless-tool-icon-button>
      </div>
    `;
--- a/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts
+++ b/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts
@@ -1,11 +1,7 @@
-import {
-  MinusIcon,
-  PlusIcon,
-  ViewBarIcon,
-} from '@blocksuite/affine-components/icons';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { ZOOM_STEP } from '@blocksuite/block-std/gfx';
 import { WithDisposable } from '@blocksuite/global/utils';
+import { MinusIcon, PlusIcon, ViewBarIcon } from '@blocksuite/icons/lit';
 import { effect } from '@preact/signals-core';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
@@ -168,9 +164,10 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
          .arrow=${!this._isVerticalBar()}
          @click=${() => this.gfx.fitToScreen()}
          .iconContainerPadding=${4}
+          .iconSize=${'24px'}
          .disabled=${locked}
        >
-          ${ViewBarIcon}
+          ${ViewBarIcon()}
        </edgeless-tool-icon-button>
        <edgeless-tool-icon-button
          .tooltip=${'Zoom out'}
@@ -178,9 +175,10 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
          .arrow=${!this._isVerticalBar()}
          @click=${() => this.edgelessService.setZoomByStep(-ZOOM_STEP)}
          .iconContainerPadding=${4}
+          .iconSize=${'24px'}
          .disabled=${locked}
        >
-          ${MinusIcon}
+          ${MinusIcon()}
        </edgeless-tool-icon-button>
        <button
          class="zoom-percent"
@@ -195,9 +193,10 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
          .arrow=${!this._isVerticalBar()}
          @click=${() => this.edgelessService.setZoomByStep(ZOOM_STEP)}
          .iconContainerPadding=${4}
+          .iconSize=${'24px'}
          .disabled=${locked}
        >
-          ${PlusIcon}
+          ${PlusIcon()}
        </edgeless-tool-icon-button>
      </div>
    `;
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/add-frame-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/add-frame-button.ts
@@ -1,8 +1,8 @@
-import { FrameIcon } from '@blocksuite/affine-components/icons';
 import { MindmapElementModel } from '@blocksuite/affine-model';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';
 import type { GfxModel } from '@blocksuite/block-std/gfx';
 import { Bound, WithDisposable } from '@blocksuite/global/utils';
+import { FrameIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';

@@ -36,9 +36,10 @@ export class EdgelessAddFrameButton extends WithDisposable(LitElement) {
        aria-label="Frame"
        .tooltip=${'Frame'}
        .labelHeight=${'20px'}
+        .iconSize=${'20px'}
        @click=${this._createFrame}
      >
-        ${FrameIcon}<span class="label medium">Frame</span>
+        ${FrameIcon()}<span class="label medium">Frame</span>
      </editor-icon-button>
    `;
  }
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/add-group-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/add-group-button.ts
@@ -1,10 +1,10 @@
-import { GroupIcon } from '@blocksuite/affine-components/icons';
 import {
  GroupElementModel,
  MindmapElementModel,
 } from '@blocksuite/affine-model';
 import type { GfxModel } from '@blocksuite/block-std/gfx';
 import { WithDisposable } from '@blocksuite/global/utils';
+import { GroupingIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';

@@ -27,9 +27,10 @@ export class EdgelessAddGroupButton extends WithDisposable(LitElement) {
        aria-label="Group"
        .tooltip=${'Group'}
        .labelHeight=${'20px'}
+        .iconSize=${'20px'}
        @click=${this._createGroup}
      >
-        ${GroupIcon}<span class="label medium">Group</span>
+        ${GroupingIcon()}<span class="label medium">Group</span>
      </editor-icon-button>
    `;
  }
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/align-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/align-button.ts
@@ -4,26 +4,27 @@ import {
  EdgelessCRUDIdentifier,
  updateXYWH,
 } from '@blocksuite/affine-block-surface';
-import {
-  AlignBottomIcon,
-  AlignDistributeHorizontallyIcon,
-  AlignDistributeVerticallyIcon,
-  AlignHorizontallyIcon,
-  AlignLeftIcon,
-  AlignRightIcon,
-  AlignTopIcon,
-  AlignVerticallyIcon,
-  SmallArrowDownIcon,
-} from '@blocksuite/affine-components/icons';
 import { MindmapElementModel } from '@blocksuite/affine-model';
 import type { GfxModel } from '@blocksuite/block-std/gfx';
 import { Bound, WithDisposable } from '@blocksuite/global/utils';
-import { AutoTidyUpIcon, ResizeTidyUpIcon } from '@blocksuite/icons/lit';
+import {
+  AlignBottomIcon,
+  AlignHorizontalCenterIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  AlignTopIcon,
+  AlignVerticalCenterIcon,
+  AutoTidyUpIcon,
+  DistributeHorizontalIcon,
+  DistributeVerticalIcon,
+  ResizeTidyUpIcon,
+} from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';

 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
+import { SmallArrowDownIcon } from './icons.js';

 const enum Alignment {
  AutoArrange = 'Auto arrange',
@@ -43,41 +44,42 @@ interface AlignmentIcon {
  content: TemplateResult<1>;
 }

+const iconSize = { width: '20px', height: '20px' };
 const HORIZONTAL_ALIGNMENT: AlignmentIcon[] = [
  {
    name: Alignment.Left,
-    content: AlignLeftIcon,
+    content: AlignLeftIcon(iconSize),
  },
  {
    name: Alignment.Horizontally,
-    content: AlignHorizontallyIcon,
+    content: AlignHorizontalCenterIcon(iconSize),
  },
  {
    name: Alignment.Right,
-    content: AlignRightIcon,
+    content: AlignRightIcon(iconSize),
  },
  {
    name: Alignment.DistributeHorizontally,
-    content: AlignDistributeHorizontallyIcon,
+    content: DistributeHorizontalIcon(iconSize),
  },
 ];

 const VERTICAL_ALIGNMENT: AlignmentIcon[] = [
  {
    name: Alignment.Top,
-    content: AlignTopIcon,
+    content: AlignTopIcon(iconSize),
  },
  {
    name: Alignment.Vertically,
-    content: AlignVerticallyIcon,
+    content: AlignVerticalCenterIcon(iconSize),
  },
  {
    name: Alignment.Bottom,
-    content: AlignBottomIcon,
+    content: AlignBottomIcon(iconSize),
  },
  {
    name: Alignment.DistributeVertically,
-    content: AlignDistributeVerticallyIcon,
+    content: DistributeVerticalIcon(iconSize),
  },
 ];

@@ -288,6 +290,7 @@ export class EdgelessAlignButton extends WithDisposable(LitElement) {
            <editor-icon-button
              aria-label=${name}
              .tooltip=${name}
+              .iconSize=${'20px'}
              @click=${() => this._align(name)}
            >
              ${content}
@@ -314,7 +317,7 @@ export class EdgelessAlignButton extends WithDisposable(LitElement) {
            aria-label="Align objects"
            .tooltip=${'Align objects'}
          >
-            ${AlignLeftIcon}${SmallArrowDownIcon}
+            ${AlignLeftIcon(iconSize)}${SmallArrowDownIcon}
          </editor-icon-button>
        `}
      >
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
@@ -7,25 +7,6 @@ import {
  packColor,
  packColorsWithColorScheme,
 } from '@blocksuite/affine-components/color-picker';
-import {
-  AddTextIcon,
-  ConnectorCWithArrowIcon,
-  ConnectorEndpointNoneIcon,
-  ConnectorLWithArrowIcon,
-  ConnectorXWithArrowIcon,
-  FlipDirectionIcon,
-  FrontEndpointArrowIcon,
-  FrontEndpointCircleIcon,
-  FrontEndpointDiamondIcon,
-  FrontEndpointTriangleIcon,
-  GeneralStyleIcon,
-  RearEndpointArrowIcon,
-  RearEndpointCircleIcon,
-  RearEndpointDiamondIcon,
-  RearEndpointTriangleIcon,
-  ScribbledStyleIcon,
-  SmallArrowDownIcon,
-} from '@blocksuite/affine-components/icons';
 import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import {
  type ColorScheme,
@@ -45,6 +26,24 @@ import {
 import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
+import {
+  AddTextIcon,
+  ConnectorCIcon,
+  ConnectorEIcon,
+  ConnectorLIcon,
+  EndPointArrowIcon,
+  EndPointCircleIcon,
+  EndPointDiamondIcon,
+  EndPointTriangleIcon,
+  FlipDirectionIcon,
+  StartPointArrowIcon,
+  StartPointCircleIcon,
+  StartPointDiamondIcon,
+  StartPointIcon,
+  StartPointTriangleIcon,
+  StyleGeneralIcon,
+  StyleScribbleIcon,
+} from '@blocksuite/icons/lit';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
@@ -59,6 +58,7 @@ import {
 } from '../../edgeless/components/panel/line-styles-panel.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 import { mountConnectorLabelEditor } from '../../edgeless/utils/text.js';
+import { SmallArrowDownIcon } from './icons.js';

 function getMostCommonColor(
  elements: ConnectorElementModel[],
@@ -136,92 +136,93 @@ interface EndpointStyle {
  icon: TemplateResult<1>;
 }

+const iconSize = { width: '20px', height: '20px' };
 const STYLE_LIST = [
  {
    name: 'General',
    value: false,
-    icon: GeneralStyleIcon,
+    icon: StyleGeneralIcon(iconSize),
  },
  {
    name: 'Scribbled',
    value: true,
-    icon: ScribbledStyleIcon,
+    icon: StyleScribbleIcon(iconSize),
  },
 ] as const;

 const STYLE_CHOOSE: [boolean, () => TemplateResult<1>][] = [
-  [false, () => GeneralStyleIcon],
-  [true, () => ScribbledStyleIcon],
+  [false, () => StyleGeneralIcon(iconSize)],
+  [true, () => StyleScribbleIcon(iconSize)],
 ] as const;

 const FRONT_ENDPOINT_STYLE_LIST: EndpointStyle[] = [
  {
    value: PointStyle.None,
-    icon: ConnectorEndpointNoneIcon,
+    icon: StartPointIcon(),
  },
  {
    value: PointStyle.Arrow,
-    icon: FrontEndpointArrowIcon,
+    icon: StartPointArrowIcon(),
  },
  {
    value: PointStyle.Triangle,
-    icon: FrontEndpointTriangleIcon,
+    icon: StartPointTriangleIcon(),
  },
  {
    value: PointStyle.Circle,
-    icon: FrontEndpointCircleIcon,
+    icon: StartPointCircleIcon(),
  },
  {
    value: PointStyle.Diamond,
-    icon: FrontEndpointDiamondIcon,
+    icon: StartPointDiamondIcon(),
  },
 ] as const;

 const REAR_ENDPOINT_STYLE_LIST: EndpointStyle[] = [
  {
    value: PointStyle.Diamond,
-    icon: RearEndpointDiamondIcon,
+    icon: EndPointDiamondIcon(),
  },
  {
    value: PointStyle.Circle,
-    icon: RearEndpointCircleIcon,
+    icon: EndPointCircleIcon(),
  },
  {
    value: PointStyle.Triangle,
-    icon: RearEndpointTriangleIcon,
+    icon: EndPointTriangleIcon(),
  },
  {
    value: PointStyle.Arrow,
-    icon: RearEndpointArrowIcon,
+    icon: EndPointArrowIcon(),
  },
  {
    value: PointStyle.None,
-    icon: ConnectorEndpointNoneIcon,
+    icon: StartPointIcon(),
  },
 ] as const;

 const MODE_LIST = [
  {
    name: 'Curve',
-    icon: ConnectorCWithArrowIcon,
+    icon: ConnectorCIcon(),
    value: ConnectorMode.Curve,
  },
  {
    name: 'Elbowed',
-    icon: ConnectorXWithArrowIcon,
+    icon: ConnectorEIcon(),
    value: ConnectorMode.Orthogonal,
  },
  {
    name: 'Straight',
-    icon: ConnectorLWithArrowIcon,
+    icon: ConnectorLIcon(),
    value: ConnectorMode.Straight,
  },
 ] as const;

 const MODE_CHOOSE: [ConnectorMode, () => TemplateResult<1>][] = [
-  [ConnectorMode.Curve, () => ConnectorCWithArrowIcon],
-  [ConnectorMode.Orthogonal, () => ConnectorXWithArrowIcon],
-  [ConnectorMode.Straight, () => ConnectorLWithArrowIcon],
+  [ConnectorMode.Curve, () => ConnectorCIcon()],
+  [ConnectorMode.Orthogonal, () => ConnectorEIcon()],
+  [ConnectorMode.Straight, () => ConnectorLIcon()],
 ] as const;

 export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
@@ -286,10 +287,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
  }

  private _getEndpointIcon(list: EndpointStyle[], style: PointStyle) {
-    return (
-      list.find(({ value }) => value === style)?.icon ||
-      ConnectorEndpointNoneIcon
-    );
+    return list.find(({ value }) => value === style)?.icon || StartPointIcon();
  }

  private _setConnectorMode(mode: ConnectorMode) {
@@ -414,6 +412,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
                <editor-icon-button
                  aria-label="Stroke style"
                  .tooltip=${'Stroke style'}
+                  .iconSize=${'20px'}
                >
                  <edgeless-color-button
                    .color=${selectedColor}
@@ -437,7 +436,11 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
        html`
          <editor-menu-button
            .button=${html`
-              <editor-icon-button aria-label="Style" .tooltip=${'Style'}>
+              <editor-icon-button
+                aria-label="Style"
+                .tooltip=${'Style'}
+                .iconSize=${'20px'}
+              >
                ${choose(selectedRough, STYLE_CHOOSE)}${SmallArrowDownIcon}
              </editor-icon-button>
            `}
@@ -452,6 +455,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
                    .tooltip=${name}
                    .active=${selectedRough === value}
                    .activeMode=${'background'}
+                    .iconSize=${'20px'}
                    @click=${() => this._setConnectorRough(value)}
                  >
                    ${icon}
@@ -468,6 +472,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
              <editor-icon-button
                aria-label="Start point style"
                .tooltip=${'Start point style'}
+                .iconSize=${'20px'}
              >
                ${this._getEndpointIcon(
                  FRONT_ENDPOINT_STYLE_LIST,
@@ -486,6 +491,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
                    .tooltip=${value}
                    .active=${selectedStartPointStyle === value}
                    .activeMode=${'background'}
+                    .iconSize=${'20px'}
                    @click=${() =>
                      this._setConnectorPointStyle(
                        ConnectorEndpoint.Front,
@@ -503,13 +509,14 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
            aria-label="Flip direction"
            .tooltip=${'Flip direction'}
            .disabled=${false}
+            .iconSize=${'20px'}
            @click=${() =>
              this._flipEndpointStyle(
                selectedStartPointStyle,
                selectedEndPointStyle
              )}
          >
-            ${FlipDirectionIcon}
+            ${FlipDirectionIcon()}
          </editor-icon-button>

          <editor-menu-button
@@ -517,6 +524,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
              <editor-icon-button
                aria-label="End point style"
                .tooltip=${'End point style'}
+                .iconSize=${'20px'}
              >
                ${this._getEndpointIcon(
                  REAR_ENDPOINT_STYLE_LIST,
@@ -535,6 +543,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
                    .tooltip=${value}
                    .active=${selectedEndPointStyle === value}
                    .activeMode=${'background'}
+                    .iconSize=${'20px'}
                    @click=${() =>
                      this._setConnectorPointStyle(
                        ConnectorEndpoint.Rear,
@@ -553,6 +562,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
              <editor-icon-button
                aria-label="Shape"
                .tooltip=${'Connector shape'}
+                .iconSize=${'20px'}
              >
                ${choose(selectedMode, MODE_CHOOSE)}${SmallArrowDownIcon}
              </editor-icon-button>
@@ -568,6 +578,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
                    .tooltip=${name}
                    .active=${selectedMode === value}
                    .activeMode=${'background'}
+                    .iconSize=${'20px'}
                    @click=${() => this._setConnectorMode(value)}
                  >
                    ${icon}
@@ -587,9 +598,10 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
                <editor-icon-button
                  aria-label="Add text"
                  .tooltip=${'Add text'}
+                  .iconSize=${'20px'}
                  @click=${this._addLabel}
                >
-                  ${AddTextIcon}
+                  ${AddTextIcon()}
                </editor-icon-button>
              `,
            ],
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts
@@ -17,7 +17,6 @@ import {
  ExpandFullSmallIcon,
  OpenIcon,
  PaletteIcon,
-  SmallArrowDownIcon,
 } from '@blocksuite/affine-components/icons';
 import {
  notifyLinkedDocClearedAliases,
@@ -72,6 +71,7 @@ import {
  isEmbedSyncedDocBlock,
 } from '../../edgeless/utils/query.js';
 import type { BuiltInEmbedBlockComponent } from '../../utils/types';
+import { SmallArrowDownIcon } from './icons.js';

 export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
  static override styles = css`
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
@@ -7,11 +7,6 @@ import {
  packColor,
  packColorsWithColorScheme,
 } from '@blocksuite/affine-components/color-picker';
-import {
-  NoteIcon,
-  RenameIcon,
-  UngroupButtonIcon,
-} from '@blocksuite/affine-components/icons';
 import { toast } from '@blocksuite/affine-components/toast';
 import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import {
@@ -34,6 +29,7 @@ import {
  serializeXYWH,
  WithDisposable,
 } from '@blocksuite/global/utils';
+import { EditIcon, PageIcon, UngroupIcon } from '@blocksuite/icons/lit';
 import { html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { join } from 'lit/directives/join.js';
@@ -148,7 +144,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
                .labelHeight=${'20px'}
                @click=${this._insertIntoPage}
              >
-                ${NoteIcon}
+                ${PageIcon()}
                <span class="label">Insert into Page</span>
              </editor-icon-button>
            `
@@ -163,7 +159,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
                @click=${() =>
                  mountFrameTitleEditor(this.frames[0], this.edgeless)}
              >
-                ${RenameIcon}
+                ${EditIcon()}
              </editor-icon-button>
            `
          : nothing,
@@ -187,7 +183,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
              this.edgeless.service.selection.clear();
            }}
          >
-            ${UngroupButtonIcon}
+            ${UngroupIcon()}
          </editor-icon-button>
        `,

--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-group-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-group-button.ts
@@ -1,8 +1,3 @@
-import {
-  NoteIcon,
-  RenameIcon,
-  UngroupButtonIcon,
-} from '@blocksuite/affine-components/icons';
 import { toast } from '@blocksuite/affine-components/toast';
 import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import type { GroupElementModel } from '@blocksuite/affine-model';
@@ -17,6 +12,7 @@ import {
  serializeXYWH,
  WithDisposable,
 } from '@blocksuite/global/utils';
+import { EditIcon, PageIcon, UngroupIcon } from '@blocksuite/icons/lit';
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { join } from 'lit/directives/join.js';
@@ -83,7 +79,7 @@ export class EdgelessChangeGroupButton extends WithDisposable(LitElement) {
                .labelHeight=${'20px'}
                @click=${this._insertIntoPage}
              >
-                ${NoteIcon}
+                ${PageIcon()}
                <span class="label">Insert into Page</span>
              </editor-icon-button>
            `
@@ -97,7 +93,7 @@ export class EdgelessChangeGroupButton extends WithDisposable(LitElement) {
                .iconSize=${'20px'}
                @click=${() => mountGroupTitleEditor(groups[0], this.edgeless)}
              >
-                ${RenameIcon}
+                ${EditIcon()}
              </editor-icon-button>
            `
          : nothing,
@@ -110,7 +106,7 @@ export class EdgelessChangeGroupButton extends WithDisposable(LitElement) {
            @click=${() =>
              groups.forEach(group => this.edgeless.service.ungroup(group))}
          >
-            ${UngroupButtonIcon}
+            ${UngroupIcon()}
          </editor-icon-button>
        `,
      ].filter(button => button !== nothing),
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts
@@ -1,15 +1,9 @@
-/* oxlint-disable @typescript-eslint/no-non-null-assertion */
 import {
-  MindmapBalanceLayoutIcon,
-  MindmapLeftLayoutIcon,
-  MindmapRightLayoutIcon,
  MindmapStyleFour,
-  MindmapStyleIcon,
  MindmapStyleOne,
  MindmapStyleThree,
  MindmapStyleTwo,
-  SmallArrowDownIcon,
-} from '@blocksuite/affine-components/icons';
+} from '@blocksuite/affine-block-surface';
 import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import type {
  MindmapElementModel,
@@ -18,12 +12,16 @@ import type {
 import { LayoutType, MindmapStyle } from '@blocksuite/affine-model';
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
+import { RadiantIcon, RightLayoutIcon, StyleIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { join } from 'lit/directives/join.js';
 import { repeat } from 'lit/directives/repeat.js';

 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
+import { SmallArrowDownIcon } from './icons.js';
+
+const iconSize = { width: '20', height: '20' };

 const MINDMAP_STYLE_LIST = [
  {
@@ -54,17 +52,20 @@ const MINDMAP_LAYOUT_LIST: LayoutItem[] = [
  {
    name: 'Left',
    value: LayoutType.LEFT,
-    icon: MindmapLeftLayoutIcon,
+    icon: RightLayoutIcon({
+      ...iconSize,
+      style: 'transform: rotate(0.5turn); transform-origin: center;',
+    }),
  },
  {
    name: 'Radial',
    value: LayoutType.BALANCE,
-    icon: MindmapBalanceLayoutIcon,
+    icon: RadiantIcon(iconSize),
  },
  {
    name: 'Right',
    value: LayoutType.RIGHT,
-    icon: MindmapRightLayoutIcon,
+    icon: RightLayoutIcon(iconSize),
  },
 ] as const;

@@ -214,7 +215,7 @@ export class EdgelessChangeMindmapButton extends WithDisposable(LitElement) {
            .contentPadding=${'8px'}
            .button=${html`
              <editor-icon-button aria-label="Style" .tooltip=${'Style'}>
-                ${MindmapStyleIcon}${SmallArrowDownIcon}
+                ${StyleIcon(iconSize)}${SmallArrowDownIcon}
              </editor-icon-button>
            `}
          >
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
@@ -11,15 +11,6 @@ import {
  packColor,
  packColorsWithColorScheme,
 } from '@blocksuite/affine-components/color-picker';
-import {
-  ExpandIcon,
-  LineStyleIcon,
-  NoteCornerIcon,
-  NoteShadowIcon,
-  ScissorsIcon,
-  ShrinkIcon,
-  SmallArrowDownIcon,
-} from '@blocksuite/affine-components/icons';
 import {
  type EditorMenuButton,
  renderToolbarSeparator,
@@ -44,7 +35,15 @@ import {
  maxBy,
  WithDisposable,
 } from '@blocksuite/global/utils';
-import { LinkedPageIcon } from '@blocksuite/icons/lit';
+import {
+  AutoHeightIcon,
+  CornerIcon,
+  CustomizedHeightIcon,
+  LineStyleIcon,
+  LinkedPageIcon,
+  NoteShadowDuotoneIcon,
+  ScissorsIcon,
+} from '@blocksuite/icons/lit';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { join } from 'lit/directives/join.js';
@@ -57,6 +56,7 @@ import {
 } from '../../edgeless/components/panel/line-styles-panel.js';
 import { getTooltipWithShortcut } from '../../edgeless/components/utils.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
+import { SmallArrowDownIcon } from './icons.js';
 import * as styles from './styles.css';

 const SIZE_LIST = [
@@ -336,6 +336,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
    const isDocOnly = displayMode === NoteDisplayMode.DocOnly;

    const theme = this.edgeless.std.get(ThemeProvider).theme;
+    const buttonIconSize = { width: '20px', height: '20px' };
    const buttons = [
      onlyOne && this._advancedVisibilityEnabled
        ? html`
@@ -381,7 +382,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
                  : NoteDisplayMode.EdgelessOnly
              )}
          >
-            ${LinkedPageIcon({ width: '20px', height: '20px' })}
+            ${LinkedPageIcon(buttonIconSize)}
            <span class="label"
              >${displayMode === NoteDisplayMode.EdgelessOnly
                ? 'Display In Page'
@@ -454,7 +455,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
                  aria-label="Shadow style"
                  .tooltip=${'Shadow style'}
                >
-                  ${NoteShadowIcon}${SmallArrowDownIcon}
+                  ${NoteShadowDuotoneIcon(buttonIconSize)}${SmallArrowDownIcon}
                </editor-icon-button>
              `}
            >
@@ -473,7 +474,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
                  aria-label="Border style"
                  .tooltip=${'Border style'}
                >
-                  ${LineStyleIcon}${SmallArrowDownIcon}
+                  ${LineStyleIcon(buttonIconSize)}${SmallArrowDownIcon}
                </editor-icon-button>
              `}
            >
@@ -491,7 +492,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
              .contentPadding=${'8px'}
              .button=${html`
                <editor-icon-button aria-label="Corners" .tooltip=${'Corners'}>
-                  ${NoteCornerIcon}${SmallArrowDownIcon}
+                  ${CornerIcon(buttonIconSize)}${SmallArrowDownIcon}
                </editor-icon-button>
              `}
            >
@@ -512,9 +513,10 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
              aria-label="Slicer"
              .tooltip=${getTooltipWithShortcut('Cutting mode', '-')}
              .active=${this.enableNoteSlicer}
+              .iconSize=${'20px'}
              @click=${() => this._handleNoteSlicerButtonClick()}
            >
-              ${ScissorsIcon}
+              ${ScissorsIcon()}
            </editor-icon-button>
          `
        : nothing,
@@ -526,9 +528,10 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
            aria-label="Size"
            data-testid="edgeless-note-auto-height"
            .tooltip=${collapse ? 'Auto height' : 'Customized height'}
+            .iconSize=${'20px'}
            @click=${() => this._setCollapse()}
          >
-            ${collapse ? ExpandIcon : ShrinkIcon}
+            ${collapse ? AutoHeightIcon() : CustomizedHeightIcon()}
          </editor-icon-button>`
        : nothing,

--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
@@ -7,13 +7,6 @@ import {
  packColor,
  packColorsWithColorScheme,
 } from '@blocksuite/affine-components/color-picker';
-import {
-  AddTextIcon,
-  ChangeShapeIcon,
-  GeneralStyleIcon,
-  ScribbledStyleIcon,
-  SmallArrowDownIcon,
-} from '@blocksuite/affine-components/icons';
 import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import type {
  Color,
@@ -37,6 +30,12 @@ import {
 import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
+import {
+  AddTextIcon,
+  ShapeIcon,
+  StyleGeneralIcon,
+  StyleScribbleIcon,
+} from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
@@ -54,6 +53,7 @@ import type { EdgelessShapePanel } from '../../edgeless/components/panel/shape-p
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 import type { ShapeToolOption } from '../../edgeless/gfx-tool/shape-tool.js';
 import { mountShapeTextEditor } from '../../edgeless/utils/text.js';
+import { SmallArrowDownIcon } from './icons.js';

 const changeShapeButtonStyles = [
  css`
@@ -274,6 +274,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
    const selectedLineSize = getMostCommonLineSize(elements);
    const selectedLineStyle = getMostCommonLineStyle(elements);
    const selectedShapeStyle = getMostCommonShapeStyle(elements);
+    const iconSize = { width: '20px', height: '20px' };

    return join(
      [
@@ -284,7 +285,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                aria-label="Switch type"
                .tooltip=${'Switch type'}
              >
-                ${ChangeShapeIcon}${SmallArrowDownIcon}
+                ${ShapeIcon(iconSize)}${SmallArrowDownIcon}
              </editor-icon-button>
            `}
          >
@@ -302,8 +303,8 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
              <editor-icon-button aria-label="Style" .tooltip=${'Style'}>
                ${cache(
                  selectedShapeStyle === ShapeStyle.General
-                    ? GeneralStyleIcon
-                    : ScribbledStyleIcon
+                    ? StyleGeneralIcon(iconSize)
+                    : StyleScribbleIcon(iconSize)
                )}
                ${SmallArrowDownIcon}
              </editor-icon-button>
@@ -453,9 +454,10 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                <editor-icon-button
                  aria-label="Add text"
                  .tooltip=${'Add text'}
+                  .iconSize=${'20px'}
                  @click=${this._addText}
                >
-                  ${AddTextIcon}
+                  ${AddTextIcon()}
                </editor-icon-button>
              `,
            ],
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
@@ -12,12 +12,6 @@ import {
  packColor,
  packColorsWithColorScheme,
 } from '@blocksuite/affine-components/color-picker';
-import {
-  SmallArrowDownIcon,
-  TextAlignCenterIcon,
-  TextAlignLeftIcon,
-  TextAlignRightIcon,
-} from '@blocksuite/affine-components/icons';
 import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import {
  type ColorScheme,
@@ -43,6 +37,11 @@ import {
  maxBy,
  WithDisposable,
 } from '@blocksuite/global/utils';
+import {
+  TextAlignCenterIcon,
+  TextAlignLeftIcon,
+  TextAlignRightIcon,
+} from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
@@ -50,6 +49,7 @@ import { join } from 'lit/directives/join.js';
 import { when } from 'lit/directives/when.js';

 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
+import { SmallArrowDownIcon } from './icons.js';

 const FONT_SIZE_LIST = [
  { value: 16 },
@@ -71,10 +71,11 @@ const FONT_STYLE_CHOOSE: [FontStyle, () => string | typeof nothing][] = [
  [FontStyle.Italic, () => 'Italic'],
 ] as const;

+const iconSize = { width: '20px', height: '20px' };
 const TEXT_ALIGN_CHOOSE: [TextAlign, () => TemplateResult<1>][] = [
-  [TextAlign.Left, () => TextAlignLeftIcon],
-  [TextAlign.Center, () => TextAlignCenterIcon],
-  [TextAlign.Right, () => TextAlignRightIcon],
+  [TextAlign.Left, () => TextAlignLeftIcon(iconSize)],
+  [TextAlign.Center, () => TextAlignCenterIcon(iconSize)],
+  [TextAlign.Right, () => TextAlignRightIcon(iconSize)],
 ] as const;

 function countByField<K extends keyof Omit<TextStyleProps, 'color'>>(
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/icons.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/icons.ts
@@ -0,0 +1,6 @@
+import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
+
+export const SmallArrowDownIcon = ArrowDownSmallIcon({
+  width: '16',
+  height: '16',
+});
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts
@@ -1,5 +1,4 @@
 import { isNoteBlock } from '@blocksuite/affine-block-surface';
-import { ConnectorCWithArrowIcon } from '@blocksuite/affine-components/icons';
 import {
  cloneGroups,
  darkToolbarStyles,
@@ -37,6 +36,7 @@ import {
  groupBy,
  pickValues,
 } from '@blocksuite/global/utils';
+import { ConnectorCIcon } from '@blocksuite/icons/lit';
 import { css, html, nothing, type TemplateResult, unsafeCSS } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { join } from 'lit/directives/join.js';
@@ -354,9 +354,10 @@ export class EdgelessElementToolbarWidget extends WidgetComponent<
          aria-label="Draw connector"
          .tooltip=${'Draw connector'}
          .activeMode=${'background'}
+          .iconSize=${'20px'}
          @click=${this._quickConnect}
        >
-          ${ConnectorCWithArrowIcon}
+          ${ConnectorCIcon()}
        </editor-icon-button>
      `,
    ];
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/release-from-group-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/release-from-group-button.ts
@@ -1,6 +1,6 @@
-import { ReleaseFromGroupButtonIcon } from '@blocksuite/affine-components/icons';
 import { GroupElementModel } from '@blocksuite/affine-model';
 import { WithDisposable } from '@blocksuite/global/utils';
+import { ReleaseFromGroupIcon } from '@blocksuite/icons/lit';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';

@@ -15,7 +15,7 @@ export class EdgelessReleaseFromGroupButton extends WithDisposable(LitElement) {

    const group = element.group;

-    // eslint-disable-next-line
+    // oxlint-disable-next-line unicorn/prefer-dom-node-remove
    group.removeChild(element);

    element.index = service.layer.generateIndex();
@@ -34,7 +34,7 @@ export class EdgelessReleaseFromGroupButton extends WithDisposable(LitElement) {
        .iconSize=${'20px'}
        @click=${() => this._releaseFromGroup()}
      >
-        ${ReleaseFromGroupButtonIcon}
+        ${ReleaseFromGroupIcon()}
      </editor-icon-button>
    `;
  }
--- a/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts
+++ b/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts
@@ -12,10 +12,8 @@ import {
  CaptionIcon,
  CopyIcon,
  EditIcon,
-  MoreVerticalIcon,
  OpenIcon,
  PaletteIcon,
-  SmallArrowDownIcon,
 } from '@blocksuite/affine-components/icons';
 import {
  notifyLinkedDocClearedAliases,
@@ -62,6 +60,7 @@ import {
  TextSelection,
  WidgetComponent,
 } from '@blocksuite/block-std';
+import { ArrowDownSmallIcon, MoreVerticalIcon } from '@blocksuite/icons/lit';
 import { type BlockModel, Text } from '@blocksuite/store';
 import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
 import { html, nothing, type TemplateResult } from 'lit';
@@ -588,7 +587,7 @@ export class EmbedCardToolbar extends WidgetComponent<
            .justify=${'space-between'}
            .labelHeight=${'20px'}
          >
-            ${OpenIcon}${SmallArrowDownIcon}
+            ${OpenIcon}${ArrowDownSmallIcon({ width: '16px', height: '16px' })}
          </editor-icon-button>
        `}
      >
@@ -721,7 +720,7 @@ export class EmbedCardToolbar extends WidgetComponent<
              <span style="text-transform: capitalize">${this._viewType}</span>
              view
            </div>
-            ${SmallArrowDownIcon}
+            ${ArrowDownSmallIcon({ width: '16px', height: '16px' })}
          </editor-icon-button>
        `}
        @toggle=${this._toggleViewSelector}
@@ -869,8 +868,12 @@ export class EmbedCardToolbar extends WidgetComponent<
        <editor-menu-button
          .contentPadding=${'8px'}
          .button=${html`
-            <editor-icon-button aria-label="More" .tooltip=${'More'}>
-              ${MoreVerticalIcon}
+            <editor-icon-button
+              aria-label="More"
+              .tooltip=${'More'}
+              .iconSize=${'20px'}
+            >
+              ${MoreVerticalIcon()}
            </editor-icon-button>
          `}
        >
--- a/blocksuite/blocks/src/root-block/widgets/format-bar/config.ts
+++ b/blocksuite/blocks/src/root-block/widgets/format-bar/config.ts
@@ -26,7 +26,6 @@ import {
  ItalicIcon,
  LinkedDocIcon,
  LinkIcon,
-  MoreVerticalIcon,
  NumberedListIcon,
  QuoteIcon,
  StrikethroughIcon,
@@ -64,6 +63,7 @@ import type {
 } from '@blocksuite/block-std';
 import { tableViewMeta } from '@blocksuite/data-view/view-presets';
 import { assertExists } from '@blocksuite/global/utils';
+import { MoreVerticalIcon } from '@blocksuite/icons/lit';
 import { Slice } from '@blocksuite/store';
 import { html, type TemplateResult } from 'lit';

@@ -460,8 +460,12 @@ export function toolbarMoreButton(toolbar: AffineFormatBarWidget) {
    <editor-menu-button
      .contentPadding="${'8px'}"
      .button="${html`
-        <editor-icon-button aria-label="More" .tooltip=${'More'}>
-          ${MoreVerticalIcon}
+        <editor-icon-button
+          aria-label="More"
+          .tooltip=${'More'}
+          .iconSize=${'20px'}
+        >
+          ${MoreVerticalIcon()}
        </editor-icon-button>
      `}"
    >
--- a/blocksuite/blocks/src/root-block/widgets/image-toolbar/components/image-toolbar.ts
+++ b/blocksuite/blocks/src/root-block/widgets/image-toolbar/components/image-toolbar.ts
@@ -1,4 +1,3 @@
-import { MoreVerticalIcon } from '@blocksuite/affine-components/icons';
 import { createLitPortal } from '@blocksuite/affine-components/portal';
 import type {
  EditorIconButton,
@@ -6,6 +5,7 @@ import type {
 } from '@blocksuite/affine-components/toolbar';
 import { renderGroups } from '@blocksuite/affine-components/toolbar';
 import { assertExists, noop } from '@blocksuite/global/utils';
+import { MoreVerticalIcon } from '@blocksuite/icons/lit';
 import { flip, offset } from '@floating-ui/dom';
 import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
@@ -107,9 +107,10 @@ export class AffineImageToolbar extends LitElement {
          .tooltip=${'More'}
          .tooltipOffset=${4}
          .showTooltip=${!this._moreMenuOpen}
+          .iconSize=${'20px'}
          @click=${() => this._toggleMoreMenu()}
        >
-          ${MoreVerticalIcon}
+          ${MoreVerticalIcon()}
        </editor-icon-button>
      </editor-toolbar>
    `;
--- a/blocksuite/blocks/src/root-block/widgets/image-toolbar/config.ts
+++ b/blocksuite/blocks/src/root-block/widgets/image-toolbar/config.ts
@@ -1,12 +1,11 @@
 import {
-  BookmarkIcon,
  CaptionIcon,
  CopyIcon,
  DeleteIcon,
  DownloadIcon,
-  DuplicateIcon,
 } from '@blocksuite/affine-components/icons';
 import type { MenuItemGroup } from '@blocksuite/affine-components/toolbar';
+import { BookmarkIcon, DuplicateIcon } from '@blocksuite/icons/lit';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';

@@ -90,7 +89,7 @@ export const clipboardGroup: MenuItemGroup<ImageToolbarContext> = {
    {
      type: 'duplicate',
      label: 'Duplicate',
-      icon: DuplicateIcon,
+      icon: DuplicateIcon(),
      when: ({ doc }) => !doc.readonly,
      action: ({ blockComponent, abortController }) => {
        duplicate(blockComponent, abortController);
@@ -106,7 +105,7 @@ export const conversionsGroup: MenuItemGroup<ImageToolbarContext> = {
    {
      label: 'Turn into card view',
      type: 'turn-into-card-view',
-      icon: BookmarkIcon,
+      icon: BookmarkIcon(),
      when: ({ doc, blockComponent }) => {
        const supportAttachment =
          doc.schema.flavourSchemaMap.has('affine:attachment');
--- a/blocksuite/blocks/src/root-block/widgets/linked-doc/linked-doc-popover.ts
+++ b/blocksuite/blocks/src/root-block/widgets/linked-doc/linked-doc-popover.ts
@@ -1,6 +1,5 @@
 import { LoadingIcon } from '@blocksuite/affine-block-image';
 import type { IconButton } from '@blocksuite/affine-components/icon-button';
-import { MoreHorizontalIcon } from '@blocksuite/affine-components/icons';
 import {
  cleanSpecifiedTail,
  getTextContentFromInlineRange,
@@ -18,6 +17,7 @@ import {
  throttle,
  WithDisposable,
 } from '@blocksuite/global/utils';
+import { MoreHorizontalIcon } from '@blocksuite/icons/lit';
 import { effect } from '@preact/signals-core';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, queryAll, state } from 'lit/decorators.js';
@@ -143,7 +143,7 @@ export class LinkedDocPopover extends SignalWatcher(
      items = items.concat({
        key: `${group.name} More`,
        name: resolveSignal(group.overflowText) || 'more',
-        icon: MoreHorizontalIcon,
+        icon: MoreHorizontalIcon({ width: '24px', height: '24px' }),
        action: () => {
          this._expanded.set(group.name, true);
          this.requestUpdate();
--- a/blocksuite/blocks/src/root-block/widgets/slash-menu/config.ts
+++ b/blocksuite/blocks/src/root-block/widgets/slash-menu/config.ts
@@ -21,9 +21,7 @@ import {
  DatabaseTableViewIcon20,
  DeleteIcon,
  FileIcon,
-  FrameIcon,
  HeadingIcon,
-  ImageIcon20,
  LinkedDocIcon,
  LinkIcon,
  NewDocIcon,
@@ -63,7 +61,9 @@ import { assertType } from '@blocksuite/global/utils';
 import {
  DualLinkIcon,
  ExportToPdfIcon,
+  FrameIcon,
  GroupingIcon,
+  ImageIcon,
  TableIcon,
  TeXIcon,
 } from '@blocksuite/icons/lit';
@@ -174,10 +174,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
    {
      name: 'Inline equation',
      description: 'Create a equation block.',
-      icon: TeXIcon({
-        width: '20',
-        height: '20',
-      }),
+      icon: TeXIcon(),
      alias: ['inlineMath, inlineEquation', 'inlineLatex'],
      action: ({ rootComponent }) => {
        rootComponent.std.command
@@ -266,10 +263,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
    {
      name: 'Table',
      description: 'Create a simple table.',
-      icon: TableIcon({
-        width: '20',
-        height: '20',
-      }),
+      icon: TableIcon(),
      tooltip: slashMenuToolTips['Table View'],
      showWhen: ({ model }) => !insideEdgelessText(model),
      action: ({ rootComponent }) => {
@@ -286,7 +280,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
    {
      name: 'Image',
      description: 'Insert an image.',
-      icon: ImageIcon20,
+      icon: ImageIcon(),
      tooltip: slashMenuToolTips['Image'],
      showWhen: ({ model }) =>
        model.doc.schema.flavourSchemaMap.has('affine:image'),
@@ -464,10 +458,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
    {
      name: 'Equation',
      description: 'Create a equation block.',
-      icon: TeXIcon({
-        width: '20',
-        height: '20',
-      }),
+      icon: TeXIcon(),
      alias: ['mathBlock, equationBlock', 'latexBlock'],
      action: ({ rootComponent }) => {
        rootComponent.std.command
@@ -499,7 +490,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {

      const frameItems = frameModels.map<SlashMenuActionItem>(frameModel => ({
        name: 'Frame: ' + frameModel.title,
-        icon: FrameIcon,
+        icon: FrameIcon(),
        action: ({ rootComponent }) => {
          rootComponent.std.command
            .chain()
@@ -748,7 +739,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
    {
      name: 'Duplicate',
      description: 'Create a duplicate of this line.',
-      icon: DualLinkIcon({ width: '20', height: '20' }),
+      icon: DualLinkIcon(),
      tooltip: slashMenuToolTips['Copy'],
      action: ({ rootComponent, model }) => {
        if (!model.text || !(model.text instanceof Text)) {
--- a/blocksuite/blocks/src/root-block/widgets/slash-menu/styles.ts
+++ b/blocksuite/blocks/src/root-block/widgets/slash-menu/styles.ts
@@ -70,6 +70,8 @@ export const styles = css`

  .slash-menu-item-icon svg {
    display: block;
+    width: 100%;
+    height: 100%;
  }

  .slash-menu-item.ask-ai {
--- a/blocksuite/blocks/src/root-block/widgets/surface-ref-toolbar/surface-ref-toolbar.ts
+++ b/blocksuite/blocks/src/root-block/widgets/surface-ref-toolbar/surface-ref-toolbar.ts
@@ -1,13 +1,6 @@
 import type { SurfaceRefBlockComponent } from '@blocksuite/affine-block-surface-ref';
 import { HoverController } from '@blocksuite/affine-components/hover';
-import {
-  CaptionIcon,
-  CenterPeekIcon,
-  EdgelessModeIcon,
-  MoreVerticalIcon,
-  OpenIcon,
-  SmallArrowDownIcon,
-} from '@blocksuite/affine-components/icons';
+import { CaptionIcon, OpenIcon } from '@blocksuite/affine-components/icons';
 import { isPeekable, peek } from '@blocksuite/affine-components/peek';
 import {
  cloneGroups,
@@ -24,6 +17,12 @@ import {
  TextSelection,
  WidgetComponent,
 } from '@blocksuite/block-std';
+import {
+  ArrowDownSmallIcon,
+  CenterPeekIcon,
+  EdgelessIcon,
+  MoreVerticalIcon,
+} from '@blocksuite/icons/lit';
 import { offset, shift } from '@floating-ui/dom';
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -123,11 +122,13 @@ function SurfaceRefToolbarOptions({
  const hasValidReference = !!blockComponent.referenceModel;

  const openMenuActions: MenuItem[] = [];
+
+  const iconSize = { width: '20px', height: '20px' };
  if (hasValidReference) {
    openMenuActions.push({
      type: 'open-in-edgeless',
      label: 'Open in edgeless',
-      icon: EdgelessModeIcon,
+      icon: EdgelessIcon(iconSize),
      action: () => blockComponent.viewInEdgeless(),
      disabled: readonly,
    });
@@ -136,7 +137,7 @@ function SurfaceRefToolbarOptions({
      openMenuActions.push({
        type: 'open-in-center-peek',
        label: 'Open in center peek',
-        icon: CenterPeekIcon,
+        icon: CenterPeekIcon(iconSize),
        action: () => peek(blockComponent),
      });
    }
@@ -155,7 +156,10 @@ function SurfaceRefToolbarOptions({
                .justify=${'space-between'}
                .labelHeight=${'20px'}
              >
-                ${OpenIcon}${SmallArrowDownIcon}
+                ${OpenIcon}${ArrowDownSmallIcon({
+                  width: '16px',
+                  height: '16px',
+                })}
              </editor-icon-button>
            `}
          >
@@ -197,8 +201,12 @@ function SurfaceRefToolbarOptions({
      <editor-menu-button
        .contentPadding=${'8px'}
        .button=${html`
-          <editor-icon-button aria-label="More" .tooltip=${'More'}>
-            ${MoreVerticalIcon}
+          <editor-icon-button
+            aria-label="More"
+            .tooltip=${'More'}
+            .iconSize=${'20px'}
+          >
+            ${MoreVerticalIcon()}
          </editor-icon-button>
        `}
      >