diff --git a/apps/website/docs/apis/checkbox.md b/apps/website/docs/apis/checkbox.md
index 5875b5f..193a36c 100644
--- a/apps/website/docs/apis/checkbox.md
+++ b/apps/website/docs/apis/checkbox.md
@@ -42,7 +42,7 @@ Other props are as follows:
 The icon to display when the component is checked.
 
 - Type: `ReactNode`
-- Default: `<IconAdapter><MdCheck /></IconAdapter>`, where `<MdCheck />` is an icon component imported from [react-icons](https://www.npmjs.com/package/react-icons).
+- Default: `<MdCheck />`, where `<MdCheck />` is an icon component imported from [react-icons](https://www.npmjs.com/package/react-icons).
 
 ### `color`
 
@@ -71,7 +71,7 @@ This does not set the native input element to indeterminate due to inconsistent
 The icon to display when the component is indeterminate.
 
 - Type: `ReactNode`
-- Default: `<IconAdapter><MdHorizontalRule /></IconAdapter>`, where `<MdHorizontalRule />` is an icon component imported from [react-icons](https://www.npmjs.com/package/react-icons).
+- Default: `<MdHorizontalRule />`, where `<MdHorizontalRule />` is an icon component imported from [react-icons](https://www.npmjs.com/package/react-icons).
 
 ### `label`
 
diff --git a/apps/website/docs/apis/icon-adapter.md b/apps/website/docs/apis/icon-adapter.md
index 299ab5e..581118b 100644
--- a/apps/website/docs/apis/icon-adapter.md
+++ b/apps/website/docs/apis/icon-adapter.md
@@ -5,6 +5,8 @@ title: <IconAdapter />
 
 # IconAdapter API
 
+<DeprecatedIn version="0.3.0" />
+
 API reference docs for the React IconAdapter component.
 Learn about the props of this exported module.
 
diff --git a/apps/website/docs/components/button-group.mdx b/apps/website/docs/components/button-group.mdx
index 5820c61..78a7335 100644
--- a/apps/website/docs/components/button-group.mdx
+++ b/apps/website/docs/components/button-group.mdx
@@ -26,9 +26,7 @@ export function ButtonGroupBasics() {
         <Button>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
     </DisplayStand>
@@ -38,12 +36,7 @@ export function ButtonGroupBasics() {
 <ButtonGroupBasics />
 
 ```jsx
-import {
-  Button,
-  ButtonGroup,
-  IconAdapter,
-  IconButton,
-} from 'tailwind-joy/components';
+import { Button, ButtonGroup, IconButton } from 'tailwind-joy/components';
 import { MdSettings } from 'react-icons/md';
 
 export function ButtonGroupBasics() {
@@ -54,9 +47,7 @@ export function ButtonGroupBasics() {
         <Button>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
     </div>
@@ -279,9 +270,7 @@ export function ButtonGroupDisabled() {
         <Button>Two</Button>
         <Button>Three</Button>
         <IconButton disabled={false}>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
     </DisplayStand>
@@ -291,12 +280,7 @@ export function ButtonGroupDisabled() {
 <ButtonGroupDisabled />
 
 ```jsx
-import {
-  Button,
-  ButtonGroup,
-  IconAdapter,
-  IconButton,
-} from 'tailwind-joy/components';
+import { Button, ButtonGroup, IconButton } from 'tailwind-joy/components';
 import { MdSettings } from 'react-icons/md';
 
 export function ButtonGroupDisabled() {
@@ -307,9 +291,7 @@ export function ButtonGroupDisabled() {
         <Button>Two</Button>
         <Button>Three</Button>
         <IconButton disabled={false}>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
     </div>
@@ -330,9 +312,7 @@ export function ButtonGroupSpacing() {
         <Button disabled>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
     </DisplayStand>
@@ -342,12 +322,7 @@ export function ButtonGroupSpacing() {
 <ButtonGroupSpacing />
 
 ```jsx
-import {
-  Button,
-  ButtonGroup,
-  IconAdapter,
-  IconButton,
-} from 'tailwind-joy/components';
+import { Button, ButtonGroup, IconButton } from 'tailwind-joy/components';
 import { MdSettings } from 'react-icons/md';
 
 export function ButtonGroupSpacing() {
@@ -358,9 +333,7 @@ export function ButtonGroupSpacing() {
         <Button disabled>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
     </div>
@@ -380,9 +353,7 @@ export function ButtonGroupVertical() {
         <Button disabled>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
       <ButtonGroup orientation="vertical" variant="soft">
@@ -390,9 +361,7 @@ export function ButtonGroupVertical() {
         <Button disabled>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
       <ButtonGroup orientation="vertical" variant="outlined">
@@ -400,9 +369,7 @@ export function ButtonGroupVertical() {
         <Button disabled>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
       <ButtonGroup orientation="vertical" variant="plain">
@@ -410,9 +377,7 @@ export function ButtonGroupVertical() {
         <Button disabled>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
     </DisplayStand>
@@ -422,12 +387,7 @@ export function ButtonGroupVertical() {
 <ButtonGroupVertical />
 
 ```jsx
-import {
-  Button,
-  ButtonGroup,
-  IconAdapter,
-  IconButton,
-} from 'tailwind-joy/components';
+import { Button, ButtonGroup, IconButton } from 'tailwind-joy/components';
 import { MdSettings } from 'react-icons/md';
 
 export function ButtonGroupVertical() {
@@ -438,9 +398,7 @@ export function ButtonGroupVertical() {
         <Button disabled>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
       <ButtonGroup orientation="vertical" variant="soft">
@@ -448,9 +406,7 @@ export function ButtonGroupVertical() {
         <Button disabled>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
       <ButtonGroup orientation="vertical" variant="outlined">
@@ -458,9 +414,7 @@ export function ButtonGroupVertical() {
         <Button disabled>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
       <ButtonGroup orientation="vertical" variant="plain">
@@ -468,9 +422,7 @@ export function ButtonGroupVertical() {
         <Button disabled>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
     </div>
@@ -490,9 +442,7 @@ export function ButtonGroupStretching1() {
         <Button>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
     </DisplayStand>
@@ -502,12 +452,7 @@ export function ButtonGroupStretching1() {
 <ButtonGroupStretching1 />
 
 ```jsx
-import {
-  Button,
-  ButtonGroup,
-  IconAdapter,
-  IconButton,
-} from 'tailwind-joy/components';
+import { Button, ButtonGroup, IconButton } from 'tailwind-joy/components';
 import { MdSettings } from 'react-icons/md';
 
 export function ButtonGroupStretching1() {
@@ -518,9 +463,7 @@ export function ButtonGroupStretching1() {
         <Button>Two</Button>
         <Button>Three</Button>
         <IconButton>
-          <IconAdapter>
-            <MdSettings />
-          </IconAdapter>
+          <MdSettings />
         </IconButton>
       </ButtonGroup>
     </div>
@@ -645,5 +588,4 @@ See the documentation below for a complete reference to all of the props availab
 
 - [`<Button />`](../apis/button)
 - [`<ButtonGroup />`](../apis/button-group)
-- [`<IconAdapter />`](../apis/icon-adapter)
 - [`<IconButton />`](../apis/icon-button)
diff --git a/apps/website/docs/components/button.mdx b/apps/website/docs/components/button.mdx
index 850feba..802aac7 100644
--- a/apps/website/docs/components/button.mdx
+++ b/apps/website/docs/components/button.mdx
@@ -247,24 +247,10 @@ import { MdAdd, MdKeyboardArrowRight } from 'react-icons/md';
 export function ButtonDecorators() {
   return (
     <DisplayStand>
-      <Button
-        color="primary"
-        startDecorator={
-          <IconAdapter>
-            <MdAdd />
-          </IconAdapter>
-        }
-      >
+      <Button color="primary" startDecorator={<MdAdd />}>
         Add to cart
       </Button>
-      <Button
-        color="success"
-        endDecorator={
-          <IconAdapter>
-            <MdKeyboardArrowRight />
-          </IconAdapter>
-        }
-      >
+      <Button color="success" endDecorator={<MdKeyboardArrowRight />}>
         Go to checkout
       </Button>
     </DisplayStand>
@@ -274,30 +260,16 @@ export function ButtonDecorators() {
 <ButtonDecorators />
 
 ```jsx
-import { Button, IconAdapter } from 'tailwind-joy/components';
+import { Button } from 'tailwind-joy/components';
 import { MdAdd, MdKeyboardArrowRight } from 'react-icons/md';
 
 export function ButtonDecorators() {
   return (
     <div>
-      <Button
-        color="primary"
-        startDecorator={
-          <IconAdapter>
-            <MdAdd />
-          </IconAdapter>
-        }
-      >
+      <Button color="primary" startDecorator={<MdAdd />}>
         Add to cart
       </Button>
-      <Button
-        color="success"
-        endDecorator={
-          <IconAdapter>
-            <MdKeyboardArrowRight />
-          </IconAdapter>
-        }
-      >
+      <Button color="success" endDecorator={<MdKeyboardArrowRight />}>
         Go to checkout
       </Button>
     </div>
@@ -355,15 +327,7 @@ export function ButtonLoadingPosition() {
       <Button loading loadingPosition="start">
         Start
       </Button>
-      <Button
-        loading
-        loadingPosition="end"
-        endDecorator={
-          <IconAdapter>
-            <MdSend />
-          </IconAdapter>
-        }
-      >
+      <Button loading loadingPosition="end" endDecorator={<MdSend />}>
         End
       </Button>
     </DisplayStand>
@@ -373,7 +337,7 @@ export function ButtonLoadingPosition() {
 <ButtonLoadingPosition />
 
 ```jsx
-import { Button, IconAdapter } from 'tailwind-joy/components';
+import { Button } from 'tailwind-joy/components';
 import { MdSend } from 'react-icons/md';
 
 export function ButtonLoadingPosition() {
@@ -382,15 +346,7 @@ export function ButtonLoadingPosition() {
       <Button loading loadingPosition="start">
         Start
       </Button>
-      <Button
-        loading
-        loadingPosition="end"
-        endDecorator={
-          <IconAdapter>
-            <MdSend />
-          </IconAdapter>
-        }
-      >
+      <Button loading loadingPosition="end" endDecorator={<MdSend />}>
         End
       </Button>
     </div>
@@ -412,24 +368,16 @@ export function IconButtonBasics() {
   return (
     <DisplayStand>
       <IconButton variant="solid">
-        <IconAdapter>
-          <MdFavoriteBorder />
-        </IconAdapter>
+        <MdFavoriteBorder />
       </IconButton>
       <IconButton variant="soft">
-        <IconAdapter>
-          <MdFavoriteBorder />
-        </IconAdapter>
+        <MdFavoriteBorder />
       </IconButton>
       <IconButton variant="outlined">
-        <IconAdapter>
-          <MdFavoriteBorder />
-        </IconAdapter>
+        <MdFavoriteBorder />
       </IconButton>
       <IconButton variant="plain">
-        <IconAdapter>
-          <MdFavoriteBorder />
-        </IconAdapter>
+        <MdFavoriteBorder />
       </IconButton>
     </DisplayStand>
   );
@@ -438,43 +386,29 @@ export function IconButtonBasics() {
 <IconButtonBasics />
 
 ```jsx
-import { IconAdapter, IconButton } from 'tailwind-joy/components';
+import { IconButton } from 'tailwind-joy/components';
 import { MdFavoriteBorder } from 'react-icons/md';
 
 export function IconButtonBasics() {
   return (
     <div>
       <IconButton variant="solid">
-        <IconAdapter>
-          <MdFavoriteBorder />
-        </IconAdapter>
+        <MdFavoriteBorder />
       </IconButton>
       <IconButton variant="soft">
-        <IconAdapter>
-          <MdFavoriteBorder />
-        </IconAdapter>
+        <MdFavoriteBorder />
       </IconButton>
       <IconButton variant="outlined">
-        <IconAdapter>
-          <MdFavoriteBorder />
-        </IconAdapter>
+        <MdFavoriteBorder />
       </IconButton>
       <IconButton variant="plain">
-        <IconAdapter>
-          <MdFavoriteBorder />
-        </IconAdapter>
+        <MdFavoriteBorder />
       </IconButton>
     </div>
   );
 }
 ```
 
-:::info
-
-[`<IconAdapter />`](./icon-adapter) is an original component of Tailwind-Joy.
-
-:::
-
 ## Anatomy
 
 The Button component is composed of a single root `<button>` element that wraps around its contents:
@@ -490,5 +424,4 @@ The Button component is composed of a single root `<button>` element that wraps
 See the documentation below for a complete reference to all of the props available to the components mentioned here.
 
 - [`<Button />`](../apis/button)
-- [`<IconAdapter />`](../apis/icon-adapter)
 - [`<IconButton />`](../apis/icon-button)
diff --git a/apps/website/docs/components/checkbox.mdx b/apps/website/docs/components/checkbox.mdx
index 283a621..b1d7e8b 100644
--- a/apps/website/docs/components/checkbox.mdx
+++ b/apps/website/docs/components/checkbox.mdx
@@ -154,11 +154,7 @@ export function CheckboxIcons() {
     <DisplayStand>
       <Checkbox
         label="I have an icon when unchecked"
-        uncheckedIcon={
-          <IconAdapter>
-            <MdClose />
-          </IconAdapter>
-        }
+        uncheckedIcon={<MdClose />}
       />
     </DisplayStand>
   );
@@ -167,7 +163,7 @@ export function CheckboxIcons() {
 <CheckboxIcons />
 
 ```jsx
-import { Checkbox, IconAdapter } from 'tailwind-joy/components';
+import { Checkbox } from 'tailwind-joy/components';
 import { MdClose } from 'react-icons/md';
 
 export function CheckboxIcons() {
@@ -175,11 +171,7 @@ export function CheckboxIcons() {
     <div>
       <Checkbox
         label="I have an icon when unchecked"
-        uncheckedIcon={
-          <IconAdapter>
-            <MdClose />
-          </IconAdapter>
-        }
+        uncheckedIcon={<MdClose />}
       />
     </div>
   );
@@ -199,11 +191,7 @@ export function CheckboxAppearOnHover() {
     <DisplayStand>
       <Checkbox
         label="My unchecked icon appears on hover"
-        uncheckedIcon={
-          <IconAdapter>
-            <MdCheck />
-          </IconAdapter>
-        }
+        uncheckedIcon={<MdCheck />}
         className="[&:has(:checked)_svg]:opacity-100 [&:has(:focus-visible)_svg]:opacity-100 [&:hover_svg]:opacity-100 [&_svg]:opacity-0"
       />
     </DisplayStand>
@@ -213,7 +201,7 @@ export function CheckboxAppearOnHover() {
 <CheckboxAppearOnHover />
 
 ```jsx
-import { Checkbox, IconAdapter } from 'tailwind-joy/components';
+import { Checkbox } from 'tailwind-joy/components';
 import { MdCheck } from 'react-icons/md';
 
 export function CheckboxAppearOnHover() {
@@ -221,11 +209,7 @@ export function CheckboxAppearOnHover() {
     <div>
       <Checkbox
         label="My unchecked icon appears on hover"
-        uncheckedIcon={
-          <IconAdapter>
-            <MdCheck />
-          </IconAdapter>
-        }
+        uncheckedIcon={<MdCheck />}
         className="[&:has(:checked)_svg]:opacity-100 [&:has(:focus-visible)_svg]:opacity-100 [&:hover_svg]:opacity-100 [&_svg]:opacity-0"
       />
     </div>
@@ -518,4 +502,3 @@ Note that the actual `<input type="checkbox">` is doubly nested within `<span>`
 See the documentation below for a complete reference to all of the props available to the components mentioned here.
 
 - [`<Checkbox />`](../apis/checkbox)
-- [`<IconAdapter />`](../apis/icon-adapter)
diff --git a/apps/website/docs/components/circular-progress.mdx b/apps/website/docs/components/circular-progress.mdx
index bfc11c2..9dabcdb 100644
--- a/apps/website/docs/components/circular-progress.mdx
+++ b/apps/website/docs/components/circular-progress.mdx
@@ -180,9 +180,7 @@ export function CircularProgressChildren() {
   return (
     <DisplayStand>
       <CircularProgress color="warning">
-        <IconAdapter color="warning">
-          <MdWarning />
-        </IconAdapter>
+        <MdWarning />
       </CircularProgress>
       <CircularProgress size="lg" determinate value={66.67}>
         2 / 3
@@ -191,9 +189,7 @@ export function CircularProgressChildren() {
         color="danger"
         className="[--CircularProgress-size:80px]"
       >
-        <IconAdapter color="danger">
-          <MdReport />
-        </IconAdapter>
+        <MdReport />
       </CircularProgress>
     </DisplayStand>
   );
@@ -202,16 +198,14 @@ export function CircularProgressChildren() {
 <CircularProgressChildren />
 
 ```jsx
-import { CircularProgress, IconAdapter } from 'tailwind-joy/components';
+import { CircularProgress } from 'tailwind-joy/components';
 import { MdWarning, MdReport } from 'react-icons/md';
 
 export function CircularProgressChildren() {
   return (
     <div>
       <CircularProgress color="warning">
-        <IconAdapter color="warning">
-          <MdWarning />
-        </IconAdapter>
+        <MdWarning />
       </CircularProgress>
       <CircularProgress size="lg" determinate value={66.67}>
         2 / 3
@@ -220,9 +214,7 @@ export function CircularProgressChildren() {
         color="danger"
         className="[--CircularProgress-size:80px]"
       >
-        <IconAdapter color="danger">
-          <MdReport />
-        </IconAdapter>
+        <MdReport />
       </CircularProgress>
     </div>
   );
@@ -293,5 +285,4 @@ See the documentation below for a complete reference to all of the props availab
 
 - [`<Button />`](../apis/button)
 - [`<CircularProgress />`](../apis/circular-progress)
-- [`<IconAdapter />`](../apis/icon-adapter)
 - [`<IconButton />`](../apis/icon-button)
diff --git a/apps/website/docs/components/icon-adapter.mdx b/apps/website/docs/components/icon-adapter.mdx
index 573010f..4347e6c 100644
--- a/apps/website/docs/components/icon-adapter.mdx
+++ b/apps/website/docs/components/icon-adapter.mdx
@@ -4,6 +4,8 @@ sidebar_position: 7
 
 # Icon Adapter
 
+<DeprecatedIn version="0.3.0" />
+
 The Icon Adapter component allows you to integrate third-party icon libraries with the Tailwind-Joy component.
 
 :::info
diff --git a/apps/website/src/components/docs/DeprecatedIn.tsx b/apps/website/src/components/docs/DeprecatedIn.tsx
new file mode 100644
index 0000000..3640e51
--- /dev/null
+++ b/apps/website/src/components/docs/DeprecatedIn.tsx
@@ -0,0 +1,9 @@
+export function DeprecatedIn({ version }: { version: string }) {
+  return (
+    <p>
+      <div className="bg-joy-warning-200 text-joy-warning-700 dark:bg-joy-warning-500 dark:text-joy-common-white min-h-6 relative inline-flex max-w-max items-center justify-center gap-1 rounded-lg px-2 align-middle text-sm font-medium">
+        Deprecated in version {version}
+      </div>
+    </p>
+  );
+}
diff --git a/apps/website/src/theme/MDXComponents.js b/apps/website/src/theme/MDXComponents.js
index dc38efc..624513a 100644
--- a/apps/website/src/theme/MDXComponents.js
+++ b/apps/website/src/theme/MDXComponents.js
@@ -12,6 +12,7 @@ import {
   Radio,
 } from 'tailwind-joy/components';
 import { AvailableFrom } from '@site/src/components/docs/AvailableFrom';
+import { DeprecatedIn } from '@site/src/components/docs/DeprecatedIn';
 import { DisplayStand } from '@site/src/components/docs/DisplayStand';
 
 export default {
@@ -36,5 +37,6 @@ export default {
   // --------------------------------
 
   AvailableFrom,
+  DeprecatedIn,
   DisplayStand,
 };
diff --git a/packages/tailwind-joy/src/base/tokens.ts b/packages/tailwind-joy/src/base/tokens.ts
index c08e600..8c34d33 100644
--- a/packages/tailwind-joy/src/base/tokens.ts
+++ b/packages/tailwind-joy/src/base/tokens.ts
@@ -51,6 +51,7 @@ export const baseTokens = {
     solidDisabledColor: 'joy-neutral-400 dark:joy-neutral-500',
     solidDisabledBg: 'joy-neutral-100 dark:joy-neutral-800',
     solidDisabledBorder: '',
+    mainChannel: 'joy-primary-500 dark:joy-primary-400',
   },
   neutral: {
     plainColor: 'joy-neutral-700 dark:joy-neutral-300',
@@ -93,6 +94,7 @@ export const baseTokens = {
     solidDisabledColor: 'joy-neutral-400 dark:joy-neutral-500',
     solidDisabledBg: 'joy-neutral-100 dark:joy-neutral-800',
     solidDisabledBorder: '',
+    mainChannel: 'joy-neutral-500 dark:joy-neutral-400',
   },
   danger: {
     plainColor: 'joy-danger-500 dark:joy-danger-300',
@@ -135,6 +137,7 @@ export const baseTokens = {
     solidDisabledColor: 'joy-neutral-400 dark:joy-neutral-500',
     solidDisabledBg: 'joy-neutral-100 dark:joy-neutral-800',
     solidDisabledBorder: '',
+    mainChannel: 'joy-danger-500 dark:joy-danger-400',
   },
   success: {
     plainColor: 'joy-success-500 dark:joy-success-300',
@@ -177,6 +180,7 @@ export const baseTokens = {
     solidDisabledColor: 'joy-neutral-400 dark:joy-neutral-500',
     solidDisabledBg: 'joy-neutral-100 dark:joy-neutral-800',
     solidDisabledBorder: '',
+    mainChannel: 'joy-success-500 dark:joy-success-400',
   },
   warning: {
     plainColor: 'joy-warning-500 dark:joy-warning-300',
@@ -219,6 +223,7 @@ export const baseTokens = {
     solidDisabledColor: 'joy-neutral-400 dark:joy-neutral-500',
     solidDisabledBg: 'joy-neutral-100 dark:joy-neutral-800',
     solidDisabledBorder: '',
+    mainChannel: 'joy-warning-500 dark:joy-warning-400',
   },
   text: {
     primary: 'joy-neutral-800 dark:joy-neutral-100',
diff --git a/packages/tailwind-joy/src/components/Button.tsx b/packages/tailwind-joy/src/components/Button.tsx
index affaac7..52ad6e9 100644
--- a/packages/tailwind-joy/src/components/Button.tsx
+++ b/packages/tailwind-joy/src/components/Button.tsx
@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import type { BaseVariants, GeneratorInput } from '@/base/types';
 import { baseTokens, colorTokens } from '../base/tokens';
 import { textColor } from '../base/modifier';
+import { adaptAsIcon } from './internal/class-adapter';
 
 const { primary, neutral, danger, success, warning } = colorTokens;
 
@@ -591,6 +592,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonRootProps>(
     ref,
   ) {
     const thickness = { sm: 2, md: 3, lg: 4 }[size ?? 'md'];
+    const instanceLoadingIndicator = loadingIndicator ? (
+      adaptAsIcon(loadingIndicator, { color, size })
+    ) : (
+      <CircularProgress color={color} thickness={thickness} />
+    );
 
     return (
       <button
@@ -612,10 +618,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonRootProps>(
         {(startDecorator || (loading && loadingPosition === 'start')) && (
           <span className={buttonStartDecoratorVariants()}>
             {loading
-              ? loadingIndicator ?? (
-                  <CircularProgress color={color} thickness={thickness} />
-                )
-              : startDecorator}
+              ? instanceLoadingIndicator
+              : adaptAsIcon(startDecorator, { color, size })}
           </span>
         )}
         {children}
@@ -626,18 +630,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonRootProps>(
               variant,
             })}
           >
-            {loadingIndicator ?? (
-              <CircularProgress color={color} thickness={thickness} />
-            )}
+            {instanceLoadingIndicator}
           </span>
         )}
         {(endDecorator || (loading && loadingPosition === 'end')) && (
           <span className={buttonEndDecoratorVariants()}>
             {loading
-              ? loadingIndicator ?? (
-                  <CircularProgress color={color} thickness={thickness} />
-                )
-              : endDecorator}
+              ? instanceLoadingIndicator
+              : adaptAsIcon(endDecorator, { color, size })}
           </span>
         )}
       </button>
diff --git a/packages/tailwind-joy/src/components/Checkbox.tsx b/packages/tailwind-joy/src/components/Checkbox.tsx
index d8054a1..65e7fe5 100644
--- a/packages/tailwind-joy/src/components/Checkbox.tsx
+++ b/packages/tailwind-joy/src/components/Checkbox.tsx
@@ -15,7 +15,7 @@ import {
   textColor,
   toVariableClass,
 } from '../base/modifier';
-import { IconAdapter } from './IconAdapter';
+import { adaptAsIcon } from './internal/class-adapter';
 
 const checkboxRootVariants = (
   props?: BaseVariants & {
@@ -326,18 +326,17 @@ export const Checkbox = forwardRef<HTMLSpanElement, CheckboxRootProps>(
           {disableIcon
             ? null
             : indeterminate
-            ? indeterminateIcon ?? (
-                <IconAdapter color={instanceColor} size={size}>
-                  <MdHorizontalRule />
-                </IconAdapter>
-              )
+            ? indeterminateIcon
+              ? adaptAsIcon(indeterminateIcon, { color: instanceColor, size })
+              : adaptAsIcon(<MdHorizontalRule />, {
+                  color: instanceColor,
+                  size,
+                })
             : instanceChecked
-            ? checkedIcon ?? (
-                <IconAdapter color={instanceColor} size={size}>
-                  <MdCheck />
-                </IconAdapter>
-              )
-            : uncheckedIcon}
+            ? checkedIcon
+              ? adaptAsIcon(checkedIcon, { color: instanceColor, size })
+              : adaptAsIcon(<MdCheck />, { color: instanceColor, size })
+            : adaptAsIcon(uncheckedIcon, { color: instanceColor, size })}
         </span>
         {label && (
           <label
diff --git a/packages/tailwind-joy/src/components/CircularProgress.tsx b/packages/tailwind-joy/src/components/CircularProgress.tsx
index 2f95179..7264e8b 100644
--- a/packages/tailwind-joy/src/components/CircularProgress.tsx
+++ b/packages/tailwind-joy/src/components/CircularProgress.tsx
@@ -6,6 +6,7 @@ import type { BaseVariants, GeneratorInput } from '@/base/types';
 import { r } from '../base/alias';
 import { baseTokens, colorTokens } from '../base/tokens';
 import { addPrefix, toVariableClass } from '../base/modifier';
+import { adaptAsIcon } from './internal/class-adapter';
 
 const { primary, neutral, danger, success, warning } = colorTokens;
 
@@ -437,7 +438,7 @@ export const CircularProgress = forwardRef<
         <circle className={circularProgressTrackVariants()} />
         <circle className={circularProgressProgressVariants({ determinate })} />
       </svg>
-      {children}
+      {adaptAsIcon(children, { color, size })}
     </span>
   );
 });
diff --git a/packages/tailwind-joy/src/components/IconAdapter.tsx b/packages/tailwind-joy/src/components/IconAdapter.tsx
index 72c5f21..c542190 100644
--- a/packages/tailwind-joy/src/components/IconAdapter.tsx
+++ b/packages/tailwind-joy/src/components/IconAdapter.tsx
@@ -1,48 +1,48 @@
 import type { ComponentProps } from 'react';
 import { isValidElement } from 'react';
-import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import type { BaseVariants, GeneratorInput } from '@/base/types';
+import { baseTokens } from '../base/tokens';
 
-const childrenPlaceholderVariants = cva('contents');
+const childrenPlaceholderVariants = (props?: BaseVariants) => {
+  return 'contents';
+};
 
-const iconAdapterRootVariants = cva(
-  [
-    'tj-icon-adapter-root',
-    'm-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none',
-  ],
-  {
-    variants: {
-      color: {
-        primary:
-          '[color:var(--Icon-color,var(--joy-primary-500))] dark:[color:var(--Icon-color,var(--joy-primary-400))]',
-        neutral:
-          '[color:var(--Icon-color,var(--joy-neutral-500))] dark:[color:var(--Icon-color,var(--joy-neutral-400))]',
-        danger:
-          '[color:var(--Icon-color,var(--joy-danger-500))] dark:[color:var(--Icon-color,var(--joy-danger-400))]',
-        success:
-          '[color:var(--Icon-color,var(--joy-success-500))] dark:[color:var(--Icon-color,var(--joy-success-400))]',
-        warning:
-          '[color:var(--Icon-color,var(--joy-warning-500))] dark:[color:var(--Icon-color,var(--joy-warning-400))]',
-      },
-      size: {
-        sm: '[font-size:var(--Icon-fontSize,1.25rem)]',
-        md: '[font-size:var(--Icon-fontSize,1.5rem)]',
-        lg: '[font-size:var(--Icon-fontSize,1.875rem)]',
-      },
-    },
-    defaultVariants: {
-      color: 'neutral',
-      size: 'md',
-    },
-  },
-);
+const iconAdapterRootVariants = (
+  props?: Pick<BaseVariants, 'color' | 'size'>,
+) => {
+  const { color = 'neutral', size = 'md' } = props ?? {};
+
+  return twMerge(
+    clsx([
+      'tj-icon-adapter-root',
+      'select-none',
+      'm-[var(--Icon-margin)]',
+      'w-[1em]',
+      'h-[1em]',
+      'inline-block',
+      'shrink-0',
+      size === 'sm' && '[font-size:var(--Icon-fontSize,1.25rem)]',
+      size === 'md' && '[font-size:var(--Icon-fontSize,1.5rem)]',
+      size === 'lg' && '[font-size:var(--Icon-fontSize,1.875rem)]',
+      baseTokens[color].mainChannel.replace(
+        /(joy-[a-z0-9]+-[a-z0-9]+)/g,
+        '[color:var(--Icon-color,var(--$1))]',
+      ),
+    ]),
+  );
+};
 
-interface IconAdapterRootVariants extends Omit<BaseVariants, 'variant'> {}
+interface IconAdapterRootVariants
+  extends Pick<BaseVariants, 'color' | 'size'> {}
 
 type IconAdapterRootProps = Pick<ComponentProps<'svg'>, 'children'> &
   IconAdapterRootVariants;
 
+/**
+ * @deprecated
+ */
 export function IconAdapter({
   children,
   color = 'neutral',
@@ -54,8 +54,7 @@ export function IconAdapter({
 
   if (
     typeof children.type === 'symbol' &&
-    // @ts-ignore
-    children.type.toString() === 'Symbol(react.fragment)'
+    String(children.type) === 'Symbol(react.fragment)'
   ) {
     if (!isValidElement(children.props.children)) {
       return <span className={childrenPlaceholderVariants()}>{children}</span>;
diff --git a/packages/tailwind-joy/src/components/IconButton.tsx b/packages/tailwind-joy/src/components/IconButton.tsx
index e906018..335b042 100644
--- a/packages/tailwind-joy/src/components/IconButton.tsx
+++ b/packages/tailwind-joy/src/components/IconButton.tsx
@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import type { BaseVariants, GeneratorInput } from '@/base/types';
 import { baseTokens, colorTokens } from '../base/tokens';
 import { textColor } from '../base/modifier';
+import { adaptAsIcon } from './internal/class-adapter';
 
 const { primary, neutral, danger, success, warning } = colorTokens;
 
@@ -524,7 +525,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonRootProps>(
             )}
           </span>
         ) : (
-          children
+          adaptAsIcon(children, { color, size })
         )}
       </button>
     );
diff --git a/packages/tailwind-joy/src/components/internal/class-adapter.ts b/packages/tailwind-joy/src/components/internal/class-adapter.ts
new file mode 100644
index 0000000..15147db
--- /dev/null
+++ b/packages/tailwind-joy/src/components/internal/class-adapter.ts
@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+import { cloneElement, isValidElement } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import type { BaseVariants, GeneratorInput } from '@/base/types';
+import { baseTokens } from '../../base/tokens';
+
+export function adaptClassName(node: ReactNode, className: string): ReactNode {
+  if (!isValidElement(node) || 'children' in node) {
+    return node;
+  }
+
+  return cloneElement(node, {
+    // @ts-expect-error
+    className: twMerge(
+      // @ts-expect-error
+      node.props.className ?? '',
+      className,
+    ),
+  });
+}
+
+const iconClassVariants = (props?: Pick<BaseVariants, 'color' | 'size'>) => {
+  const { color = 'neutral', size = 'md' } = props ?? {};
+
+  return twMerge(
+    clsx([
+      'select-none',
+      'm-[var(--Icon-margin)]',
+      'w-[1em]',
+      'h-[1em]',
+      'inline-block',
+      'shrink-0',
+      size === 'sm' && '[font-size:var(--Icon-fontSize,1.25rem)]',
+      size === 'md' && '[font-size:var(--Icon-fontSize,1.5rem)]',
+      size === 'lg' && '[font-size:var(--Icon-fontSize,1.875rem)]',
+      baseTokens[color].mainChannel.replace(
+        /(joy-[a-z0-9]+-[a-z0-9]+)/g,
+        '[color:var(--Icon-color,var(--$1))]',
+      ),
+    ]),
+  );
+};
+
+/**
+ * A shortcut for the `adaptClassName` function.
+ */
+export function adaptAsIcon(
+  node: ReactNode,
+  props?: Pick<BaseVariants, 'color' | 'size'>,
+): ReactNode {
+  return adaptClassName(node, iconClassVariants(props));
+}
+
+export const generatorInputs: GeneratorInput[] = [
+  {
+    generatorFn: iconClassVariants,
+    variants: {
+      color: ['primary', 'neutral', 'danger', 'success', 'warning'],
+      size: ['sm', 'md', 'lg'],
+    },
+  },
+];
diff --git a/packages/tailwind-joy/src/plugins/safelist-generator.ts b/packages/tailwind-joy/src/plugins/safelist-generator.ts
index cc05205..535d9ed 100644
--- a/packages/tailwind-joy/src/plugins/safelist-generator.ts
+++ b/packages/tailwind-joy/src/plugins/safelist-generator.ts
@@ -1,4 +1,5 @@
 import type { GeneratorInput } from '../base/types';
+import { generatorInputs as adaptedIconClassNameGeneratorInputs } from '../components/internal/class-adapter';
 import { generatorInputs as buttonClassNameGeneratorInputs } from '../components/Button';
 import { generatorInputs as buttonGroupClassNameGeneratorInputs } from '../components/ButtonGroup';
 import { generatorInputs as checkboxClassNameGeneratorInputs } from '../components/Checkbox';
@@ -11,6 +12,7 @@ import { generatorInputs as radioClassNameGeneratorInputs } from '../components/
 const SPACE = ' ';
 
 const inputs: GeneratorInput[] = [
+  ...adaptedIconClassNameGeneratorInputs,
   ...buttonClassNameGeneratorInputs,
   ...buttonGroupClassNameGeneratorInputs,
   ...checkboxClassNameGeneratorInputs,