diff --git a/packages/common/assets/index.html b/packages/common/assets/index.html
index 4efb70dfb61445e3015c97db258496bb3184ac5b..cccf567dfbfecdffd9bb2ed916d9f8720e943e86 100644
--- a/packages/common/assets/index.html
+++ b/packages/common/assets/index.html
@@ -20,5 +20,7 @@
     Spinner: <vpu-spinner></vpu-spinner>
 </p>
 
+Icons: <vpu-icon name="access-point-network-off"></vpu-icon> <vpu-icon color="green"></vpu-icon> <vpu-icon color="red"></vpu-icon> <vpu-icon color="blue"></vpu-icon>
+
 </body>
 </html>
diff --git a/packages/common/demo.js b/packages/common/demo.js
index a45bd8f34b0ddfae950d3dc60db44fda84eeb53b..ed74f311bd98895243653e06f545fc2fc28668a7 100644
--- a/packages/common/demo.js
+++ b/packages/common/demo.js
@@ -1,2 +1,3 @@
 import './vpu-mini-spinner.js';
 import './vpu-spinner.js';
+import './vpu-icon.js';
\ No newline at end of file
diff --git a/packages/common/package.json b/packages/common/package.json
index 4ae268f98d156ad6f8f50e1e7118029194c96e39..c5d5ac1da9674cc5228a730aaffc7760bc586983 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -8,6 +8,7 @@
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.0.0",
     "karma-mocha": "^1.3.0",
+    "material-design-icons-svg": "^3.0.0",
     "mocha": "^6.2.0",
     "node-sass": "^4.12.0",
     "puppeteer": "^1.15.0",
diff --git a/packages/common/rollup.config.js b/packages/common/rollup.config.js
index ad003fb6335f2939f0baa79b2b56f755282a5e8e..e27f228d273e973a15b98f11b35c52a78ae9390a 100644
--- a/packages/common/rollup.config.js
+++ b/packages/common/rollup.config.js
@@ -6,6 +6,7 @@ import multiEntry from 'rollup-plugin-multi-entry';
 import copy from 'rollup-plugin-copy';
 import serve from 'rollup-plugin-serve';
 
+const pkg = require('./package.json');
 const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
 console.log("build: " + build);
 
@@ -32,6 +33,7 @@ export default {
         copy({
             targets: [
                 {src: 'assets/index.html', dest: 'dist'},
+                {src: 'node_modules/material-design-icons-svg/paths/*.json', dest: 'dist/local/' + pkg.name + '/icons'},
             ],
         }),
         (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
diff --git a/packages/common/vpu-icon.js b/packages/common/vpu-icon.js
new file mode 100644
index 0000000000000000000000000000000000000000..f21a5a805a7e007b921b4f0e798cbaf60eeb6407
--- /dev/null
+++ b/packages/common/vpu-icon.js
@@ -0,0 +1,52 @@
+import {html, LitElement, css} from 'lit-element';
+import {until} from 'lit-html/directives/until.js';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+import * as commonUtils from './utils.js';
+
+/**
+ * For icon names see https://materialdesignicons.com/
+ */
+class Icon extends LitElement {
+    constructor() {
+        super();
+        this.name = "alert-circle";
+        this.color = "black";
+    }
+
+    static get properties() {
+        return { 
+          name: { type: String },
+          color: { type: String },
+        };
+      }
+
+    static get styles() {
+        return css`
+            :host {
+                display: inline-block;
+                height: 1em;
+                width: 1em;
+            }
+        `;
+    } 
+
+    render() {
+        let svg = fetch('/local/vpu-common/icons/' + this.name + '.json').then(response => {
+            return response.json().then(data => {
+                return unsafeHTML('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="pointer-events: none; display: block; width: 100%; height: 100%;">' +'<path d="' + data + '" />' + '</svg>');
+            });
+        })
+
+        return html`
+            <style>
+                :host path {
+                    fill: ${this.color};
+                }
+            </style>
+
+            ${until(svg)}
+        `;
+    }
+}
+
+commonUtils.defineCustomElement('vpu-icon', Icon);