diff --git a/.chromatic-fc/.parcelrc b/.chromatic-fc/.parcelrc
index ad8b3c54a83..027801f9afe 100644
--- a/.chromatic-fc/.parcelrc
+++ b/.chromatic-fc/.parcelrc
@@ -7,6 +7,6 @@
     "packages/**/intl/**/*.json": ["parcel-transformer-intl"],
     // Disable PostCSS from running over style macro output
     "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
-    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"]
+    "packages/@react-spectrum/{s2,ai}/**/*.svg": ["@parcel/transformer-svg-react"]
   }
 }
diff --git a/.chromatic/.parcelrc b/.chromatic/.parcelrc
index 1e314e5cdce..4a3464e0642 100644
--- a/.chromatic/.parcelrc
+++ b/.chromatic/.parcelrc
@@ -7,6 +7,6 @@
     "packages/**/intl/**/*.json": ["parcel-transformer-intl"],
     // Disable PostCSS from running over style macro output
     "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
-    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"]
+    "packages/@react-spectrum/{s2,ai}/**/*.svg": ["@parcel/transformer-svg-react"]
   }
 }
diff --git a/packages/@react-spectrum/ai/src/AttachmentList.tsx b/packages/@react-spectrum/ai/src/AttachmentList.tsx
index 2856c8cfe15..9ccb19862ce 100644
--- a/packages/@react-spectrum/ai/src/AttachmentList.tsx
+++ b/packages/@react-spectrum/ai/src/AttachmentList.tsx
@@ -18,13 +18,17 @@ import {
   forwardRefType,
   GlobalDOMAttributes
 } from '@react-types/shared';
