diff --git a/src/components/ActionIcon.module.css b/src/components/ActionIcon.module.css
new file mode 100644
index 0000000..8a89fbd
--- /dev/null
+++ b/src/components/ActionIcon.module.css
@@ -0,0 +1,10 @@
+@layer components {
+  .action_icon {
+    padding: var(--spacing-xs);
+    border: none;
+    border-radius: var(--border-radius-xxs);
+    line-height: 1em;
+    .icon {
+    }
+  }
+}
diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
new file mode 100644
index 0000000..d79b5d9
--- /dev/null
+++ b/src/components/ActionIcon.tsx
@@ -0,0 +1,25 @@
+import { Icon, IconProps } from '@iconify/react/dist/iconify.js';
+import cx from 'clsx';
+import { MouseEventHandler, useCallback } from 'react';
+import styles from './ActionIcon.module.css';
+
+type ActionIconProps = {
+  icon: IconProps['icon'];
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  extendClassName?: HTMLButtonElement['className'];
+};
+
+export function ActionIcon({ icon, onClick, extendClassName }: ActionIconProps) {
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+    },
+    [onClick],
+  );
+
+  return (
+    <button onClick={handleClick} className={cx(styles.action_icon, extendClassName)}>
+      <Icon icon={icon} className={styles.icon} />
+    </button>
+  );
+}