diff --git a/packages/ui/src/ocelot/icons/__screenshots__/chromium/all-icons.png b/packages/ui/src/ocelot/icons/__screenshots__/chromium/all-icons.png
index 13f41154e..1fb0b31a6 100644
Binary files a/packages/ui/src/ocelot/icons/__screenshots__/chromium/all-icons.png and b/packages/ui/src/ocelot/icons/__screenshots__/chromium/all-icons.png differ
diff --git a/packages/ui/src/ocelot/icons/svgs/at.svg b/packages/ui/src/ocelot/icons/svgs/at.svg
new file mode 100755
index 000000000..e046ea75a
--- /dev/null
+++ b/packages/ui/src/ocelot/icons/svgs/at.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>at</title>
+<path d="M16.188 4c6.337 0.093 11.62 5.29 11.813 11.625 0.005 0.143 0 0.274 0 0.406-0.012 3.289-2.716 5.97-6 5.969-1.271-0.001-2.391-0.628-3.125-1.563-0.827 0.948-2.027 1.563-3.375 1.563-2.473 0-4.5-2.027-4.5-4.5v-3c0-2.473 2.027-4.5 4.5-4.5 0.928 0 1.781 0.295 2.5 0.781v-0.781h2v8c0 1.116 0.883 1.999 2 2 2.208 0.001 3.992-1.766 4-3.969 0-0.122 0.003-0.231 0-0.344-0.16-5.253-4.589-9.61-9.844-9.688-6.165-0.090-11.048 5.348-10 11.719 0.696 4.234 4.182 7.613 8.438 8.188 2.919 0.394 5.61-0.452 7.656-2.094l1.25 1.563c-2.452 1.968-5.691 2.968-9.156 2.5-5.139-0.694-9.346-4.723-10.188-9.844-1.242-7.545 4.666-14.139 12.031-14.031zM15.5 12c-1.393 0-2.5 1.107-2.5 2.5v3c0 1.393 1.107 2.5 2.5 2.5s2.5-1.107 2.5-2.5v-3c0-1.393-1.107-2.5-2.5-2.5z"></path>
+</svg>
diff --git a/packages/ui/src/ocelot/icons/svgs/envelope.svg b/packages/ui/src/ocelot/icons/svgs/envelope.svg
new file mode 100755
index 000000000..92d5320c0
--- /dev/null
+++ b/packages/ui/src/ocelot/icons/svgs/envelope.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>envelope</title>
+<path d="M3 8h26v18h-26v-18zM7.313 10l8.688 5.781 8.688-5.781h-17.375zM5 10.875v13.125h22v-13.125l-10.438 6.969-0.563 0.344-0.563-0.344z"></path>
+</svg>
diff --git a/packages/ui/src/ocelot/icons/svgs/paperclip.svg b/packages/ui/src/ocelot/icons/svgs/paperclip.svg
new file mode 100755
index 000000000..099453e71
--- /dev/null
+++ b/packages/ui/src/ocelot/icons/svgs/paperclip.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>paperclip</title>
+<path d="M21 4c1.39 0 2.789 0.539 3.844 1.594 2.109 2.109 2.109 5.547 0 7.656l-9.375 9.375c-1.246 1.245-3.286 1.245-4.531 0s-1.245-3.286 0-4.531l8.594-8.594 1.406 1.406-8.594 8.594c-0.481 0.481-0.481 1.237 0 1.719 0.481 0.481 1.237 0.481 1.719 0l9.375-9.375c1.345-1.345 1.345-3.499 0-4.844s-3.499-1.345-4.844 0l-9.375 9.375c-2.208 2.208-2.208 5.76 0 7.969 2.208 2.208 5.76 2.208 7.969 0l6.25-6.25 1.406 1.406-6.25 6.25c-2.973 2.972-7.809 2.972-10.781 0s-2.972-7.809 0-10.781l9.375-9.375c1.055-1.055 2.423-1.594 3.813-1.594z"></path>
+</svg>
diff --git a/webapp/components/OcelotInput/OcelotInput.vue b/webapp/components/OcelotInput/OcelotInput.vue
index adc083ef1..f1ed6e901 100644
--- a/webapp/components/OcelotInput/OcelotInput.vue
+++ b/webapp/components/OcelotInput/OcelotInput.vue
@@ -4,12 +4,15 @@
       {{ label }}
     </label>
     <div class="ds-input-wrap">
-      <div v-if="icon" class="ds-input-icon">
-        <ds-icon :name="icon" />
+      <div v-if="resolvedIcon" class="ds-input-icon">
+        <os-icon :icon="resolvedIcon" />
       </div>
       <component
         class="ds-input"
