diff --git a/.changeset/mosaic-icon-stylex.md b/.changeset/mosaic-icon-stylex.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/mosaic-icon-stylex.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/swingset/src/stories/icon.mdx b/packages/swingset/src/stories/icon.mdx
index 6352bd262d7..9d7ab6bb236 100644
--- a/packages/swingset/src/stories/icon.mdx
+++ b/packages/swingset/src/stories/icon.mdx
@@ -2,7 +2,9 @@ import * as IconStories from './icon.stories';
 
 # Icon
 
-Icon renders a named glyph from Mosaic's icon set. It sizes through the `size` variant and inherits color from `currentColor`. Any glyph can be swapped per name through `appearance.icons` on `MosaicProvider`. Mosaic's styling applies to an override just like the built-in glyph — so swapped icons stay visually consistent — and the override also receives `data-cl-slot="icon"` for targeting.
+Icon renders a named glyph from Mosaic's icon set. It sizes through the `size` variant and inherits color from `currentColor`. Any glyph can be swapped per name through `appearance.icons` on `MosaicProvider`. Mosaic's styling applies to an override just like the built-in glyph — so swapped icons stay visually consistent — and the override also carries the `.cl-icon` class and `data-size` attribute for targeting.
+
+Set `placement` when the icon sits beside text inside a container. It adds no styling of its own; it reflects `data-icon="inline-start"` or `data-icon="inline-end"` so the container can react — a `Button`, for example, tightens its padding on the side the icon sits with `:has([data-icon='inline-end'])`. The values are the CSS logical directions, so they follow the writing mode rather than naming a physical edge. Leave it unset for a standalone icon.
 
 ## Playground
 
@@ -15,7 +17,10 @@ Icon renders a named glyph from Mosaic's icon set. It sizes through the `size` v
 
 <PropTable
   meta={IconStories.meta}
-  extra={[{ name: 'name', type: 'IconName' }]}
+  extra={[
+    { name: 'name', type: 'IconName' },
+    { name: 'placement', type: "'inline-start' | 'inline-end'" },
+  ]}
 />
 
 ## Usage
@@ -46,7 +51,7 @@ Icon renders a named glyph from Mosaic's icon set. It sizes through the `size` v
 
 ### Overriding a glyph
 
-Pass `appearance.icons` to `MosaicProvider` to replace a glyph by name. The override is a function receiving the resolved props — Mosaic's sizing/color `className` and `data-cl-slot` — which you spread onto your own element. Because Mosaic's styling applies to the override too, the replacement only supplies its `viewBox` and paths.
+Pass `appearance.icons` to `MosaicProvider` to replace a glyph by name. The override is a plain element; Mosaic clones it with the resolved sizing `className` and `data-size`, keeping any class the element already had. The replacement only supplies its `viewBox` and paths.
 
 <Story
   name='Override'
diff --git a/packages/swingset/src/stories/icon.stories.tsx b/packages/swingset/src/stories/icon.stories.tsx
index d52091a8777..7dcd93ae7b2 100644
--- a/packages/swingset/src/stories/icon.stories.tsx
+++ b/packages/swingset/src/stories/icon.stories.tsx
@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import type { IconProps } from '@clerk/ui/mosaic/components/icon';
-import { Icon, iconRecipe } from '@clerk/ui/mosaic/components/icon';
+import { Icon } from '@clerk/ui/mosaic/components/icon';
 import { iconRegistry } from '@clerk/ui/mosaic/icons/registry';
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
 
@@ -13,8 +13,16 @@ export { default as __source } from './icon.stories?raw';
 export const meta: StoryMeta = {
   group: 'Components',
   title: 'Icon',
-  source: 'packages/ui/src/mosaic/components/icon.tsx',
-  styles: iconRecipe,
+  source: 'packages/ui/src/mosaic/components/icon/icon.tsx',
+  styleEngine: 'stylex',
+  styles: {
+    _variants: {
+      size: { sm: {}, md: {}, lg: {} },
+    },
+    _defaultVariants: {
+      size: 'md',
+    },
+  },
 };
 
 // Story functions accept Record<string,unknown> (knob values) and cast to IconProps.
