diff --git a/packages/common/index.js b/packages/common/index.js
index a562cd77d290c2caad3df20cdd295d377629429f..bf45336adefb38b0cdff45e5e54c31ded734d956 100644
--- a/packages/common/index.js
+++ b/packages/common/index.js
@@ -1,4 +1,6 @@
 import {EventBus} from './src/eventbus.js';
 import {createLinkedAbortController, createTimeoutAbortSignal} from './src/abort.js';
+import {getIconSVGURL, getIconCSS, Icon} from './src/icon.js';
 
-export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
\ No newline at end of file
+export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
+export {getIconSVGURL, getIconCSS, Icon};
\ No newline at end of file
diff --git a/packages/common/package.json b/packages/common/package.json
index b669ea0f1b76a59beea4ec3c2b48a2429efb6c94..74c3637cd7df5faa0b195234739d2537033fb4a7 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -31,6 +31,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@open-wc/scoped-elements": "^1.0.8",
     "@sentry/browser": "^5.13.2",
     "i18next": "^19.3.2",
     "lit-element": "^2.2.1"
diff --git a/packages/common/vpu-icon.js b/packages/common/src/icon.js
similarity index 96%
rename from packages/common/vpu-icon.js
rename to packages/common/src/icon.js
index c6e8bd39bdd2d472d35e20e7bf820aa12709534a..1a4f9dd6f04bf96e33ed915585b5acb23aa890b0 100644
--- a/packages/common/vpu-icon.js
+++ b/packages/common/src/icon.js
@@ -1,7 +1,7 @@
 import {html, LitElement, css} from 'lit-element';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import {until} from 'lit-html/directives/until.js';
-import * as commonUtils from './utils.js';
+import * as commonUtils from '../utils.js';
 
 // Use in case the icon fails to load
 const errorIcon = `
@@ -74,7 +74,7 @@ async function getSVGTextElementCached(name) {
 /**
  * For icon names see https://lineicons.com
  */
-class Icon extends LitElement {
+export class Icon extends LitElement {
 
     constructor() {
         super();
@@ -112,6 +112,4 @@ class Icon extends LitElement {
             ${until(svg)}
         `;
     }
-}
-
-commonUtils.defineCustomElement('vpu-icon', Icon);
+}
\ No newline at end of file
diff --git a/packages/common/styles.js b/packages/common/styles.js
index 6d89a46382fe3262d6c7cf27b841c51de6e8b961..3408b3354c4d46ca74b66dcb66b503d9ddf454b2 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -1,5 +1,5 @@
 import {css, unsafeCSS, CSSResult} from 'lit-element';
-import {getIconSVGURL} from './vpu-icon.js';
+import {getIconSVGURL} from './src/icon.js';
 
 /**
  * We want to have "neutral" colors here
diff --git a/packages/common/vpu-common-demo.js b/packages/common/vpu-common-demo.js
index 01c13798acaae6f10a1a8cd0fe440b26530be05f..355270c6a2851b0c0135d1c6659b0b93b3edb238 100644
--- a/packages/common/vpu-common-demo.js
+++ b/packages/common/vpu-common-demo.js
@@ -1,19 +1,30 @@
 import {i18n} from './i18n.js';
 import {css, html, LitElement} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from './utils.js';
 import * as commonStyles from './styles.js';
 import './vpu-mini-spinner.js';
 import './vpu-spinner.js';
-import {getIconCSS} from './vpu-icon.js';
+import {getIconCSS, Icon} from './index.js';
 import './vpu-button.js';
 
-class VpuCommonDemo extends LitElement {
+class VpuCommonDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
         super();
         this.lang = 'de';
         this.noAuth = false;
     }
 
+    static get scopedElements() {
+        return {
+            'vpu-icon': Icon,
+            'vpu-mini-spinner': customElements.get('vpu-mini-spinner'),
+            'vpu-spinner': customElements.get('vpu-spinner'),
+            'vpu-button': customElements.get('vpu-button'),
+            'vpu-auth': customElements.get('vpu-auth'),
+        };
+    }
+
     static get properties() {
         return {
             lang: { type: String },