diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts
index 2ae479cd9d..bb9acffbd1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts
@@ -16,6 +16,12 @@ export class UmbIconElement extends UmbLitElement {
 	@state()
 	private _color?: string;
 
+	@state()
+	private _fallbackColor?: string;
+
+	/**
+	 * Override the icon color.
+	 * */
 	@property({ type: String })
 	public set color(value: string) {
 		if (!value) return;
@@ -31,12 +37,26 @@ export class UmbIconElement extends UmbLitElement {
 		this._color = alias ? (variable ? `--uui-icon-color: var(${variable})` : `--uui-icon-color: ${alias}`) : undefined;
 	}
 
+	#setFallbackColorStyle(value: string) {
+		const alias = value.replace('color-', '');
+		const variable = extractUmbColorVariable(alias);
+		this._fallbackColor = alias
+			? variable
+				? `--uui-icon-color: var(${variable})`
+				: `--uui-icon-color: ${alias}`
+			: undefined;
+	}
+
+	/**
+	 * The icon name. Can be appended with a color.
+	 * Example "icon-heart color-red"
+	 */
 	@property({ type: String })
 	public set name(value: string | undefined) {
 		const [icon, alias] = value ? value.split(' ') : [];
 
 		if (alias) {
-			this.#setColorStyle(alias);
+			this.#setFallbackColorStyle(alias);
 		} else {
 			this._color = undefined;
 		}
@@ -48,7 +68,9 @@ export class UmbIconElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html`<uui-icon name=${ifDefined(this._icon)} style=${ifDefined(this._color)}></uui-icon>`;
+		return html`<uui-icon
+			name=${ifDefined(this._icon)}
+			style=${ifDefined(this._color ?? this._fallbackColor)}></uui-icon>`;
 	}
 
 	static override styles = [