diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index 7a01fa6014..2d0938b0d4 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -85,8 +85,8 @@ export const WithIcons: Story = {
   render: args => (
     <Flex align="center">
       <Button {...args} iconStart="cloud" />
-      <Button {...args} iconEnd="chevronRight" />
-      <Button {...args} iconStart="cloud" iconEnd="chevronRight" />
+      <Button {...args} iconEnd="chevron-right" />
+      <Button {...args} iconStart="cloud" iconEnd="chevron-right" />
     </Flex>
   ),
 };
@@ -98,8 +98,8 @@ export const FullWidth: Story = {
   render: args => (
     <Flex direction="column" gap="4" style={{ width: '300px' }}>
       <Button {...args} iconStart="cloud" />
-      <Button {...args} iconEnd="chevronRight" />
-      <Button {...args} iconStart="cloud" iconEnd="chevronRight" />
+      <Button {...args} iconEnd="chevron-right" />
+      <Button {...args} iconStart="cloud" iconEnd="chevron-right" />
     </Flex>
   ),
 };
@@ -158,7 +158,7 @@ export const Playground: Story = {
                 Button
               </Button>
               <Button
-                iconEnd="chevronRight"
+                iconEnd="chevron-right"
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
               >
@@ -166,7 +166,7 @@ export const Playground: Story = {
               </Button>
               <Button
                 iconStart="cloud"
-                iconEnd="chevronRight"
+                iconEnd="chevron-right"
                 style={{ width: '200px' }}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
@@ -189,7 +189,7 @@ export const Playground: Story = {
                 Button
               </Button>
               <Button
-                iconEnd="chevronRight"
+                iconEnd="chevron-right"
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
                 disabled
diff --git a/packages/canon/src/components/Icon/Icon.stories.tsx b/packages/canon/src/components/Icon/Icon.stories.tsx
index 8e783364bb..0325e04914 100644
--- a/packages/canon/src/components/Icon/Icon.stories.tsx
+++ b/packages/canon/src/components/Icon/Icon.stories.tsx
@@ -45,11 +45,11 @@ export const Default: Story = {
 
 export const WithCustomIcon: Story = {
   args: {
-    name: 'arrowDown',
+    name: 'arrow-down',
   },
   decorators: [
     Story => (
-      <IconProvider overrides={{ arrowDown: () => <div>Custom Icon</div> }}>
+      <IconProvider overrides={{ 'arrow-down': () => <div>Custom Icon</div> }}>
         <Story />
       </IconProvider>
     ),
diff --git a/packages/canon/src/components/IconButton/IconButton.stories.tsx b/packages/canon/src/components/IconButton/IconButton.stories.tsx
index 74e058430c..d9b591cec8 100644
--- a/packages/canon/src/components/IconButton/IconButton.stories.tsx
+++ b/packages/canon/src/components/IconButton/IconButton.stories.tsx
@@ -121,13 +121,13 @@ export const Playground: Story = {
               />
               <IconButton
                 {...args}
-                icon="chevronRight"
+                icon="chevron-right"
                 variant={variant as IconButtonProps['variant']}
                 size={size as IconButtonProps['size']}
               />
               <IconButton
                 {...args}
-                icon="chevronRight"
+                icon="chevron-right"
                 variant={variant as IconButtonProps['variant']}
                 size={size as IconButtonProps['size']}
               />