diff --git a/CHANGELOG.md b/CHANGELOG.md
index 519d159..7339b98 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,10 @@
 
 ## Version History
 
+### v3.21.1
+
+- :bug: Icon is now prefixed
+
 ### v3.21.0
 
 - :rocket: Move to `@tabler/icons-vue` for most up-to-date icons
diff --git a/components/Delete.vue b/components/Delete.vue
index 6f642ef..fe1bf3f 100644
--- a/components/Delete.vue
+++ b/components/Delete.vue
@@ -6,7 +6,7 @@
         </div>
     </template>
     <template v-else>
-        <TrashIcon @click='modal = true' class='cursor-pointer'/>
+        <IconTrash @click='modal = true' class='cursor-pointer'/>
     </template>
 
     <TablerModal v-if='modal'>
@@ -20,7 +20,7 @@
         </div>
         <div class="modal-footer">
             <div @click='$emit("delete")' class="btn btn-danger">
-                <TrashIcon/><span class='mx-2' v-text='label'/>
+                <IconTrash/><span class='mx-2' v-text='label'/>
             </div>
         </div>
     </TablerModal>
@@ -30,7 +30,7 @@
 <script>
 import TablerModal from './Modal.vue';
 import {
-    TrashIcon
+    IconTrash
 } from '@tabler/icons-vue';
 
 export default {
@@ -51,7 +51,7 @@ export default {
         }
     },
     components: {
-        TrashIcon,
+        IconTrash,
         TablerModal
     }
 }
diff --git a/components/Dropdown.vue b/components/Dropdown.vue
index 4b13656..1818bfd 100644
--- a/components/Dropdown.vue
+++ b/components/Dropdown.vue
@@ -2,7 +2,7 @@
 <div class="dropdown">
     <div type="button" :id='id' data-bs-toggle="dropdown" aria-expanded="false">
         <slot>
-            <SettingsIcon style='cursor-pointer'/>
+            <IconSettings style='cursor-pointer'/>
         </slot>
     </div>
     <ul class="dropdown-menu w-100" :aria-labelledby='id'>
@@ -15,7 +15,7 @@
 
 <script>
 import {
-    SettingsIcon
+    IconSettings
 } from '@tabler/icons-vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
         }
     },
     components: {
-        SettingsIcon
+        IconSettings
     }
 }
 </script>
diff --git a/components/Err.vue b/components/Err.vue
index 1b85fef..1d26b6a 100644
--- a/components/Err.vue
+++ b/components/Err.vue
@@ -3,7 +3,7 @@
         <button type="button" class="btn-close" @click='close' aria-label="Close"></button>
         <div class="modal-status bg-yellow"></div>
         <div class="modal-body text-center py-4">
-            <AlertCircleIcon/>
+            <IconAlertCircle/>
             <h3>Website Error</h3>
             <div class="text-muted" v-text='err.message'></div>
             <pre v-if='err.body' v-text='err.body'></pre>
@@ -21,7 +21,7 @@
 <script>
 import Modal from './Modal.vue';
 import {
-    AlertCircleIcon
+    IconAlertCircle
 } from '@tabler/icons-vue'
 
 export default {
@@ -34,7 +34,7 @@ export default {
     },
     components: {
         Modal,
-        AlertCircleIcon
+        IconAlertCircle
     }
 }
 </script>
diff --git a/components/List.vue b/components/List.vue
index e35b1de..6a6af11 100644
--- a/components/List.vue
+++ b/components/List.vue
@@ -14,7 +14,7 @@
             <span v-else style='padding-top: 6px;'>Select <span v-text='label'/></span>
 
             <div class='ms-auto'>
-                <SettingsIcon style='margin-top: 4px;'/>
+                <IconSettings style='margin-top: 4px;'/>
             </div>
         </div>
     </div>
@@ -34,7 +34,7 @@
 <script>
 import TablerInput from './input/Input.vue';
 import {
-    SettingsIcon
+    IconSettings
 } from '@tabler/icons-vue';
 
 export default {
@@ -103,7 +103,7 @@ export default {
         }
     },
     components: {
-        SettingsIcon,
+        IconSettings,
         TablerInput
     }
 }
diff --git a/components/None.vue b/components/None.vue
index 8238667..8e63ae7 100644
--- a/components/None.vue
+++ b/components/None.vue
@@ -3,8 +3,8 @@
     <div class='d-flex justify-content-center' :class='{
         "mt-4 mb-2": !compact
     }'>
