Merge remote-tracking branch 'origin/main' into feature/markdown-keybindings-and-img-url

src/Umbraco.Web.UI.Client/.vscode/settings.json

@@ -6,9 +6,11 @@
 		"combobox",
 		"Elementable",
 		"invariantable",
+		"lucide",
 		"Niels",
 		"pickable",
 		"Registrator",
+		"svgs",
 		"templating",
 		"tinymce",
 		"umbraco",

src/Umbraco.Web.UI.Client/devops/icons/index.js

@@ -7,20 +7,86 @@ const getDirName = path.dirname;
 const glob = globModule.default;
 
 const moduleDirectory = 'src/shared/icon-registry';
-const iconsSVGDirectory = `${moduleDirectory}/svgs`;
 const iconsOutputDirectory = `${moduleDirectory}/icons`;
+const umbracoSvgDirectory = `${moduleDirectory}/svgs`;
+const iconMapJson = `${moduleDirectory}/icon-dictionary.json`;
+
+const lucideSvgDirectory = 'node_modules/lucide-static/icons';
 
 const run = async () => {
-	const icons = await collectIcons();
-	outputIcons(icons);
+	var icons = await collectDictionaryIcons();
+	icons = await collectDiskIcons(icons);
+	writeIconsToDisk(icons);
 	generateJSON(icons);
 };
 
