diff --git a/components/atoms/button/button.stories.tsx b/components/atoms/button/button.stories.tsx
index 72939d3d..2bc4e669 100644
--- a/components/atoms/button/button.stories.tsx
+++ b/components/atoms/button/button.stories.tsx
@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { css } from '@/styled-system/css';
 
+import BadgeIcon from '../icons/badge-icon';
+import StatisticsIcon from '../icons/statistics-icon';
 import { Button } from './button';
 
 const meta: Meta<typeof Button> = {
@@ -41,10 +43,16 @@ const meta: Meta<typeof Button> = {
       control: 'text',
     },
     leftIconSrc: {
-      control: 'text',
+      control: 'object',
+      table: {
+        disable: true,
+      },
     },
     rightIconSrc: {
-      control: 'text',
+      control: 'object',
+      table: {
+        disable: true,
+      },
     },
     className: {
       control: 'text',
@@ -77,3 +85,25 @@ export const text: Story = {
     variant: 'text',
   },
 };
+
+export const leftIcon: Story = {
+  args: {
+    ...Default.args,
+    leftIconSrc: <BadgeIcon />,
+  },
+};
+
+export const rightIcon: Story = {
+  args: {
+    ...Default.args,
+    rightIconSrc: <StatisticsIcon />,
+  },
+};
+
+export const bothIcon: Story = {
+  args: {
+    ...Default.args,
+    leftIconSrc: <BadgeIcon />,
+    rightIconSrc: <StatisticsIcon />,
+  },
+};
diff --git a/components/atoms/button/button.tsx b/components/atoms/button/button.tsx
index 33951129..210976da 100644
--- a/components/atoms/button/button.tsx
+++ b/components/atoms/button/button.tsx
@@ -1,5 +1,3 @@
-import Image from 'next/image';
-
 import { css, cx } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
@@ -154,11 +152,17 @@ export const Button = ({
     }),
   );
 
-  const iconSize = size === 'large' ? 20 : size === 'medium' ? 18 : 16;
+  const iconSizeMap = {
+    large: '24px',
+    medium: '20px',
+    small: '16px',
+  };
+
+  const iconSize = iconSizeMap[size];
 
   const iconWrapperStyles = flex({
-    width: `${iconSize}px`,
-    height: `${iconSize}px`,
+    width: iconSize,
+    height: iconSize,
     alignItems: 'center',
     justifyContent: 'center',
   });
@@ -168,27 +172,11 @@ export const Button = ({
       {(leftIconSrc || isLoading) && (
         <div className={iconWrapperStyles}>
           {isLoading && <LoadingButtonIcon />}
-          {leftIconSrc && (
-            <Image
-              src={leftIconSrc}
-              alt="left icon"
-              width={iconSize}
-              height={iconSize}
-            />
-          )}
+          {!isLoading && leftIconSrc}
         </div>
       )}
       {label}
-      {rightIconSrc && (
-        <div className={iconWrapperStyles}>
-          <Image
-            src={rightIconSrc}
-            alt="right icon"
-            width={iconSize}
-            height={iconSize}
-          />
-        </div>
-      )}
+      {rightIconSrc && <div className={iconWrapperStyles}>{rightIconSrc}</div>}
     </button>
   );
 };
diff --git a/components/atoms/button/type.ts b/components/atoms/button/type.ts
index b1272b42..f69e5153 100644
--- a/components/atoms/button/type.ts
+++ b/components/atoms/button/type.ts
@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export interface ButtonProps {
   disabled?: boolean;
   label: string;
@@ -6,8 +8,8 @@ export interface ButtonProps {
   variant?: 'solid' | 'outlined' | 'text';
   buttonType?: 'primary' | 'secondary' | 'assistive';
   type?: 'button' | 'reset' | 'submit';
-  leftIconSrc?: string;
-  rightIconSrc?: string;
+  leftIconSrc?: ReactNode;
+  rightIconSrc?: ReactNode;
   onClick?: () => void;
   className?: string;
   isLoading?: boolean;