diff --git a/pages/theming/themed-stroke-width.page.tsx b/pages/theming/themed-stroke-width.page.tsx
new file mode 100644
index 0000000000..3393b474f7
--- /dev/null
+++ b/pages/theming/themed-stroke-width.page.tsx
@@ -0,0 +1,307 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useState } from 'react';
+
+import {
+  Alert,
+  Box,
+  Button,
+  Flashbar,
+  FormField,
+  IconProvider,
+  Input,
+  KeyValuePairs,
+  Link,
+  Select,
+  SelectProps,
+  SpaceBetween,
+  StatusIndicator,
+} from '~components';
+import Icon, { IconProps } from '~components/icon';
+import icons from '~components/icon/generated/icons';
+import { applyTheme, Theme } from '~components/theming';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+import styles from '../icon/icons-list.scss';
+
+export default function () {
+  const [themed, setThemed] = useState<boolean>(true);
+  const [strokeSmall, setStrokeSmall] = useState<string>('1px');
+  const [strokeNormal, setStrokeNormal] = useState<string>('1px');
+  const [strokeMedium, setStrokeMedium] = useState<string>('1px');
+  const [strokeBig, setStrokeBig] = useState<string>('1.5px');
+  const [strokeLarge, setStrokeLarge] = useState<string>('2px');
+  const [selectedOption, setSelectedOption] = useState<SelectProps.Option>({ label: 'Option 1', value: '1' });
+
+  useEffect(() => {
+    const theme: Theme = {
+      tokens: {
+        borderWidthIconSmall: strokeSmall,
+        borderWidthIconNormal: strokeNormal,
+        borderWidthIconMedium: strokeMedium,
+        borderWidthIconBig: strokeBig,
+        borderWidthIconLarge: strokeLarge,
+      },
+    };
+
+    let reset: () => void = () => {};
+    const result = applyTheme({
+      theme: themed ? theme : { tokens: {} },
+      baseThemeId: 'visual-refresh',
+    });
+    reset = result.reset;
+    return reset;
+  }, [themed, strokeSmall, strokeNormal, strokeMedium, strokeBig, strokeLarge]);
+
+  return (
+    <div style={{ padding: 15 }}>
+      <h1>Themed Icon Stroke Width</h1>
+      <Box padding={{ bottom: 'm' }} variant="small">
+        When not working, reload the page
+      </Box>
+      <SpaceBetween size="m" direction="vertical">
+        <label>
+          <input
+            type="checkbox"
+            data-testid="apply-theme"
+            checked={themed}
+            onChange={evt => setThemed(evt.currentTarget.checked)}
+          />
+          <span style={{ marginInlineStart: 5 }}>Apply custom stroke widths</span>
+        </label>
+
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '10px', maxWidth: '800px' }}>
+          <FormField label="New small size" description="Default: 2px">
+            <Input
+              type="number"
+              value={strokeSmall}
+              onChange={evt => setStrokeSmall(evt.detail.value)}
+              placeholder="1px"
+            />
+          </FormField>
+
+          <FormField label="Normal (16px)" description="Default: 2px">
+            <Input
+              type="number"
+              value={strokeNormal}
+              onChange={evt => setStrokeNormal(evt.detail.value)}
+              placeholder="1px"
+            />
+          </FormField>
+
+          <FormField label="Medium (20px)" description="Default: 2px">
+            <Input
+              type="number"
+              value={strokeMedium}
+              onChange={evt => setStrokeMedium(evt.detail.value)}
+              placeholder="1px"
+            />
+          </FormField>
+
+          <FormField label="Big (32px)" description="Default: 3px">
+            <Input
+              type="number"
+              value={strokeBig}
+              onChange={evt => setStrokeBig(evt.detail.value)}
+              placeholder="1.5px"
+            />
+          </FormField>
+
+          <FormField label="Large (48px)" description="Default: 4px">
+            <Input
+              type="number"
+              value={strokeLarge}
+              onChange={evt => setStrokeLarge(evt.detail.value)}
+              placeholder="2px"
+            />
+          </FormField>
+        </div>
+      </SpaceBetween>
+
+      <Box variant="h2" padding={{ top: 'l' }}>
+        New small icon size options
+      </Box>
+      <Box variant="p" color="text-body-secondary" padding={{ bottom: 'm' }}>
+        Compare three potential small icon sizes with custom stroke widths applied.
+      </Box>
+
+      <ScreenshotArea>
+        <SpaceBetween size="xl">
+          <SpaceBetween size="xs">
+            <Box variant="h3">Option 1: 12px (Too small, details are broken)</Box>
+            <div className={styles.wrapper}>
+              {Object.keys(icons).map(icon => (
+                <Icon key={`12-${icon}`} name={icon as IconProps['name']} variant="normal" size="small-12" />
+              ))}
+            </div>
+          </SpaceBetween>
+
+          <SpaceBetween size="xs">
+            <Box variant="h3">Option 2: 13px (Look ok)</Box>
+            <div className={styles.wrapper}>
+              {Object.keys(icons).map(icon => (
+                <Icon key={`13-${icon}`} name={icon as IconProps['name']} variant="normal" size="small-13" />
+              ))}
+            </div>
+          </SpaceBetween>
+
+          <SpaceBetween size="xs">
+            <Box variant="h3">
+              Option 3: 14px (✅ Look better than other two maintaining visual details in 1px stroke)
+            </Box>
+            <div className={styles.wrapper}>
+              {Object.keys(icons).map(icon => (
+                <Icon key={`14-${icon}`} name={icon as IconProps['name']} variant="normal" size="small-14" />
+              ))}
+            </div>
+          </SpaceBetween>
+
+          <Box variant="h2" padding={{ top: 'l' }}>
+            Other Icon Sizes
+          </Box>
+
+          <SpaceBetween size="xs">
+            <Box variant="h3">Normal (16px)</Box>
+            <div className={styles.wrapper}>
+              {Object.keys(icons).map(icon => (
+                <Icon key={icon} name={icon as IconProps['name']} variant="normal" size="normal" />
+              ))}
+            </div>
+          </SpaceBetween>
+
+          <SpaceBetween size="xs">
+            <Box variant="h3">Medium (20px)</Box>
+            <div className={styles.wrapper}>
+              {Object.keys(icons).map(icon => (
+                <Icon key={icon} name={icon as IconProps['name']} variant="normal" size="medium" />
+              ))}
+            </div>
+          </SpaceBetween>
+
+          <SpaceBetween size="xs">
+            <Box variant="h3">Big (32px)</Box>
+            <div className={styles.wrapper}>
+              {Object.keys(icons).map(icon => (
+                <Icon key={icon} name={icon as IconProps['name']} variant="normal" size="big" />
+              ))}
+            </div>
+          </SpaceBetween>
+
+          <SpaceBetween size="xs">
+            <Box variant="h3">Large (48px)</Box>
+            <div className={styles.wrapper}>
+              {Object.keys(icons).map(icon => (
+                <Icon key={icon} name={icon as IconProps['name']} variant="normal" size="large" />
+              ))}
+            </div>
+          </SpaceBetween>
+
+          <Box variant="h2" padding={{ top: 'l' }}>
+            Inline Context Examples
+          </Box>
+
+          <SpaceBetween size="m">
+            <div>
+              <Button iconName="call" variant="primary">
+                Button
+              </Button>
+            </div>
+
+            <div>
+              <Link external={true} href="https://example.com/" variant="primary">
+                Learn more
+              </Link>
+            </div>
+
+            <div style={{ maxWidth: '300px' }}>
+              <Select
+                selectedOption={selectedOption}
+                onChange={({ detail }) => setSelectedOption(detail.selectedOption)}
+                options={[
+                  { label: 'Option 1', value: '1', iconName: 'settings' },
+                  { label: 'Option 2', value: '2', iconName: 'unlocked' },
+                  { label: 'Option 3', value: '3', iconName: 'share' },
+                ]}
+              />
+            </div>
+
+            <div style={{ maxWidth: '300px' }}>
+              <FormField
+                label="Email address"
+                errorText="Please enter a valid email address"
+                constraintText="Use your company email"
+              >
+                <Input value="invalid-email" type="email" />
+              </FormField>
+            </div>
+
+            <SpaceBetween size="xs">
+              <StatusIndicator type="error">Error</StatusIndicator>
+              <StatusIndicator type="success">Success</StatusIndicator>
+              <StatusIndicator type="warning">Warning</StatusIndicator>
+              <StatusIndicator type="info">Info</StatusIndicator>
+            </SpaceBetween>
+            <IconProvider
+              icons={{
+                'status-positive': (
+                  <svg viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M5 9L7 11L11 7" />
+                    <path d="M8 2C6.29 3.53 4.13 4.32 2 4.48V7.96C2 10.01 2.76 11.84 3.71 13.1C4.63 14.32 6.03 15.31 8 16C9.97 15.31 11.37 14.32 12.29 13.1C13.3935 11.6128 13.9926 9.81183 14 7.96V4.48C11.87 4.32 9.71 3.52 8 2Z" />
+                  </svg>
+                ),
+              }}
+            >
+              <SpaceBetween size="xs">
+                <Box variant="h2" padding={{ top: 'l' }}>
+                  Custom icon using icon-provider component
+                </Box>
+                <KeyValuePairs
+                  columns={1}
+                  items={[
+                    {
+                      label: 'Custom icon in a status indicator',
+                      value: <StatusIndicator type="success">Two-factor authentication enabled</StatusIndicator>,
+                    },
+                    {
+                      label: 'Custom icon in an alert',
+                      value: (
+                        <Alert type="success" statusIconAriaLabel="Success">
+                          Two-factor authentication enabled successfully.
+                        </Alert>
+                      ),
+                    },
+                    {
+                      label: 'Custom icon in a flashbar',
+                      value: (
+                        <Flashbar
+                          items={[
+                            {
+                              type: 'success',
+                              content: 'Two-factor authentication enabled successfully.',
+                              statusIconAriaLabel: 'Success',
+                            },
+                          ]}
+                        />
+                      ),
+                    },
+                  ]}
+                />
+              </SpaceBetween>
+            </IconProvider>
+            <p style={{ lineHeight: '28px', fontSize: '18px' }}>
+              Lorem ipsum dolor sit amet,{' '}
+              <Link external={true} href="#">
+                Learn more
+              </Link>{' '}
+              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+              minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+            </p>
+          </SpaceBetween>
+        </SpaceBetween>
+      </ScreenshotArea>
+    </div>
+  );
+}
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index fc7efac8a6..b91f2eb976 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -93,6 +93,30 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "1px",
@@ -2753,6 +2777,30 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "1px",
@@ -5413,6 +5461,30 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "1px",
@@ -8073,6 +8145,30 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "1px",
@@ -10733,6 +10829,30 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "1px",
@@ -13393,6 +13513,30 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "1px",
@@ -16053,6 +16197,30 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
       "$description": "The border width of form fields.",
       "$value": "1px",
     },
