diff --git a/src/components/button/basic-button.tsx b/src/components/button/basic-button.tsx
index f9863803..11a55f8e 100644
--- a/src/components/button/basic-button.tsx
+++ b/src/components/button/basic-button.tsx
@@ -9,11 +9,14 @@ import {
   ButtonState,
   ButtonTextColor,
 } from "./style";
-import Icon from "../icon/icon";
+import Icon, { iconVariants } from "../icon/icon";
 import type { IconName } from "../icon/icon-map";
+import type { VariantProps } from "class-variance-authority";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: IconName;
+  iconClassName?: string;
+  iconColor?: VariantProps<typeof iconVariants>["color"];
   appearance?: ButtonState;
   label?: string;
   shape?: ButtonShape;
@@ -25,6 +28,8 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const Button = ({
   appearance = "default",
   icon,
+  iconColor,
+  iconClassName,
   label,
   className,
   children,
@@ -40,7 +45,13 @@ const Button = ({
       )}
       {...props}
     >
-      {icon && <Icon icon={icon} />}
+      {icon && (
+        <Icon
+          icon={icon}
+          className={iconClassName}
+          color={iconColor ?? "default"}
+        />
+      )}
       <span className={BUTTON_TEXT_COLOR_VARIANTS[appearance]}>{label}</span>
       {children}
     </button>
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index f8437025..b785ce0a 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils";
 import { VariantProps, cva } from "class-variance-authority";
 import ICON_MAP from "./icon-map";
 
-const iconVariants = cva("inline-block", {
+export const iconVariants = cva("inline-block", {
   variants: {
     color: {
       default: "",