diff --git a/src/vs/platform/theme/common/themeService.ts b/src/vs/platform/theme/common/themeService.ts
index e936a4eb05a42695222d466391f07b2cf7a5790a..889bf4a9c92fbd5a60e27835b9e877de6d8cc445 100644
--- a/src/vs/platform/theme/common/themeService.ts
+++ b/src/vs/platform/theme/common/themeService.ts
@@ -25,10 +25,11 @@ export function themeColorFromId(id: ColorIdentifier) {
 // theme icon
 export interface ThemeIcon {
 	readonly id: string;
+	readonly themeColor?: ThemeColor;
 }
 
 export namespace ThemeIcon {
-	export function isThemeIcon(obj: any): obj is ThemeIcon {
+	export function isThemeIcon(obj: any): obj is ThemeIcon | { id: string } {
 		return obj && typeof obj === 'object' && typeof (<ThemeIcon>obj).id === 'string';
 	}
 
diff --git a/src/vs/vscode.proposed.d.ts b/src/vs/vscode.proposed.d.ts
index 10e23905a66be08467a468781e4e62d46f6eda92..2f273359c4e999c89f74655c7dda5fadc9c76c9d 100644
--- a/src/vs/vscode.proposed.d.ts
+++ b/src/vs/vscode.proposed.d.ts
@@ -2266,6 +2266,15 @@ declare module 'vscode' {
 		 */
 		description?: string | undefined;
 	}
+	//#endregion
 
+	//#region https://github.com/microsoft/vscode/issues/103120 @alexr00
+	export class ThemeIcon2 extends ThemeIcon {
+		/**
+		 * Returns a new `ThemeIcon` that will use the specified `ThemeColor`
+		 * @param color The `ThemeColor` to use for the icon.
+		 */
+		with(color: ThemeColor): ThemeIcon2;
+	}
 	//#endregion
 }
diff --git a/src/vs/workbench/api/common/extHost.api.impl.ts b/src/vs/workbench/api/common/extHost.api.impl.ts
index 0d62aba5cecb4dc01cef5aebadcf2842aef890a3..eaadfc5f6e4419fc8713e3cd08d98382a009d5ad 100644
--- a/src/vs/workbench/api/common/extHost.api.impl.ts
+++ b/src/vs/workbench/api/common/extHost.api.impl.ts
@@ -1123,6 +1123,7 @@ export function createApiFactoryAndRegisterActors(accessor: ServicesAccessor): I
 			TextEditorSelectionChangeKind: extHostTypes.TextEditorSelectionChangeKind,
 			ThemeColor: extHostTypes.ThemeColor,
 			ThemeIcon: extHostTypes.ThemeIcon,
+			ThemeIcon2: extHostTypes.ThemeIcon,
 			TreeItem: extHostTypes.TreeItem,
 			TreeItem2: extHostTypes.TreeItem,
 			TreeItemCollapsibleState: extHostTypes.TreeItemCollapsibleState,
diff --git a/src/vs/workbench/api/common/extHostTreeViews.ts b/src/vs/workbench/api/common/extHostTreeViews.ts
index d2c4104555319537eff4cab94f3879c36ea9838b..bc284a4f34c65f17ea0aea7bb7d387e857762622 100644
--- a/src/vs/workbench/api/common/extHostTreeViews.ts
+++ b/src/vs/workbench/api/common/extHostTreeViews.ts
@@ -556,7 +556,7 @@ class ExtHostTreeView<T> extends Disposable {
 		const disposable = new DisposableStore();
 		const handle = this.createHandle(element, extensionTreeItem, parent);
 		const icon = this.getLightIconPath(extensionTreeItem);
-		const item = {
+		const item: ITreeItem = {
 			handle,
 			parentHandle: parent ? parent.item.handle : undefined,
 			label: toTreeItemLabel(extensionTreeItem.label, this.extension),
@@ -567,7 +567,7 @@ class ExtHostTreeView<T> extends Disposable {
 			contextValue: extensionTreeItem.contextValue,
 			icon,
 			iconDark: this.getDarkIconPath(extensionTreeItem) || icon,
-			themeIcon: extensionTreeItem.iconPath instanceof ThemeIcon ? { id: extensionTreeItem.iconPath.id } : undefined,
+			themeIcon: this.getThemeIcon(extensionTreeItem),
 			collapsibleState: isUndefinedOrNull(extensionTreeItem.collapsibleState) ? TreeItemCollapsibleState.None : extensionTreeItem.collapsibleState,
 			accessibilityInformation: extensionTreeItem.accessibilityInformation
 		};
@@ -581,6 +581,13 @@ class ExtHostTreeView<T> extends Disposable {
 		};
 	}
 
+	private getThemeIcon(extensionTreeItem: vscode.TreeItem2): ThemeIcon | undefined {
+		if ((extensionTreeItem.iconPath instanceof ThemeIcon) && extensionTreeItem.iconPath.themeColor) {
+			checkProposedApiEnabled(this.extension);
+		}
+		return extensionTreeItem.iconPath instanceof ThemeIcon ? extensionTreeItem.iconPath : undefined;
+	}
+
 	private createHandle(element: T, { id, label, resourceUri }: vscode.TreeItem, parent: TreeNode | Root, returnFirst?: boolean): TreeItemHandle {
 		if (id) {
 			return `${ExtHostTreeView.ID_HANDLE_PREFIX}/${id}`;
diff --git a/src/vs/workbench/api/common/extHostTypes.ts b/src/vs/workbench/api/common/extHostTypes.ts
index 8f4b93a8ac173f484295f6dd47a37a99dfa7ba62..503512e25c7bc0c1d9a7d4a5f6754871309f2c1e 100644
--- a/src/vs/workbench/api/common/extHostTypes.ts
+++ b/src/vs/workbench/api/common/extHostTypes.ts
@@ -2172,9 +2172,15 @@ export class ThemeIcon {
 	static Folder: ThemeIcon;
 
 	readonly id: string;
+	readonly themeColor?: ThemeColor;
 
-	constructor(id: string) {
+	constructor(id: string, color?: ThemeColor) {
 		this.id = id;
+		this.themeColor = color;
+	}
+
+	with(color: ThemeColor): ThemeIcon {
+		return new ThemeIcon(this.id, color);
 	}
 }
 ThemeIcon.File = new ThemeIcon('file');
diff --git a/src/vs/workbench/contrib/views/browser/treeView.ts b/src/vs/workbench/contrib/views/browser/treeView.ts
index 9f919e9cd1f63bee3946498f64865eba38460050..695f7ff8883141e9a136acf200615cb4f2ed5680 100644
--- a/src/vs/workbench/contrib/views/browser/treeView.ts
+++ b/src/vs/workbench/contrib/views/browser/treeView.ts
@@ -806,6 +806,9 @@ class TreeRenderer extends Disposable implements ITreeRenderer<ITreeItem, FuzzyS
 			let iconClass: string | undefined;
 			if (node.themeIcon && !this.isFileKindThemeIcon(node.themeIcon)) {
 				iconClass = ThemeIcon.asClassName(node.themeIcon);
+				if (node.themeIcon.themeColor) {
+					templateData.icon.style.color = this.themeService.getColorTheme().getColor(node.themeIcon.themeColor.id)?.toString() ?? '';
+				}
 			}
 			templateData.icon.className = iconClass ? `custom-view-tree-node-item-icon ${iconClass}` : '';
 			templateData.icon.style.backgroundImage = '';