diff --git a/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts b/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
index 4390513efe..ed5586ede6 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
@@ -1,4 +1,5 @@
import { toast } from '@blocksuite/affine-components/toast';
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import {
type EmbedCardStyle,
EmbedLinkedDocModel,
@@ -25,7 +26,6 @@ import {
import { BlockFlavourIdentifier } from '@blocksuite/block-std';
import { Bound } from '@blocksuite/global/gfx';
import {
- ArrowDownSmallIcon,
CaptionIcon,
CopyIcon,
DeleteIcon,
@@ -136,7 +136,7 @@ const openDocActionGroup = {
.contentPadding="${'8px'}"
.button=${html`
- ${OpenInNewIcon()} ${ArrowDownSmallIcon()}
+ ${OpenInNewIcon()} ${EditorChevronDown}
`}
>
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts b/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
index b652e711a1..5f978c502a 100644
--- a/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
@@ -1,4 +1,5 @@
import { toast } from '@blocksuite/affine-components/toast';
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import { EmbedSyncedDocModel } from '@blocksuite/affine-model';
import {
ActionPlacement,
@@ -14,7 +15,6 @@ import { getBlockProps } from '@blocksuite/affine-shared/utils';
import { BlockFlavourIdentifier } from '@blocksuite/block-std';
import { Bound } from '@blocksuite/global/gfx';
import {
- ArrowDownSmallIcon,
CaptionIcon,
CopyIcon,
DeleteIcon,
@@ -89,7 +89,7 @@ const openDocActionGroup = {
.contentPadding="${'8px'}"
.button=${html`
- ${OpenInNewIcon()} ${ArrowDownSmallIcon()}
+ ${OpenInNewIcon()} ${EditorChevronDown}
`}
>
diff --git a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-border-dropdown-menu.ts b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-border-dropdown-menu.ts
index 735b32b146..2cea67a0c9 100644
--- a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-border-dropdown-menu.ts
+++ b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-border-dropdown-menu.ts
@@ -1,6 +1,7 @@
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import { LineWidth, type StrokeStyle } from '@blocksuite/affine-model';
import { ShadowlessElement } from '@blocksuite/block-std';
-import { ArrowDownSmallIcon, LineStyleIcon } from '@blocksuite/icons/lit';
+import { LineStyleIcon } from '@blocksuite/icons/lit';
import { html } from 'lit';
import { property } from 'lit/decorators.js';
@@ -15,7 +16,7 @@ export class EdgelessNoteBorderDropdownMenu extends ShadowlessElement {
aria-label="Border style"
.tooltip="${'Border style'}"
>
- ${LineStyleIcon()} ${ArrowDownSmallIcon()}
+ ${LineStyleIcon()} ${EditorChevronDown}
`}
>
diff --git a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-display-mode-dropdown-menu.ts b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-display-mode-dropdown-menu.ts
index b9d02eb4ec..b459148698 100644
--- a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-display-mode-dropdown-menu.ts
+++ b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-display-mode-dropdown-menu.ts
@@ -1,6 +1,6 @@
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import { NoteDisplayMode } from '@blocksuite/affine-model';
import { ShadowlessElement } from '@blocksuite/block-std';
-import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
import { html } from 'lit';
import { property } from 'lit/decorators.js';
@@ -34,7 +34,7 @@ export class EdgelessNoteDisplayModeDropdownMenu extends ShadowlessElement {
.labelHeight="${'20px'}"
>
${mode}
- ${ArrowDownSmallIcon()}
+ ${EditorChevronDown}
`}
>
diff --git a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-shadow-dropdown-menu.ts b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-shadow-dropdown-menu.ts
index 55f1979b89..80ca8850d7 100644
--- a/blocksuite/affine/blocks/block-note/src/components/edgeless-note-shadow-dropdown-menu.ts
+++ b/blocksuite/affine/blocks/block-note/src/components/edgeless-note-shadow-dropdown-menu.ts
@@ -1,8 +1,6 @@
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import { ColorScheme, NoteShadow } from '@blocksuite/affine-model';
-import {
- ArrowDownSmallIcon,
- NoteShadowDuotoneIcon,
-} from '@blocksuite/icons/lit';
+import { NoteShadowDuotoneIcon } from '@blocksuite/icons/lit';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
@@ -119,7 +117,7 @@ export class EdgelessNoteShadowDropdownMenu extends LitElement {
aria-label="Shadow style"
.tooltip="${'Shadow style'}"
>
- ${NoteShadowDuotoneIcon()} ${ArrowDownSmallIcon()}
+ ${NoteShadowDuotoneIcon()} ${EditorChevronDown}
`}
>
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/alignment.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/alignment.ts
index fac7743a80..0d22c87b6b 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/alignment.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/alignment.ts
@@ -4,6 +4,7 @@ import {
EdgelessCRUDIdentifier,
updateXYWH,
} from '@blocksuite/affine-block-surface';
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import type { ToolbarContext } from '@blocksuite/affine-shared/services';
import type { GfxModel } from '@blocksuite/block-std/gfx';
import { Bound } from '@blocksuite/global/gfx';
@@ -14,7 +15,6 @@ import {
AlignRightIcon,
AlignTopIcon,
AlignVerticalCenterIcon,
- ArrowDownSmallIcon,
AutoTidyUpIcon,
DistributeHorizontalIcon,
DistributeVerticalIcon,
@@ -272,7 +272,7 @@ export function renderAlignmentMenu(
aria-label="${label}"
.tooltip="${tooltip ?? label}"
>
- ${icon} ${ArrowDownSmallIcon()}
+ ${icon} ${EditorChevronDown}
`}
>
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts
index 2264958f23..6bc1df7fb6 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts
@@ -6,6 +6,7 @@ import {
packColor,
type PickColorEvent,
} from '@blocksuite/affine-components/color-picker';
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import {
DefaultTheme,
FontFamily,
@@ -26,7 +27,6 @@ import {
} from '@blocksuite/affine-shared/utils';
import type { GfxModel } from '@blocksuite/block-std/gfx';
import {
- ArrowDownSmallIcon,
TextAlignCenterIcon,
TextAlignLeftIcon,
TextAlignRightIcon,
@@ -157,7 +157,8 @@ export function createTextActions<
>
Aa${ArrowDownSmallIcon()}
+ >
+ ${EditorChevronDown}
`}
>
@@ -285,7 +286,7 @@ export function createTextActions<
'key'
)}
- ${ArrowDownSmallIcon()}
+ ${EditorChevronDown}
`}
>
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts
index e44138cf50..21443dc2cc 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts
@@ -1,5 +1,5 @@
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
import type { ToolbarContext } from '@blocksuite/affine-shared/services';
-import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { repeat } from 'lit/directives/repeat.js';
@@ -31,7 +31,7 @@ export function renderMenu({
.tooltip="${tooltip ?? label}"
>
${icon ?? renderCurrentMenuItemWith(items, currentValue, 'icon')}
- ${ArrowDownSmallIcon()}
+ ${EditorChevronDown}
`}
>
diff --git a/blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts b/blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts
index e85c58df32..ec164f1185 100644
--- a/blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts
+++ b/blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts
@@ -1,12 +1,13 @@
import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
import { PropTypes, requiredProperties } from '@blocksuite/block-std';
-import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
import { LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { html } from 'lit-html';
import { repeat } from 'lit-html/directives/repeat.js';
+import { EditorChevronDown } from '../toolbar';
+
const colors = [
'default',
'red',
@@ -56,8 +57,7 @@ export class HighlightDropdownMenu extends LitElement {
'var(--affine-text-primary-color)',
})}
>
-
- ${ArrowDownSmallIcon()}
+ ${EditorChevronDown}
`}
>
diff --git a/blocksuite/affine/components/src/size-dropdown-menu/dropdown-menu.ts b/blocksuite/affine/components/src/size-dropdown-menu/dropdown-menu.ts
index 8da59ed31b..a34e581b60 100644
--- a/blocksuite/affine/components/src/size-dropdown-menu/dropdown-menu.ts
+++ b/blocksuite/affine/components/src/size-dropdown-menu/dropdown-menu.ts
@@ -1,7 +1,7 @@
import { stopPropagation } from '@blocksuite/affine-shared/utils';
import { PropTypes, requiredProperties } from '@blocksuite/block-std';
import { SignalWatcher } from '@blocksuite/global/lit';
-import { ArrowDownSmallIcon, DoneIcon } from '@blocksuite/icons/lit';
+import { DoneIcon } from '@blocksuite/icons/lit';
import type { ReadonlySignal, Signal } from '@preact/signals-core';
import { css, html, LitElement, type TemplateResult } from 'lit';
import { property, query } from 'lit/decorators.js';
@@ -9,7 +9,7 @@ import { repeat } from 'lit-html/directives/repeat.js';
import { when } from 'lit-html/directives/when.js';
import clamp from 'lodash-es/clamp';
-import type { EditorMenuButton } from '../toolbar';
+import { EditorChevronDown, type EditorMenuButton } from '../toolbar';
type SizeItem = { key?: string | number; value: number };
@@ -145,7 +145,7 @@ export class SizeDropdownMenu extends SignalWatcher(LitElement) {
>
${icon ??
html`${format?.(size) ?? size}`}
- ${ArrowDownSmallIcon()}
+ ${EditorChevronDown}
`}
>
diff --git a/blocksuite/affine/components/src/toolbar/chevron-down.ts b/blocksuite/affine/components/src/toolbar/chevron-down.ts
new file mode 100644
index 0000000000..e63f8e416d
--- /dev/null
+++ b/blocksuite/affine/components/src/toolbar/chevron-down.ts
@@ -0,0 +1,7 @@
+import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
+
+export const EditorChevronDown = ArrowDownSmallIcon({
+ style: 'display: flex;',
+ width: '16px',
+ height: '16px',
+});
diff --git a/blocksuite/affine/components/src/toolbar/index.ts b/blocksuite/affine/components/src/toolbar/index.ts
index e215c4ef6c..1710ee7ea5 100644
--- a/blocksuite/affine/components/src/toolbar/index.ts
+++ b/blocksuite/affine/components/src/toolbar/index.ts
@@ -8,6 +8,7 @@ import { EditorToolbarSeparator } from './separator.js';
import { EditorToolbar } from './toolbar.js';
import { Tooltip } from './tooltip.js';
+export { EditorChevronDown } from './chevron-down.js';
export { ToolbarMoreMenuConfigExtension } from './config.js';
export { EditorIconButton } from './icon-button.js';
export {
diff --git a/blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts b/blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts
index e4f8128663..d88b2b1af8 100644
--- a/blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts
+++ b/blocksuite/affine/components/src/view-dropdown-menu/dropdown-menu.ts
@@ -4,7 +4,6 @@ import {
} from '@blocksuite/affine-shared/services';
import { PropTypes, requiredProperties } from '@blocksuite/block-std';
import { SignalWatcher } from '@blocksuite/global/lit';
-import { ArrowDownSmallIcon } from '@blocksuite/icons/lit';
import type { ReadonlySignal, Signal } from '@preact/signals-core';
import { LitElement } from 'lit';
import { property } from 'lit/decorators.js';
@@ -12,6 +11,8 @@ import { html } from 'lit-html';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { repeat } from 'lit-html/directives/repeat.js';
+import { EditorChevronDown } from '../toolbar';
+
@requiredProperties({
actions: PropTypes.array,
context: PropTypes.instanceOf(ToolbarContext),
@@ -46,7 +47,7 @@ export class ViewDropdownMenu extends SignalWatcher(LitElement) {
.iconContainerWidth="${'110px'}"
>
${viewType}
- ${ArrowDownSmallIcon()}
+ ${EditorChevronDown}
`}
>
diff --git a/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts b/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts
index 4b3150c5ee..98d4c10b61 100644
--- a/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts
+++ b/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts
@@ -35,9 +35,10 @@ import {
} from '@blocksuite/affine/components/notification';
import { isPeekable, peek } from '@blocksuite/affine/components/peek';
import { toast } from '@blocksuite/affine/components/toast';
-import type {
- MenuContext,
- MenuItemGroup,
+import {
+ EditorChevronDown,
+ type MenuContext,
+ type MenuItemGroup,
} from '@blocksuite/affine/components/toolbar';
import { watch } from '@blocksuite/affine/global/lit';
import {
@@ -69,7 +70,6 @@ import {
import { matchModels } from '@blocksuite/affine/shared/utils';
import type { ExtensionType } from '@blocksuite/affine/store';
import {
- ArrowDownSmallIcon,
CenterPeekIcon,
CopyAsImgaeIcon,
CopyIcon,
@@ -617,7 +617,7 @@ function renderOpenDocMenu(
.contentPadding="${'8px'}"
.button=${html`
- ${OpenInNewIcon()} ${ArrowDownSmallIcon()}
+ ${OpenInNewIcon()} ${EditorChevronDown}
`}
>