diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index 7377ad497d..fffc31b488 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -19,6 +19,7 @@ import { Button } from './Button';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { ButtonProps } from './types';
+import { Icon } from '../Icon';
 
 const meta = {
   title: 'Components/Button',
@@ -55,10 +56,10 @@ export const Variants: Story = {
   },
   render: () => (
     <Flex align="center">
-      <Button iconStart="cloud" variant="primary">
+      <Button iconStart={<Icon name="cloud" />} variant="primary">
         Button
       </Button>
-      <Button iconStart="cloud" variant="secondary">
+      <Button iconStart={<Icon name="cloud" />} variant="secondary">
         Button
       </Button>
     </Flex>
@@ -71,8 +72,12 @@ export const Sizes: Story = {
   },
   render: () => (
     <Flex align="center">
-      <Button size="medium">Medium</Button>
-      <Button size="small">Small</Button>
+      <Button size="medium" iconStart={<Icon name="cloud" />}>
+        Medium
+      </Button>
+      <Button size="small" iconStart={<Icon name="cloud" />}>
+        Small
+      </Button>
     </Flex>
   ),
 };
@@ -83,9 +88,13 @@ export const WithIcons: Story = {
   },
   render: args => (
     <Flex align="center">
-      <Button {...args} iconStart="cloud" />
-      <Button {...args} iconEnd="chevron-right" />
-      <Button {...args} iconStart="cloud" iconEnd="chevron-right" />
+      <Button {...args} iconStart={<Icon name="cloud" />} />
+      <Button {...args} iconEnd={<Icon name="chevron-right" />} />
+      <Button
+        {...args}
+        iconStart={<Icon name="cloud" />}
+        iconEnd={<Icon name="chevron-right" />}
+      />
     </Flex>
   ),
 };
@@ -96,9 +105,13 @@ export const FullWidth: Story = {
   },
   render: args => (
     <Flex direction="column" gap="4" style={{ width: '300px' }}>
-      <Button {...args} iconStart="cloud" />
-      <Button {...args} iconEnd="chevron-right" />
-      <Button {...args} iconStart="cloud" iconEnd="chevron-right" />
+      <Button {...args} iconStart={<Icon name="cloud" />} />
+      <Button {...args} iconEnd={<Icon name="chevron-right" />} />
+      <Button
+        {...args}
+        iconStart={<Icon name="cloud" />}
+        iconEnd={<Icon name="chevron-right" />}
+      />
     </Flex>
   ),
 };
@@ -150,22 +163,22 @@ export const Playground: Story = {
                 Button
               </Button>
               <Button
-                iconStart="cloud"
+                iconStart={<Icon name="cloud" />}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
               >
                 Button
               </Button>
               <Button
-                iconEnd="chevron-right"
+                iconEnd={<Icon name="chevron-right" />}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
               >
                 Button
               </Button>
               <Button
-                iconStart="cloud"
-                iconEnd="chevron-right"
+                iconStart={<Icon name="cloud" />}
+                iconEnd={<Icon name="chevron-right" />}
                 style={{ width: '200px' }}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
@@ -180,7 +193,7 @@ export const Playground: Story = {
                 Button
               </Button>
               <Button
-                iconStart="cloud"
+                iconStart={<Icon name="cloud" />}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
                 disabled
@@ -188,7 +201,7 @@ export const Playground: Story = {
                 Button
               </Button>
               <Button
-                iconEnd="chevron-right"
+                iconEnd={<Icon name="chevron-right" />}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
                 disabled
diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index ca652013b4..ab70f168c8 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -15,7 +15,6 @@
  */
 
 import { forwardRef } from 'react';
-import { Icon } from '../Icon';
 import clsx from 'clsx';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 
@@ -50,9 +49,25 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         style={style}
         {...rest}
       >
-        {iconStart && <Icon name={iconStart} className="canon-ButtonIcon" />}
+        {iconStart && (
+          <span
+            className="canon-ButtonIcon"
+            aria-hidden="true"
+            data-size={responsiveSize}
+          >
+            {iconStart}
+          </span>
+        )}
         {children}
-        {iconEnd && <Icon name={iconEnd} className="canon-ButtonIcon" />}
+        {iconEnd && (
+          <span
+            className="canon-ButtonIcon"
+            aria-hidden="true"
+            data-size={responsiveSize}
+          >
+            {iconEnd}
+          </span>
+        )}
       </button>
     );
   },
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index 785fbf3b88..a4afd85c9b 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -94,12 +94,14 @@
   height: 32px;
 }
 
-.canon-Button[data-size='small'] .canon-ButtonIcon {
+.canon-ButtonIcon[data-size='small'],
+.canon-ButtonIcon[data-size='small'] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size='medium'] .canon-ButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-ButtonIcon[data-size='medium'],
+.canon-ButtonIcon[data-size='medium'] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
diff --git a/packages/canon/src/components/Button/types.ts b/packages/canon/src/components/Button/types.ts
index 0d61e1cda4..4ab62d5683 100644
--- a/packages/canon/src/components/Button/types.ts
+++ b/packages/canon/src/components/Button/types.ts
@@ -13,8 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { IconNames } from '../Icon';
+
 import type { ButtonOwnProps } from './Button.props';
