diff --git a/docs/src/lib/styles/github.scss b/docs/src/lib/styles/github.scss
index b83daaf8..de199f17 100644
--- a/docs/src/lib/styles/github.scss
+++ b/docs/src/lib/styles/github.scss
@@ -77,6 +77,35 @@
 			}
 		}
 
+		.carta-icons-menu {
+			padding: 8px;
+			border: 1px solid $border;
+			border-radius: 6px;
+			min-width: 180px;
+			background: $background;
+
+			.carta-icon-full {
+				padding-left: 6px;
+				padding-right: 6px;
+
+				margin-top: 2px;
+				&:first-child {
+					margin-top: 0;
+				}
+
+				&:hover {
+					color: white;
+					background-color: $border;
+				}
+
+				span {
+					margin-left: 6px;
+					color: white;
+					font-size: 0.85rem;
+				}
+			}
+		}
+
 		[class*='shj-lang-'] {
 			background: transparent;
 		}
diff --git a/docs/src/lib/styles/math-stack-exchange.scss b/docs/src/lib/styles/math-stack-exchange.scss
index 73ec59e4..180786f9 100644
--- a/docs/src/lib/styles/math-stack-exchange.scss
+++ b/docs/src/lib/styles/math-stack-exchange.scss
@@ -70,6 +70,35 @@
 		}
 	}
 
