diff --git a/src/components/atoms/icon-button.astro b/src/components/atoms/icon-button.astro
new file mode 100644
index 0000000..df5b3ef
--- /dev/null
+++ b/src/components/atoms/icon-button.astro
@@ -0,0 +1,40 @@
+---
+import Icon from './icon';
+
+type IconButtonSize = 'small' | 'large';
+
+export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {
+  icon: string;
+  name: string;
+  size: IconButtonSize;
+}
+
+const sizeMap: Record<IconButtonSize, string> = {
+  small: 'w-7 h-7',
+  large: 'w-9 h-9',
+};
+
+const { icon, name, size, ...props } = Astro.props;
+---
+
+<a
+  {...props}
+  class:list={[
+    'flex',
+    'items-center',
+    'justify-center',
+    'rounded',
+    'text-gray-400',
+    'bg-gray-100',
+    'active:translate-y-px',
+    'focus:outline-none',
+    'focus:ring-2',
+    sizeMap[size],
+    props.class,
+  ]}
+  tabindex="-1"
+>
+  <button class:list={['flex', 'items-center', 'justify-center', 'w-full', 'h-full']}>
+    <Icon client:load name={icon} size={16} />
+  </button>
+</a>
diff --git a/src/pages/playground/icon-button.astro b/src/pages/playground/icon-button.astro
new file mode 100644
index 0000000..ce27ef3
--- /dev/null
+++ b/src/pages/playground/icon-button.astro
@@ -0,0 +1,10 @@
+---
+import IconButton from '@/atoms/icon-button.astro';
+---
+
+<div class:list={['p-5', 'flex', 'flex-col', 'gap-2']}>
+  <IconButton icon="fa6-brands:facebook-f" name="Facebook" size="small" href="https://facebook.com/" target="_blank" />
+  <IconButton icon="fa6-brands:github" name="GitHub" size="small" href="https://github.com/" target="_blank" />
+  <IconButton icon="fa6-brands:linkedin-in" name="LinkedIn" size="large" href="https://linkedin.com/" target="_blank" />
+  <IconButton icon="fa6-brands:twitter" name="Twitter" size="large" href="https://twitter.com/" target="_blank" />
+</div>