diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts
new file mode 100644
index 0000000000..ddea6009e1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.element.ts
@@ -0,0 +1,48 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbContextConsumerMixin } from '../../../core/context';
+import type { UmbModalService } from '../../../core/services/modal';
+
+/**
+ * @element umb-property-editor-ui-icon-picker
+ */
+@customElement('umb-property-editor-ui-icon-picker')
+export class UmbPropertyEditorUIIconPickerElement extends UmbContextConsumerMixin(LitElement) {
+ static styles = [UUITextStyles];
+
+ @property()
+ value = '';
+
+ @property({ type: Array, attribute: false })
+ public config = [];
+
+ private _modalService?: UmbModalService;
+
+ constructor() {
+ super();
+ this.consumeContext('umbModalService', (modalService: UmbModalService) => {
+ this._modalService = modalService;
+ });
+ }
+
+ private _openModal() {
+ this._modalService?.open('umb-modal-layout-icon-picker', { type: 'sidebar', size: 'small' });
+ }
+
+ render() {
+ return html`
+
+ Pick an icon
+
+ `;
+ }
+}
+
+export default UmbPropertyEditorUIIconPickerElement;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-property-editor-ui-icon-picker': UmbPropertyEditorUIIconPickerElement;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts
new file mode 100644
index 0000000000..183d36a9f4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIIconPickerElement } from './property-editor-ui-icon-picker.element';
+import './property-editor-ui-icon-picker.element';
+
+export default {
+ title: 'Property Editor UIs/Icon Picker',
+ component: 'umb-property-editor-ui-icon-picker',
+ id: 'umb-property-editor-ui-icon-picker',
+} as Meta;
+
+export const AAAOverview: Story = () =>
+ html``;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts
new file mode 100644
index 0000000000..c292f515da
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editor-uis/icon-picker/property-editor-ui-icon-picker.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { defaultA11yConfig } from '../../../core/helpers/chai';
+import { UmbPropertyEditorUIIconPickerElement } from './umb-property-editor-ui-icon-picker.element';
+
+describe('UmbPropertyEditorUIIconPickerElement', () => {
+ let element: UmbPropertyEditorUIIconPickerElement;
+
+ beforeEach(async () => {
+ element = await fixture(
+ html` `
+ );
+ });
+
+ it('is defined with its own instance', () => {
+ expect(element).to.be.instanceOf(UmbPropertyEditorUIIconPickerElement);
+ });
+
+ it('passes the a11y audit', async () => {
+ await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+ });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts
deleted file mode 100644
index 9b3cbc3b92..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-icon-picker.element.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import { UmbContextConsumerMixin } from '../../core/context';
-import { UmbModalService } from '../../core/services/modal';
-
-// TODO: remove these imports when they are part of UUI
-import '@umbraco-ui/uui-modal';
-import '@umbraco-ui/uui-modal-sidebar';
-import '@umbraco-ui/uui-modal-container';
-import '@umbraco-ui/uui-modal-dialog';
-
-@customElement('umb-property-editor-icon-picker')
-class UmbPropertyEditorIconPicker extends UmbContextConsumerMixin(LitElement) {
- private _modalService?: UmbModalService;
-
- constructor() {
- super();
- this.consumeContext('umbModalService', (modalService: UmbModalService) => {
- this._modalService = modalService;
- });
- }
-
- private _openModal() {
- this._modalService?.open('umb-modal-layout-icon-picker', { type: 'sidebar', size: 'small' });
- }
-
- render() {
- return html`
-
- Pick an icon
-
- `;
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- 'umb-property-editor-icon-picker': UmbPropertyEditorIconPicker;
- }
-}
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
index 99ec1537cc..4eb94c0a0f 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts
@@ -2,6 +2,7 @@
import './layouts/confirm/modal-layout-confirm.element';
import './layouts/content-picker/modal-layout-content-picker.element';
import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element';
+import './layouts/icon-picker/modal-layout-icon-picker.element';
import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
import { BehaviorSubject, Observable } from 'rxjs';
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts
index 4fd61a9bff..878144f999 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts
@@ -325,6 +325,14 @@ export const data: Array = [
icon: 'umb:autofill',
alias: 'Umbraco.Custom',
},
+ {
+ isSystem: false,
+ group: 'Custom',
+ hasConfig: true,
+ name: 'Icon Picker',
+ icon: 'umb:autofill',
+ alias: 'Umbraco.IconPicker',
+ },
];
// Temp mocked database
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
index ff1f011fcb..43fe6acdb3 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/property-editor-ui.ts
@@ -95,4 +95,16 @@ export const manifests: Array Promise