+	.carta-icons-menu {
+		padding: 8px;
+		border: 1px solid $border;
+		border-radius: 6px;
+		min-width: 180px;
+		background: $background;
+
+		.carta-icon-full {
+			padding-left: 6px;
+			padding-right: 6px;
+
+			margin-top: 2px;
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:hover {
+				color: white;
+				background-color: $border;
+			}
+
+			span {
+				margin-left: 6px;
+				color: white;
+				font-size: 0.85rem;
+			}
+		}
+	}
+
 	&.carta-viewer {
 		min-height: 60px;
 		padding: 1rem;
diff --git a/packages/carta-md/src/lib/CartaEditor.svelte b/packages/carta-md/src/lib/CartaEditor.svelte
index 43ab6e14..9dc20e83 100644
--- a/packages/carta-md/src/lib/CartaEditor.svelte
+++ b/packages/carta-md/src/lib/CartaEditor.svelte
@@ -6,7 +6,7 @@
 	import { debounce } from './internal/utils';
 	import type { TextAreaProps } from './internal/textarea-props';
 	import { DefaultCartaLabels, type CartaLabels } from './internal/labels';
-	import { handleArrowKeysNavigation } from './internal/accessibility';
+	import Toolbar from './internal/components/Toolbar.svelte';
 
 	export let carta: Carta;
 	export let theme = 'default';
@@ -28,13 +28,11 @@
 	let selectedTab: 'write' | 'preview' = 'write';
 	let windowMode: 'tabs' | 'split';
 	let mounted = false;
-	let hideIcons = false;
 	let resizeInput: () => void;
 	onMount(() => (mounted = true));
 
 	$: {
 		windowMode = mode === 'auto' ? (width > 768 ? 'split' : 'tabs') : mode;
-		hideIcons = width < 576;
 	}
 
 	$: {
@@ -100,50 +98,7 @@
 
 <div bind:this={editorElem} bind:clientWidth={width} class="carta-editor carta-theme__{theme}">
 	{#if !disableToolbar}
-		<div class="carta-toolbar" role="toolbar">
-			<div class="carta-toolbar-left">
-				{#if windowMode == 'tabs'}
-					<button
-						type="button"
-						tabindex={0}
-						class={selectedTab === 'write' ? 'carta-active' : ''}
-						on:click={() => (selectedTab = 'write')}
-						on:keydown={handleArrowKeysNavigation}
-					>
-						{labels.writeTab}
-					</button>
-					<button
-						type="button"
-						tabindex={-1}
-						class={selectedTab === 'preview' ? 'carta-active' : ''}
-						on:click={() => (selectedTab = 'preview')}
-						on:keydown={handleArrowKeysNavigation}
-					>
-						{labels.previewTab}
-					</button>
-				{/if}
-			</div>
-			<div class="carta-toolbar-right">
-				{#if !hideIcons}
-					{#each carta.icons as icon, index}
-						<button
-							class="carta-icon"
-							tabindex={index == 0 ? 0 : -1}
-							title={icon.label}
-							aria-label={icon.label}
-							on:click|preventDefault|stopPropagation={() => {
-								carta.input && icon.action(carta.input);
-								carta.input?.update();
-								carta.input?.textarea.focus();
-							}}
-							on:keydown={handleArrowKeysNavigation}
-						>
-							<svelte:component this={icon.component} />
-						</button>
-					{/each}
-				{/if}
-			</div>
-		</div>
+		<Toolbar {carta} {labels} mode={windowMode} bind:tab={selectedTab} />
 	{/if}
 
 	<div class="carta-wrapper">
@@ -201,17 +156,11 @@
 		flex-direction: column;
 	}
 
-	.carta-toolbar {
-		height: 2rem;
-		display: flex;
-		flex-shrink: 0;
-	}
-
-	:global(.mode-split > *) {
+	:global(.carta-container.mode-split > *) {
 		width: 50%;
 	}
 
-	:global(.mode-tabs > *) {
+	:global(.carta-container.mode-tabs > *) {
 		width: 100%;
 	}
 
@@ -219,27 +168,4 @@
 		display: flex;
 		position: relative;
 	}
-
-	.carta-toolbar-left {
-		height: 100%;
-	}
-
-	.carta-toolbar-right {
-		height: 100%;
-		flex-grow: 1;
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-	}
-
-	.carta-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 1.5rem;
-		height: 1.5rem;
-		border-radius: 3px;
-		cursor: pointer;
-		margin-left: 4px;
-	}
 </style>
diff --git a/packages/carta-md/src/lib/default.css b/packages/carta-md/src/lib/default.css
index dac1fc61..d18bde17 100644
--- a/packages/carta-md/src/lib/default.css
+++ b/packages/carta-md/src/lib/default.css
@@ -70,12 +70,22 @@
 }
 
 /* Icons */
-.carta-theme__default .carta-icon {
+.carta-theme__default .carta-icon,
+.carta-theme__default .carta-icon-full {
 	border: 0;
 	background: transparent;
 }
 
-.carta-theme__default .carta-icon:hover {
+.carta-theme__default .carta-icon-full {
+	padding: 6px 4px;
+}
+
+.carta-theme__default .carta-icon-full span {
+	margin-left: 6px;
+}
+
+.carta-theme__default .carta-icon:hover,
+.carta-theme__default .carta-icon-full:hover {
 	background: var(--hover-color);
 }
 
@@ -83,6 +93,21 @@
 	background: inherit;
 }
 
+.carta-theme__default .carta-icons-menu {
+	padding: 6px;
+	border: 1px solid var(--border-color);
+	border-radius: 6px;
+	min-width: 180px;
+}
+
+.carta-theme__default .carta-icons-menu .carta-icon-full {
+	margin-top: 2px;
+}
+
+.carta-theme__default .carta-icons-menu .carta-icon-full:first-child {
+	margin-top: 0;
+}
+
 /* Buttons */
 .carta-theme__default .carta-toolbar-left button {
 	background: none;
diff --git a/packages/carta-md/src/lib/internal/components/Toolbar.svelte b/packages/carta-md/src/lib/internal/components/Toolbar.svelte
new file mode 100644
index 00000000..87697a4b
--- /dev/null
+++ b/packages/carta-md/src/lib/internal/components/Toolbar.svelte
@@ -0,0 +1,195 @@
+<script lang="ts">
+	import type { CartaLabels } from '../labels';
+	import { handleArrowKeysNavigation } from '../accessibility';
+	import type { Carta } from '../carta';
+	import MenuIcon from './icons/MenuIcon.svelte';
+	import { onMount } from 'svelte';
+	import { debounce } from '../utils';
+
+	export let carta: Carta;
+	export let mode: 'tabs' | 'split';
+	export let tab: 'write' | 'preview';
+	export let labels: CartaLabels;
+
+	let toolbar: HTMLDivElement;
+	let menu: HTMLDivElement;
+	let iconsContainer: HTMLDivElement;
+
+	let visibleIcons = [...carta.icons];
+	let availableWidth = 0;
+	let iconWidth = 0;
+	let toolbarHeight = 0;
+	let iconsHidden = false;
+	let showMenu = false;
+
+	const IconPadding = 8;
+
+	const waitForDOMUpdate = () => new Promise(requestAnimationFrame);
+
+	const onResize = debounce(async () => {
+		const overflowing = () => toolbar.scrollWidth - toolbar.clientWidth > 0;
+		while (overflowing()) {
+			visibleIcons.pop();
+			visibleIcons = visibleIcons;
+			await waitForDOMUpdate();
+		}
+
+		const fitting = () => availableWidth > 2 * iconWidth + IconPadding;
+		while (visibleIcons.length < carta.icons.length && fitting()) {
+			visibleIcons.push(carta.icons[visibleIcons.length]);
+			visibleIcons = visibleIcons;
+			await waitForDOMUpdate();
+		}
+	}, 100);
+
+	function onClick(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		if (menu && !menu.contains(target)) {
+			showMenu = false;
+		}
+	}
+
+	onMount(onResize);
+
+	$: iconsHidden = visibleIcons.length !== carta.icons.length;
+</script>
+
+<svelte:window on:resize={onResize} on:click={onClick} />
+
+<div class="carta-toolbar" role="toolbar" bind:clientHeight={toolbarHeight} bind:this={toolbar}>
+	<div class="carta-toolbar-left">
+		{#if mode == 'tabs'}
+			<button
+				type="button"
+				tabindex={0}
+				class={tab === 'write' ? 'carta-active' : ''}
+				on:click={() => (tab = 'write')}
+				on:keydown={handleArrowKeysNavigation}
+			>
+				{labels.writeTab}
+			</button>
+			<button
+				type="button"
+				tabindex={-1}
+				class={tab === 'preview' ? 'carta-active' : ''}
+				on:click={() => (tab = 'preview')}
+				on:keydown={handleArrowKeysNavigation}
+			>
+				{labels.previewTab}
+			</button>
+		{/if}
+	</div>
+
+	<div class="carta-filler" bind:clientWidth={availableWidth} />
+
+	<div class="carta-toolbar-right" bind:this={iconsContainer}>
+		{#each visibleIcons as icon, index}
+			{@const label = labels.iconsLabels[icon.id] ?? icon.label}
+			<button
+				class="carta-icon"
+				tabindex={index == 0 ? 0 : -1}
+				title={label}
+				aria-label={label}
+				bind:clientWidth={iconWidth}
+				on:click|preventDefault|stopPropagation={() => {
+					carta.input && icon.action(carta.input);
+					carta.input?.update();
+					carta.input?.textarea.focus();
+				}}
+				on:keydown={handleArrowKeysNavigation}
+			>
+				<svelte:component this={icon.component} />
+			</button>
+		{/each}
+		{#if iconsHidden}
+			{@const label = labels.iconsLabels['menu'] ?? 'Menu'}
+			<button
+				class="carta-icon"
+				tabindex={-1}
+				title={label}
+				aria-label={label}
+				on:keydown={handleArrowKeysNavigation}
+				on:click|preventDefault|stopPropagation={() => (showMenu = !showMenu)}
+			>
+				<MenuIcon />
+			</button>
+		{/if}
+	</div>
+</div>
+
+{#if showMenu && iconsHidden}
+	<div class="carta-icons-menu" style="top: {toolbarHeight}px;" bind:this={menu}>
+		{#each carta.icons.filter((icon) => !visibleIcons.includes(icon)) as icon}
+			{@const label = labels.iconsLabels[icon.id] ?? icon.label}
+
+			<button
+				class="carta-icon-full"
+				aria-label={label}
+				on:click|preventDefault|stopPropagation={() => {
+					carta.input && icon.action(carta.input);
+					carta.input?.update();
+					carta.input?.textarea.focus();
+					showMenu = false;
+				}}
+				on:keydown={handleArrowKeysNavigation}
+			>
+				<svelte:component this={icon.component} />
+				<span>{label}</span>
+			</button>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.carta-toolbar {
+		height: 2rem;
+		display: flex;
+		flex-shrink: 0;
+	}
+
+	.carta-toolbar-left {
+		display: flex;
+		align-items: center;
+		flex-wrap: nowrap;
+		height: 100%;
+	}
+
+	.carta-filler {
+		flex: 1;
+	}
+
+	.carta-toolbar-right {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	.carta-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: 3px;
+		cursor: pointer;
+		margin-left: 4px;
+	}
+
+	.carta-icon-full {
+		display: flex;
+		align-items: center;
+		border-radius: 3px;
+		cursor: pointer;
+	}
+
+	.carta-icons-menu {
+		position: absolute;
+		top: 100%;
+		right: 0;
+		display: flex;
+		flex-direction: column;
+		margin-right: 0.5rem;
+		z-index: 1;
+	}
+</style>
diff --git a/packages/carta-md/src/lib/internal/components/icons/MenuIcon.svelte b/packages/carta-md/src/lib/internal/components/icons/MenuIcon.svelte
new file mode 100644
index 00000000..88d4ccc5
--- /dev/null
+++ b/packages/carta-md/src/lib/internal/components/icons/MenuIcon.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16">
+	<path
+		fill="currentColor"
+		d="M4 8a2 2 0 1 1-3.999.001A2 2 0 0 1 4 8m6 0a2 2 0 1 1-3.999.001A2 2 0 0 1 10 8m6 0a2 2 0 1 1-3.999.001A2 2 0 0 1 16 8"
+	/>
+</svg>
diff --git a/packages/carta-md/src/lib/internal/highlight.ts b/packages/carta-md/src/lib/internal/highlight.ts
index d7926b56..96602637 100644
--- a/packages/carta-md/src/lib/internal/highlight.ts
+++ b/packages/carta-md/src/lib/internal/highlight.ts
@@ -7,13 +7,9 @@ import {
 } from '@speed-highlight/core';
 import type { CartaExtension } from './carta';
 import cartaMarkdown from './shj';
+import type { Intellisense } from './utils';
 
-// Workaround to add intellisense
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface Nothing {}
-type Union<T, U> = T | (U & Nothing);
-
-type Lang = Union<ShjLanguage, string>;
+type Lang = Intellisense<ShjLanguage>;
 
 /**
  * Highlight text using Speed-Highlight. May return null on error(usually if requested
diff --git a/packages/carta-md/src/lib/internal/icons.ts b/packages/carta-md/src/lib/internal/icons.ts
index aed4c4bb..e0508ad6 100644
--- a/packages/carta-md/src/lib/internal/icons.ts
+++ b/packages/carta-md/src/lib/internal/icons.ts
@@ -102,4 +102,4 @@ export const defaultIcons = [
 	}
 ] as const satisfies readonly CartaIcon[];
 
-export type DefaultIconId = (typeof defaultIcons)[number]['id'];
+export type DefaultIconId = (typeof defaultIcons)[number]['id'] | 'menu';
diff --git a/packages/carta-md/src/lib/internal/labels.ts b/packages/carta-md/src/lib/internal/labels.ts
index 00fa5dca..5e439a1b 100644
--- a/packages/carta-md/src/lib/internal/labels.ts
+++ b/packages/carta-md/src/lib/internal/labels.ts
@@ -1,12 +1,19 @@
+import type { DefaultIconId } from './icons';
+import type { Intellisense } from './utils';
+
+type IconId = Intellisense<DefaultIconId>;
+
 /**
  * Labels that may appear in the editor.
  */
 export interface CartaLabels {
 	writeTab: string;
 	previewTab: string;
+	iconsLabels: Partial<Record<IconId, string>>;
 }
 
 export const DefaultCartaLabels: CartaLabels = {
 	writeTab: 'Write',
-	previewTab: 'Preview'
+	previewTab: 'Preview',
+	iconsLabels: {}
 };
diff --git a/packages/carta-md/src/lib/internal/utils.ts b/packages/carta-md/src/lib/internal/utils.ts
index 3d1ce8bf..abf942a1 100644
--- a/packages/carta-md/src/lib/internal/utils.ts
+++ b/packages/carta-md/src/lib/internal/utils.ts
@@ -1,3 +1,10 @@
+// Workaround to add intellisense
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface Nothing {}
+type Union<T, U> = T | (U & Nothing);
+
+export type Intellisense<T> = Union<T, string>;
+
 /**
  * Debounce the provided function.
  * @param cb Callback function.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0bce3502..29be69ac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1402,7 +1402,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
     dependencies:
-      '@sveltejs/kit': 2.5.4(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.2)(vite@5.1.6)
+      '@sveltejs/kit': 2.5.4(@sveltejs/vite-plugin-svelte@3.0.2)(svelte@4.2.12)(vite@5.1.6)
       import-meta-resolve: 4.0.0
     dev: true