+    "border-width-icon": {
+      "$description": "The stroke width of icons.",
+      "$value": "2px",
+    },
+    "border-width-icon-big": {
+      "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+      "$value": "3px",
+    },
+    "border-width-icon-large": {
+      "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+      "$value": "4px",
+    },
+    "border-width-icon-medium": {
+      "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+      "$value": "2px",
+    },
+    "border-width-icon-normal": {
+      "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+      "$value": "2px",
+    },
+    "border-width-icon-small": {
+      "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+      "$value": "1px",
+    },
     "border-width-popover": {
       "$description": "The border width of popovers.",
       "$value": "1px",
@@ -18718,6 +18886,30 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "2px",
@@ -21378,6 +21570,30 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "2px",
@@ -24038,6 +24254,30 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "2px",
@@ -26698,6 +26938,30 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "2px",
@@ -29358,6 +29622,30 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "2px",
@@ -32018,6 +32306,30 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "2px",
@@ -34678,6 +34990,30 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "2px",
@@ -37338,6 +37674,30 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border width of form fields.",
           "$value": "1px",
         },
+        "border-width-icon": {
+          "$description": "The stroke width of icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+          "$value": "1px",
+        },
         "border-width-popover": {
           "$description": "The border width of popovers.",
           "$value": "2px",
@@ -39998,6 +40358,30 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
       "$description": "The border width of form fields.",
       "$value": "1px",
     },
