diff --git a/webapp/components/ShowPassword/ShowPassword.spec.js b/webapp/components/ShowPassword/ShowPassword.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/webapp/components/ShowPassword/ShowPassword.vue b/webapp/components/ShowPassword/ShowPassword.vue
new file mode 100644
index 000000000..36d82baeb
--- /dev/null
+++ b/webapp/components/ShowPassword/ShowPassword.vue
@@ -0,0 +1,46 @@
+<template>
+  <span class="click-wrapper" @click="togglePassword">
+    <span class="icon-wrapper" :data-test="iconName">
+      <base-icon class="toggle-icon" :name="iconName" />
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: [
+    'iconName'
+  ],
+  emits: ['toggle-password'],
+  methods: {
+    togglePassword(event) {
+      event.preventDefault()
+      this.$emit('show-password')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .icon-wrapper {
+    margin-right: 2px;
+  }
+
+  .click-wrapper {
+    padding: 8px;
+    align-content: center;
+    color: $text-color-disabled;
+    cursor: pointer;
+  }
+
+  .click-wrapper:hover {
+    &:focus-within {
+      background-color: $background-color-base;
+      border: $input-border-size solid $border-color-active;
+
+      .toggle-icon {
+        color: $text-color-base;
+      }
+    }
+  }
+</style>