diff --git a/packages/common/README.md b/packages/common/README.md
index 3e12fa301fd7706bae2b57d298a359f67796b8ff..3beedf78ee0cac26312918dd2c55fa40b25054dd 100644
--- a/packages/common/README.md
+++ b/packages/common/README.md
@@ -11,7 +11,8 @@ npm i @dbp-toolkit/common
 For valid icon names see: [LineIcons](https://lineicons.com/icons/)
 
 ```html
- <dbp-icon color="orange" name="menu-down"></dbp-icon>
+<script type="module" src="https://unpkg.com/@dbp-toolkit/common@0.2.8/dist/components.js"></script>
+<dbp-icon style="color: red" name="menu-down"></dbp-icon>
 ```
 
 ### Exposed CSS variables
@@ -25,6 +26,7 @@ Example CSS: `html { --dbp-override-icon-cloud: url(/icons/cloud.svg); }`
 You can use this web component to show translated html.
 
 ```html
+<script type="module" src="https://unpkg.com/@dbp-toolkit/common@0.2.8/dist/components.js"></script>
 <dbp-translated subscribe="lang">
     <div slot="de">
         Dieser Text ist Deutsch und wird Englisch werden wenn man die Sprache auf Englisch stellt.
diff --git a/packages/common/components.js b/packages/common/components.js
new file mode 100644
index 0000000000000000000000000000000000000000..df6735311826455fca23614f2122047777259ea6
--- /dev/null
+++ b/packages/common/components.js
@@ -0,0 +1,10 @@
+import * as commonUtils from "./utils";
+import {Button, Icon, InlineNotification, LoadingButton, MiniSpinner, Spinner, Translated} from "./index";
+
+commonUtils.defineCustomElement('dbp-mini-spinner', MiniSpinner);
+commonUtils.defineCustomElement('dbp-spinner', Spinner);
+commonUtils.defineCustomElement('dbp-icon', Icon);
+commonUtils.defineCustomElement('dbp-button', Button);
+commonUtils.defineCustomElement('dbp-loading-button', LoadingButton);
+commonUtils.defineCustomElement('dbp-inline-notification', InlineNotification);
+commonUtils.defineCustomElement('dbp-translated', Translated);
diff --git a/packages/common/icon.js b/packages/common/icon.js
deleted file mode 100644
index c4fbd1e878db65b330b46c6f8f10b87d6b166189..0000000000000000000000000000000000000000
--- a/packages/common/icon.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import * as commonUtils from "./utils";
-import {Icon} from "./src/icon";
-
-commonUtils.defineCustomElement('dbp-icon', Icon);
diff --git a/packages/common/package.json b/packages/common/package.json
index a7e49405414bc61cd74e3bc7ccc0eff635d91197..49bd56313b0f084d682d0d183a82ccbe6acb2494 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dbp-toolkit/common",
   "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/common",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "module": "index.js",
   "license": "LGPL-2.1-or-later",
   "repository": {
diff --git a/packages/common/rollup.config.js b/packages/common/rollup.config.js
index 4a1f856f552bd2a0a6ea5499df8b000ae7c6e79b..e9861e3a551afff5f248f4ed4cb236db638e0b95 100644
--- a/packages/common/rollup.config.js
+++ b/packages/common/rollup.config.js
@@ -13,7 +13,7 @@ console.log("build: " + build);
 
 export default (async () => {
     return {
-        input: (build !='test') ? ['demo.js', 'icon.js'] : glob.sync('test/**/*.js'),
+        input: (build !='test') ? ['demo.js', 'components.js'] : glob.sync('test/**/*.js'),
         output: {
             dir: 'dist',
             entryFileNames: '[name].js',