-        <NotesOffIcon v-if='compact' width='32' height='32' />
-        <NotesOffIcon v-else width='48' height='48' />
+        <IconNotesOff v-if='compact' width='32' height='32' />
+        <IconNotesOff v-else width='48' height='48' />
     </div>
 
     <div class='text-center' :class='{
@@ -23,7 +23,7 @@
 
 <script>
 import {
-    NotesOffIcon
+    IconNotesOff
 } from '@tabler/icons-vue'
 
 export default {
@@ -43,7 +43,7 @@ export default {
         },
     },
     components: {
-        NotesOffIcon
+        IconNotesOff
     }
 }
 </script>
diff --git a/components/Pager.vue b/components/Pager.vue
index d413846..72d774a 100644
--- a/components/Pager.vue
+++ b/components/Pager.vue
@@ -3,12 +3,12 @@
     <div>
         <template v-if='parseInt(total) <= parseInt(limit)'>
             <button @click='changePage(0)' class='btn mx-1' >
-                <HomeIcon class='icon'/>Home
+                <IconHome class='icon'/>Home
             </button>
         </template>
         <template v-else>
             <button @click='changePage(0)' class='btn mx-1' :class='{ "btn-primary": current === 0 }'>
-                <HomeIcon class='icon'/>Home
+                <IconHome class='icon'/>Home
             </button>
 
             <template v-if='end > 5 && current > 3'>
@@ -43,7 +43,7 @@
 
 <script>
 import {
-    HomeIcon
+    IconHome
 } from '@tabler/icons-vue';
 
 export default {
@@ -129,7 +129,7 @@ export default {
         }
     },
     components: {
-        HomeIcon
+        IconHome
     }
 }
 </script>
diff --git a/components/Schema.vue b/components/Schema.vue
index 99cef1f..ef7bdda 100644
--- a/components/Schema.vue
+++ b/components/Schema.vue
@@ -44,7 +44,7 @@
             <div class='d-flex'>
                 <label class='form-label' v-text='key'/>
                 <div class='ms-auto'>
-                    <PlusIcon v-if='!disabled' @click='push(key)' class='cursor-pointer'/>
+                    <IconPlus v-if='!disabled' @click='push(key)' class='cursor-pointer'/>
                 </div>
             </div>
 
@@ -52,7 +52,7 @@
                 <div class='d-flex'>
                     <div class='mx-2 my-2'>Entry <span v-text='i + 1'/></div>
                     <div class='ms-auto mx-2 my-2'>
-                        <TrashIcon v-if='!disabled' @click='data[key].splice(i, 1)' class='cursor-pointer'/>
+                        <IconTrash v-if='!disabled' @click='data[key].splice(i, 1)' class='cursor-pointer'/>
                     </div>
                 </div>
 
@@ -77,8 +77,8 @@ import TablerInput from './input/Input.vue';
 import TablerToggle from './input/Toggle.vue';
 import TablerEnum from './input/Enum.vue';
 import {
-    PlusIcon,
-    TrashIcon,
+    IconPlus,
+    IconTrash,
 } from '@tabler/icons-vue';
 
 export default {
@@ -146,8 +146,8 @@ export default {
         }
     },
     components: {
-        PlusIcon,
-        TrashIcon,
+        IconPlus,
+        IconTrash,
         TablerInput,
         TablerToggle,
         TablerEnum
diff --git a/components/internal/Label.vue b/components/internal/Label.vue
index b2b217f..298d2c2 100644
--- a/components/internal/Label.vue
+++ b/components/internal/Label.vue
@@ -1,7 +1,7 @@
 <template>
 <div class='col-12 d-flex my-1'>
     <span v-if='description' class='align-self-center'>
-        <InfoSquareIcon @click='help = true' size='20' class='cursor-pointer'/>
+        <IconInfoSquare @click='help = true' size='20' class='cursor-pointer'/>
         <Help v-if='help' @click='help = false' :label='label || placeholder' :description='description'/>
     </span>
     <div
@@ -20,7 +20,7 @@
 
 <script>
 import {
-    InfoSquareIcon
+    IconInfoSquare
 } from '@tabler/icons-vue';
 import Help from '../Help.vue';
 
@@ -44,7 +44,7 @@ export default {
     },
     components: {
         Help,
-        InfoSquareIcon
+        IconInfoSquare
     }
 }
 </script>