diff --git a/packages/shared/components/src/IconButton/index.tsx b/packages/shared/components/src/IconButton/index.tsx
new file mode 100644
index 0000000..7b145d2
--- /dev/null
+++ b/packages/shared/components/src/IconButton/index.tsx
@@ -0,0 +1,42 @@
+import { type HTMLFavolinkProps, favolink, forwardRef } from '@favolink/system';
+import { classNames } from '@favolink/utils';
+import { type ReactElement } from 'react';
+import * as styles from './styles.css';
+import * as theme from './theme.css';
+
+const CLASSNAME_ICONBUTTOM = 'favolink-iconbutton';
+
+export type IconButtonProps = HTMLFavolinkProps<'button'> & {
+  icon: ReactElement;
+  colorScheme?: styles.ColorScheme;
+  size?: styles.Size;
+};
+
+export const IconButton = forwardRef<IconButtonProps, 'button'>(
+  function IconButton(props, ref) {
+    const {
+      className,
+      icon,
+      colorScheme = 'white',
+      size = 'small',
+      ...restProps
+    } = props;
+
+    return (
+      <favolink.button
+        {...restProps}
+        ref={ref}
+        className={classNames(
+          CLASSNAME_ICONBUTTOM,
+          theme.color,
+          styles.base,
+          styles.size[size],
+          styles.colorScheme[colorScheme],
+          className,
+        )}
+      >
+        {icon}
+      </favolink.button>
+    );
+  },
+);
diff --git a/packages/shared/components/src/IconButton/styles.css.ts b/packages/shared/components/src/IconButton/styles.css.ts
new file mode 100644
index 0000000..f3f4109
--- /dev/null
+++ b/packages/shared/components/src/IconButton/styles.css.ts
@@ -0,0 +1,23 @@
+import { h4SemiBold, h5SemiBold, h6SemiBold } from '@favolink/styles/text.css';
+import { style, styleVariants } from '@vanilla-extract/css';
+import * as tagStyles from '../Tag/styles.css';
+
+export const base = style({
+  cursor: 'pointer',
+  borderRadius: 8,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const size = styleVariants({
+  small: [h6SemiBold, { padding: 8 }],
+  medium: [h5SemiBold, { padding: 10 }],
+  large: [h4SemiBold, { padding: 12 }],
+});
+
+export type Size = keyof typeof size;
+
+export const colorScheme = tagStyles.colorScheme;
+
+export type ColorScheme = tagStyles.ColorScheme;
diff --git a/packages/shared/components/src/IconButton/theme.css.ts b/packages/shared/components/src/IconButton/theme.css.ts
new file mode 100644
index 0000000..6871f0b
--- /dev/null
+++ b/packages/shared/components/src/IconButton/theme.css.ts
@@ -0,0 +1,5 @@
+import * as tagTheme from '../Tag/theme.css';
+
+export const color = tagTheme.color;
+
+export type Color = tagTheme.Color;