diff --git a/src/components/Button.tsx b/src/components/Button.tsx
deleted file mode 100644
index b859583..0000000
--- a/src/components/Button.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                                   Imports                                  */
-/* -------------------------------------------------------------------------- */
-import React from "react";
-import classNames from "classnames";
-import '../index.css'
-import { StyleType } from "core/_variants";
-/* -------------------------------------------------------------------------- */
-/*                               Component props                              */
-/* -------------------------------------------------------------------------- */
-type Props = {
-    emphasis?: StyleType | undefined,
-    disabled?:boolean,
-    iconed?: boolean,
-} & Omit<React.ComponentPropsWithoutRef<"button">, "">
-
-/* -------------------------------------------------------------------------- */
-/*                                Emphasis styles                           */
-/* -------------------------------------------------------------------------- */
-
-const buttonEnableHighEmphasis = `
-    bg-blue-500
-    hover:bg-blue-400
-    active:bg-blue-700    
-    focus:shadow-lg shadow-blue-500
-    focus:outline outline-blue-400/10 outline-8`;
-
-const buttonDisabledHighEmphasis = 
-    `bg-gray-200
-    focus:outline-none`;
-
-const buttonGeneralHighEmphasis = `
-    text-white 
-`
-
-const buttonEnabledMediumEmphasis = 
-    `text-blue-500
-    border-gray-500
-    active:border-blue-600
-    active:text-blue-600
-    hover:border-blue-400
-    hover:text-blue-400
-    focus:outline outline-blue-400/10 outline-8
-    focus:border-blue-600/70`;
-
-
-const buttonDisabledMediumEmphasis = 
-    `text-gray-200
-    border-gray-200
-    focus:outline-none`;
-
-const buttonGeneralMediumEmphasis = 
-    `bg-white
-    border`;
-
-
-const buttonEnabledLowEmphasis = 
-    `text-gray-900
-    hover:text-blue-400
-    active:text-blue-600
-    focus:bg-gray-50`;
-
-const buttonDisabledLowEmphasis = 
-    `text-gray-200`;
-
-const buttonGenerealLowEmphasis = 
-    `focus:outline-none
-    bg-transparent`;
-
-/* -------------------------------------------------------------------------- */
-/*                          Component implementation                          */
-/* -------------------------------------------------------------------------- */
-export const Button = ({
-    emphasis ='high',
-    disabled = false,
-    iconed = false,
-    className,
-    children, ...props} : Props) => {
-
-    return(
-        <button
-        //TODO change on click event
-        onClick={!disabled ? () => alert('Click') : undefined}
-        
-        className={classNames([
-            'text-center',
-            'px-4 py-2 text-[15px]',
-            'rounded',
-            {
-                '!cursor-default': disabled, 
-                'transition-all': !disabled,
-                'transition duration-200':!disabled,
-                
-            },            
-            {   // Define high emphasis
-                [`${buttonEnableHighEmphasis}`]: !disabled && emphasis === 'high',
-                [`${buttonDisabledHighEmphasis}`]: disabled && emphasis === 'high',
-                [`${buttonGeneralHighEmphasis}`] : emphasis === 'high',    
-                // Define medium emphasis
-                [`${buttonEnabledMediumEmphasis}`]: !disabled && emphasis === 'medium',
-                [`${buttonDisabledMediumEmphasis}`]: disabled && emphasis === 'medium',
-                [`${buttonGeneralMediumEmphasis}`]: emphasis === 'medium',
-                // Define low emphasis
-                [`${buttonEnabledLowEmphasis}`]: !disabled && emphasis === 'low',
-                [`${buttonDisabledLowEmphasis}`]: disabled && emphasis ==='low',
-                [`${buttonGenerealLowEmphasis}`]: emphasis === 'low',
-
-            },
-            className,
-        ])} 
-        {...props}>
-            {children}
-        </button>
-    );
-}
-
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
new file mode 100644
index 0000000..e5fd5fa
--- /dev/null
+++ b/src/components/Button/Button.tsx
@@ -0,0 +1,86 @@
+/* -------------------------------------------------------------------------- */
+/*                                   Imports                                  */
+/* -------------------------------------------------------------------------- */
+import React from "react";
+import classNames from "classnames";
+import { StyleType } from "core/_variants";
+import * as btnEmphasis from "./_btnEmphasis";
+import IconButton from "./IconButton";
+
+/* -------------------------------------------------------------------------- */
+/*                           Extention for component                          */
+/* -------------------------------------------------------------------------- */
+
+type ButtonExtentions = {
+  Icon: React.FC<{
+    children: Required<React.ReactElement>;
+    className?: string;
+  }>;
+};
+
+/* -------------------------------------------------------------------------- */
+/*                               Component props                              */
+/* -------------------------------------------------------------------------- */
+type ButtonProps = {
+  emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high"
+  disabled?: boolean;
+} & Omit<React.ComponentPropsWithoutRef<"button">, "">;
+
+/* -------------------------------------------------------------------------- */
+/*                          Component implementation                          */
+/* -------------------------------------------------------------------------- */
+export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
+  emphasis = "high",
+  disabled = false,
+  className,
+  children,
+  ...props
+}) => {
+  console.log(
+    React.isValidElement(children) && React.Children.only(children).type
+  );
+  const isOnlyIcon =
+    children &&
+    React.isValidElement(children) &&
+    React.Children.only(children).type == IconButton;
+
+  const padding = isOnlyIcon ? "px-2.5 py-2" : "px-4 py-2";
+
+  return (
+    <button
+      //TODO change on click event
+      onClick={!disabled ? () => alert("Click") : undefined}
+      className={classNames([
+        "flex content-center justify-between",
+        "text-center",
+        padding,
+        "rounded",
+        {
+          "!cursor-default": disabled,
+          "transition-all": !disabled,
+          "transition duration-200": !disabled,
+        },
+        {
+          // Define high emphasis
+          [`${btnEmphasis.EnableHigh}`]: !disabled && emphasis === "high",
+          [`${btnEmphasis.DisabledHigh}`]: disabled && emphasis === "high",
+          [`${btnEmphasis.GeneralHigh}`]: emphasis === "high",
+          // Dbtnefine medium emphasis
+          [`${btnEmphasis.EnabledMedium}`]: !disabled && emphasis === "medium",
+          [`${btnEmphasis.DisabledMedium}`]: disabled && emphasis === "medium",
+          [`${btnEmphasis.GeneralMedium}`]: emphasis === "medium",
+          // Dbtnefine low emphasis
+          [`${btnEmphasis.EnabledLow}`]: !disabled && emphasis === "low",
+          [`${btnEmphasis.DisabledLow}`]: disabled && emphasis === "low",
+          [`${btnEmphasis.GenerealLow}`]: emphasis === "low",
+        },
+        className,
+      ])}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+Button.Icon = IconButton;
diff --git a/src/components/Button/IconButton.tsx b/src/components/Button/IconButton.tsx
new file mode 100644
index 0000000..ac44982
--- /dev/null
+++ b/src/components/Button/IconButton.tsx
@@ -0,0 +1,21 @@
+import classNames from "classnames";
+import React, { FunctionComponent as FC } from "react";
+import { SVGSearch } from "../icons";
+
+type IconButtonProps = {
+  children: Required<JSX.Element>;
+  className?: string;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "">;
+
+const IconButton: React.FC<IconButtonProps> = ({
+  children,
+  className,
+}): JSX.Element => {
+  return className
+    ? React.cloneElement(children, {
+        className: classNames(className),
+      })
+    : children;
+};
+IconButton.displayName = "ButtonIcon";
+export default IconButton;
diff --git a/src/components/Button/_btnEmphasis.tsx b/src/components/Button/_btnEmphasis.tsx
new file mode 100644
index 0000000..4e19110
--- /dev/null
+++ b/src/components/Button/_btnEmphasis.tsx
@@ -0,0 +1,65 @@
+/* -------------------------------------------------------------------------- */
+/*                                 styles                           */
+/* -------------------------------------------------------------------------- */
+
+export const EnableHigh = `bg-blue-500
+    hover:bg-blue-400
+    active:bg-blue-700    
+    focus:shadow-lg shadow-blue-500
+    focus:outline outline-blue-400/10 outline-8
+`;
+
+export const DisabledHigh = `bg-gray-200
+    focus:outline-none`;
+
+export const GeneralHigh = `
+    text-white 
+    fill-white
+    stroke-white
+    `;
+
+export const EnabledMedium = `text-blue-500
+    border-gray-500
+    active:border-blue-600
+    active:text-blue-600
+    hover:border-blue-400
+    hover:text-blue-400
+    focus:outline outline-blue-400/10 outline-8
+    focus:border-blue-600/70
+    fill-blue-500
+    hover:fill-blue-400
+    active:fill-blue-600
+    focus:fill-blue-600
+    stroke-blue-500
+    hover:stroke-blue-400
+    active:stroke-blue-600
+    focus:stroke-blue-600
+`;
+
+export const DisabledMedium = `text-gray-200
+    border-gray-200
+    fill-gray-200
+    stroke-gray-200
+    focus:outline-none`;
+
+export const GeneralMedium = `bg-white
+    border`;
+
+export const EnabledLow = `   text-gray-900
+    hover:bg-gray-100
+    active:text-blue-600
+    active:bg-blue-100
+    focus:bg-blue-100
+    fill-gray-900
+    stroke-gray-900
+    active:fill-blue-500
+    active:stroke-blue-500
+    `;
+
+export const DisabledLow = `text-gray-200
+    fill-gray-200
+    stroke-gray-200`;
+
+export const GenerealLow = `focus:outline-none
+    bg-transparent
+`;
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index 97390a8..57e1a84 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -1,30 +1,41 @@
 import React, { Children } from "react";
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Button } from "../components/Button";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Button } from "../components/Button/Button";
+import { SVGBookmark } from "../components/icons";
 
-
-
-export default{
-    title: 'Button',
-    component: Button,
+export default {
+  title: "Button",
+  component: Button,
 } as ComponentMeta<typeof Button>;
 
 const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
 export const High = Template.bind({});
 High.args = {
-    emphasis: 'high',
-    children: ['High'],
+  emphasis: "high",
+  children: (
+    <Button.Icon className="w-8">
+      <SVGBookmark />
+    </Button.Icon>
+  ),
 };
 
 export const Medium = Template.bind({});
 Medium.args = {
-    emphasis: 'medium',
-    children: ['Medium'],
+  emphasis: "medium",
+  children: (
+    <Button.Icon>
+      <SVGBookmark className="w-8" />
+    </Button.Icon>
+  ),
 };
 
 export const Low = Template.bind({});
 Low.args = {
-    emphasis:'low',
-    children:['Low'],
-};
\ No newline at end of file
+  emphasis: "low",
+  children: (
+    <Button.Icon>
+      <SVGBookmark className="w-8" />
+    </Button.Icon>
+  ),
+};