diff --git a/packages/clay-css/src/scss/cadmin/components/_input-groups.scss b/packages/clay-css/src/scss/cadmin/components/_input-groups.scss
index 0355aac6b0..768ab76a51 100644
--- a/packages/clay-css/src/scss/cadmin/components/_input-groups.scss
+++ b/packages/clay-css/src/scss/cadmin/components/_input-groups.scss
@@ -209,6 +209,11 @@
 				);
 			}
 		}
+
+		.sticker {
+			margin-left: 12px;
+			margin-right: 8px;
+		}
 	}
 
 	.input-group-inset-icon {
diff --git a/packages/clay-css/src/scss/cadmin/variables/_forms.scss b/packages/clay-css/src/scss/cadmin/variables/_forms.scss
index ba7bd3d643..ce9ea1b75b 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_forms.scss
+++ b/packages/clay-css/src/scss/cadmin/variables/_forms.scss
@@ -1630,8 +1630,8 @@ $cadmin-input-group-item-focusable: map-deep-merge(
 // Input Group Inset
 
 $cadmin-input-group-inset-item-color: $cadmin-input-group-addon-color !default;
-$cadmin-input-group-inset-item-padding-left: 5px !default;
-$cadmin-input-group-inset-item-padding-right: 5px !default;
+$cadmin-input-group-inset-item-padding-left: 4px !default;
+$cadmin-input-group-inset-item-padding-right: 4px !default;
 
 $cadmin-input-group-inset-item-btn: () !default;
 $cadmin-input-group-inset-item-btn: map-deep-merge(
@@ -1641,8 +1641,8 @@ $cadmin-input-group-inset-item-btn: map-deep-merge(
 		height: 75%,
 		justify-content: center,
 		line-height: 1,
-		margin-left: 3px,
-		margin-right: 3px,
+		margin-left: 4px,
+		margin-right: 4px,
 		padding-bottom: 0,
 		padding-left: 8px,
 		padding-right: 8px,
diff --git a/packages/clay-css/src/scss/components/_input-groups.scss b/packages/clay-css/src/scss/components/_input-groups.scss
index 359012ed6b..070bbf8f6d 100644
--- a/packages/clay-css/src/scss/components/_input-groups.scss
+++ b/packages/clay-css/src/scss/components/_input-groups.scss
@@ -259,6 +259,11 @@
 				@include clay-button-size($input-group-inset-form-file-btn);
 			}
 		}
+
+		.sticker {
+			margin-left: 0.75rem;
+			margin-right: 0.5rem;
+		}
 	}
 
 	.input-group-inset-icon {
diff --git a/packages/clay-css/src/scss/variables/_forms.scss b/packages/clay-css/src/scss/variables/_forms.scss
index ad5469f9fe..5dbb767738 100644
--- a/packages/clay-css/src/scss/variables/_forms.scss
+++ b/packages/clay-css/src/scss/variables/_forms.scss
@@ -1628,8 +1628,8 @@ $input-group-item-focusable: map-deep-merge(
 // Input Group Inset
 
 $input-group-inset-item-color: $input-group-addon-color !default;
-$input-group-inset-item-padding-left: 5px !default;
-$input-group-inset-item-padding-right: 5px !default;
+$input-group-inset-item-padding-left: 4px !default;
+$input-group-inset-item-padding-right: 4px !default;
 
 $input-group-inset-item-btn: () !default;
 $input-group-inset-item-btn: map-deep-merge(
@@ -1639,8 +1639,8 @@ $input-group-inset-item-btn: map-deep-merge(
 		height: 75%,
 		justify-content: center,
 		line-height: 1,
-		margin-left: 0.1875rem,
-		margin-right: 0.1875rem,
+		margin-left: 0.25rem,
+		margin-right: 0.25rem,
 		padding-bottom: 0,
 		padding-left: 0.5rem,
 		padding-right: 0.5rem,
diff --git a/packages/clay-form/docs/input-group.mdx b/packages/clay-form/docs/input-group.mdx
index ccbd6b8c83..46f011f619 100644
--- a/packages/clay-form/docs/input-group.mdx
+++ b/packages/clay-form/docs/input-group.mdx
@@ -167,6 +167,48 @@ export default function App() {
 }
 ```
 
+### Inset Before
+
+```jsx preview
+import {Provider} from '@clayui/core';
+import Form, {ClayInput} from '@clayui/form';
+import ClayButton from '@clayui/button';
+import ClaySticker from '@clayui/sticker';
+import React, {useState} from 'react';
+
+import '@clayui/css/lib/css/atlas.css';
+
+export default function App() {
+	return (
+		<Provider spritemap="/public/icons.svg">
+			<div className="p-4">
+				<Form.Group>
+					<label htmlFor="selectASpace">Select a Space</label>
+					<ClayInput.Group>
+						<ClayInput.GroupItem>
+							<ClayInput
+								aria-label="Select a space"
+								className="form-control-select"
+								id="selectASpace"
+								insetBefore
+								placeholder="Select a Space"
+								type="text"
+								value="Space Program"
+							/>
+							<ClayInput.GroupInsetItem before>
+								<ClaySticker displayType="outline-2" size="sm">
+									S
+								</ClaySticker>
+							</ClayInput.GroupInsetItem>
+						</ClayInput.GroupItem>
+					</ClayInput.Group>
+				</Form.Group>
+			</div>
+		</Provider>
+	);
+}
+```
+
 ### Stacked
 
 For creating a stack of the items inside a item group, use `stacked` property in the `<ClayInput.Group>` and use `shrink` property for using in screens sizes less than 576px.
diff --git a/packages/clay-form/stories/InputGroup.stories.tsx b/packages/clay-form/stories/InputGroup.stories.tsx
index 57d20909cd..76452982ac 100644
--- a/packages/clay-form/stories/InputGroup.stories.tsx
+++ b/packages/clay-form/stories/InputGroup.stories.tsx
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import ClaySticker from '@clayui/sticker';
 import React from 'react';
 
 import {ClayInput} from '../src';
@@ -121,3 +122,29 @@ export const GroupMixed = () => (
 		</ClayForm.Group>
 	</div>
 );
+
+export const Spaces = () => (
+	<div className="sheet">
+		<ClayForm.Group>
+			<label htmlFor="selectASpace">Select a Space</label>
+			<ClayInput.Group>
+				<ClayInput.GroupItem>
+					<ClayInput
+						aria-label="Select a space"
+						className="form-control-select"
+						id="selectASpace"
+						insetBefore
+						placeholder="Select a Space"
+						type="text"
+						value="Space Program"
+					/>
+					<ClayInput.GroupInsetItem before>
+						<ClaySticker displayType="outline-2" size="sm">
+							S
+						</ClaySticker>
+					</ClayInput.GroupInsetItem>
+				</ClayInput.GroupItem>
+			</ClayInput.Group>
+		</ClayForm.Group>
+	</div>
+);