diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
index 626b69aad6..de5bccd8e4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
@@ -89,7 +89,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 							// TODO: Missing translation for the color aliases.
 							this._colorList.map(
 							(color) => html`
-								<uui-color-swatch label="${color.alias}" title="${color.alias}" value=${color.alias} style="--uui-swatch-color: ${color.varName}"></uui-color-swatch>
+								<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>