diff --git a/src/app/atoms/button/IconButton.jsx b/src/app/atoms/button/IconButton.jsx
index f249f1b..c81c3b1 100644
--- a/src/app/atoms/button/IconButton.jsx
+++ b/src/app/atoms/button/IconButton.jsx
@@ -44,7 +44,7 @@ IconButton.defaultProps = {
 };
 
 IconButton.propTypes = {
-  variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
   size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
   type: PropTypes.oneOf(['button', 'submit', 'reset']),
   tooltip: PropTypes.string,
diff --git a/src/app/atoms/button/IconButton.scss b/src/app/atoms/button/IconButton.scss
index 9b83c08..aa6480c 100644
--- a/src/app/atoms/button/IconButton.scss
+++ b/src/app/atoms/button/IconButton.scss
@@ -29,6 +29,13 @@
   @include focus(var(--bg-surface-hover));
   @include state.active(var(--bg-surface-active));
 }
+.ic-btn-primary {
+  @include color(var(--ic-primary-normal));
+  @include state.hover(var(--bg-primary-hover));
+  @include focus(var(--bg-primary-hover));
+  @include state.active(var(--bg-primary-active));
+  background-color: var(--bg-primary);
+}
 .ic-btn-positive {
   @include color(var(--ic-positive-normal));
   @include state.hover(var(--bg-positive-hover));