-        :class="[icon && 'ds-input-has-icon', iconRight && 'ds-input-has-icon-right']"
+        :class="[
+          resolvedIcon && 'ds-input-has-icon',
+          resolvedIconRight && 'ds-input-has-icon-right',
+        ]"
         :id="id"
         :name="name ? name : model"
         :type="type"
@@ -25,8 +28,8 @@
         @blur="handleBlur"
         :rows="type === 'textarea' ? rows : null"
       />
-      <div v-if="iconRight" class="ds-input-icon-right">
-        <ds-icon :name="iconRight" />
+      <div v-if="resolvedIconRight" class="ds-input-icon-right">
+        <os-icon :icon="resolvedIconRight" />
       </div>
     </div>
     <transition name="ds-input-error">
@@ -38,6 +41,8 @@
 </template>
 
 <script>
+import { OsIcon } from '@ocelot-social/ui'
+import { resolveIcon } from '~/utils/iconRegistry'
 import Schema from 'async-validator'
 
 Schema.warning = function () {}
@@ -48,6 +53,7 @@ function getNestedValue(obj, path) {
 
 export default {
   name: 'OcelotInput',
+  components: { OsIcon },
   inject: {
     $parentForm: {
       default: null,
@@ -135,6 +141,12 @@ export default {
       }
       return 'input'
     },
+    resolvedIcon() {
+      return resolveIcon(this.icon)
+    },
+    resolvedIconRight() {
+      return resolveIcon(this.iconRight)
+    },
     stateClasses() {
       return [
         this.size && `ds-input-size-${this.size}`,
diff --git a/webapp/pages/admin/users/__snapshots__/index.spec.js.snap b/webapp/pages/admin/users/__snapshots__/index.spec.js.snap
index d4aa1a831..51035af0c 100644
--- a/webapp/pages/admin/users/__snapshots__/index.spec.js.snap
+++ b/webapp/pages/admin/users/__snapshots__/index.spec.js.snap
@@ -41,16 +41,16 @@ exports[`Users given badges are disabled renders 1`] = `
                 class="ds-input-icon"
               >
                 <span
-                  aria-label="icon"
-                  class="ds-icon"
+                  aria-hidden="true"
+                  class="os-icon inline-flex items-center align-bottom shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                 >
                   <svg
-                    class="ds-icon-svg"
+                    fill="currentColor"
                     viewBox="0 0 32 32"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M19 3c5.511 0 10 4.489 10 10s-4.489 10-10 10a9.923 9.923 0 01-6.313-2.25l-7.969 7.969-1.438-1.438 7.969-7.969a9.919 9.919 0 01-2.25-6.313c0-5.511 4.489-10 10-10zm0 2c-4.43 0-8 3.57-8 8s3.57 8 8 8 8-3.57 8-8-3.57-8-8-8z"
+                      d="M19 3c5.511 0 10 4.489 10 10s-4.489 10-10 10c-2.395 0-4.588-0.839-6.313-2.25l-7.969 7.969-1.438-1.438 7.969-7.969c-1.411-1.724-2.25-3.917-2.25-6.313 0-5.511 4.489-10 10-10zM19 5c-4.43 0-8 3.57-8 8s3.57 8 8 8 8-3.57 8-8-3.57-8-8-8z"
                     />
                   </svg>
                 </span>
@@ -494,16 +494,16 @@ exports[`Users given badges are enabled renders 1`] = `
                 class="ds-input-icon"
               >
                 <span
-                  aria-label="icon"
-                  class="ds-icon"
+                  aria-hidden="true"
+                  class="os-icon inline-flex items-center align-bottom shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                 >
                   <svg
-                    class="ds-icon-svg"
+                    fill="currentColor"
                     viewBox="0 0 32 32"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M19 3c5.511 0 10 4.489 10 10s-4.489 10-10 10a9.923 9.923 0 01-6.313-2.25l-7.969 7.969-1.438-1.438 7.969-7.969a9.919 9.919 0 01-2.25-6.313c0-5.511 4.489-10 10-10zm0 2c-4.43 0-8 3.57-8 8s3.57 8 8 8 8-3.57 8-8-3.57-8-8-8z"
+                      d="M19 3c5.511 0 10 4.489 10 10s-4.489 10-10 10c-2.395 0-4.588-0.839-6.313-2.25l-7.969 7.969-1.438-1.438 7.969-7.969c-1.411-1.724-2.25-3.917-2.25-6.313 0-5.511 4.489-10 10-10zM19 5c-4.43 0-8 3.57-8 8s3.57 8 8 8 8-3.57 8-8-3.57-8-8-8z"
                     />
                   </svg>
                 </span>