diff --git a/src/components/Icon/Icon.less b/src/components/Icon/Icon.less
new file mode 100644
index 00000000..931d7527
--- /dev/null
+++ b/src/components/Icon/Icon.less
@@ -0,0 +1,15 @@
+// Calculation methodology
+// https://github.com/cfpb/design-stories/issues/130#issuecomment-1670396537
+@width-of-1-nbsp: 0.3098125em;
+
+.u-icon-before-text .cf-icon-svg-wrapper {
+  margin-right: @width-of-1-nbsp;
+}
+
+.u-icon-after-text .cf-icon-svg-wrapper {
+  margin-left: @width-of-1-nbsp;
+}
+
+.t-icon-with-text {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
index 95869aa7..8bd2ff29 100644
--- a/src/components/Icon/Icon.stories.tsx
+++ b/src/components/Icon/Icon.stories.tsx
@@ -71,6 +71,56 @@ export const IconWithBackground = (): React.ReactElement => (
   </span>
 );
 
+export const IconWithText = (): React.ReactElement => {
+  const elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'p', 'a'];
+
+  return (
+    <table className='t-icon-with-text'>
+      <thead>
+        <tr>
+          <th>Element</th>
+          <th>Text + Icon</th>
+          <th>Icon + Text</th>
+          <th>Round Icon + Text</th>
+        </tr>
+      </thead>
+      <tbody>
+        {elements.map(element => {
+          const DynamicTag = element;
+
+          return (
+            <tr key={element}>
+              <td>{element}</td>
+              <td>
+                <DynamicTag className='u-icon-after-text'>
+                  {element} text
+                  <Icon name='email' />
+                </DynamicTag>
+              </td>
+
+              <td>
+                <DynamicTag className='u-icon-before-text'>
+                  <Icon name='email' />
+                  {element} text
+                </DynamicTag>
+              </td>
+              <td>
+                <DynamicTag className='u-icon-before-text'>
+                  <Icon name='zero' withBg />
+                  {element} text
+                </DynamicTag>
+              </td>
+            </tr>
+          );
+        })}
+        <tr>
+          <td>test space</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
 export const NavigationIcons = (): React.ReactElement => (
   <IconTable>{makeRows(navigationIcons)}</IconTable>
 );
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 5384a6a4..373c4520 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -2,6 +2,8 @@ import classNames from 'classnames';
 import { useIconSvg } from '../../hooks/useIconSvg';
 import { numberIcons } from './iconLists';
 
+import './Icon.less';
+
 // Design System font sizes for HTML elements
 const sizeMap: Record<string, string> = {
   h1: '34px',