diff --git a/src/Umbraco.Web.UI.Client/examples/picker-data-source/example-custom-picker-collection-data-source.ts b/src/Umbraco.Web.UI.Client/examples/picker-data-source/example-custom-picker-collection-data-source.ts
index 34328f20b712..e0b5b84d7a40 100644
--- a/src/Umbraco.Web.UI.Client/examples/picker-data-source/example-custom-picker-collection-data-source.ts
+++ b/src/Umbraco.Web.UI.Client/examples/picker-data-source/example-custom-picker-collection-data-source.ts
@@ -53,35 +53,35 @@ const customItems: Array<ExampleCollectionItemModel> = [
 		unique: '1',
 		entityType: 'example',
 		name: 'Example 1',
-		icon: 'icon-shape-triangle',
+		icon: 'icon-shape-triangle yellow',
 		isPickable: true,
 	},
 	{
 		unique: '2',
 		entityType: 'example',
 		name: 'Example 2',
-		icon: 'icon-shape-triangle',
+		icon: 'icon-shape-triangle yellow',
 		isPickable: true,
 	},
 	{
 		unique: '3',
 		entityType: 'example',
 		name: 'Example 3',
-		icon: 'icon-shape-triangle',
+		icon: 'icon-shape-triangle yellow',
 		isPickable: true,
 	},
 	{
 		unique: '4',
 		entityType: 'example',
 		name: 'Example 4',
-		icon: 'icon-shape-triangle',
+		icon: 'icon-shape-triangle yellow',
 		isPickable: false,
 	},
 	{
 		unique: '5',
 		entityType: 'example',
 		name: 'Example 5',
-		icon: 'icon-shape-triangle',
+		icon: 'icon-shape-triangle yellow',
 		isPickable: true,
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/menu/menu-item/default/default-collection-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/menu/menu-item/default/default-collection-menu-item.element.ts
index 3dfed63cedb3..fc30554826c1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/menu/menu-item/default/default-collection-menu-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/menu/menu-item/default/default-collection-menu-item.element.ts
@@ -61,9 +61,7 @@ export class UmbDefaultCollectionMenuItemElement extends UmbLitElement {
 				?selected=${this._isSelected}
 				@selected=${() => this.#api?.select()}
 				@deselected=${() => this.#api?.deselect()}>
-				${item.icon
-					? html`<uui-icon slot="icon" name=${item.icon}></uui-icon>`
-					: html`<uui-icon slot="icon" name=${getItemFallbackIcon()}></uui-icon>`}
+				<umb-icon slot="icon" name=${item.icon ?? getItemFallbackIcon()}></umb-icon>
 			</uui-menu-item>
 		`;
 	}