From 3c6fb256bc90365bcb1853c07fd90aef865003c7 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 19 Nov 2025 14:28:22 +0100
Subject: [PATCH 1/7] chore: Add new icon stroke width tokens

---
 pages/icon/themed-stroke-width.page.tsx       | 80 +++++++++++++++++++
 src/icon/mixins.scss                          | 18 +++--
 style-dictionary/utils/token-names.ts         |  8 +-
 style-dictionary/visual-refresh/borders.ts    |  6 ++
 .../visual-refresh/metadata/borders.ts        | 35 ++++++++
 5 files changed, 140 insertions(+), 7 deletions(-)
 create mode 100644 pages/icon/themed-stroke-width.page.tsx

diff --git a/pages/icon/themed-stroke-width.page.tsx b/pages/icon/themed-stroke-width.page.tsx
new file mode 100644
index 0000000000..96a0d80bf4
--- /dev/null
+++ b/pages/icon/themed-stroke-width.page.tsx
@@ -0,0 +1,80 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useState } from 'react';
+
+import Box from '~components/box';
+import Icon from '~components/icon';
+import SpaceBetween from '~components/space-between';
+import TextContent from '~components/text-content';
+import { applyTheme, Theme } from '~components/theming';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+const theme: Theme = {
+  tokens: {
+    borderWidthIconSmall: '1px',
+    borderWidthIconNormal: '1px',
+    borderWidthIconMedium: '1px',
+    borderWidthIconBig: '1.5px',
+    borderWidthIconLarge: '2px',
+  },
+};
+
+export default function () {
+  const [themed, setThemed] = useState<boolean>(false);
+
+  useEffect(() => {
+    let reset: () => void = () => {};
+    const result = applyTheme({
+      theme: themed ? theme : { tokens: {} },
+      baseThemeId: 'visual-refresh',
+    });
+    reset = result.reset;
+    return reset;
+  }, [themed]);
+
+  return (
+    <div style={{ padding: 15 }}>
+      <h1>Themed Icon Stroke Width</h1>
+      <label>
+        <input
+          type="checkbox"
+          data-testid="apply-theme"
+          checked={themed}
+          onChange={evt => setThemed(evt.currentTarget.checked)}
+        />
+        <span style={{ marginInlineStart: 5 }}>Apply custom stroke widths (thinner icons)</span>
+      </label>
+      <ScreenshotArea>
+        <SpaceBetween size="l" direction="vertical">
+          <Box fontSize="display-l" fontWeight="light">
+            <Icon name="settings" size="large" /> Display large (48px, 4px→2px)
+          </Box>
+          <TextContent>
+            <h1>
+              <Icon name="settings" size="big" /> Heading 1 (32px, 3px→1.5px)
+            </h1>
+            <h2>
+              <Icon name="settings" size="medium" /> Heading 2 (20px, 2px→1px)
+            </h2>
+            <h3>
+              <Icon name="settings" /> Heading 3 (16px, 2px→1px)
+            </h3>
+            <h4>
+              <Icon name="settings" /> Heading 4 (16px, 2px→1px)
+            </h4>
+            <h5>
+              <Icon name="settings" /> Heading 5 (16px, 2px→1px)
+            </h5>
+            <p>
+              <Icon name="settings" /> Paragraph (16px, 2px→1px)
+            </p>
+            <small>
+              <Icon name="settings" size="small" /> Small (16px, 2px→1px)
+            </small>
+          </TextContent>
+        </SpaceBetween>
+      </ScreenshotArea>
+    </div>
+  );
+}
diff --git a/src/icon/mixins.scss b/src/icon/mixins.scss
index 1b71014c07..59b29343b0 100644
--- a/src/icon/mixins.scss
+++ b/src/icon/mixins.scss
@@ -23,31 +23,36 @@ $_icon-sizes: (
     name: 'small',
     size: awsui.$size-icon-normal,
     supportedLineHeight: awsui.$line-height-body-s,
-    stroke: 2px,
+    stroke: awsui.$border-width-icon-small,
+    scaleFactor: 1,
   ),
   (
     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 +62,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 +84,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..f1743cac1e 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'
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index de12e168d6..6a6f734489 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: '2px',
+  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;

From 296bdb5891976e9beff9e5268e38639aa4d1db1c Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 19 Nov 2025 17:03:25 +0100
Subject: [PATCH 2/7] chore: Update test page to allow theming and add new
 small size options for exploration

---
 pages/icon/themed-stroke-width.page.tsx    |  80 ---------
 pages/theming/themed-stroke-width.page.tsx | 183 +++++++++++++++++++++
 src/icon/interfaces.ts                     |   2 +-
 src/icon/mixins.scss                       |  21 +++
 style-dictionary/utils/token-names.ts      |   3 +
 style-dictionary/visual-refresh/sizes.ts   |   3 +
 6 files changed, 211 insertions(+), 81 deletions(-)
 delete mode 100644 pages/icon/themed-stroke-width.page.tsx
 create mode 100644 pages/theming/themed-stroke-width.page.tsx

diff --git a/pages/icon/themed-stroke-width.page.tsx b/pages/icon/themed-stroke-width.page.tsx
deleted file mode 100644
index 96a0d80bf4..0000000000
--- a/pages/icon/themed-stroke-width.page.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useState } from 'react';
-
-import Box from '~components/box';
-import Icon from '~components/icon';
-import SpaceBetween from '~components/space-between';
-import TextContent from '~components/text-content';
-import { applyTheme, Theme } from '~components/theming';
-
-import ScreenshotArea from '../utils/screenshot-area';
-
-const theme: Theme = {
-  tokens: {
-    borderWidthIconSmall: '1px',
-    borderWidthIconNormal: '1px',
-    borderWidthIconMedium: '1px',
-    borderWidthIconBig: '1.5px',
-    borderWidthIconLarge: '2px',
-  },
-};
-
-export default function () {
-  const [themed, setThemed] = useState<boolean>(false);
-
-  useEffect(() => {
-    let reset: () => void = () => {};
-    const result = applyTheme({
-      theme: themed ? theme : { tokens: {} },
-      baseThemeId: 'visual-refresh',
-    });
-    reset = result.reset;
-    return reset;
-  }, [themed]);
-
-  return (
-    <div style={{ padding: 15 }}>
-      <h1>Themed Icon Stroke Width</h1>
-      <label>
-        <input
-          type="checkbox"
-          data-testid="apply-theme"
-          checked={themed}
-          onChange={evt => setThemed(evt.currentTarget.checked)}
-        />
-        <span style={{ marginInlineStart: 5 }}>Apply custom stroke widths (thinner icons)</span>
-      </label>
-      <ScreenshotArea>
-        <SpaceBetween size="l" direction="vertical">
-          <Box fontSize="display-l" fontWeight="light">
-            <Icon name="settings" size="large" /> Display large (48px, 4px→2px)
-          </Box>
-          <TextContent>
-            <h1>
-              <Icon name="settings" size="big" /> Heading 1 (32px, 3px→1.5px)
-            </h1>
-            <h2>
-              <Icon name="settings" size="medium" /> Heading 2 (20px, 2px→1px)
-            </h2>
-            <h3>
-              <Icon name="settings" /> Heading 3 (16px, 2px→1px)
-            </h3>
-            <h4>
-              <Icon name="settings" /> Heading 4 (16px, 2px→1px)
-            </h4>
-            <h5>
-              <Icon name="settings" /> Heading 5 (16px, 2px→1px)
-            </h5>
-            <p>
-              <Icon name="settings" /> Paragraph (16px, 2px→1px)
-            </p>
-            <small>
-              <Icon name="settings" size="small" /> Small (16px, 2px→1px)
-            </small>
-          </TextContent>
-        </SpaceBetween>
-      </ScreenshotArea>
-    </div>
-  );
-}
diff --git a/pages/theming/themed-stroke-width.page.tsx b/pages/theming/themed-stroke-width.page.tsx
new file mode 100644
index 0000000000..e281da99c7
--- /dev/null
+++ b/pages/theming/themed-stroke-width.page.tsx
@@ -0,0 +1,183 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useState } from 'react';
+
+import { Box, FormField, Input, SpaceBetween } 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');
+
+  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>
+      <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="Small (16px)" 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' }}>
+        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 (They look too small)</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 (They look too small)</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 good)</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>
+        </SpaceBetween>
+      </ScreenshotArea>
+    </div>
+  );
+}
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 59b29343b0..2bb6bea650 100644
--- a/src/icon/mixins.scss
+++ b/src/icon/mixins.scss
@@ -26,6 +26,27 @@ $_icon-sizes: (
     stroke: awsui.$border-width-icon-small,
     scaleFactor: 1,
   ),
