diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts
index 7227be73a0d3..fdb2e7166dd6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts
@@ -81,26 +81,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectIcon')}>
 				<div id="container">
 					${this.renderSearch()}
-					<hr />
-					<uui-color-swatches
-						value=${ifDefined(this.value.color)}
-						label=${this.localize.term('defaultdialogs_colorSwitcher')}
-						@change=${this.#onColorChange}>
-						${
-							// TODO: Missing localization for the color aliases. [NL]
-							this._colorList.map(
-								(color) => html`
-									<uui-color-swatch
-										label=${color.alias}
-										title=${color.alias}
-										value=${color.alias}
-										style="--uui-swatch-color: var(${color.varName})">
-									</uui-color-swatch>
-								`,
-							)
-						}
-					</uui-color-swatches>
-					<hr />
+					${this.renderColors()}
 					<uui-scroll-container id="icons">
 						${this.data?.showEmptyOption && !this._isSearching
 							? html`
@@ -144,9 +125,35 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 				${umbFocus()}>
 				<uui-icon name="search" slot="prepend" id="search_icon"></uui-icon>
 			</uui-input>
+			<hr />
 		`;
 	}
 
+	renderColors() {
+		return this.data?.hideColors === true
+			? nothing
+			: html`<uui-color-swatches
+						value=${ifDefined(this.value.color)}
+						label=${this.localize.term('defaultdialogs_colorSwitcher')}
+						@change=${this.#onColorChange}>
+						${
+							// TODO: Missing localization for the color aliases. [NL]
+							this._colorList.map(
+								(color) => html`
+									<uui-color-swatch
+										label=${color.alias}
+										title=${color.alias}
+										value=${color.alias}
+										style="--uui-swatch-color: var(${color.varName})">
+									</uui-color-swatch>
+								`,
+							)
+						}
+					</uui-color-swatches>
+					<hr />
+			`;
+	}
+
 	renderIcons() {
 		return this._iconsFiltered
 			? repeat(
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts
index bf1aafec4735..7550109f6d86 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.token.ts
@@ -3,6 +3,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 export interface UmbIconPickerModalData {
 	placeholder?: string;
 	showEmptyOption?: boolean;
+	hideColors?: boolean;
 }
 
 export interface UmbIconPickerModalValue {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/manifests.ts
index 780ddf721e3d..dce6ae5da197 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/manifests.ts
@@ -16,6 +16,12 @@ export const manifests: Array<UmbExtensionManifest> = [
 						description: 'Icon name to show when no icon is selected',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.IconPicker',
 					},
+					{
+						alias: 'hideColors',
+						label: 'Hide colors',
+						description: 'Hide color swatches from modal',
+						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+					},
 				],
 			},
 		},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts
index 8c9814bf5168..2ac0b0d2fa92 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.ts
@@ -58,10 +58,14 @@ export class UmbPropertyEditorUIIconPickerElement
 	@state()
 	private _placeholderIcon = '';
 
+	@state()
+	private _hideColors = false;
+
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 		const placeholder = config.getValueByAlias('placeholder');
 		this._placeholderIcon = typeof placeholder === 'string' ? placeholder : '';
+		this._hideColors = config.getValueByAlias('hideColors') as boolean;
 	}
 
 	private async _openModal() {
@@ -70,7 +74,7 @@ export class UmbPropertyEditorUIIconPickerElement
 				icon: this._icon,
 				color: this._color,
 			},
-			data: { placeholder: this._placeholderIcon, showEmptyOption: !this.mandatory },
+			data: { placeholder: this._placeholderIcon, showEmptyOption: !this.mandatory, hideColors: this._hideColors },
 		}).catch(() => undefined);
 
 		if (!data) return;