@@ -78,8 +86,8 @@ export function Override() {
   return (
     <MosaicProvider
       appearance={{
-        // Overrides are elements now, not render functions: Mosaic injects its sizing className and
-        // `data-cl-slot` into the element via cloneElement, so the replacement only needs its viewBox
+        // Overrides are elements, not render functions: Mosaic injects its sizing className and
+        // `data-size` into the element via cloneElement, so the replacement only needs its viewBox
         // + paths. Passing an element (vs a function) also lets overrides be supplied from a Server
         // Component, since elements serialize across the RSC boundary.
         icons: {
diff --git a/packages/ui/src/mosaic/__tests__/icon.test.tsx b/packages/ui/src/mosaic/__tests__/icon.test.tsx
deleted file mode 100644
index 072158d9ab8..00000000000
--- a/packages/ui/src/mosaic/__tests__/icon.test.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import { describe, expect, it } from 'vitest';
-
-import type { MosaicAppearance } from '../appearance';
-import { Icon } from '../components/icon';
-import { MosaicProvider } from '../MosaicProvider';
-
-const wrap = (ui: React.ReactElement, appearance?: MosaicAppearance) =>
-  render(<MosaicProvider appearance={appearance}>{ui}</MosaicProvider>);
-
-/** Concatenates every inserted Emotion `<style>` rule (whitespace-stripped) for substring assertions. */
-const insertedStyles = () =>
-  Array.from(document.querySelectorAll('style'))
-    .map(el => el.textContent ?? '')
-    .join('')
-    .replace(/\s+/g, '');
-
-describe('Icon', () => {
-  it('renders the default glyph for a known name', () => {
-    const { container } = wrap(<Icon name='chevron-right' />);
-    const svg = container.querySelector('svg[data-cl-slot="icon"]');
-    expect(svg).not.toBeNull();
-    expect(svg?.querySelector('path')).not.toBeNull();
-  });
-
-  it('renders the override element instead of the default glyph', () => {
-    const appearance: MosaicAppearance = {
-      icons: { 'chevron-right': <span data-testid='override' /> },
-    };
-    const { getByTestId, container } = wrap(<Icon name='chevron-right' />, appearance);
-    expect(getByTestId('override')).not.toBeNull();
-    // The default svg glyph is not rendered when overridden.
-    expect(container.querySelector('svg')).toBeNull();
-  });
-
-  it('injects Mosaic styling (className) and the slot attr into the override element', () => {
-    const appearance: MosaicAppearance = {
-      icons: { 'chevron-right': <span data-testid='override' /> },
-    };
-    const { getByTestId } = wrap(
-      <Icon
-        name='chevron-right'
-        size='lg'
-      />,
-      appearance,
-    );
-    const el = getByTestId('override');
-    expect(el.className).toBeTruthy();
-    expect(el.getAttribute('data-cl-slot')).toBe('icon');
-  });
-
-  it("merges the override element's own className with Mosaic's rather than clobbering it", () => {
-    const appearance: MosaicAppearance = {
-      icons: {
-        'chevron-right': (
-          <span
-            data-testid='override'
-            className='consumer-glyph'
-          />
-        ),
-      },
-    };
-    const { getByTestId } = wrap(<Icon name='chevron-right' />, appearance);
-    const el = getByTestId('override');
-    expect(el.classList.contains('consumer-glyph')).toBe(true);
-    // Mosaic's serialized class is applied alongside the consumer's, not in place of it.
-    expect(el.classList.length).toBeGreaterThan(1);
-  });
-
-  it('forwards svg props from the Icon call site onto the override element', () => {
-    const appearance: MosaicAppearance = {
-      icons: { 'chevron-right': <span data-testid='override' /> },
-    };
-    const { getByTestId } = wrap(
-      <Icon
-        name='chevron-right'
-        aria-label='Next'
-      />,
-      appearance,
-    );
-    expect(getByTestId('override').getAttribute('aria-label')).toBe('Next');
-  });
-
-  it('applies appearance.elements.icon styling to an overridden glyph (consistent with the built-in)', () => {
-    const appearance: MosaicAppearance = {
-      elements: { icon: { opacity: 0.5 } },
-      icons: { 'chevron-right': <span data-testid='override' /> },
-    };
-    const { getByTestId } = wrap(<Icon name='chevron-right' />, appearance);
-    // The override carries a serialized Mosaic class...
-    expect(getByTestId('override').className).toBeTruthy();
-    // ...and that class actually applies the appearance.elements.icon styling.
-    expect(insertedStyles()).toContain('opacity:0.5');
-  });
-
-  it('falls through to the default when a different name is overridden', () => {
-    const appearance: MosaicAppearance = {
-      icons: { 'chevron-left': <span data-testid='override' /> },
-    };
-    const { container, queryByTestId } = wrap(<Icon name='chevron-right' />, appearance);
-    expect(queryByTestId('override')).toBeNull();
-    expect(container.querySelector('svg[data-cl-slot="icon"]')).not.toBeNull();
-  });
-});
diff --git a/packages/ui/src/mosaic/components/icon.tsx b/packages/ui/src/mosaic/components/icon.tsx
deleted file mode 100644
index fdd61f8f65a..00000000000
--- a/packages/ui/src/mosaic/components/icon.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { ClassNames } from '@emotion/react';
-import React from 'react';
-
-import { useMosaicIcons } from '../appearance';
-import type { IconName } from '../icons/registry';
-import { iconRegistry } from '../icons/registry';
-import type { RecipeVariantProps } from '../slot-recipe';
-import { defineSlotRecipe, useRecipe } from '../slot-recipe';
-
-/** Mosaic icon slot recipe — sizes the glyph; color comes from `currentColor`. */
-export const iconRecipe = defineSlotRecipe(theme => ({
-  slot: 'icon',
-  base: { display: 'inline-block', flexShrink: 0 },
-  variants: {
-    size: {
-      sm: { width: theme.spacing(3.5), height: theme.spacing(3.5) },
-      md: { width: theme.spacing(4), height: theme.spacing(4) },
-      lg: { width: theme.spacing(5), height: theme.spacing(5) },
-    },
-  },
-  defaultVariants: { size: 'md' },
-}));
-
-declare module '../registry' {
-  interface MosaicSlotRegistry {
-    icon: true;
-  }
-}
-
-/** Props for the Icon component: svg attributes, recipe variants, and the required glyph `name`. */
-export type IconProps = React.ComponentPropsWithRef<'svg'> & RecipeVariantProps<typeof iconRecipe> & { name: IconName };
-
-/**
- * Renders a Mosaic icon by name. The glyph can be swapped per-name via `appearance.icons` on
- * `MosaicProvider`. Mosaic's recipe styling (sizing/color) is applied to *both* the built-in glyph and
- * an override so they stay visually consistent — the override element is cloned with the resolved
- * `className` (merged with its own), `data-cl-slot="icon"`, and forwarded props.
- */
-export const Icon = React.forwardRef<SVGSVGElement, IconProps>(function MosaicIcon({ name, size, sx, ...rest }, ref) {
-  const { root } = useRecipe(iconRecipe, { variants: { size }, sx });
-  const override = useMosaicIcons()[name];
-
-  if (override) {
-    // The override is authored in a consumer file without the Emotion jsx pragma, so its own `css`
-    // prop would be ignored. Serialize Mosaic's styling to a real `className` (via the Mosaic cache)
-    // and inject it, plus `data-cl-slot` and the forwarded svg props, into the override element with
-    // cloneElement, so it styles exactly like the built-in glyph. Cloning an element (rather than
-    // calling a render fn) is what lets overrides be plain elements, which unlike functions serialize
-    // across the RSC boundary.
-    //
-    // Icon's `ref` is intentionally not forwarded to the override. It is typed for the built-in
-    // `SVGSVGElement`, but an override can be any element, so forwarding would mistype it (or drop it
-    // for a non-forwardRef component). A consumer that needs a ref puts one on the element they author
-    // (`icons: { name: <svg ref={r} /> }`); cloneElement preserves it, since we do not set `ref` here.
-    return (
-      <ClassNames>
-        {emotion => {
-          // SAFETY: React 18 types `ReactElement.props` as `any`; we only read an optional className
-          // to merge with Mosaic's so a consumer's own class survives. cloneElement re-validates the
-          // merged props against the element's real type at render, surfacing any mismatch there.
-          const overrideClassName = (override.props as { className?: string }).className;
-          return React.cloneElement(override, {
-            ...rest,
-            'data-cl-slot': root['data-cl-slot'],
-            className: emotion.cx(emotion.css(root.css), root.className, overrideClassName),
-          });
-        }}
-      </ClassNames>
-    );
-  }
-
-  const Glyph = iconRegistry[name];
-  return (
-    <Glyph
-      ref={ref}
-      {...root}
-      {...rest}
-    />
-  );
-});
diff --git a/packages/ui/src/mosaic/components/icon/icon.styles.ts b/packages/ui/src/mosaic/components/icon/icon.styles.ts
new file mode 100644
index 00000000000..5fa0676e168
--- /dev/null
+++ b/packages/ui/src/mosaic/components/icon/icon.styles.ts
@@ -0,0 +1,13 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { space } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  base: { display: 'inline-block', flexShrink: 0 },
+});
+
+export const sizes = stylex.create({
+  sm: { height: space['3.5'], width: space['3.5'] },
+  md: { height: space['4'], width: space['4'] },
+  lg: { height: space['5'], width: space['5'] },
+});
diff --git a/packages/ui/src/mosaic/components/icon/icon.test.tsx b/packages/ui/src/mosaic/components/icon/icon.test.tsx
new file mode 100644
index 00000000000..8da9ee9dfd5
--- /dev/null
+++ b/packages/ui/src/mosaic/components/icon/icon.test.tsx
@@ -0,0 +1,153 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import type { MosaicAppearance } from '../../appearance';
+import { MosaicProvider } from '../../MosaicProvider';
+import { Icon } from './icon';
+
+const wrap = (ui: React.ReactElement, appearance?: MosaicAppearance) =>
+  render(<MosaicProvider appearance={appearance}>{ui}</MosaicProvider>);
+
+const override: MosaicAppearance = {
+  icons: { 'chevron-right': <span data-testid='override' /> },
+};
+
+describe('Mosaic Icon', () => {
+  it('renders the default glyph for a known name', () => {
+    const { container } = wrap(<Icon name='chevron-right' />);
+    const svg = container.querySelector('svg.cl-icon');
+    expect(svg).not.toBeNull();
+    expect(svg?.querySelector('path')).not.toBeNull();
+  });
+
+  it('applies the default size when none is passed', () => {
+    const { container } = wrap(<Icon name='chevron-right' />);
+    expect(container.querySelector('svg')).toHaveAttribute('data-size', 'md');
+  });
+
+  it('wires the size variant and consumer className/style through to the element', () => {
+    const { container } = wrap(
+      <Icon
+        name='chevron-right'
+        size='lg'
+        className='my-icon'
+        style={{ marginTop: '8px' }}
+      />,
+    );
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('data-size', 'lg');
+    expect(svg).toHaveClass('cl-icon', 'my-icon');
+    expect(svg).toHaveStyle({ marginTop: '8px' });
+  });
+
+  it('emits no placement attribute when the icon is not placed', () => {
+    const { container } = wrap(<Icon name='chevron-right' />);
+    expect(container.querySelector('svg')).not.toHaveAttribute('data-icon');
+  });
+
+  it('reflects placement as data-icon so a container can select on it', () => {
+    const { container } = wrap(
+      <Icon
+        name='chevron-right'
+        placement='inline-end'
+      />,
+    );
+    expect(container.querySelector('svg')).toHaveAttribute('data-icon', 'inline-end');
+  });
+
+  it('does not leak the placement prop itself to the DOM', () => {
+    const { container } = wrap(
+      <Icon
+        name='chevron-right'
+        placement='inline-start'
+      />,
+    );
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('data-icon', 'inline-start');
+    expect(svg).not.toHaveAttribute('placement');
+  });
+
+  it('reflects placement on an override element too', () => {
+    const { getByTestId } = wrap(
+      <Icon
+        name='chevron-right'
+        placement='inline-end'
+      />,
+      override,
+    );
+    expect(getByTestId('override')).toHaveAttribute('data-icon', 'inline-end');
+  });
+
+  it('renders the override element instead of the default glyph', () => {
+    const { getByTestId, container } = wrap(<Icon name='chevron-right' />, override);
+    expect(getByTestId('override')).not.toBeNull();
+    expect(container.querySelector('svg')).toBeNull();
+  });
+
+  it('applies the same slot class and size variant to an override as to the built-in glyph', () => {
+    const { getByTestId } = wrap(
+      <Icon
+        name='chevron-right'
+        size='lg'
+      />,
+      override,
+    );
+    const el = getByTestId('override');
+    expect(el).toHaveClass('cl-icon');
+    expect(el).toHaveAttribute('data-size', 'lg');
+  });
+
+  it("merges the override element's own className rather than clobbering it", () => {
+    const { getByTestId } = wrap(
+      <Icon
+        name='chevron-right'
+        className='call-site'
+      />,
+      {
+        icons: {
+          'chevron-right': (
+            <span
+              data-testid='override'
+              className='consumer-glyph'
+            />
+          ),
+        },
+      },
+    );
+    expect(getByTestId('override')).toHaveClass('cl-icon', 'call-site', 'consumer-glyph');
+  });
+
+  it('forwards svg props from the Icon call site onto the override element', () => {
+    const { getByTestId } = wrap(
+      <Icon
+        name='chevron-right'
+        aria-label='Next'
+      />,
+      override,
+    );
+    expect(getByTestId('override')).toHaveAttribute('aria-label', 'Next');
+  });
+
+  it('falls through to the default when a different name is overridden', () => {
+    const { container, queryByTestId } = wrap(<Icon name='chevron-right' />, {
+      icons: { 'chevron-left': <span data-testid='override' /> },
+    });
+    expect(queryByTestId('override')).toBeNull();
+    expect(container.querySelector('svg.cl-icon')).not.toBeNull();
+  });
+
+  it('forwards arbitrary props and the ref to the built-in glyph', () => {
+    const ref = React.createRef<SVGSVGElement>();
+    const { container } = wrap(
+      <Icon
+        ref={ref}
+        name='chevron-right'
+        aria-label='Next'
+      />,
+    );
+    const svg = container.querySelector('svg');
+    expect(ref.current).toBe(svg);
+    expect(svg).toHaveAttribute('aria-label', 'Next');
+  });
+});
diff --git a/packages/ui/src/mosaic/components/icon/icon.tsx b/packages/ui/src/mosaic/components/icon/icon.tsx
new file mode 100644
index 00000000000..d2c62aec434
--- /dev/null
+++ b/packages/ui/src/mosaic/components/icon/icon.tsx
@@ -0,0 +1,58 @@
+import * as stylex from '@stylexjs/stylex';
+import React from 'react';
+
+import { useMosaicIcons } from '../../appearance';
+import type { IconName } from '../../icons/registry';
+import { iconRegistry } from '../../icons/registry';
+import { mergeStyleProps, themeProps } from '../../props';
+import { sizes, styles } from './icon.styles';
+
+export interface IconProps extends React.ComponentPropsWithRef<'svg'> {
+  name: IconName;
+  size?: 'sm' | 'md' | 'lg';
+  placement?: 'inline-start' | 'inline-end';
+}
+
+/**
+ * Renders a Mosaic icon by name. The glyph can be swapped per-name via `appearance.icons` on
+ * `MosaicProvider`; Mosaic's sizing is applied to the override exactly as it is to the built-in
+ * glyph, so the two stay visually consistent.
+ *
+ * `placement` marks the icon as leading or trailing content within a container. It applies no
+ * style here — it reflects an attribute the container styles against, so a `Button` can tighten
+ * the padding on whichever side the icon sits. The values are the CSS logical directions, so they
+ * follow the writing mode rather than naming a physical edge.
+ */
+export const Icon = React.forwardRef<SVGSVGElement, IconProps>(function MosaicIcon(
+  { name, size = 'md', placement, className, style, ...rest },
+  ref,
+) {
+  const override = useMosaicIcons()[name];
+  // The placement axis reflects as `data-icon`, not `data-placement`, so a container selects the
+  // child by what it is: `:has([data-icon='inline-end'])` can't match some other placed descendant.
+  const props = mergeStyleProps(
+    themeProps('icon', { size, icon: placement }),
+    stylex.props(styles.base, sizes[size]),
+    className,
+    style,
+  );
+
+  if (override) {
+    // `ref` is deliberately not forwarded: it is typed for the built-in `SVGSVGElement`, but an
+    // override can be any element. A consumer that needs one puts it on the element they author.
+    //
+    // SAFETY: React 18 types `ReactElement.props` as `any`; we only read an optional className.
+    // cloneElement re-validates the merged props against the element's real type at render.
+    const overrideClassName = (override.props as { className?: string }).className;
+    return React.cloneElement(override, { ...rest, ...mergeStyleProps(props, overrideClassName) });
+  }
+
+  const Glyph = iconRegistry[name];
+  return (
+    <Glyph
+      ref={ref}
+      {...props}
+      {...rest}
+    />
+  );
+});
diff --git a/packages/ui/src/mosaic/components/icon/index.ts b/packages/ui/src/mosaic/components/icon/index.ts
new file mode 100644
index 00000000000..77a5eccba3b
--- /dev/null
+++ b/packages/ui/src/mosaic/components/icon/index.ts
@@ -0,0 +1,2 @@
+export { Icon } from './icon';
+export type { IconProps } from './icon';
diff --git a/packages/ui/src/mosaic/styles/index.ts b/packages/ui/src/mosaic/styles/index.ts
index 853cded8be2..981de45d9ee 100644
--- a/packages/ui/src/mosaic/styles/index.ts
+++ b/packages/ui/src/mosaic/styles/index.ts
@@ -8,6 +8,8 @@ export { Button } from '../components/button';
 export type { ButtonProps } from '../components/button';
 export { Heading, HeadingContext } from '../components/heading';
 export type { HeadingProps } from '../components/heading';
+export { Icon } from '../components/icon';
+export type { IconProps } from '../components/icon';
 export { Text, TextContext } from '../components/text';
 export type { TextProps } from '../components/text';