+import { ReactElement } from 'react';
 
 /**
  * Properties for {@link Button}
@@ -43,10 +44,10 @@ export interface ButtonProps
   /**
    * Optional icon to display at the start of the button
    */
-  iconStart?: IconNames;
+  iconStart?: ReactElement;
 
   /**
    * Optional icon to display at the end of the button
    */
-  iconEnd?: IconNames;
+  iconEnd?: ReactElement;
 }
diff --git a/packages/canon/src/components/IconButton/IconButton.stories.tsx b/packages/canon/src/components/IconButton/IconButton.stories.tsx
index edac9bd7e8..d16dcd1fcb 100644
--- a/packages/canon/src/components/IconButton/IconButton.stories.tsx
+++ b/packages/canon/src/components/IconButton/IconButton.stories.tsx
@@ -19,6 +19,7 @@ import { IconButton } from './IconButton';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { IconButtonProps } from './types';
+import { Icon } from '../Icon';
 
 const meta = {
   title: 'Components/IconButton',
@@ -44,7 +45,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Variants: Story = {
   args: {
-    icon: 'cloud',
+    icon: <Icon name="cloud" />,
+    'aria-label': 'Cloud icon button',
   },
   parameters: {
     argTypes: {
@@ -63,7 +65,8 @@ export const Variants: Story = {
 
 export const Sizes: Story = {
   args: {
-    icon: 'cloud',
+    icon: <Icon name="cloud" />,
+    'aria-label': 'Cloud icon button',
   },
   render: args => (
     <Flex align="center">
@@ -75,8 +78,9 @@ export const Sizes: Story = {
 
 export const Disabled: Story = {
   args: {
-    icon: 'cloud',
+    icon: <Icon name="cloud" />,
     disabled: true,
+    'aria-label': 'Cloud icon button',
   },
   render: args => (
     <Flex direction="row" gap="4">
@@ -88,7 +92,8 @@ export const Disabled: Story = {
 
 export const Responsive: Story = {
   args: {
-    icon: 'cloud',
+    icon: <Icon name="cloud" />,
+    'aria-label': 'Cloud icon button',
     variant: {
       initial: 'primary',
       sm: 'secondary',
@@ -104,7 +109,8 @@ const variants: string[] = ['primary', 'secondary'];
 
 export const Playground: Story = {
   args: {
-    icon: 'cloud',
+    icon: <Icon name="cloud" />,
+    'aria-label': 'Cloud icon button',
   },
   render: args => (
     <Flex direction="column">
@@ -120,13 +126,15 @@ export const Playground: Story = {
               />
               <IconButton
                 {...args}
-                icon="chevron-right"
+                icon={<Icon name="chevron-right" />}
+                aria-label="Chevron right icon button"
                 variant={variant as IconButtonProps['variant']}
                 size={size as IconButtonProps['size']}
               />
               <IconButton
                 {...args}
-                icon="chevron-right"
+                icon={<Icon name="chevron-right" />}
+                aria-label="Chevron right icon button"
                 variant={variant as IconButtonProps['variant']}
                 size={size as IconButtonProps['size']}
               />
diff --git a/packages/canon/src/components/IconButton/IconButton.tsx b/packages/canon/src/components/IconButton/IconButton.tsx
index b2581844bc..bca012cac0 100644
--- a/packages/canon/src/components/IconButton/IconButton.tsx
+++ b/packages/canon/src/components/IconButton/IconButton.tsx
@@ -15,7 +15,6 @@
  */
 
 import { forwardRef } from 'react';
-import { Icon } from '../Icon';
 import clsx from 'clsx';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 
@@ -45,7 +44,13 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         style={style}
         {...rest}
       >
-        <Icon name={icon} className="canon-IconButtonIcon" />
+        <span
+          className="canon-IconButtonIcon"
+          aria-hidden="true"
+          data-size={responsiveSize}
+        >
+          {icon}
+        </span>
       </button>
     );
   },
diff --git a/packages/canon/src/components/IconButton/styles.css b/packages/canon/src/components/IconButton/styles.css
index 859c512fd6..066b0fbad5 100644
--- a/packages/canon/src/components/IconButton/styles.css
+++ b/packages/canon/src/components/IconButton/styles.css
@@ -94,12 +94,14 @@
   width: 32px;
 }
 
-.canon-IconButton[data-size='small'] .canon-IconButtonIcon {
+.canon-IconButtonIcon[data-size='small'],
+.canon-IconButtonIcon[data-size='small'] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size='medium'] .canon-IconButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-IconButtonIcon[data-size='medium'],
+.canon-IconButtonIcon[data-size='medium'] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
diff --git a/packages/canon/src/components/IconButton/types.ts b/packages/canon/src/components/IconButton/types.ts
index 90505d3352..ece1950d1b 100644
--- a/packages/canon/src/components/IconButton/types.ts
+++ b/packages/canon/src/components/IconButton/types.ts
@@ -13,8 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { IconNames } from '../Icon';
+
 import type { IconButtonOwnProps } from './IconButton.props';
+import { ReactElement } from 'react';
 
 /**
  * Properties for {@link IconButton}
@@ -36,7 +37,7 @@ export interface IconButtonProps
   variant?: IconButtonOwnProps['variant'];
 
   /**
-   * Icon to display at the start of the button
+   * Icon to display in the button
    */
-  icon: IconNames;
+  icon: ReactElement;
 }