-import {baseColor, focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {
+  baseColor,
+  focusRing,
+  iconStyle,
+  style
+} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {BasicHorizontalCard} from './HorizontalCard';
 import {Button} from 'react-aria-components/Button';
 import {CardProps} from '@react-spectrum/s2/Card';
-import Close from '@react-spectrum/s2/icons/Close';
+import Cross from '../ui-icons/Cross';
 import {forwardRef, ReactNode, useRef} from 'react';
-import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {ImageContext} from '@react-spectrum/s2/Image';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -86,17 +90,18 @@ const styles = style<{
     isFocusVisible: hoverBackground,
     isPressed: hoverBackground
   },
-  '--iconPrimary': {
-    type: 'color',
-    value: {
-      default: baseColor('neutral'),
-      isDisabled: 'disabled',
-      forcedColors: {
-        default: 'ButtonText',
-        isDisabled: 'GrayText'
-      }
+  color: {
+    default: baseColor('neutral'),
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'ButtonText',
+      isDisabled: 'GrayText'
     }
   },
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  },
   outlineColor: {
     default: 'focus-ring',
     forcedColors: 'Highlight'
@@ -104,14 +109,6 @@ const styles = style<{
   disableTapHighlight: true
 });
 
-const closeIconStyle = ({size = 'M'}) => {
-  if (size === 'S') return iconStyle({size: 'XS'});
-  else if (size === 'M') return iconStyle({size: 'S'});
-  else if (size === 'L') return iconStyle({size: 'M'});
-  else if (size === 'XL') return iconStyle({size: 'L'});
-  else return iconStyle({size: 'S'});
-};
-
 const CloseButton = function CloseButton(props) {
   let ref = useRef(null);
   // oxlint-disable react/react-compiler
@@ -124,7 +121,7 @@ const CloseButton = function CloseButton(props) {
       className={renderProps =>
         mergeStyles(styles({...renderProps, size: props.size || 'M'}), props.styles)
       }>
-      <Close styles={closeIconStyle({size: props.size ?? 'M'})} />
+      <Cross size="M" />
     </Button>
   );
   // oxlint-enable react/react-compiler
diff --git a/packages/@react-spectrum/ai/src/ResponseStatus.tsx b/packages/@react-spectrum/ai/src/ResponseStatus.tsx
index 7d854c7ae3a..37d84e4819b 100644
--- a/packages/@react-spectrum/ai/src/ResponseStatus.tsx
+++ b/packages/@react-spectrum/ai/src/ResponseStatus.tsx
@@ -14,7 +14,6 @@ import {AriaLabelingProps, DOMProps, DOMRef, GlobalDOMAttributes} from '@react-t
 import {
   baseColor,
   focusRing,
-  iconStyle,
   lightDark,
   space,
   style
@@ -22,7 +21,7 @@ import {
 import {Button} from 'react-aria-components/Button';
 import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline';
 import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
-import ChevronRight from '@react-spectrum/s2/icons/ChevronRight';
+import Chevron from '../ui-icons/Chevron';
 import CloseCircle from '@react-spectrum/s2/icons/CloseCircle';
 import {
   DisclosureStateContext,
@@ -411,18 +410,3 @@ export const ResponseStatusPanel = forwardRef(function ResponseStatusPanel(
     </RACDisclosurePanel>
   );
 });
-
-// Ideally I would use iconStyle but since it must be fully evaluated at compile time — passing a runtime variable (size prop) to it is not allowed.
-// TODO: Should iconStyle also return a runtime function?
-function Chevron({size}) {
-  switch (size) {
-    case 'S':
-      return <ChevronRight styles={iconStyle({size: 'S'})} />;
-    case 'M':
-      return <ChevronRight styles={iconStyle({size: 'M'})} />;
-    case 'L':
-      return <ChevronRight styles={iconStyle({size: 'L'})} />;
-    case 'XL':
-      return <ChevronRight styles={iconStyle({size: 'XL'})} />;
-  }
-}
diff --git a/packages/@react-spectrum/ai/ui-icons/Chevron.tsx b/packages/@react-spectrum/ai/ui-icons/Chevron.tsx
new file mode 100644
index 00000000000..1db397ac23e
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/Chevron.tsx
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import Chevron_L from './S2_ChevronSize200.svg';
+import Chevron_M from './S2_ChevronSize100.svg';
+import Chevron_S from './S2_ChevronSize75.svg';
+import Chevron_XL from './S2_ChevronSize300.svg';
+import Chevron_XS from './S2_ChevronSize50.svg';
+import Chevron_XXL from './S2_ChevronSize400.svg';
+import {ReactNode, SVGProps} from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16,
+      XS: 6,
+      S: 10
+    }
+  },
+  height: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16,
+      XS: 6,
+      S: 10
+    }
+  }
+});
+
+export default function Chevron(
+  props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL' | 'XS' | 'S'}
+): ReactNode {
+  let {size = 'M', ...otherProps} = props;
+  switch (size) {
+    case 'M':
+      return (
+        <Chevron_M {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'L':
+      return (
+        <Chevron_L {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'XL':
+      return (
+        <Chevron_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'XXL':
+      return (
+        <Chevron_XXL {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'XS':
+      return (
+        <Chevron_XS {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'S':
+      return (
+        <Chevron_S {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+  }
+}
diff --git a/packages/@react-spectrum/ai/ui-icons/Cross.tsx b/packages/@react-spectrum/ai/ui-icons/Cross.tsx
new file mode 100644
index 00000000000..96b1bf045d2
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/Cross.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import Cross_L from './S2_CrossSize200.svg';
+import Cross_M from './S2_CrossSize100.svg';
+import Cross_S from './S2_CrossSize75.svg';
+import Cross_XL from './S2_CrossSize300.svg';
+import Cross_XXL from './S2_CrossSize400.svg';
+import Cross_XXXL from './S2_CrossSize500.svg';
+import Cross_XXXXL from './S2_CrossSize600.svg';
+import {ReactNode, SVGProps} from 'react';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 8,
+      L: 10,
+      XL: 12,
+      XXL: 12,
+      XXXL: 14,
+      XXXXL: 16,
+      S: 8
+    }
+  },
+  height: {
+    size: {
+      M: 8,
+      L: 10,
+      XL: 12,
+      XXL: 12,
+      XXXL: 14,
+      XXXXL: 16,
+      S: 8
+    }
+  }
+});
+
+export default function Cross(
+  props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL' | 'XXXL' | 'XXXXL' | 'S'}
+): ReactNode {
+  let {size = 'M', ...otherProps} = props;
+  switch (size) {
+    case 'M':
+      return <Cross_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
+    case 'L':
+      return <Cross_L {...otherProps} className={(otherProps.className || '') + styles({size})} />;
+    case 'XL':
+      return <Cross_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
+    case 'XXL':
+      return (
+        <Cross_XXL {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'XXXL':
+      return (
+        <Cross_XXXL {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'XXXXL':
+      return (
+        <Cross_XXXXL {...otherProps} className={(otherProps.className || '') + styles({size})} />
+      );
+    case 'S':
+      return <Cross_S {...otherProps} className={(otherProps.className || '') + styles({size})} />;
+  }
+}
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize100.svg b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize100.svg
new file mode 100644
index 00000000000..2c9651d4a76
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize100.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+
+  <path d="m7.96531,5.17798c.01245-.05957.03369-.11743.03369-.17798s-.02124-.11841-.03369-.17798c-.0105-.05029-.0105-.10205-.03003-.15015-.02344-.05811-.06812-.10669-.10449-.15942-.02905-.04224-.04639-.08997-.08374-.12769-.00122-.00122-.00293-.00146-.00415-.00269s-.00146-.00293-.00269-.00415L3.61521.30273c-.34375-.33984-.89746-.33691-1.2373.00684s-.33691.89844.00684,1.2373l3.49536,3.45312-3.49536,3.45312c-.34375.33887-.34668.89355-.00684,1.2373.1709.17285.39648.25977.62207.25977.22168,0,.44434-.08398.61523-.25293l4.125-4.0752c.00122-.00122.00146-.00293.00269-.00415s.00293-.00146.00415-.00269c.03735-.03772.05469-.08545.08374-.12769.03638-.05273.08105-.10132.10449-.15942.01953-.0481.01953-.09985.03003-.15015Z" fill="var(--iconPrimary, #222)"/>
+  
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize200.svg b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize200.svg
new file mode 100644
index 00000000000..432a261200a
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize200.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+
+  <path d="m9.30103,6c0-.04883-.02002-.09521-.02783-.14343-.01074-.06726-.01294-.13586-.03894-.19971-.04456-.10974-.11121-.21252-.20007-.30139L4.34277.66309c-.35547-.35547-.93359-.35547-1.28906,0s-.35645.93262,0,1.28906l4.047,4.04785-4.047,4.04785c-.35645.35645-.35547.93359,0,1.28906.17773.17773.41113.2666.64453.2666s.4668-.08887.64453-.2666l4.69141-4.69238c.08887-.08887.15552-.19165.20007-.30139.026-.06384.0282-.13245.03894-.19971.00781-.04822.02783-.0946.02783-.14343Z" fill="var(--iconPrimary, #222)"/>
+
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize300.svg b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize300.svg
new file mode 100644
index 00000000000..d73f848a1e7
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize300.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+
+  <path d="m10.36133,6.32812L5.0293.99609c-.37109-.36914-.97266-.36914-1.34375,0-.37012.37109-.37012.97266,0,1.34375l4.66016,4.66016-4.66016,4.66016c-.37012.37109-.37012.97266,0,1.34375.18555.18457.42871.27734.67188.27734s.48633-.09277.67188-.27734l5.33203-5.33203c.37012-.37109.37012-.97266,0-1.34375Z" fill="var(--iconPrimary, #222)"/>
+  
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize400.svg b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize400.svg
new file mode 100644
index 00000000000..6ec8b418664
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize400.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+
+  <path d="m11.72559,7.30078L5.66992,1.24609c-.38672-.38672-1.01172-.38672-1.39844,0-.38672.38574-.38672,1.0127,0,1.39844l5.35632,5.35547-5.35632,5.35547c-.38672.38574-.38672,1.0127,0,1.39844.19336.19336.44629.29004.69922.29004s.50586-.09668.69922-.29004l6.05566-6.05469c.38672-.38574.38672-1.0127,0-1.39844Z" fill="var(--iconPrimary, #222)"/>
+
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize50.svg b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize50.svg
new file mode 100644
index 00000000000..aca7a74e41a
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize50.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="ICONS" xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6">
+  <path d="m1.98535,5.96143c-.18848,0-.36523-.07373-.49805-.20801-.13135-.1333-.20312-.30957-.20166-.49658s.0752-.3623.20801-.49316l1.78564-1.76367-1.771-1.74902c-.13281-.13135-.20703-.30664-.20801-.49365-.00146-.18701.07031-.36328.20166-.49609.13281-.13428.30957-.2085.49854-.2085.18506,0,.35986.07178.4917.20215l2.2749,2.24707c.1377.13965.20947.31592.20801.50293s-.0752.3623-.20801.49316l-2.28955,2.26172c-.13184.12988-.30664.20166-.49219.20166Z" fill="var(--iconPrimary, #222)"/>
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize75.svg b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize75.svg
new file mode 100644
index 00000000000..ab538918da1
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_ChevronSize75.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+
+  <path d="m7.4826,4.40625L3.85955.7832c-.32812-.32812-.85938-.32812-1.1875,0s-.32812.85938,0,1.1875l3.0293,3.0293-3.0293,3.0293c-.32812.32812-.32812.85938,0,1.1875.16406.16406.37891.24609.59375.24609s.42969-.08203.59375-.24609l3.62305-3.62305c.32812-.32812.32812-.85938,0-1.1875Z" fill="var(--iconPrimary, #222)"/>
+  
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_CrossSize100.svg b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize100.svg
new file mode 100644
index 00000000000..90ec9507fea
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize100.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+
+  <path d="m5.23779,4l2.45605-2.45605c.3418-.3418.3418-.89648,0-1.23828s-.89551-.3418-1.2373,0l-2.45654,2.45654L1.54346.30566C1.20166-.03613.64795-.03613.30615.30566S-.03564,1.20215.30615,1.54395l2.45605,2.45605L.30615,6.45605c-.3418.3418-.3418.89648,0,1.23828.1709.1709.39453.25586.61865.25586s.44775-.08496.61865-.25586l2.45654-2.45654,2.45654,2.45654c.1709.1709.39453.25586.61865.25586s.44775-.08496.61865-.25586c.3418-.3418.3418-.89648,0-1.23828l-2.45605-2.45605Z" fill="var(--iconPrimary, #222)"/>
+  
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_CrossSize200.svg b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize200.svg
new file mode 100644
index 00000000000..230c2d794f2
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize200.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+
+  <path d="m6.289,5l2.92242-2.92285c.35596-.35645.35596-.93359,0-1.28906-.35645-.35547-.93359-.35547-1.28906,0l-2.92236,2.92285L2.07764.78809c-.35547-.35547-.93262-.35547-1.28906,0-.35596.35547-.35596.93262,0,1.28906l2.92242,2.92285L.78857,7.92285c-.35596.35645-.35596.93359,0,1.28906.17822.17773.41113.2666.64453.2666s.4668-.08887.64453-.2666l2.92236-2.92285,2.92236,2.92285c.17773.17773.41113.2666.64453.2666s.46631-.08887.64453-.2666c.35596-.35547.35596-.93262,0-1.28906l-2.92242-2.92285Z" fill="var(--iconPrimary, #222)"/>
+
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_CrossSize300.svg b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize300.svg
new file mode 100644
index 00000000000..7450b3f6332
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize300.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+
+  <path d="m7.34222,6l3.39606-3.39648c.37061-.37012.37061-.97168,0-1.34277-.37109-.36914-.97168-.37012-1.34277.00098l-3.39551,3.396L2.60449,1.26172c-.37109-.37109-.97168-.37012-1.34277-.00098-.37061.37109-.37061.97266,0,1.34277l3.39606,3.39648-3.39606,3.39648c-.37061.37012-.37061.97168,0,1.34277.18555.18457.42822.27734.67139.27734s.48584-.09277.67139-.27832l3.39551-3.396,3.39551,3.396c.18555.18555.42822.27832.67139.27832s.48584-.09277.67139-.27734c.37061-.37109.37061-.97266,0-1.34277l-3.39606-3.39648Z" fill="var(--iconPrimary, #222)"/>
+ 
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_CrossSize400.svg b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize400.svg
new file mode 100644
index 00000000000..37d09069aa1
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize400.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+
+  <path d="m7.39844,6l3.93164-3.93164c.38623-.38574.38623-1.0127,0-1.39844-.38574-.38672-1.0127-.38672-1.39844,0l-3.93164,3.93164L2.06836.66992c-.38574-.38672-1.0127-.38672-1.39844,0-.38623.38574-.38623,1.0127,0,1.39844l3.93164,3.93164-3.93164,3.93164c-.38623.38574-.38623,1.0127,0,1.39844.19287.19336.44629.29004.69922.29004s.50635-.09668.69922-.29004l3.93164-3.93164,3.93164,3.93164c.19287.19336.44629.29004.69922.29004s.50635-.09668.69922-.29004c.38623-.38574.38623-1.0127,0-1.39844l-3.93164-3.93164Z" fill="var(--iconPrimary, #222)"/>
+
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_CrossSize500.svg b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize500.svg
new file mode 100644
index 00000000000..6ba49186e42
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize500.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+
+  <path d="m8.45709,7l4.53949-4.53906c.40186-.40234.40186-1.05469,0-1.45703-.40234-.40234-1.05469-.40234-1.45703,0l-4.53955,4.53906L2.46045,1.00391c-.40234-.40234-1.05469-.40234-1.45703,0-.40186.40234-.40186,1.05469,0,1.45703l4.53949,4.53906L1.00342,11.53906c-.40186.40234-.40186,1.05469,0,1.45703.20117.20117.46484.30176.72852.30176s.52734-.10059.72852-.30176l4.53955-4.53906,4.53955,4.53906c.20117.20117.46484.30176.72852.30176s.52734-.10059.72852-.30176c.40186-.40234.40186-1.05469,0-1.45703l-4.53949-4.53906Z" fill="var(--iconPrimary, #222)"/>
+  
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_CrossSize600.svg b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize600.svg
new file mode 100644
index 00000000000..90309719a57
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize600.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+
+  <path d="m9.51807,8.00049l5.229-5.229c.41895-.41895.41895-1.09863,0-1.51758-.41992-.41797-1.09766-.41797-1.51758,0l-5.229,5.229L2.77148,1.25391c-.41992-.41797-1.09766-.41797-1.51758,0-.41895.41895-.41895,1.09863,0,1.51758l5.229,5.229L1.25391,13.22949c-.41895.41895-.41895,1.09863,0,1.51758.20996.20898.48438.31445.75879.31445s.54883-.10547.75879-.31445l5.229-5.229,5.229,5.229c.20996.20898.48438.31445.75879.31445s.54883-.10547.75879-.31445c.41895-.41895.41895-1.09863,0-1.51758l-5.229-5.229Z" fill="var(--iconPrimary, #222)"/>
+  
+</svg>
\ No newline at end of file
diff --git a/packages/@react-spectrum/ai/ui-icons/S2_CrossSize75.svg b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize75.svg
new file mode 100644
index 00000000000..88fc585b476
--- /dev/null
+++ b/packages/@react-spectrum/ai/ui-icons/S2_CrossSize75.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+
+  <path d="m5.18787,4l2.14026-2.14062c.32764-.32812.32764-.85938-.00049-1.1875s-.85986-.32812-1.18799,0l-2.13965,2.14001L1.86035.67188c-.32812-.32812-.85986-.32812-1.18799,0s-.32812.85938-.00049,1.1875l2.14026,2.14062L.67188,6.14062c-.32764.32812-.32764.85938.00049,1.1875.16406.16406.37891.24609.59375.24609s.43018-.08203.59424-.24609l2.13965-2.14001,2.13965,2.14001c.16406.16406.37939.24609.59424.24609s.42969-.08203.59375-.24609c.32812-.32812.32812-.85938.00049-1.1875l-2.14026-2.14062Z" fill="var(--iconPrimary, #222)"/>
+  
+</svg>
\ No newline at end of file