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 35f31347b20b..25707c07a035 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
@@ -1,7 +1,6 @@
 import { extractUmbColorVariable } from '../../resources/extractUmbColorVariable.function.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { html, customElement, property, state, ifDefined, css, styleMap } from '@umbraco-cms/backoffice/external/lit';
-import type { StyleInfo } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state, ifDefined, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 /**
@@ -17,9 +16,6 @@ export class UmbIconElement extends UmbLitElement {
 	@state()
 	private _icon?: string;
 
-	@state()
-	private _style: StyleInfo = {};
-
 	/**
 	 * Color alias or a color code directly.
 	 * If a color has been set via the name property, this property will override it.
@@ -53,7 +49,7 @@ export class UmbIconElement extends UmbLitElement {
 		const value = this.#color || this.#fallbackColor;
 
 		if (!value) {
-			this._style = { '--uui-icon-color': 'inherit' };
+			this.style.removeProperty('--uui-icon-color');
 			return;
 		}
 
@@ -61,11 +57,11 @@ export class UmbIconElement extends UmbLitElement {
 		const variable = extractUmbColorVariable(color);
 		const styling = variable ? `var(${variable})` : color;
 
-		this._style = { '--uui-icon-color': styling };
+		this.style.setProperty('--uui-icon-color', styling);
 	}
 
 	override render() {
-		return html`<uui-icon name=${ifDefined(this._icon)} style=${styleMap(this._style)}></uui-icon>`;
+		return html`<uui-icon name=${ifDefined(this._icon)}></uui-icon>`;
 	}
 
 	static override styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.test.ts
index 5c658d5ed128..ceddb6ecfc3d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.test.ts
@@ -17,4 +17,43 @@ describe('UmbIconElement', () => {
 			await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
 		});
 	}
+
+	describe('color handling', () => {
+		it('does not set --uui-icon-color when no color is provided', () => {
+			expect(element.style.getPropertyValue('--uui-icon-color')).to.equal('');
+		});
+
+		it('sets --uui-icon-color to a raw color value', async () => {
+			element.color = '#ff0000';
+			await element.updateComplete;
+			expect(element.style.getPropertyValue('--uui-icon-color')).to.equal('#ff0000');
+		});
+
+		it('resolves a color alias to the matching CSS variable', async () => {
+			element.color = 'color-red';
+			await element.updateComplete;
+			expect(element.style.getPropertyValue('--uui-icon-color')).to.equal('var(--uui-palette-maroon-flush)');
+		});
+
+		it('resolves a color suffix from the name property', async () => {
+			element.name = 'icon-heart color-red';
+			await element.updateComplete;
+			expect(element.style.getPropertyValue('--uui-icon-color')).to.equal('var(--uui-palette-maroon-flush)');
+		});
+
+		it('prefers the color property over the name suffix', async () => {
+			element.name = 'icon-heart color-red';
+			element.color = 'color-green';
+			await element.updateComplete;
+			expect(element.style.getPropertyValue('--uui-icon-color')).to.equal('var(--uui-palette-jungle-green)');
+		});
+
+		it('removes --uui-icon-color when color is cleared', async () => {
+			element.color = 'color-red';
+			await element.updateComplete;
+			element.color = '';
+			await element.updateComplete;
+			expect(element.style.getPropertyValue('--uui-icon-color')).to.equal('');
+		});
+	});
 });