diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
new file mode 100644
index 0000000..e521762
--- /dev/null
+++ b/src/components/ActionIcon.tsx
@@ -0,0 +1,24 @@
+import { Icon, IconifyIconProps } from '@iconify-icon/solid';
+import cx from 'clsx';
+import { Component, JSX } from 'solid-js';
+
+interface ActionIconProps {
+  icon: IconifyIconProps['icon'];
+  onClick?: () => void;
+  class?: JSX.HTMLAttributes<HTMLButtonElement>['class'];
+}
+
+const ActionIcon: Component<ActionIconProps> = (props) => {
+  const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (e) => {
+    e.stopPropagation();
+    props.onClick?.();
+  };
+
+  return (
+    <button class={cx('p-2 rounded-sm', props.class)} onClick={handleClick}>
+      <Icon icon={props.icon} class="text-base/[1] stroke-1" />
+    </button>
+  );
+};
+
+export default ActionIcon;