diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts
index f67a184cec..11f4ba7578 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts
@@ -20,7 +20,7 @@ export abstract class UmbTreeItemElementBase<TreeItemModelType extends UmbTreeIt
 	hideActions: boolean = false;
 
 	@state()
-	private _isActive = false;
+	protected _isActive = false;
 
 	@state()
 	private _childItems?: TreeItemModelType[];
@@ -150,9 +150,10 @@ export abstract class UmbTreeItemElementBase<TreeItemModelType extends UmbTreeIt
 	#renderIcon() {
 		const icon = this._item?.icon;
 		const isFolder = this._item?.isFolder;
+		const iconWithoutColor = icon?.split(' ')[0];
 
-		if (icon) {
-			return html`<umb-icon slot="icon" name="${icon}"></umb-icon>`;
+		if (icon && iconWithoutColor) {
+			return html`<umb-icon slot="icon" name="${this._isActive ? iconWithoutColor : icon}"></umb-icon>`;
 		}
 
 		if (isFolder) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
index 634f3d8bad..bd122660bf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
@@ -76,11 +76,14 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 	}
 
 	override renderIconContainer() {
+		const icon = this.item?.documentType.icon;
+		const iconWithoutColor = icon?.split(' ')[0];
+
 		return html`
 			<span id="icon-container" slot="icon" class=${classMap({ draft: this.#isDraft() })}>
-				${this.item?.documentType.icon
+				${icon && iconWithoutColor
 					? html`
-							<umb-icon id="icon" slot="icon" name="${this.item.documentType.icon}"></umb-icon>
+							<umb-icon id="icon" slot="icon" name="${this._isActive ? iconWithoutColor : icon}"></umb-icon>
 							${this.#renderStateIcon()}
 						`
 					: nothing}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
index 2245ca14ce..0f4f2aa024 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
@@ -7,11 +7,14 @@ const elementName = 'umb-media-tree-item';
 @customElement(elementName)
 export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTreeItemModel> {
 	override renderIconContainer() {
+		const icon = this.item?.mediaType.icon;
+		const iconWithoutColor = icon?.split(' ')[0];
+
 		return html`
 			<span id="icon-container" slot="icon">
-				${this.item?.mediaType.icon
+				${icon && iconWithoutColor
 					? html`
-							<umb-icon id="icon" slot="icon" name="${this.item.mediaType.icon}"></umb-icon>
+							<umb-icon id="icon" slot="icon" name="${this._isActive ? iconWithoutColor : icon}"></umb-icon>
 							${this.#renderStateIcon()}
 						`
 					: nothing}