+  (
+    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: awsui.$border-width-icon-small,
+    scaleFactor: 0.875,
+  ),
   (
     name: 'normal',
     size: awsui.$size-icon-normal,
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index f1743cac1e..bb4ea6f28f 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -915,6 +915,9 @@ export type SizesTokenName =
   | 'sizeIconLarge'
   | 'sizeIconMedium'
   | 'sizeIconNormal'
+  | 'sizeIconSmall12'
+  | 'sizeIconSmall13'
+  | 'sizeIconSmall14'
   | 'sizeTableSelectionHorizontal'
   | 'sizeVerticalInput'
   | 'sizeVerticalPanelIconOffset';
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' },

From 1fb8b0b1ab787ee4712136670d81096034d0b43e Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Wed, 19 Nov 2025 17:33:40 +0100
Subject: [PATCH 3/7] chore: Update snapshots

---
 .../__snapshots__/design-tokens.test.ts.snap  | 384 ++++++++++++++++++
 .../__snapshots__/documenter.test.ts.snap     |   3 +
 2 files changed, 387 insertions(+)

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..8df46f6d80 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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+    },
     "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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+        },
         "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": "2px",
+    },
     "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 c0c8d4991e..85c40dc9a6 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -13584,6 +13584,9 @@ The icon will be vertically centered based on the height.",
           "medium",
           "inherit",
           "large",
