diff --git a/platypush/backend/http/webapp/src/components/elements/Icon.vue b/platypush/backend/http/webapp/src/components/elements/Icon.vue
new file mode 100644
index 000000000..eb44fd603
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/Icon.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="icon-container">
+    <img class="icon" :src="url" :alt="alt" v-if="url?.length">
+    <i class="icon" :class="className" v-else-if="className?.length" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    class: {
+      type: String,
+    },
+    url: {
+      type: String,
+    },
+    alt: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    className() {
+      return this.class
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon-container {
+  display: inline-flex;
+  width: $icon-container-size;
+  justify-content: center;
+  text-align: center;
+
+  .icon {
+    width: 1em;
+    height: 1em;
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/style/icons.scss b/platypush/backend/http/webapp/src/style/icons.scss
index fb599674e..a2cb7ef1a 100644
--- a/platypush/backend/http/webapp/src/style/icons.scss
+++ b/platypush/backend/http/webapp/src/style/icons.scss
@@ -1,3 +1,5 @@
+$icon-container-size: 3em;
+
 @mixin icon {
   content: ' ';
   background-size: 1em 1em;