-const collectIcons = async () => {
-	const iconPaths = await glob(`${iconsSVGDirectory}/icon-*.svg`);
+const collectDictionaryIcons = async () => {
+
+	const rawData = readFileSync(iconMapJson);
+	const fileRaw = rawData.toString();
+	const fileJSON = JSON.parse(fileRaw);
 
 	let icons = [];
 
+	// Lucide:
+	fileJSON.lucide.forEach((iconDef) => {
+		if(iconDef.file && iconDef.name) {
+			const path = lucideSvgDirectory + "/" + iconDef.file;
+
+			try {
+				const rawData = readFileSync(path);
+				// For Lucide icons specially we adjust the icons a bit for them to work in our case:
+				let svg = rawData.toString().replace('  width="24"\n', '');
+				svg = svg.replace('  height="24"\n', '');
+				svg = svg.replace('stroke-width="2"', 'stroke-width="1.75"');
+				const iconFileName = iconDef.name;
+
+				const icon = {
+					name: iconDef.name,
+					legacy: iconDef.legacy,
+					fileName: iconFileName,
+					svg,
+					output: `${iconsOutputDirectory}/${iconFileName}.js`,
+				};
+
+				icons.push(icon);
+			} catch(e) {
+				console.log(`Could not load file: '${path}'`);
+			}
+		}
+	});
+
+	// Umbraco:
+	fileJSON.umbraco.forEach((iconDef) => {
+		if(iconDef.file && iconDef.name) {
+			const path = umbracoSvgDirectory + "/" + iconDef.file;
+
+			try {
+				const rawData = readFileSync(path);
+				const svg = rawData.toString()
+				const iconFileName = iconDef.name;
+
+				const icon = {
+					name: iconDef.name,
+					legacy: iconDef.legacy,
+					fileName: iconFileName,
+					svg,
+					output: `${iconsOutputDirectory}/${iconFileName}.js`,
+				};
+
+				icons.push(icon);
+			} catch(e) {
+				console.log(`Could not load file: '${path}'`);
+			}
+		}
+	});
+
+	return icons;
+};
+
+const collectDiskIcons = async (icons) => {
+	const iconPaths = await glob(`${umbracoSvgDirectory}/icon-*.svg`);
+
 	iconPaths.forEach((path) => {
 		const rawData = readFileSync(path);
 		const svg = rawData.toString();
@@ -35,28 +101,31 @@ const collectIcons = async () => {
 
 		const SVGFileName = match[1];
 		const iconFileName = SVGFileName.replace('.svg', '');
-		const iconName = iconFileName.replace('icon-', '').replace('.svg', '');
+		const iconName = iconFileName;
 
-		const icon = {
-			src: path,
-			SVGFileName,
-			iconFileName,
-			name: iconName,
-			svg,
-			output: `${iconsOutputDirectory}/${iconFileName}.js`,
-		};
+		// Only append not already defined icons:
+		if(!icons.find(x => x.name === iconName)) {
 
-		icons.push(icon);
+			const icon = {
+				name: iconName,
+				legacy: true,
+				fileName: iconFileName,
+				svg,
+				output: `${iconsOutputDirectory}/${iconFileName}.js`,
+			};
+
+			icons.push(icon);
+		}
 	});
 
 	return icons;
 };
 
-const outputIcons = (icons) => {
+const writeIconsToDisk = (icons) => {
 	icons.forEach((icon) => {
 		const content = 'export default `' + icon.svg + '`;';
 
-		writeFileWithDir(`${icon.output}`, content, (err) => {
+		writeFileWithDir(icon.output, content, (err) => {
 			if (err) {
 				// eslint-disable-next-line no-undef
 				console.log(err);
@@ -72,10 +141,10 @@ const generateJSON = (icons) => {
 	const JSONPath = `${iconsOutputDirectory}/icons.json`;
 
 	const iconDescriptors = icons.map((icon) => {
-		console.log(icon);
 		return {
-			name: `umb:${icon.name}`,
-			path: `./icons/${icon.iconFileName}.js`,
+			name: icon.name,
+			legacy: icon.legacy,
+			path: `./icons/${icon.fileName}.js`,
 		};
 	});
 

src/Umbraco.Web.UI.Client/package-lock.json

@@ -60,6 +60,7 @@
 				"eslint-plugin-local-rules": "^1.3.2",
 				"eslint-plugin-storybook": "^0.6.15",
 				"eslint-plugin-wc": "^1.5.0",
+				"lucide-static": "^0.290.0",
 				"msw": "^1.2.3",
 				"openapi-typescript-codegen": "^0.25.0",
 				"playwright-msw": "^2.2.1",
@@ -15693,6 +15694,12 @@
 				"yallist": "^3.0.2"
 			}
 		},
+		"node_modules/lucide-static": {
+			"version": "0.290.0",
+			"resolved": "https://registry.npmjs.org/lucide-static/-/lucide-static-0.290.0.tgz",
+			"integrity": "sha512-g2JVS1v2xVypOyMRrWH5lFhJwAftBvAn732Ig4VqS60+4MtL1F+bsbI8wVG3MM6RFhL12gT1hs5vEZufr6XbKA==",
+			"dev": true
+		},
 		"node_modules/magic-string": {
 			"version": "0.27.0",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",

src/Umbraco.Web.UI.Client/package.json

@@ -177,6 +177,7 @@
 		"eslint-plugin-local-rules": "^1.3.2",
 		"eslint-plugin-storybook": "^0.6.15",
 		"eslint-plugin-wc": "^1.5.0",
+		"lucide-static": "^0.290.0",
 		"msw": "^1.2.3",
 		"openapi-typescript-codegen": "^0.25.0",
 		"playwright-msw": "^2.2.1",

src/Umbraco.Web.UI.Client/src/css/umb-css.css

@@ -1,7 +1,4 @@
 :root {
-	/* TODO: Consulidate with this green color suggestion, align UUI:*/
-	--uui-color-positive: #1c874c;
-	--uui-color-positive-emphasis: #1a7f47;
 	--umb-footer-layout-height: 54px;
 	--umb-header-layout-height: 70px;
 	--umb-section-sidebar-width: 300px;

src/Umbraco.Web.UI.Client/src/mocks/data/document-blueprint.data.ts

@@ -6,7 +6,7 @@ export const data: Array<DocumentBlueprintDetails> = [
 		name: 'Document Blueprint 1',
 		type: 'document-blueprint',
 		id: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
-		icon: 'umb:blueprint',
+		icon: 'icon-blueprint',
 		documentTypeKey: 'd81c7957-153c-4b5a-aa6f-b434a4964624',
 		properties: [],
 		data: [],
@@ -15,7 +15,7 @@ export const data: Array<DocumentBlueprintDetails> = [
 		name: 'Document Blueprint 2',
 		type: 'document-blueprint',
 		id: '3fa85f64-5717-4562-b3qc-2c963f66afa6',
-		icon: 'umb:blueprint',
+		icon: 'icon-blueprint',
 		documentTypeKey: 'a99e4018-3ffc-486b-aa76-eecea9593d17',
 		properties: [],
 		data: [],

src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts

@@ -14,7 +14,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'blogPost',
 		name: 'All property editors document type',
 		description: null,
-		icon: 'umb:item-arrangement',
+		icon: 'icon-item-arrangement',
 		allowedAsRoot: true,
 		variesByCulture: true,
 		variesBySegment: false,
@@ -616,7 +616,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'blogPost',
 		name: 'Page Document Type',
 		description: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 		allowedAsRoot: true,
 		variesByCulture: true,
 		variesBySegment: false,
@@ -777,7 +777,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'masterPage',
 		name: 'Master Page',
 		description: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 		allowedAsRoot: false,
 		variesByCulture: false,
 		variesBySegment: false,
@@ -827,7 +827,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'baseElementType',
 		name: 'Base Element Type',
 		description: null,
-		icon: 'umb:science',
+		icon: 'icon-science',
 		allowedAsRoot: false,
 		variesByCulture: false,
 		variesBySegment: false,
@@ -881,7 +881,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'simpleDocumentType',
 		name: 'Simple Document Type',
 		description: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 		allowedAsRoot: true,
 		variesByCulture: false,
 		variesBySegment: false,
@@ -934,7 +934,7 @@ export const data: Array<DocumentTypeResponseModel> = [
 		alias: 'simpleDocumentType2',
 		name: 'Simple Document Type 2',
 		description: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 		allowedAsRoot: true,
 		variesByCulture: false,
 		variesBySegment: false,
@@ -1015,7 +1015,7 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		id: '29643452-cff9-47f2-98cd-7de4b6807681',
 		isContainer: false,
 		parentId: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 	},
 	{
 		name: 'Page Document Type Compositional',
@@ -1024,7 +1024,7 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		id: '5035d7d9-0a63-415c-9e75-ee2cf931db92',
 		isContainer: false,
 		parentId: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 	},
 	{
 		name: 'Page Document Type Inherited',
@@ -1033,7 +1033,7 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		id: '8f68ba66-6fb2-4778-83b8-6ab4ca3a7c5d',
 		isContainer: false,
 		parentId: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 	},
 	{
 		name: 'Simple Document Type',
@@ -1042,7 +1042,7 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		id: 'simple-document-type-key',
 		isContainer: false,
 		parentId: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 	},
 	{
 		name: 'Simple Document Type 2',
@@ -1051,7 +1051,7 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		id: 'simple-document-type-2-key',
 		isContainer: false,
 		parentId: null,
-		icon: 'umb:document',
+		icon: 'icon-document',
 	},
 ];
 

src/Umbraco.Web.UI.Client/src/mocks/data/media-type.data.ts

@@ -13,7 +13,7 @@ export const data: Array<MediaTypeResponseModel> = [
 		id: 'c5159663-eb82-43ee-bd23-e42dc5e71db6',
 		description: 'Media type 1 description',
 		alias: 'mediaType1',
-		icon: 'umb:bug',
+		icon: 'icon-bug',
 		properties: [],
 		containers: [],
 	},

src/Umbraco.Web.UI.Client/src/mocks/data/user-group.data.ts

@@ -46,20 +46,20 @@ export const data: Array<UserGroupResponseModel> = [
 	{
 		id: 'c630d49e-4e7b-42ea-b2bc-edc0edacb6b1',
 		name: 'Administrators',
-		icon: 'umb:medal',
+		icon: 'icon-medal',
 		documentStartNodeId: 'all-property-editors-document-id',
 		permissions: [UMB_USER_PERMISSION_DOCUMENT_CREATE, UMB_USER_PERMISSION_DOCUMENT_DELETE],
 	},
 	{
 		id: '9d24dc47-a4bf-427f-8a4a-b900f03b8a12',
 		name: 'User Group 1',
-		icon: 'umb:bell',
+		icon: 'icon-bell',
 		permissions: [UMB_USER_PERMISSION_DOCUMENT_DELETE],
 	},
 	{
 		id: 'f4626511-b0d7-4ab1-aebc-a87871a5dcfa',
 		name: 'User Group 2',
-		icon: 'umb:ball',
+		icon: 'icon-ball',
 		permissions: [UMB_USER_PERMISSION_DOCUMENT_READ],
 	},
 ];

src/Umbraco.Web.UI.Client/src/mocks/handlers/dictionary.handlers.ts

@@ -80,7 +80,7 @@ export const handlers = [
 
 		if (!data) return;
 
-		data.icon = 'umb:book-alt';
+		data.icon = 'icon-book-alt';
 		data.hasChildren = false;
 		data.type = 'dictionary-item';
 

src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-toolbar.element.ts

@@ -11,14 +11,14 @@ export class UmbCollectionToolbarElement extends UmbLitElement {
 	public actions: Array<TooltipMenuItem> = [
 		{
 			label: 'File',
-			icon: 'umb:document',
+			icon: 'icon-document',
 			action: () => {
 				console.log('Create file');
 			},
 		},
 		{
 			label: 'Folder',
-			icon: 'umb:folder',
+			icon: 'icon-folder',
 			action: () => {
 				console.log('create folder');
 			},

src/Umbraco.Web.UI.Client/src/packages/core/components/header-app/header-app.stories.ts

@@ -19,7 +19,7 @@ export const Overview: Story = {
 			kind: 'button',
 			meta: {
 				label: 'Some Header',
-				icon: 'umb:home',
+				icon: 'icon-home',
 				href: '/some/path',
 			},
 		},

src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts

@@ -444,7 +444,7 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 					label="Quote"
 					title="Quote, <Ctrl+Shift+.>"
 					@click=${() => this.#editor?.monacoEditor?.getAction('q')?.run()}>
-					<uui-icon name="umb:quote"></uui-icon>
+					<uui-icon name="icon-quote"></uui-icon>
 				</uui-button>
 				<uui-button
 					compact
@@ -452,7 +452,7 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 					label="Ordered List"
 					title="Ordered List, &lt;Ctrl+Shift+7&gt;"
 					@click=${() => this.#editor?.monacoEditor?.getAction('ol')?.run()}>
-					<uui-icon name="umb:ordered-list"></uui-icon>
+					<uui-icon name="icon-ordered-list"></uui-icon>
 				</uui-button>
 				<uui-button
 					compact
@@ -460,7 +460,7 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 					label="Unordered List"
 					title="Unordered List, &lt;Ctrl+Shift+8&gt;"
 					@click=${() => this.#editor?.monacoEditor?.getAction('ul')?.run()}>
-					<uui-icon name="umb:bulleted-list"></uui-icon>
+					<uui-icon name="icon-bulleted-list"></uui-icon>
 				</uui-button>
 			</div>
 			<div>
@@ -470,7 +470,7 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 					label="Code"
 					title="Code, &lt;Ctrl+E&gt;"
 					@click=${() => this.#editor?.monacoEditor?.getAction('code')?.run()}>
-					<uui-icon name="umb:code"></uui-icon>
+					<uui-icon name="icon-code"></uui-icon>
 				</uui-button>
 				<uui-button
 					compact
@@ -478,7 +478,7 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 					label="Line"
 					title="Line"
 					@click=${() => this.#editor?.monacoEditor?.getAction('line')?.run()}>
-					<uui-icon name="umb:width"></uui-icon>
+					<uui-icon name="icon-width"></uui-icon>
 				</uui-button>
 				<uui-button
 					compact
@@ -486,7 +486,7 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 					label="Link"
 					title="Link, &lt;Ctrl+K&gt;"
 					@click=${() => this.#editor?.monacoEditor?.getAction('link')?.run()}>
-					<uui-icon name="umb:link"></uui-icon>
+					<uui-icon name="icon-link"></uui-icon>
 				</uui-button>
 				<uui-button
 					compact
@@ -494,7 +494,7 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
 					label="Image"
 					title="Image"
 					@click=${() => this.#editor?.monacoEditor?.getAction('image')?.run()}>
-					<uui-icon name="umb:picture"></uui-icon>
+					<uui-icon name="icon-picture"></uui-icon>
 				</uui-button>
 			</div>
 			<div>

src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts

@@ -205,7 +205,7 @@ export class UmbInputMultiUrlElement extends FormControlMixin(UmbLitElement) {
 			.name="${link.name || ''}"
 			.detail="${(link.url || '') + (link.queryString || '')}"
 			@open="${() => this._temporary_onClick_editItem(index)}">
-			<uui-icon slot="icon" name="${link.icon || 'umb:link'}"></uui-icon>
+			<uui-icon slot="icon" name="${link.icon || 'icon-link'}"></uui-icon>
 			<uui-action-bar slot="actions">
 				<uui-button .href=${this._modalRoute?.({ index })} label="Edit link">Edit</uui-button>
 				<uui-button @click="${() => this._removeItem(index)}" label="Remove link">Remove</uui-button>

src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts

@@ -124,7 +124,7 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 				})}
 			</div>
 			<uui-button compact @click=${this.#handleRemove} label="Remove files">
-				<uui-icon name="umb:trash"></uui-icon> Remove file(s)
+				<uui-icon name="icon-trash"></uui-icon> Remove file(s)
 			</uui-button>`;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts

@@ -46,7 +46,7 @@ export const WithSlots: Story = {
 			<div slot="actions">
 				<uui-action-bar>
 					<uui-button label="delete" look="primary" color="danger" compact>
-						<uui-icon name="umb:delete"></uui-icon>
+						<uui-icon name="icon-delete"></uui-icon>
 					</uui-button>
 				</uui-action-bar>
 			</div>

src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.stories.ts

@@ -27,7 +27,7 @@ const columns: Array<UmbTableColumn> = [
 const items: Array<UmbTableItem> = [
 	{
 		id: UmbId.new(),
-		icon: 'umb:wand',
+		icon: 'icon-wand',
 		data: [
 			{
 				columnAlias: 'name',
@@ -41,7 +41,7 @@ const items: Array<UmbTableItem> = [
 	},
 	{
 		id: UmbId.new(),
-		icon: 'umb:document',
+		icon: 'icon-document',
 		data: [
 			{
 				columnAlias: 'name',
@@ -55,7 +55,7 @@ const items: Array<UmbTableItem> = [
 	},
 	{
 		id: UmbId.new(),
-		icon: 'umb:user',
+		icon: 'icon-user',
 		data: [
 			{
 				columnAlias: 'name',

src/Umbraco.Web.UI.Client/src/packages/core/components/tooltip-menu/tooltip-menu.stories.ts

@@ -13,12 +13,12 @@ type Story = StoryObj<UmbTooltipMenuElement>;
 const items: Array<TooltipMenuItem> = [
 	{
 		label: 'Item 1',
-		icon: 'umb:document',
+		icon: 'icon-document',
 		action: () => alert('Item 1 clicked'),
 	},
 	{
 		label: 'Item 2',
-		icon: 'umb:home',
+		icon: 'icon-home',
 		action: () => alert('Item 2 clicked'),
 	},
 ];

src/Umbraco.Web.UI.Client/src/packages/core/components/variant-selector/variant-selector.element.ts

@@ -204,7 +204,7 @@ export class UmbVariantSelectorElement extends UmbLitElement {
 																${this._isNotPublishedMode(variant.culture!, variant.state!) ? 'add-mode' : ''}"
 																@click=${() => this._switchVariant(variant)}>
 																${this._isNotPublishedMode(variant.culture!, variant.state!)
-																	? html`<uui-icon class="add-icon" name="umb:add"></uui-icon>`
+																	? html`<uui-icon class="add-icon" name="icon-add"></uui-icon>`
 																	: nothing}
 																<div>
 																	${variant.name} <i>(${variant.culture})</i> ${variant.segment}

src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts

@@ -85,7 +85,7 @@ export class UmbDebugElement extends UmbLitElement {
 	private _renderDialog() {
 		return html` <div id="container">
 			<uui-badge color="danger" look="primary" attention @click="${this._openDialog}">
-				<uui-icon name="umb:bug"></uui-icon> Debug
+				<uui-icon name="icon-bug"></uui-icon> Debug
 			</uui-badge>
 		</div>`;
 	}
@@ -93,7 +93,7 @@ export class UmbDebugElement extends UmbLitElement {
 	private _renderPanel() {
 		return html` <div id="container">
 			<uui-button color="danger" look="primary" @click="${this._toggleDebugPane}">
-				<uui-icon name="umb:bug"></uui-icon>
+				<uui-icon name="icon-bug"></uui-icon>
 				Debug
 			</uui-button>
 

src/Umbraco.Web.UI.Client/src/packages/core/debug/modals/debug/debug-modal.element.ts

@@ -11,7 +11,7 @@ export default class UmbContextDebuggerModalElement extends UmbModalBaseElement<
 	render() {
 		return html`
 			<uui-dialog-layout>
-				<span slot="headline"> <uui-icon name="umb:bug"></uui-icon> Debug: Contexts </span>
+				<span slot="headline"> <uui-icon name="icon-bug"></uui-icon> Debug: Contexts </span>
 				<uui-scroll-container id="field-settings"> ${this.data?.content} </uui-scroll-container>
 				<uui-button slot="actions" look="primary" label="Close sidebar" @click="${this._handleClose}">Close</uui-button>
 			</uui-dialog-layout>

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/collection-view.model.ts

@@ -15,8 +15,8 @@ export interface MetaCollectionView {
 	 * An icon to represent the collection view
 	 *
 	 * @examples [
-	 *   "umb:box",
-	 *   "umb:grid"
+	 *   "icon-box",
+	 *   "icon-grid"
 	 * ]
 	 */
 	icon: string;

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts

@@ -15,8 +15,8 @@ export interface MetaEntityAction {
 	 * An icon to represent the action to be performed
 	 *
 	 * @examples [
-	 *   "umb:box",
-	 *   "umb:grid"
+	 *   "icon-box",
+	 *   "icon-grid"
 	 * ]
 	 */
 	icon?: string;

src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts

@@ -1,7 +1,7 @@
 import icons from '../../../../../shared/icon-registry/icons/icons.json' assert { type: 'json' };
 import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui';
 
-import { css, html, styleMap, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 import { UmbIconPickerModalData, UmbIconPickerModalValue, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
@@ -10,72 +10,69 @@ import { UmbIconPickerModalData, UmbIconPickerModalValue, UmbModalBaseElement }
 // TODO: to prevent element extension we need to move the Picker logic into a separate class we can reuse across all pickers
 @customElement('umb-icon-picker-modal')
 export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPickerModalData, UmbIconPickerModalValue> {
-	private _iconList = icons.map((icon) => icon.name);
+
+
+	private _iconList = icons.filter((icon) => !icon.legacy);
 
 	@state()
-	private _iconListFiltered: Array<string> = [];
+	private _iconListFiltered: Array<(typeof icons)[0]> = [];
 
 	@state()
 	private _colorList = [
-		'#000000',
-		'#373737',
-		'#9e9e9e',
-		'#607d8b',
-		'#2196f3',
-		'#03a9f4',
-		'#3f51b5',
-		'#9c27b0',
-		'#673ab7',
-		'#00bcd4',
-		'#4caf50',
-		'#8bc34a',
-		'#cddc39',
-		'#ffeb3b',
-		'#ffc107',
-		'#ff9800',
-		'#ff5722',
-		'#f44336',
-		'#e91e63',
-		'#795548',
+		{alias:'text', varName:'--uui-color-text'},
+		{alias:'yellow', varName:'--uui-palette-sunglow'},
+		{alias:'pink', varName:'--uui-palette-spanish-pink'},
+		{alias:'dark', varName:'--uui-palette-gunmetal'},
+		{alias:'darkblue', varName:'--uui-palette-space-cadet'},
+		{alias:'blue', varName:'--uui-palette-violet-blue'},
+		{alias:'red', varName:'--uui-palette-maroon-flush'},
+		{alias:'green', varName:'--uui-palette-jungle-green'},
+		{alias:'brown', varName:'--uui-palette-chamoisee'},
 	];
 
 	@state()
-	private _currentColor?: string;
+	_modalValue?:UmbIconPickerModalValue;
 
 	@state()
-	private _currentIcon?: string;
+	_currentColorVarName = '--uui-color-text';
 
-	private _changeIcon(e: { target: HTMLInputElement; type: any; key: unknown }) {
+	#changeIcon(e: { target: HTMLInputElement; type: any; key: unknown }) {
 		if (e.type == 'click' || (e.type == 'keyup' && e.key == 'Enter')) {
-			this._currentIcon = e.target.id;
+			this.modalContext?.updateValue({icon: e.target.id});
 		}
 	}
 
-	private _filterIcons(e: { target: HTMLInputElement }) {
+	#filterIcons(e: { target: HTMLInputElement }) {
 		if (e.target.value) {
-			this._iconListFiltered = this._iconList.filter((icon) => icon.includes(e.target.value));
+			this._iconListFiltered = this._iconList.filter((icon) => icon.name.includes(e.target.value));
 		} else {
 			this._iconListFiltered = this._iconList;
 		}
 	}
 
-	private _close() {
+	#close() {
 		this.modalContext?.reject();
 	}
 
-	private _submit() {
-		this.modalContext?.submit({ color: this._currentColor, icon: this._currentIcon });
+	#submit() {
+		// TODO: Shouldnt we stop sending the value here, instead let the modal context send of its value. and then its up to any one using it to make sure Modal Context value is up to date.
+		this.modalContext?.submit(this._modalValue);
 	}
 
-	private _onColorChange(e: UUIColorSwatchesEvent) {
-		this._currentColor = e.target.value;
+	#onColorChange(e: UUIColorSwatchesEvent) {
+		this.modalContext?.updateValue({icon: e.target.value});
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
-		this._currentColor = this.data?.color ?? this._colorList[0];
-		this._currentIcon = this.data?.icon ?? this._iconList[0];
 		this._iconListFiltered = this._iconList;
+
+		if(this.modalContext) {
+			this.observe(this.modalContext?.value, (newValue) => {
+				this._modalValue = newValue;
+				this._currentColorVarName = this._colorList.find(x => x.alias === newValue?.color)?.alias ?? this._colorList[0].varName;
+			}, '_observeModalContextValue');
+		}
 	}
 
 	render() {
@@ -85,20 +82,22 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 					${this.renderSearchbar()}
 					<hr />
 					<uui-color-swatches
-						.value="${this._currentColor || ''}"
+						.value="${this._modalValue?.color ?? ''}"
 						label="Color switcher for icons"
-						@change="${this._onColorChange}">
-						${this._colorList.map(
+						@change="${this.#onColorChange}">
+						${
+							// TODO: Missing translation for the color aliases.
+							this._colorList.map(
 							(color) => html`
-								<uui-color-swatch label="${color}" title="${color}" value="${color}"></uui-color-swatch>
+								<uui-color-swatch label="${color.alias}" title="${color.alias}" value=${color.alias} style="--uui-swatch-color: var(${color.varName})"></uui-color-swatch>
 							`,
 						)}
 					</uui-color-swatches>
 					<hr />
 					<uui-scroll-container id="icon-selection">${this.renderIconSelection()}</uui-scroll-container>
 				</div>
-				<uui-button slot="actions" label="close" @click="${this._close}">Close</uui-button>
-				<uui-button slot="actions" color="positive" look="primary" @click="${this._submit}" label="Submit">
+				<uui-button slot="actions" label="close" @click="${this.#close}">Close</uui-button>
+				<uui-button slot="actions" color="positive" look="primary" @click="${this.#submit}" label="Submit">
 					Submit
 				</uui-button>
 			</umb-body-layout>
@@ -107,7 +106,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 
 	renderSearchbar() {
 		return html` <uui-input
-			@keyup="${this._filterIcons}"
+			@keyup="${this.#filterIcons}"
 			placeholder="Type to filter..."
 			label="Type to filter icons"
 			id="searchbar">
@@ -116,21 +115,22 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 	}
 
 	renderIconSelection() {
-		return html`${this._iconListFiltered.map((icon) => {
-			return html`
+		return repeat(this._iconListFiltered,
+			(icon) => icon.name,
+			(icon) => html`
 				<uui-icon
 					tabindex="0"
-					style=${styleMap({ color: this._currentColor })}
-					class="icon ${icon === this._currentIcon ? 'selected' : ''}"
-					title="${icon}"
-					name="${icon}"
-					label="${icon}"
-					id="${icon}"
-					@click="${this._changeIcon}"
-					@keyup="${this._changeIcon}">
+					style="color: var(${this._currentColorVarName})"
+					class="icon ${icon.name === this._modalValue?.icon ? 'selected' : ''}"
+					title="${icon.name}"
+					name="${icon.name}"
+					label="${icon.name}"
+					id="${icon.name}"
+					@click="${this.#changeIcon}"
+					@keyup="${this.#changeIcon}">
 				</uui-icon>
-			`;
-		})}`;
+			`
+		);
 	}
 
 	static styles = [

src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.stories.ts

@@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/web-components';
 import type { UmbIconPickerModalElement } from './icon-picker-modal.element.js';
 import { html } from '@umbraco-cms/backoffice/external/lit';
 
-import { UmbIconPickerModalData } from '@umbraco-cms/backoffice/modal';
+import { UmbIconPickerModalData, UmbIconPickerModalValue } from '@umbraco-cms/backoffice/modal';
 
 export default {
 	title: 'API/Modals/Layouts/Icon Picker',
@@ -14,6 +14,9 @@ export default {
 } as Meta;
 
 const data: UmbIconPickerModalData = {
+};
+
+const value: UmbIconPickerModalValue = {
 	color: undefined,
 	icon: undefined,
 };
@@ -22,5 +25,5 @@ export const Overview: Story<UmbIconPickerModalElement> = () => html`
 	<!-- TODO: figure out if generics are allowed for properties:
 	https://github.com/runem/lit-analyzer/issues/149
 	https://github.com/runem/lit-analyzer/issues/163 -->
-	<umb-icon-picker-modal .data=${data as any}></umb-icon-picker-modal>
+	<umb-icon-picker-modal .data=${data as any} .value=${value}></umb-icon-picker-modal>
 `;

src/Umbraco.Web.UI.Client/src/packages/core/modal/common/property-settings/property-settings-modal.element.ts

@@ -227,7 +227,7 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
 										?disabled=${this._aliasLocked}>
 										<!-- TODO: validation for bad characters -->
 										<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
-											<uui-icon name=${this._aliasLocked ? 'umb:lock' : 'umb:unlocked'}></uui-icon>
+											<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
 										</div>
 									</uui-input>
 									<uui-textarea

src/Umbraco.Web.UI.Client/src/packages/core/modal/token/icon-picker-modal.token.ts

@@ -1,8 +1,6 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbIconPickerModalData {
-	color: string | undefined;
-	icon: string | undefined;
 }
 
 export interface UmbIconPickerModalValue {

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/block-configuration/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Block Grid Block Configuration',
 		propertyEditorSchemaAlias: 'Umbraco.BlockGrid.BlockConfiguration',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'blocks',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/group-configuration/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Block Grid Group Configuration',
 		propertyEditorSchemaAlias: 'Umbraco.BlockGrid.GroupConfiguration',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'blocks',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/config/stylesheet-picker/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Block Grid Stylesheet Picker',
 		propertyEditorSchemaAlias: '',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'blocks',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-grid/manifests.ts

@@ -11,7 +11,7 @@ const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Block Grid',
 		propertyEditorSchemaAlias: 'Umbraco.BlockGrid',
-		icon: 'umb:icon-layout',
+		icon: 'icon-icon-layout',
 		group: 'richContent',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Block List Block Configuration',
 		propertyEditorSchemaAlias: '',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'common',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/manifests.ts

@@ -9,7 +9,7 @@ const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Block List',
 		propertyEditorSchemaAlias: 'Umbraco.BlockList',
-		icon: 'umb:thumbnail-list',
+		icon: 'icon-thumbnail-list',
 		group: 'lists',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Checkbox List',
 		propertyEditorSchemaAlias: 'Umbraco.CheckboxList',
-		icon: 'umb:bulleted-list',
+		icon: 'icon-bulleted-list',
 		group: 'lists',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/bulk-action-permissions/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Collection View Bulk Action Permissions',
 		propertyEditorSchemaAlias: '',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'lists',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/column-configuration/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Collection View Column Configuration',
 		propertyEditorSchemaAlias: '',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'lists',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/layout-configuration/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Collection View Layout Configuration',
 		propertyEditorSchemaAlias: '',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'lists',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/config/order-by/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Collection View Order By',
 		propertyEditorSchemaAlias: '',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'lists',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/manifests.ts

@@ -12,7 +12,7 @@ const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Collection View',
 		propertyEditorSchemaAlias: 'Umbraco.ListView',
-		icon: 'umb:bulleted-list',
+		icon: 'icon-bulleted-list',
 		group: 'lists',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Color Picker',
 		propertyEditorSchemaAlias: 'Umbraco.ColorPicker',
-		icon: 'umb:colorpicker',
+		icon: 'icon-colorpicker',
 		group: 'pickers',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Date Picker',
 		propertyEditorSchemaAlias: 'Umbraco.DateTime',
-		icon: 'umb:time',
+		icon: 'icon-time',
 		group: 'pickers',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Dropdown',
 		propertyEditorSchemaAlias: 'Umbraco.Dropdown',
-		icon: 'umb:time',
+		icon: 'icon-time',
 		group: 'pickers',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/manifests.ts

@@ -7,7 +7,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	loader: () => import('./property-editor-ui-eye-dropper.element.js'),
 	meta: {
 		label: 'Eye Dropper Color Picker',
-		icon: 'umb:colorpicker',
+		icon: 'icon-colorpicker',
 		group: 'pickers',
 		propertyEditorSchemaAlias: 'Umbraco.ColorPicker.EyeDropper',
 		settings: {

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/icon-picker/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Icon Picker',
 		propertyEditorSchemaAlias: 'Umbraco.IconPicker',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'common',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-cropper/manifests.ts

@@ -7,7 +7,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	loader: () => import('./property-editor-ui-image-cropper.element.js'),
 	meta: {
 		label: 'Image Cropper',
-		icon: 'umb:colorpicker',
+		icon: 'icon-colorpicker',
 		group: 'pickers',
 		propertyEditorSchemaAlias: 'Umbraco.ImageCropper',
 	},

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/image-crops-configuration/manifests.ts

@@ -7,7 +7,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	loader: () => import('./property-editor-ui-image-crops-configuration.element.js'),
 	meta: {
 		label: 'Image Crops Configuration',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'common',
 		propertyEditorSchemaAlias: 'Umbraco.ImageCropper.Configuration',
 	},

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/label/manifests.ts

@@ -7,7 +7,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	loader: () => import('./property-editor-ui-label.element.js'),
 	meta: {
 		label: 'Label',
-		icon: 'umb:readonly',
+		icon: 'icon-readonly',
 		group: 'pickers',
 		propertyEditorSchemaAlias: 'Umbraco.Label',
 	},

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/manifests.ts

@@ -72,7 +72,7 @@ export const manifests: Array<ManifestPropertyEditorUi> = [
 		loader: () => import('./number/property-editor-ui-number.element.js'),
 		meta: {
 			label: 'Number',
-			icon: 'umb:autofill',
+			icon: 'icon-autofill',
 			group: 'common',
 			propertyEditorSchemaAlias: 'Umbraco.Integer',
 		},

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/markdown-editor/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Markdown Editor',
 		propertyEditorSchemaAlias: 'Umbraco.MarkdownEditor',
-		icon: 'umb:code',
+		icon: 'icon-code',
 		group: 'pickers',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/media-picker/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Media Picker',
 		propertyEditorSchemaAlias: 'Umbraco.MediaPicker3',
-		icon: 'umb:picture',
+		icon: 'icon-picture',
 		group: 'pickers',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Member Group Picker',
 		propertyEditorSchemaAlias: 'Umbraco.MemberGroupPicker',
-		icon: 'umb:users-alt',
+		icon: 'icon-users-alt',
 		group: 'people',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-picker/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Member Picker',
 		propertyEditorSchemaAlias: 'Umbraco.MemberPicker',
-		icon: 'umb:user',
+		icon: 'icon-user',
 		group: 'people',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multi-url-picker/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Multi URL Picker',
 		propertyEditorSchemaAlias: 'Umbraco.MultiUrlPicker',
-		icon: 'umb:link',
+		icon: 'icon-link',
 		group: 'pickers',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts

@@ -92,7 +92,7 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL
 
 	render() {
 		return html`
-			${this.disabled || this.readonly ? nothing : html`<uui-icon name="umb:navigation"></uui-icon>`}
+			${this.disabled || this.readonly ? nothing : html`<uui-icon name="icon-navigation"></uui-icon>`}
 			<uui-form-validation-message id="validation-message" @invalid=${this.#onInvalid} @valid=${this.#onValid}>
 				<uui-input
 					id="input"
@@ -115,7 +115,7 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL
 						@click="${this.#onDelete}"
 						?disabled=${this.disabled}
 						compact>
-						<uui-icon name="umb:trash"></uui-icon>
+						<uui-icon name="icon-trash"></uui-icon>
 				  </uui-button>`}
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Multiple Text String',
 		propertyEditorSchemaAlias: 'Umbraco.MultipleTextString',
-		icon: 'umb:ordered-list',
+		icon: 'icon-ordered-list',
 		group: '',
 		supportsReadOnly: true,
 	},

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number-range/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Number Range',
 		propertyEditorSchemaAlias: '',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'common',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number/manifests.ts

@@ -16,7 +16,7 @@ export const manifests: Array<ManifestPropertyEditorUi> = [
 		meta: {
 			label: 'Integer',
 			propertyEditorSchemaAlias: 'Umbraco.Integer',
-			icon: 'umb:autofill',
+			icon: 'icon-autofill',
 			group: 'common',
 			settings: {
 				properties: [allowDecimalsConfig],
@@ -37,7 +37,7 @@ export const manifests: Array<ManifestPropertyEditorUi> = [
 		meta: {
 			label: 'Decimal',
 			propertyEditorSchemaAlias: 'Umbraco.Decimal',
-			icon: 'umb:autofill',
+			icon: 'icon-autofill',
 			group: 'common',
 			settings: {
 				properties: [allowDecimalsConfig],

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/order-direction/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Order Direction',
 		propertyEditorSchemaAlias: '',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'common',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/overlay-size/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Overlay Size',
 		propertyEditorSchemaAlias: '',
-		icon: 'umb:document',
+		icon: 'icon-document',
 		group: '',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/radio-button-list/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Radio Button List',
 		propertyEditorSchemaAlias: 'Umbraco.RadioButtonList',
-		icon: 'umb:target',
+		icon: 'icon-target',
 		group: 'lists',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/slider/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Slider',
 		propertyEditorSchemaAlias: 'Umbraco.Slider',
-		icon: 'umb:navigation-horizontal',
+		icon: 'icon-navigation-horizontal',
 		group: 'common',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/text-box/manifests.ts

@@ -17,7 +17,7 @@ export const manifests: Array<ManifestPropertyEditorUi> = [
 		meta: {
 			label: 'Text Box',
 			propertyEditorSchemaAlias: 'Umbraco.TextBox',
-			icon: 'umb:autofill',
+			icon: 'icon-autofill',
 			group: 'common',
 			settings: {
 				properties: [inputTypeConfig],
@@ -38,7 +38,7 @@ export const manifests: Array<ManifestPropertyEditorUi> = [
 		meta: {
 			label: 'Email',
 			propertyEditorSchemaAlias: 'Umbraco.EmailAddress',
-			icon: 'umb:message',
+			icon: 'icon-message',
 			group: 'common',
 			settings: {
 				properties: [inputTypeConfig],

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/textarea/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Text Area',
 		propertyEditorSchemaAlias: 'Umbraco.TextArea',
-		icon: 'umb:edit',
+		icon: 'icon-edit',
 		group: 'common',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/manifests.ts

@@ -9,7 +9,7 @@ const configurationManifests: Array<ManifestPropertyEditorUi> = [
 		meta: {
 			label: 'TinyMCE Toolbar Configuration',
 			propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration',
-			icon: 'umb:autofill',
+			icon: 'icon-autofill',
 			group: 'common',
 		},
 	},
@@ -21,7 +21,7 @@ const configurationManifests: Array<ManifestPropertyEditorUi> = [
 		meta: {
 			label: 'TinyMCE Stylesheets Configuration',
 			propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration',
-			icon: 'umb:autofill',
+			icon: 'icon-autofill',
 			group: 'common',
 		},
 	},
@@ -33,7 +33,7 @@ const configurationManifests: Array<ManifestPropertyEditorUi> = [
 		meta: {
 			label: 'TinyMCE Dimensions Configuration',
 			propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration',
-			icon: 'umb:autofill',
+			icon: 'icon-autofill',
 			group: 'common',
 		},
 	},
@@ -45,7 +45,7 @@ const configurationManifests: Array<ManifestPropertyEditorUi> = [
 		meta: {
 			label: 'TinyMCE Max Image Size Configuration',
 			propertyEditorSchemaAlias: 'Umbraco.RichText.Configuration',
-			icon: 'umb:autofill',
+			icon: 'icon-autofill',
 			group: 'common',
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/config/toolbar/property-editor-ui-tiny-mce-toolbar-configuration.element.ts

@@ -87,7 +87,7 @@ export class UmbPropertyEditorUITinyMceToolbarConfigurationElement
 					this._toolbarConfig.push({
 						alias: t.alias,
 						label: t.label,
-						icon: t.icon ?? 'umb:autofill',
+						icon: t.icon ?? 'icon-autofill',
 						selected: this.value.includes(t.alias),
 					});
 				});

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/manifests.ts

@@ -9,7 +9,7 @@ const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Rich Text Editor',
 		propertyEditorSchemaAlias: 'Umbraco.RichText',
-		icon: 'umb:browser-window',
+		icon: 'icon-browser-window',
 		group: 'richText',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/toggle/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Toggle',
 		propertyEditorSchemaAlias: 'Umbraco.TrueFalse',
-		icon: 'umb:checkbox',
+		icon: 'icon-checkbox',
 		group: 'common',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/manifests.ts

@@ -7,7 +7,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	loader: () => import('./property-editor-ui-tree-picker-start-node.element.js'),
 	meta: {
 		label: 'Tree Picker Start Node',
-		icon: 'umb:page-add',
+		icon: 'icon-page-add',
 		group: 'pickers',
 		propertyEditorSchemaAlias: '',
 	},

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts

@@ -8,7 +8,7 @@ const manifest: ManifestPropertyEditorUi = {
 	loader: () => import('./property-editor-ui-tree-picker.element.js'),
 	meta: {
 		label: 'Tree Picker',
-		icon: 'umb:page-add',
+		icon: 'icon-page-add',
 		group: 'pickers',
 		propertyEditorSchemaAlias: 'Umbraco.MultiNodeTreePicker',
 		settings: {

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/upload-field/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Upload Field',
 		propertyEditorSchemaAlias: 'Umbraco.UploadField',
-		icon: 'umb:download-alt',
+		icon: 'icon-download-alt',
 		group: 'common',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/user-picker/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'User Picker',
 		propertyEditorSchemaAlias: 'Umbraco.UserPicker',
-		icon: 'umb:user',
+		icon: 'icon-user',
 		group: 'people',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/value-type/manifests.ts

@@ -7,7 +7,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	loader: () => import('./property-editor-ui-value-type.element.js'),
 	meta: {
 		label: 'Value Type',
-		icon: 'umb:autofill',
+		icon: 'icon-autofill',
 		group: 'common',
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/core/sorter/stories/test-sorter-controller.element.ts

@@ -64,7 +64,7 @@ export default class UmbTestSorterControllerElement extends UmbLitElement {
 				${model.map(
 					(entry) =>
 						html`<li class="item" data-sort-entry-id="${entry.id}">
-							<span><uui-icon name="umb:wand"></uui-icon>${entry.value}</span>
+							<span><uui-icon name="icon-wand"></uui-icon>${entry.value}</span>
 						</li>`,
 				)}
 			</ul>

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/manifests.ts

@@ -17,7 +17,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		weight: 600,
 		api: UmbCreateDictionaryEntityAction,
 		meta: {
-			icon: 'umb:add',
+			icon: 'icon-add',
 			label: 'Create',
 			repositoryAlias,
 			entityTypes: [entityType],
@@ -30,7 +30,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		weight: 500,
 		api: UmbMoveEntityAction,
 		meta: {
-			icon: 'umb:enter',
+			icon: 'icon-enter',
 			label: 'Move',
 			repositoryAlias,
 			entityTypes: [entityType],
@@ -43,7 +43,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		weight: 400,
 		api: UmbExportDictionaryEntityAction,
 		meta: {
-			icon: 'umb:download-alt',
+			icon: 'icon-download-alt',
 			label: 'Export',
 			repositoryAlias,
 			entityTypes: [entityType],
@@ -56,7 +56,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		weight: 300,
 		api: UmbImportDictionaryEntityAction,
 		meta: {
-			icon: 'umb:page-up',
+			icon: 'icon-page-up',
 			label: 'Import',
 			repositoryAlias,
 			entityTypes: [entityType],
@@ -69,7 +69,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		weight: 200,
 		api: UmbReloadDictionaryEntityAction,
 		meta: {
-			icon: 'umb:refresh',
+			icon: 'icon-refresh',
 			label: 'Reload',
 			repositoryAlias,
 			entityTypes: [entityType],
@@ -82,7 +82,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		weight: 100,
 		api: UmbDeleteEntityAction,
 		meta: {
-			icon: 'umb:trash',
+			icon: 'icon-trash',
 			label: 'Delete',
 			repositoryAlias,
 			entityTypes: [entityType],

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/menu-item/manifests.ts

@@ -8,7 +8,7 @@ const menuItem: ManifestMenuItem = {
 	loader: () => import('./dictionary-menu-item.element.js'),
 	meta: {
 		label: 'Dictionary',
-		icon: 'umb:book-alt',
+		icon: 'icon-book-alt',
 		entityType: 'dictionary-item',
 		menus: ['Umb.Menu.Dictionary'],
 	},

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/repository/dictionary.repository.ts

@@ -66,7 +66,7 @@ export class UmbDictionaryRepository
 			id: null,
 			type: 'dictionary-root',
 			name: 'Dictionary',
-			icon: 'umb:folder',
+			icon: 'icon-folder',
 			hasChildren: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/workspace/dictionary-workspace-editor.element.ts

@@ -39,7 +39,7 @@ export class UmbDictionaryWorkspaceEditorElement extends UmbLitElement {
 			<umb-workspace-editor alias="Umb.Workspace.Dictionary">
 				<div id="header" slot="header">
 					<uui-button href="section/dictionary/dashboard" label=${this.localize.term('general_backToOverview')} compact>
-						<uui-icon name="umb:arrow-left"></uui-icon>
+						<uui-icon name="icon-arrow-left"></uui-icon>
 					</uui-button>
 					<uui-input
 						.value=${this._name ?? ''}

src/Umbraco.Web.UI.Client/src/packages/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts

@@ -237,14 +237,14 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 				<uui-table-cell> ${data.culture || '*'} </uui-table-cell>
 				<uui-table-cell>
 					<a href="${data.originalUrl || '#'}" target="_blank"> ${data.originalUrl}</a>
-					<uui-icon name="umb:out"></uui-icon>
+					<uui-icon name="icon-out"></uui-icon>
 				</uui-table-cell>
 				<uui-table-cell>
-					<uui-icon name="umb:arrow-right"></uui-icon>
+					<uui-icon name="icon-arrow-right"></uui-icon>
 				</uui-table-cell>
 				<uui-table-cell>
 					<a href="${data.destinationUrl || '#'}" target="_blank"> ${data.destinationUrl}</a>
-					<uui-icon name="umb:out"></uui-icon>
+					<uui-icon name="icon-out"></uui-icon>
 				</uui-table-cell>
 				<uui-table-cell>
 					<uui-action-bar style="justify-self: left;">

src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/menu-item/manifests.ts

@@ -7,7 +7,7 @@ const menuItem: ManifestMenuItem = {
 	weight: 100,
 	meta: {
 		label: 'Document Blueprints',
-		icon: 'umb:blueprint',
+		icon: 'icon-blueprint',
 		entityType: 'document-blueprint-root',
 		menus: ['Umb.Menu.Settings'],
 	},

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/manifests.ts

@@ -15,7 +15,7 @@ const entityActions: Array<ManifestTypes> = [
 		weight: 1000,
 		api: UmbCreateDataTypeEntityAction,
 		meta: {
-			icon: 'umb:add',
+			icon: 'icon-add',
 			label: 'Create...',
 			repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_TYPE_ENTITY_TYPE, DOCUMENT_TYPE_ROOT_ENTITY_TYPE, DOCUMENT_TYPE_FOLDER_ENTITY_TYPE],

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/create/modal/document-type-create-options-modal.element.ts

@@ -53,10 +53,10 @@ export class UmbDataTypeCreateOptionsModalElement extends UmbLitElement {
 						href=${`section/settings/workspace/document-type/create/${this.data?.parentKey || 'null'}`}
 						label="New Document Type..."
 						@click=${this.#onNavigate}>
-						<uui-icon slot="icon" name="umb:autofill"></uui-icon>}
+						<uui-icon slot="icon" name="icon-autofill"></uui-icon>}
 					</uui-menu-item>
 					<uui-menu-item @click=${this.#onClick} label="New Folder...">
-						<uui-icon slot="icon" name="umb:folder"></uui-icon>}
+						<uui-icon slot="icon" name="icon-folder"></uui-icon>}
 					</uui-menu-item>
 				</uui-box>
 				<uui-button slot="actions" id="cancel" label="Cancel" @click="${this.#onCancel}">Cancel</uui-button>

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entity-actions/manifests.ts

@@ -18,7 +18,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		weight: 900,
 		api: UmbDeleteEntityAction,
 		meta: {
-			icon: 'umb:trash',
+			icon: 'icon-trash',
 			label: 'Delete',
 			repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS,
 			entityTypes: [entityType],
@@ -31,7 +31,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		weight: 700,
 		api: UmbMoveEntityAction,
 		meta: {
-			icon: 'umb:enter',
+			icon: 'icon-enter',
 			label: 'Move',
 			repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS,
 			entityTypes: [entityType],
@@ -44,7 +44,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		weight: 600,
 		api: UmbCopyEntityAction,
 		meta: {
-			icon: 'umb:documents',
+			icon: 'icon-documents',
 			label: 'Copy',
 			repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS,
 			entityTypes: [entityType],
@@ -57,7 +57,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		weight: 500,
 		api: UmbSortChildrenOfEntityAction,
 		meta: {
-			icon: 'umb:navigation-vertical',
+			icon: 'icon-navigation-vertical',
 			label: 'Sort',
 			repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS,
 			entityTypes: [entityType],

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu-item/manifests.ts

@@ -9,7 +9,7 @@ const menuItem: ManifestTypes = {
 	meta: {
 		treeAlias: 'Umb.Tree.DocumentTypes',
 		label: 'Document Types',
-		icon: 'umb:folder',
+		icon: 'icon-folder',
 		menus: ['Umb.Menu.Settings'],
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/document-type.repository.ts

@@ -73,7 +73,7 @@ export class UmbDocumentTypeRepository
 			id: null,
 			type: 'document-type-root',
 			name: 'Document Types',
-			icon: 'umb:folder',
+			icon: 'icon-folder',
 			hasChildren: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/sources/document-type.server.data.ts

@@ -63,7 +63,7 @@ export class UmbDocumentTypeServerDataSource
 			name: '',
 			alias: '',
 			description: '',
-			icon: 'umb:document',
+			icon: 'icon-document',
 			allowedAsRoot: false,
 			variesByCulture: false,
 			variesBySegment: false,

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts

@@ -132,7 +132,7 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 							?disabled=${this._aliasLocked}>
 							<!-- TODO: validation for bad characters -->
 							<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
-								<uui-icon name=${this._aliasLocked ? 'umb:lock' : 'umb:unlocked'}></uui-icon>
+								<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
 							</div>
 						</uui-input>
 					</uui-input>

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/manifests.ts

@@ -25,7 +25,7 @@ const workspaceEditorViews: Array<ManifestWorkspaceEditorView> = [
 		meta: {
 			label: 'Design',
 			pathname: 'design',
-			icon: 'umb:document-dashed-line',
+			icon: 'icon-document-dashed-line',
 		},
 		conditions: [
 			{
@@ -43,7 +43,7 @@ const workspaceEditorViews: Array<ManifestWorkspaceEditorView> = [
 		meta: {
 			label: 'Structure',
 			pathname: 'structure',
-			icon: 'umb:mindmap',
+			icon: 'icon-mindmap',
 		},
 		conditions: [
 			{
@@ -61,7 +61,7 @@ const workspaceEditorViews: Array<ManifestWorkspaceEditorView> = [
 		meta: {
 			label: 'Settings',
 			pathname: 'settings',
-			icon: 'umb:settings',
+			icon: 'icon-settings',
 		},
 		conditions: [
 			{
@@ -79,7 +79,7 @@ const workspaceEditorViews: Array<ManifestWorkspaceEditorView> = [
 		meta: {
 			label: 'Templates',
 			pathname: 'templates',
-			icon: 'umb:layout',
+			icon: 'icon-layout',
 		},
 		conditions: [
 			{

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts

@@ -187,7 +187,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 		if (!this.property) return;
 		return html`
 			<div class="sortable">
-				<uui-icon name="${this.inherited ? 'umb:merge' : 'umb:navigation'}"></uui-icon>
+				<uui-icon name="${this.inherited ? 'icon-merge' : 'icon-navigation'}"></uui-icon>
 				${this.property.name} <span style="color: var(--uui-color-disabled-contrast)">(${this.property.alias})</span>
 			</div>
 			<uui-input
@@ -257,7 +257,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 				<div id="editor">
 					${this.renderPropertyTags()}
 					<uui-tag look="default" class="inherited">
-						<uui-icon name="umb:merge"></uui-icon>
+						<uui-icon name="icon-merge"></uui-icon>
 						<span
 							>${this.localize.term('contentTypeEditor_inheritedFrom')}
 							<a href=${this._editDocumentTypePath + 'edit/' + this.ownerDocumentTypeId}>
@@ -285,7 +285,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 					<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
 					<!-- TODO: validation for bad characters -->
 					<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
-						<uui-icon name=${this._aliasLocked ? 'umb:lock' : 'umb:unlocked'}></uui-icon>
+						<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
 					</div>
 			  </uui-input>`
 			: '';
@@ -297,7 +297,7 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 					${this.property.dataTypeId ? html`<uui-tag look="default">${this._dataTypeName}</uui-tag>` : nothing}
 					${this.property.variesByCulture
 						? html`<uui-tag look="default">
-								<uui-icon name="umb:shuffle"></uui-icon> ${this.localize.term('contentTypeEditor_cultureVariantLabel')}
+								<uui-icon name="icon-shuffle"></uui-icon> ${this.localize.term('contentTypeEditor_cultureVariantLabel')}
 						  </uui-tag>`
 						: nothing}
 					${this.property.appearance?.labelOnTop == true

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts

@@ -161,7 +161,7 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
 								? html`
 										<div slot="header">
 											<div>
-												${this._sortModeActive ? html`<uui-icon name="umb:navigation"></uui-icon>` : ''}
+												${this._sortModeActive ? html`<uui-icon name="icon-navigation"></uui-icon>` : ''}
 
 												<uui-input
 													label="Group name"
@@ -179,7 +179,7 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
 										</div>
 								  `
 								: html`<div slot="header">
-										<div><uui-icon name="umb:merge"></uui-icon><b>${group.name ?? ''}</b> (Inherited)</div>
+										<div><uui-icon name="icon-merge"></uui-icon><b>${group.name ?? ''}</b> (Inherited)</div>
 										${!this._sortModeActive
 											? html`<uui-input
 													readonly

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts

@@ -295,7 +295,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 	renderAddButton() {
 		if (this.sortModeActive) return;
 		return html`<uui-button id="add-tab" @click="${this.#addTab}" label="Add tab" compact>
-			<uui-icon name="umb:add"></uui-icon>
+			<uui-icon name="icon-add"></uui-icon>
 			Add tab
 		</uui-button>`;
 	}
@@ -307,11 +307,11 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 
 		return html`<div class="tab-actions">
 			<uui-button look="outline" label=${this.localize.term('contentTypeEditor_compositions')} compact>
-				<uui-icon name="umb:merge"></uui-icon>
+				<uui-icon name="icon-merge"></uui-icon>
 				${this.localize.term('contentTypeEditor_compositions')}
 			</uui-button>
 			<uui-button look="outline" label=${sortButtonText} compact @click=${this.#changeMode}>
-				<uui-icon name="umb:navigation"></uui-icon>
+				<uui-icon name="icon-navigation"></uui-icon>
 				${sortButtonText}
 			</uui-button>
 		</div>`;
@@ -362,8 +362,8 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 		if (this.sortModeActive) {
 			return html`<div class="no-edit">
 				${tabInherited
-					? html`<uui-icon class="external" name="umb:merge"></uui-icon>${tab.name!}`
-					: html`<uui-icon name="umb:navigation" class="drag-${tab.id}"> </uui-icon>${tab.name!}
+					? html`<uui-icon class="external" name="icon-merge"></uui-icon>${tab.name!}`
+					: html`<uui-icon name="icon-navigation" class="drag-${tab.id}"> </uui-icon>${tab.name!}
 							<uui-input
 								label="sort order"
 								type="number"
@@ -392,7 +392,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 		}
 
 		if (tabInherited) {
-			return html`<div class="no-edit"><uui-icon name="umb:merge"></uui-icon>${tab.name!}</div>`;
+			return html`<div class="no-edit"><uui-icon name="icon-merge"></uui-icon>${tab.name!}</div>`;
 		} else {
 			return html`<div class="no-edit">${tab.name!} ${this.renderDeleteFor(tab)}</div>`;
 		}
@@ -412,7 +412,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 			?disabled=${this._buttonDisabled}
 			@click=${() => this.#requestRemoveTab(tab)}
 			compact>
-			<uui-icon name="umb:trash"></uui-icon>
+			<uui-icon name="icon-trash"></uui-icon>
 		</uui-button>`;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/manifests.ts

@@ -12,7 +12,7 @@ export const manifests: Array<ManifestCollectionView> = [
 		},
 		meta: {
 			label: 'Table',
-			icon: 'umb:box',
+			icon: 'icon-box',
 			pathName: 'table',
 		},
 	},

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/manifests.ts

@@ -11,7 +11,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		weight: 1000,
 		api: UmbCreateDocumentEntityAction,
 		meta: {
-			icon: 'umb:add',
+			icon: 'icon-add',
 			label: 'Create',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ROOT_ENTITY_TYPE, DOCUMENT_ENTITY_TYPE],

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/manifests.ts

@@ -25,7 +25,7 @@ const entityActions: Array<ManifestTypes> = [
 		weight: 800,
 		api: UmbCreateDocumentBlueprintEntityAction,
 		meta: {
-			icon: 'umb:blueprint',
+			icon: 'icon-blueprint',
 			label: 'Create Document Blueprint (TBD)',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ENTITY_TYPE],
@@ -38,7 +38,7 @@ const entityActions: Array<ManifestTypes> = [
 		weight: 700,
 		api: UmbMoveEntityAction,
 		meta: {
-			icon: 'umb:enter',
+			icon: 'icon-enter',
 			label: 'Move (TBD)',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ENTITY_TYPE],
@@ -51,7 +51,7 @@ const entityActions: Array<ManifestTypes> = [
 		weight: 600,
 		api: UmbCopyEntityAction,
 		meta: {
-			icon: 'umb:documents',
+			icon: 'icon-documents',
 			label: 'Copy (TBD)',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ENTITY_TYPE],
@@ -64,7 +64,7 @@ const entityActions: Array<ManifestTypes> = [
 		weight: 500,
 		api: UmbSortChildrenOfEntityAction,
 		meta: {
-			icon: 'umb:navigation-vertical',
+			icon: 'icon-navigation-vertical',
 			label: 'Sort (TBD)',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ROOT_ENTITY_TYPE, DOCUMENT_ENTITY_TYPE],
@@ -77,7 +77,7 @@ const entityActions: Array<ManifestTypes> = [
 		weight: 400,
 		api: UmbDocumentCultureAndHostnamesEntityAction,
 		meta: {
-			icon: 'umb:home',
+			icon: 'icon-home',
 			label: 'Culture And Hostnames (TBD)',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ENTITY_TYPE],
@@ -89,7 +89,7 @@ const entityActions: Array<ManifestTypes> = [
 		name: 'Document Permissions Entity Action',
 		api: UmbDocumentPublicAccessEntityAction,
 		meta: {
-			icon: 'umb:lock',
+			icon: 'icon-lock',
 			label: 'Public Access (TBD)',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ENTITY_TYPE],
@@ -101,7 +101,7 @@ const entityActions: Array<ManifestTypes> = [
 		name: 'Publish Document Entity Action',
 		api: UmbPublishDocumentEntityAction,
 		meta: {
-			icon: 'umb:globe',
+			icon: 'icon-globe',
 			label: 'Publish (TBD)',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ENTITY_TYPE],
@@ -113,7 +113,7 @@ const entityActions: Array<ManifestTypes> = [
 		name: 'Unpublish Document Entity Action',
 		api: UmbUnpublishDocumentEntityAction,
 		meta: {
-			icon: 'umb:globe',
+			icon: 'icon-globe',
 			label: 'Unpublish (TBD)',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ENTITY_TYPE],
@@ -125,7 +125,7 @@ const entityActions: Array<ManifestTypes> = [
 		name: 'Rollback Document Entity Action',
 		api: UmbRollbackDocumentEntityAction,
 		meta: {
-			icon: 'umb:undo',
+			icon: 'icon-undo',
 			label: 'Rollback (TBD)',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ENTITY_TYPE],

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/permissions/manifests.ts

@@ -10,7 +10,7 @@ const entityActions: Array<ManifestEntityAction> = [
 		name: 'Document Permissions Entity Action',
 		api: UmbDocumentPermissionsEntityAction,
 		meta: {
-			icon: 'umb:vcard',
+			icon: 'icon-vcard',
 			label: 'Permissions (TBD)',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ENTITY_TYPE],

src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu-item/manifests.ts

@@ -8,7 +8,7 @@ const menuItem: ManifestMenuItem = {
 	loader: () => import('./document-menu-item.element.js'),
 	meta: {
 		label: 'Documents',
-		icon: 'umb:folder',
+		icon: 'icon-folder',
 		menus: ['Umb.Menu.Content'],
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/manifests.ts

@@ -8,7 +8,7 @@ export const manifest: ManifestPropertyEditorUi = {
 	meta: {
 		label: 'Document Picker',
 		propertyEditorSchemaAlias: 'Umbraco.ContentPicker',
-		icon: 'umb:document',
+		icon: 'icon-document',
 		group: 'common',
 		settings: {
 			properties: [

src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/entity-action/manifests.ts

@@ -10,7 +10,7 @@ export const manifests = [
 		weight: 900,
 		api: UmbTrashEntityAction,
 		meta: {
-			icon: 'umb:trash',
+			icon: 'icon-trash',
 			label: 'Trash',
 			repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,
 			entityTypes: [DOCUMENT_ENTITY_TYPE],

src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/menu-item/manifests.ts

@@ -9,7 +9,7 @@ const menuItem: ManifestTypes = {
 	meta: {
 		treeAlias: 'Umb.Tree.DocumentRecycleBin',
 		label: 'Recycle Bin',
-		icon: 'umb:trash',
+		icon: 'icon-trash',
 		menus: ['Umb.Menu.Content'],
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/repository/document-recycle-bin.repository.ts

@@ -36,7 +36,7 @@ export class UmbDocumentRecycleBinRepository implements UmbTreeRepository<Docume
 			id: null,
 			type: 'document-recycle-bin-root',
 			name: 'Recycle Bin',
-			icon: 'umb:trash',
+			icon: 'icon-trash',
 			hasChildren: true,
 		};
 

src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/document.repository.ts

@@ -72,7 +72,7 @@ export class UmbDocumentRepository
 			id: null,
 			type: 'document-root',
 			name: 'Documents',
-			icon: 'umb:folder',
+			icon: 'icon-folder',
 			hasChildren: true,
 		};