+          "small-12",
+          "small-13",
+          "small-14",
         ],
       },
       "name": "size",

From 26d153401146cb58280c294294031b414726dfc0 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Thu, 20 Nov 2025 06:27:21 +0100
Subject: [PATCH 4/7] chore: Update example page

---
 pages/theming/themed-stroke-width.page.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/pages/theming/themed-stroke-width.page.tsx b/pages/theming/themed-stroke-width.page.tsx
index e281da99c7..750466e88e 100644
--- a/pages/theming/themed-stroke-width.page.tsx
+++ b/pages/theming/themed-stroke-width.page.tsx
@@ -42,6 +42,9 @@ export default function () {
   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
@@ -54,7 +57,7 @@ export default function () {
         </label>
 
         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '10px', maxWidth: '800px' }}>
-          <FormField label="Small (16px)" description="Default: 2px">
+          <FormField label="New small size" description="Default: 2px">
             <Input
               type="number"
               value={strokeSmall}
@@ -102,7 +105,7 @@ export default function () {
       </SpaceBetween>
 
       <Box variant="h2" padding={{ top: 'l' }}>
-        Small Icon Size Options
+        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.
@@ -111,7 +114,7 @@ export default function () {
       <ScreenshotArea>
         <SpaceBetween size="xl">
           <SpaceBetween size="xs">
-            <Box variant="h3">Option 1: 12px (They look too small)</Box>
+            <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" />
@@ -120,7 +123,7 @@ export default function () {
           </SpaceBetween>
 
           <SpaceBetween size="xs">
-            <Box variant="h3">Option 2: 13px (They look too small)</Box>
+            <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" />
@@ -129,7 +132,9 @@ export default function () {
           </SpaceBetween>
 
           <SpaceBetween size="xs">
-            <Box variant="h3">Option 3: 14px (Look good)</Box>
+            <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" />

From 682b8d27b3bd98edfb93e929f349da8d81b15e6e Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Mon, 24 Nov 2025 15:35:23 +0100
Subject: [PATCH 5/7] chore: Add more examples

---
 pages/theming/themed-stroke-width.page.tsx | 100 ++++++++++++++++++++-
 1 file changed, 99 insertions(+), 1 deletion(-)

diff --git a/pages/theming/themed-stroke-width.page.tsx b/pages/theming/themed-stroke-width.page.tsx
index 750466e88e..dbd525d78d 100644
--- a/pages/theming/themed-stroke-width.page.tsx
+++ b/pages/theming/themed-stroke-width.page.tsx
@@ -2,7 +2,21 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useState } from 'react';
 
-import { Box, FormField, Input, SpaceBetween } from '~components';
+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';
@@ -18,6 +32,7 @@ export default function () {
   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 = {
@@ -181,6 +196,89 @@ export default function () {
               ))}
             </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>
+            <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>
+          </SpaceBetween>
         </SpaceBetween>
       </ScreenshotArea>
     </div>

From 45f0ad37b8722e25fdf19ecacd0290a26e6f52ad Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Tue, 25 Nov 2025 14:27:33 +0100
Subject: [PATCH 6/7] chore: Update small size variant

---
 pages/theming/themed-stroke-width.page.tsx | 21 +++++++++++++++++++++
 src/icon/mixins.scss                       |  4 ++--
 style-dictionary/visual-refresh/borders.ts |  2 +-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/pages/theming/themed-stroke-width.page.tsx b/pages/theming/themed-stroke-width.page.tsx
index dbd525d78d..3393b474f7 100644
--- a/pages/theming/themed-stroke-width.page.tsx
+++ b/pages/theming/themed-stroke-width.page.tsx
@@ -225,6 +225,17 @@ export default function () {
                 ]}
               />
             </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>
@@ -278,6 +289,16 @@ export default function () {
                 />
               </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>
diff --git a/src/icon/mixins.scss b/src/icon/mixins.scss
index 2bb6bea650..92b66a22ff 100644
--- a/src/icon/mixins.scss
+++ b/src/icon/mixins.scss
@@ -21,10 +21,10 @@ $_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: 1,
+    scaleFactor: 0.875,
   ),
   (
     name: 'small-12',
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index 6a6f734489..68eed18609 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -48,7 +48,7 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderWidthPopover: '2px',
   borderWidthToken: '2px',
   borderWidthIcon: '2px',
-  borderWidthIconSmall: '2px',
+  borderWidthIconSmall: '1px',
   borderWidthIconNormal: '2px',
   borderWidthIconMedium: '2px',
   borderWidthIconBig: '3px',

From 82cf0902ce4448b548997c711c0fea6ca92cd5a6 Mon Sep 17 00:00:00 2001
From: at-susie <ienakaai@amazon.de>
Date: Tue, 25 Nov 2025 18:46:51 +0100
Subject: [PATCH 7/7] chore: Update snapshot

---
 .../__snapshots__/design-tokens.test.ts.snap  | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

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 8df46f6d80..b91f2eb976 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -115,7 +115,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -2799,7 +2799,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -5483,7 +5483,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -8167,7 +8167,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -10851,7 +10851,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -13535,7 +13535,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -16219,7 +16219,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
     },
     "border-width-icon-small": {
       "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-      "$value": "2px",
+      "$value": "1px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",
@@ -18908,7 +18908,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -21592,7 +21592,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -24276,7 +24276,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -26960,7 +26960,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -29644,7 +29644,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -32328,7 +32328,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -35012,7 +35012,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -37696,7 +37696,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
         "border-width-icon-small": {
           "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-          "$value": "2px",
+          "$value": "1px",
         },
         "border-width-popover": {
           "$description": "The border width of popovers.",
@@ -40380,7 +40380,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
     },
     "border-width-icon-small": {
       "$description": "The visual stroke width of small icons (16px size). This is the actual rendered stroke width users see.",
-      "$value": "2px",
+      "$value": "1px",
     },
     "border-width-popover": {
       "$description": "The border width of popovers.",