+    "border-width-icon": {
+      "$description": "The stroke width of icons.",
+      "$value": "2px",
+    },
+    "border-width-icon-big": {
+      "$description": "The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.",
+      "$value": "3px",
+    },
+    "border-width-icon-large": {
+      "$description": "The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.",
+      "$value": "4px",
+    },
+    "border-width-icon-medium": {
+      "$description": "The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.",
+      "$value": "2px",
+    },
+    "border-width-icon-normal": {
+      "$description": "The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.",
+      "$value": "2px",
+    },
+    "border-width-icon-small": {
+      "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
+      "$value": "1px",
+    },
     "border-width-popover": {
       "$description": "The border width of popovers.",
       "$value": "2px",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index fb727ee7a2..8def397f96 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -13849,6 +13849,9 @@ The icon will be vertically centered based on the height.",
           "medium",
           "inherit",
           "large",
+          "small-12",
+          "small-13",
+          "small-14",
         ],
       },
       "name": "size",
diff --git a/src/icon/interfaces.ts b/src/icon/interfaces.ts
index ce80fc3640..f1d0bc7f69 100644
--- a/src/icon/interfaces.ts
+++ b/src/icon/interfaces.ts
@@ -226,5 +226,5 @@ export namespace IconProps {
 
   export type Variant = 'normal' | 'disabled' | 'error' | 'inverted' | 'link' | 'subtle' | 'success' | 'warning';
 
-  export type Size = 'small' | 'normal' | 'medium' | 'big' | 'large' | 'inherit';
+  export type Size = 'small' | 'small-12' | 'small-13' | 'small-14' | 'normal' | 'medium' | 'big' | 'large' | 'inherit';
 }
