diff --git a/src/stories/Components/Badge/Badge.js b/src/stories/Components/Badge/Badge.js
index 92a0a2f6..26ee024e 100644
--- a/src/stories/Components/Badge/Badge.js
+++ b/src/stories/Components/Badge/Badge.js
@@ -1,6 +1,13 @@
 import { createIcon } from '../Icon/Icon.js'
 
-export const createBadge = ({ label, style = 'default', pill = false, inButton = 'no', showIcons = false }) => {
+export const createBadge = ({
+  label,
+  style = 'default',
+  pill = false,
+  inButton = 'no',
+  showPrefixIcon = false,
+  showSuffixIcon = false,
+}) => {
   const badge = document.createElement('div')
   badge.innerText = label
 
@@ -8,8 +15,11 @@ export const createBadge = ({ label, style = 'default', pill = false, inButton =
     .filter(Boolean)
     .join(' ')
 
-  if (showIcons) {
+  if (showPrefixIcon) {
     badge.prepend(createIcon({ name: 'open_in_new' }))
+  }
+
+  if (showSuffixIcon) {
     badge.appendChild(createIcon({ name: 'add' }))
   }
 
diff --git a/src/stories/Components/Badge/Badge.stories.js b/src/stories/Components/Badge/Badge.stories.js
index e966eb75..54c572ba 100644
--- a/src/stories/Components/Badge/Badge.stories.js
+++ b/src/stories/Components/Badge/Badge.stories.js
@@ -16,7 +16,11 @@ export default {
       control: { type: 'select' },
       options: ['no', 'right', 'left'],
     },
-    showIcons: {
+    showPrefixIcon: {
+      control: 'boolean',
+      description: 'This is not a class. It just provides an example of using icons within a badge',
+    },
+    showSuffixIcon: {
       control: 'boolean',
       description: 'This is not a class. It just provides an example of using icons within a badge',
     },
diff --git a/src/stories/Components/Button/Button.js b/src/stories/Components/Button/Button.js
index 9f0bbe3e..29da7f7b 100644
--- a/src/stories/Components/Button/Button.js
+++ b/src/stories/Components/Button/Button.js
@@ -12,6 +12,8 @@ export const createButton = ({
   disabled = false,
   inlineIconWithLabel = false,
   useAsLink = false,
+  showPrefixIcon = false,
+  showSuffixIcon = false,
 }) => {
   const element = useAsLink || disabled ? 'a' : 'button'
   const btn = document.createElement(element)
@@ -33,6 +35,14 @@ export const createButton = ({
     btn.prepend(createIcon({ name: 'add', size: 'large' }))
   }
 
+  if (showPrefixIcon) {
+    btn.prepend(createIcon({ name: 'open_in_new' }))
+  }
+
+  if (showSuffixIcon) {
+    btn.appendChild(createIcon({ name: 'add' }))
+  }
+
   btn.className = [
     priority === 'default' ? 'btn' : `btn-${priority}`,
     noBorder ? 'btn--no-border' : '',
diff --git a/src/stories/Components/Button/Button.stories.js b/src/stories/Components/Button/Button.stories.js
index 7c8f6158..27dcea11 100644
--- a/src/stories/Components/Button/Button.stories.js
+++ b/src/stories/Components/Button/Button.stories.js
@@ -17,6 +17,14 @@ export default {
     pill: { control: 'boolean' },
     icon: { control: 'boolean' },
     iconWithLabel: { control: 'boolean' },
+    showPrefixIcon: {
+      control: 'boolean',
+      description: 'This is not a class. It just provides an example of using icons within a button',
+    },
+    showSuffixIcon: {
+      control: 'boolean',
+      description: 'This is not a class. It just provides an example of using icons within a button',
+    },
     size: {
       control: { type: 'select' },
       options: ['small', 'medium', 'large'],