diff --git a/.pnp.cjs b/.pnp.cjs
index 7cc9daed3..0aaa09cfb 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -3524,6 +3524,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@storybook/manager-webpack5", "virtual:993be8e95ad776f90a212770363851655eceeba97c59ab4a108569543fb76f9a9020361380f8adca7caa9a59b32fc26e7615a095a1e955104971d4da417e8b40#npm:6.4.22"],\
             ["@storybook/react", "virtual:993be8e95ad776f90a212770363851655eceeba97c59ab4a108569543fb76f9a9020361380f8adca7caa9a59b32fc26e7615a095a1e955104971d4da417e8b40#npm:6.4.22"],\
             ["@storybook/testing-library", "npm:0.0.11"],\
+            ["@styled-icons/remix-line", "virtual:993be8e95ad776f90a212770363851655eceeba97c59ab4a108569543fb76f9a9020361380f8adca7caa9a59b32fc26e7615a095a1e955104971d4da417e8b40#npm:10.18.0"],\
             ["@types/node", "npm:17.0.33"],\
             ["@types/react", "npm:17.0.2"],\
             ["@types/react-dom", "npm:17.0.17"],\
@@ -6167,6 +6168,62 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD"\
         }]\
       ]],\
+      ["@styled-icons/remix-line", [\
+        ["npm:10.18.0", {\
+          "packageLocation": "./.yarn/cache/@styled-icons-remix-line-npm-10.18.0-3ac055e198-c8b3ac1743.zip/node_modules/@styled-icons/remix-line/",\
+          "packageDependencies": [\
+            ["@styled-icons/remix-line", "npm:10.18.0"]\
+          ],\
+          "linkType": "SOFT"\
+        }],\
+        ["virtual:993be8e95ad776f90a212770363851655eceeba97c59ab4a108569543fb76f9a9020361380f8adca7caa9a59b32fc26e7615a095a1e955104971d4da417e8b40#npm:10.18.0", {\
+          "packageLocation": "./.yarn/__virtual__/@styled-icons-remix-line-virtual-1da6a0f118/0/cache/@styled-icons-remix-line-npm-10.18.0-3ac055e198-c8b3ac1743.zip/node_modules/@styled-icons/remix-line/",\
+          "packageDependencies": [\
+            ["@styled-icons/remix-line", "virtual:993be8e95ad776f90a212770363851655eceeba97c59ab4a108569543fb76f9a9020361380f8adca7caa9a59b32fc26e7615a095a1e955104971d4da417e8b40#npm:10.18.0"],\
+            ["@babel/runtime", "npm:7.17.9"],\
+            ["@styled-icons/styled-icon", "virtual:1da6a0f118900d997545cbdc6b6ae8749df1508c11a4038ce2c5d730ed767be1eeb8fe4cc58749b21404326909557cf02710408d39ba06c6932b164fed92dc39#npm:10.6.3"],\
+            ["@types/react", "npm:17.0.2"],\
+            ["@types/styled-components", "npm:5.1.25"],\
+            ["react", "npm:17.0.2"],\
+            ["styled-components", "virtual:993be8e95ad776f90a212770363851655eceeba97c59ab4a108569543fb76f9a9020361380f8adca7caa9a59b32fc26e7615a095a1e955104971d4da417e8b40#npm:5.3.5"]\
+          ],\
+          "packagePeers": [\
+            "@types/react",\
+            "@types/styled-components",\
+            "react",\
+            "styled-components"\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
+      ["@styled-icons/styled-icon", [\
+        ["npm:10.6.3", {\
+          "packageLocation": "./.yarn/cache/@styled-icons-styled-icon-npm-10.6.3-fc5c43d548-6c60797f77.zip/node_modules/@styled-icons/styled-icon/",\
+          "packageDependencies": [\
+            ["@styled-icons/styled-icon", "npm:10.6.3"]\
+          ],\
+          "linkType": "SOFT"\
+        }],\
+        ["virtual:1da6a0f118900d997545cbdc6b6ae8749df1508c11a4038ce2c5d730ed767be1eeb8fe4cc58749b21404326909557cf02710408d39ba06c6932b164fed92dc39#npm:10.6.3", {\
+          "packageLocation": "./.yarn/__virtual__/@styled-icons-styled-icon-virtual-a9e5c850fc/0/cache/@styled-icons-styled-icon-npm-10.6.3-fc5c43d548-6c60797f77.zip/node_modules/@styled-icons/styled-icon/",\
+          "packageDependencies": [\
+            ["@styled-icons/styled-icon", "virtual:1da6a0f118900d997545cbdc6b6ae8749df1508c11a4038ce2c5d730ed767be1eeb8fe4cc58749b21404326909557cf02710408d39ba06c6932b164fed92dc39#npm:10.6.3"],\
+            ["@babel/runtime", "npm:7.17.9"],\
+            ["@emotion/is-prop-valid", "npm:0.8.8"],\
+            ["@types/react", "npm:17.0.2"],\
+            ["@types/styled-components", "npm:5.1.25"],\
+            ["react", "npm:17.0.2"],\
+            ["styled-components", "virtual:993be8e95ad776f90a212770363851655eceeba97c59ab4a108569543fb76f9a9020361380f8adca7caa9a59b32fc26e7615a095a1e955104971d4da417e8b40#npm:5.3.5"]\
+          ],\
+          "packagePeers": [\
+            "@types/react",\
+            "@types/styled-components",\
+            "react",\
+            "styled-components"\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
       ["@testing-library/dom", [\
         ["npm:8.13.0", {\
           "packageLocation": "./.yarn/cache/@testing-library-dom-npm-8.13.0-de21374654-880f1872b9.zip/node_modules/@testing-library/dom/",\
diff --git a/.yarn/cache/@styled-icons-remix-line-npm-10.18.0-3ac055e198-c8b3ac1743.zip b/.yarn/cache/@styled-icons-remix-line-npm-10.18.0-3ac055e198-c8b3ac1743.zip
new file mode 100644
index 000000000..4b6675c61
Binary files /dev/null and b/.yarn/cache/@styled-icons-remix-line-npm-10.18.0-3ac055e198-c8b3ac1743.zip differ
diff --git a/.yarn/cache/@styled-icons-styled-icon-npm-10.6.3-fc5c43d548-6c60797f77.zip b/.yarn/cache/@styled-icons-styled-icon-npm-10.6.3-fc5c43d548-6c60797f77.zip
new file mode 100644
index 000000000..14c989c5b
Binary files /dev/null and b/.yarn/cache/@styled-icons-styled-icon-npm-10.6.3-fc5c43d548-6c60797f77.zip differ
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 5bc123f66..2868e5491 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -19,6 +19,7 @@
     "@storybook/manager-webpack5": "^6.4.22",
     "@storybook/react": "^6.4.22",
     "@storybook/testing-library": "^0.0.11",
+    "@styled-icons/remix-line": "^10.18.0",
     "@types/node": "^17.0.31",
     "@types/react": "17.0.33",
     "@types/react-dom": "17.0.17",
diff --git a/packages/react-components/src/components/Button/index.stories.tsx b/packages/react-components/src/components/Button/index.stories.tsx
index 3c09bc16a..310c2442d 100644
--- a/packages/react-components/src/components/Button/index.stories.tsx
+++ b/packages/react-components/src/components/Button/index.stories.tsx
@@ -1,10 +1,12 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Check } from "@styled-icons/remix-line";
 
 import { permutate } from "../../utils/permutate";
 import { permutateDecorator } from "../../utils/permutate-decorator";
 import { sizes, Button } from "./";
 import { skins } from "./skin";
+import { color } from "../../theme/color";
 
 export default {
   title: "Button",
@@ -18,7 +20,9 @@ export default {
   ],
 } as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStory<typeof Button> = (args) => (
+  <Button {...args} prefixIcon={<Check color={color.green} size="14" />} />
+);
 
 export const All = Template.bind({});
 
diff --git a/packages/react-components/src/components/Button/index.tsx b/packages/react-components/src/components/Button/index.tsx
index 6e6d75ce3..8dca7ca49 100644
--- a/packages/react-components/src/components/Button/index.tsx
+++ b/packages/react-components/src/components/Button/index.tsx
@@ -22,19 +22,27 @@ export type Props = {
   prefixIcon?: React.ReactNode;
 };
 
-const Prefix = styled.div`
+const Prefix = styled.div<{ disabled?: boolean }>`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 0.5rem;
+  filter: ${({ disabled }) => (disabled ? "grayscale(100%)" : "none")};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
 `;
 
 export const Button: React.FunctionComponent<Props> = React.forwardRef(
-  ({ as, children, prefixIcon, ...props }, ref) => {
+  ({ as, children, prefixIcon, disabled, ...props }, ref) => {
     const type = as === "button" ? { type: "button" } : {};
     return (
-      <StyledButton ref={ref} as={as ?? "button"} {...props} {...type}>
-        {prefixIcon && <Prefix>{prefixIcon}</Prefix>}
+      <StyledButton
+        ref={ref}
+        as={as ?? "button"}
+        disabled={disabled}
+        {...props}
+        {...type}
+      >
+        {prefixIcon && <Prefix disabled={disabled}>{prefixIcon}</Prefix>}
         {children}
       </StyledButton>
     );
diff --git a/yarn.lock b/yarn.lock
index b8ae91bc8..337cd2a12 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1471,7 +1471,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.10.5, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4":
   version: 7.17.9
   resolution: "@babel/runtime@npm:7.17.9"
   dependencies:
@@ -1673,7 +1673,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:0.8.8, @emotion/is-prop-valid@npm:^0.8.6":
+"@emotion/is-prop-valid@npm:0.8.8, @emotion/is-prop-valid@npm:^0.8.6, @emotion/is-prop-valid@npm:^0.8.7":
   version: 0.8.8
   resolution: "@emotion/is-prop-valid@npm:0.8.8"
   dependencies:
@@ -2143,6 +2143,7 @@ __metadata:
     "@storybook/manager-webpack5": ^6.4.22
     "@storybook/react": ^6.4.22
     "@storybook/testing-library": ^0.0.11
+    "@styled-icons/remix-line": ^10.18.0
     "@types/node": ^17.0.31
     "@types/react": 17.0.33
     "@types/react-dom": 17.0.17
@@ -3598,6 +3599,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@styled-icons/remix-line@npm:^10.18.0":
+  version: 10.18.0
+  resolution: "@styled-icons/remix-line@npm:10.18.0"
+  dependencies:
+    "@babel/runtime": ^7.10.5
+    "@styled-icons/styled-icon": ^10.6.0
+  peerDependencies:
+    react: "*"
+    styled-components: "*"
+  checksum: c8b3ac1743e779c57fd87eca0d92332bd552b9692b781e237d3ae1cd6db838d47df3cc2b4ad49b2aeccc97b5f9917ff1169fd3b7c0cd444c67dfea56b620c220
+  languageName: node
+  linkType: hard
+
+"@styled-icons/styled-icon@npm:^10.6.0":
+  version: 10.6.3
+  resolution: "@styled-icons/styled-icon@npm:10.6.3"
+  dependencies:
+    "@babel/runtime": ^7.10.5
+    "@emotion/is-prop-valid": ^0.8.7
+  peerDependencies:
+    react: "*"
+    styled-components: ">=4.1.0 <6"
+  checksum: 6c60797f77446843205f8d218b5308d23b065c2db57fcf648216cb4cdaaf66763425b75d90379aa3facfaa913c2d0a50e3bd847c4bcdbbaa2add1a83d5a4caaf
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^8.3.0":
   version: 8.13.0
   resolution: "@testing-library/dom@npm:8.13.0"