diff --git a/src/icon/mixins.scss b/src/icon/mixins.scss
index 1b71014c07..92b66a22ff 100644
--- a/src/icon/mixins.scss
+++ b/src/icon/mixins.scss
@@ -21,33 +21,59 @@ $_variant-colors: (
 $_icon-sizes: (
   (
     name: 'small',
-    size: awsui.$size-icon-normal,
+    size: awsui.$size-icon-small-12,
+    supportedLineHeight: awsui.$line-height-body-s,
+    stroke: awsui.$border-width-icon-small,
+    scaleFactor: 0.875,
+  ),
+  (
+    name: 'small-12',
+    size: awsui.$size-icon-small-12,
+    supportedLineHeight: awsui.$line-height-body-s,
+    stroke: awsui.$border-width-icon-small,
+    scaleFactor: 0.75,
+  ),
+  (
+    name: 'small-13',
+    size: awsui.$size-icon-small-13,
+    supportedLineHeight: awsui.$line-height-body-s,
+    stroke: awsui.$border-width-icon-small,
+    scaleFactor: 0.8125,
+  ),
+  (
+    name: 'small-14',
+    size: awsui.$size-icon-small-14,
     supportedLineHeight: awsui.$line-height-body-s,
-    stroke: 2px,
+    stroke: awsui.$border-width-icon-small,
+    scaleFactor: 0.875,
   ),
   (
     name: 'normal',
     size: awsui.$size-icon-normal,
     supportedLineHeight: awsui.$line-height-body-m,
-    stroke: 2px,
+    stroke: awsui.$border-width-icon-normal,
+    scaleFactor: 1,
   ),
   (
     name: 'medium',
     size: awsui.$size-icon-medium,
     supportedLineHeight: awsui.$line-height-heading-l,
-    stroke: 1.6px,
+    stroke: awsui.$border-width-icon-medium,
+    scaleFactor: 1.25,
   ),
   (
     name: 'big',
     size: awsui.$size-icon-big,
     supportedLineHeight: awsui.$line-height-heading-xl,
-    stroke: 1.5px,
+    stroke: awsui.$border-width-icon-big,
+    scaleFactor: 2,
   ),
   (
     name: 'large',
     size: awsui.$size-icon-large,
     supportedLineHeight: awsui.$line-height-display-l,
-    stroke: 1.333px,
+    stroke: awsui.$border-width-icon-large,
+    scaleFactor: 3,
   )
 );
 
@@ -57,6 +83,7 @@ $_icon-sizes: (
     $size: map.get($type, 'size');
     $supportedLineHeight: map.get($type, 'supportedLineHeight');
     $stroke: map.get($type, 'stroke');
+    $scaleFactor: map.get($type, 'scaleFactor');
     $padding: calc((#{$supportedLineHeight} - #{$size}) / 2);
 
     &.size-#{$name} {
@@ -78,7 +105,7 @@ $_icon-sizes: (
       > svg {
         &,
         * {
-          stroke-width: $stroke;
+          stroke-width: calc(#{$stroke} / #{$scaleFactor});
         }
       }
     }
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 4a41c89eaa..bb4ea6f28f 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -859,7 +859,13 @@ export type BordersTokenName =
   | 'borderWidthDropdown'
   | 'borderWidthField'
   | 'borderWidthPopover'
-  | 'borderWidthToken';
+  | 'borderWidthToken'
+  | 'borderWidthIcon'
+  | 'borderWidthIconSmall'
+  | 'borderWidthIconNormal'
+  | 'borderWidthIconMedium'
+  | 'borderWidthIconBig'
+  | 'borderWidthIconLarge';
 export type MotionTokenName =
   | 'motionDurationExtraFast'
   | 'motionDurationExtraSlow'
@@ -909,6 +915,9 @@ export type SizesTokenName =
   | 'sizeIconLarge'
   | 'sizeIconMedium'
   | 'sizeIconNormal'
+  | 'sizeIconSmall12'
+  | 'sizeIconSmall13'
+  | 'sizeIconSmall14'
   | 'sizeTableSelectionHorizontal'
   | 'sizeVerticalInput'
   | 'sizeVerticalPanelIconOffset';
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index de12e168d6..68eed18609 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -47,4 +47,10 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderWidthField: '1px',
   borderWidthPopover: '2px',
   borderWidthToken: '2px',
+  borderWidthIcon: '2px',
+  borderWidthIconSmall: '1px',
+  borderWidthIconNormal: '2px',
+  borderWidthIconMedium: '2px',
+  borderWidthIconBig: '3px',
+  borderWidthIconLarge: '4px',
 };
diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts
index c971cad076..d1eac2f6af 100644
--- a/style-dictionary/visual-refresh/metadata/borders.ts
+++ b/style-dictionary/visual-refresh/metadata/borders.ts
@@ -139,6 +139,41 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  borderWidthIcon: {
+    description: 'The stroke width of icons.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthIconSmall: {
+    description:
+      'The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthIconNormal: {
+    description:
+      'The visual stroke width of normal icons (16px size). This is the actual rendered stroke width users see.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthIconMedium: {
+    description:
+      'The visual stroke width of medium icons (20px size). This is the actual rendered stroke width users see.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthIconBig: {
+    description:
+      'The visual stroke width of big icons (32px size). This is the actual rendered stroke width users see.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthIconLarge: {
+    description:
+      'The visual stroke width of large icons (48px size). This is the actual rendered stroke width users see.',
+    public: true,
+    themeable: true,
+  },
 };
 
 export default metadata;
diff --git a/style-dictionary/visual-refresh/sizes.ts b/style-dictionary/visual-refresh/sizes.ts
index d80230db33..1538d54449 100644
--- a/style-dictionary/visual-refresh/sizes.ts
+++ b/style-dictionary/visual-refresh/sizes.ts
@@ -10,6 +10,9 @@ const tokens: StyleDictionary.SizesDictionary = {
   sizeIconLarge: '48px',
   sizeIconMedium: '20px',
   sizeIconNormal: '16px',
+  sizeIconSmall12: '12px',
+  sizeIconSmall13: '13px',
+  sizeIconSmall14: '14px',
   sizeTableSelectionHorizontal: '40px',
   sizeVerticalInput: { comfortable: '32px', compact: '28px' },
   sizeVerticalPanelIconOffset: { comfortable: '15px', compact: '13px' },