diff --git a/libs/components/src/button/button.mdx b/libs/components/src/button/button.mdx
index 21c992982d8..61874922fc7 100644
--- a/libs/components/src/button/button.mdx
+++ b/libs/components/src/button/button.mdx
@@ -73,6 +73,27 @@ where the width is fixed and the text wraps to 2 lines if exceeding the button
 
 <Canvas of={stories.Block} />
 
+## With Icon
+
+To ensure consistent icon spacing, the icon should have .5rem spacing on left or right(depending on
+placement).
+
+> NOTE: Use logical css properties to ensure LTR/RTL support.
+
+**If icon is placed before button label**
+
+```html
+<i class="bwi bwi-plus tw-me-2"></i>
+```
+
+**If icon is placed after button label**
+
+```html
+<i class="bwi bwi-plus tw-ms-2"></i>
+```
+
+<Canvas of={stories.WithIcon} />
+
 ## Accessibility
 
 Please follow these guidelines to ensure that buttons are accessible to all users.
diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts
index 6024b0559f2..448e290cce8 100644
--- a/libs/components/src/button/button.stories.ts
+++ b/libs/components/src/button/button.stories.ts
@@ -120,3 +120,25 @@ export const Block: Story = {
     block: true,
   },
 };
+
+export const WithIcon: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <span class="tw-flex tw-gap-8">
+        <div>
+          <button bitButton [buttonType]="buttonType" [block]="block">
+            <i class="bwi bwi-plus tw-me-2"></i>
+            Button label
+          </button>
+        </div>
+        <div>
+          <button bitButton [buttonType]="buttonType" [block]="block">
+            Button label
+            <i class="bwi bwi-plus tw-ms-2"></i>
+          </button>
+        </div>
+      </span>
+    `,
+  }),
+};