diff --git a/src/components/ActionIcon/ActionIcon.jsx b/src/components/ActionIcon/ActionIcon.jsx
new file mode 100644
index 0000000..9775460
--- /dev/null
+++ b/src/components/ActionIcon/ActionIcon.jsx
@@ -0,0 +1,43 @@
+import cx from "clsx";
+import { prop } from "ramda";
+import { mergeProps } from "solid-js";
+import classes from "./ActionIcon.module.css";
+
+/**
+ * @typedef {object} ActionIconProps
+ * @property {"s" | "m" | "l" | "xl" | "xxl"} [size]
+ * @property {"filled" | "subtle" | "transparent"} [variant]
+ * @property {"primary" | "secondary" | "danger" | "warn" | "success" | "info"} [color]
+ * @property {string[]} [additionalClasses]
+ * @property {JSX.EventHandler<HTMLButtonElement, PointerEvent>} [onClick]
+ */
+
+/**
+ * @param {import("solid-js").ParentProps<ActionIconProps>} props
+ */
+export default function ActionIcon(props) {
+  const mergedProps = mergeProps(
+    {
+      size: "m",
+      color: "secondary",
+      variant: "transparent",
+      additionalClasses: [],
+      onClick: (e) => {},
+    },
+    props
+  );
+  return (
+    <button
+      class={cx(
+        prop("action-icon-button", classes),
+        prop(`size-${mergedProps.size}`, classes),
+        prop(`variant-${mergedProps.variant}`, classes),
+        prop(`color-${mergedProps.color}`, classes),
+        ...mergedProps.additionalClasses
+      )}
+      onClick={mergedProps.onClick}
+    >
+      {mergedProps.children}
+    </button>
+  );
+}
diff --git a/src/components/ActionIcon/ActionIcon.module.css b/src/components/ActionIcon/ActionIcon.module.css
new file mode 100644
index 0000000..7c0ae34
--- /dev/null
+++ b/src/components/ActionIcon/ActionIcon.module.css
@@ -0,0 +1,51 @@
+.action-icon-button {
+  --size: calc(var(--border-radius-xxs) * 2);
+  border: none;
+  @util padding(0);
+  @each $size in (s, m, l, xl, xxl) {
+    &.size-#{$size} {
+      --size: calc(var(--border-radius-#{$size}) * 2);
+      @util size(calc(var(--size) * 2), calc(var(--size) * 2));
+      border-radius: var(--size);
+      & svg {
+        @util size(var(--size), var(--size));
+      }
+    }
+  }
+  @each $color in (primary, secondary, danger, warn, success, info) {
+    &.color-#{$color} {
+      color: var(--palette-white-3);
+      &.variant-transparent {
+        color: var(--color-#{$color});
+        background-color: transparent;
+      }
+      &.variant-subtle {
+        background-color: color-mod(var(--color-#{$color}) a(50%));
+      }
+      &.variant-fill {
+        background-color: var(--color-#{$color});
+      }
+      &:hover {
+        color: var(--palette-white-0);
+        &.variant-transparent,
+        &.variant-subtle,
+        &.variant-fill {
+          background-color: var(--color-#{$color}-hover);
+        }
+      }
+      &:active {
+        color: var(--palette-white-2);
+        &.variant-transparent {
+          color: var(--color-#{$color}-active);
+          background-color: transparent;
+        }
+        &.variant-subtle {
+          background-color: color-mod(var(--color-#{$color}-active) a(50%));
+        }
+        &.variant-fill {
+          background-color: var(--color-#{$color}-active);
+        }
+      }
+    }
+  }
+}