diff --git a/src/app/atoms/button/IconButton.jsx b/src/app/atoms/button/IconButton.jsx
index f92752e5..4ed2b930 100644
--- a/src/app/atoms/button/IconButton.jsx
+++ b/src/app/atoms/button/IconButton.jsx
@@ -7,12 +7,6 @@ import Tooltip from '../tooltip/Tooltip';
 import { blurOnBubbling } from './script';
 import Text from '../text/Text';
 
-// TODO:
-// 1. [done] an icon only button have "src"
-// 2. have multiple variant
-// 3. [done] should have a smart accessibility "label" arial-label
-// 4. [done] have size as RawIcon
-
 const IconButton = React.forwardRef(({
   variant, size, type,
   tooltip, tooltipPlacement, src, onClick,
@@ -20,7 +14,7 @@ const IconButton = React.forwardRef(({
   const btn = (
     <button
       ref={ref}
-      className={`ic-btn-${variant}`}
+      className={`ic-btn ic-btn-${variant}`}
       onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
       onClick={onClick}
       type={type === 'button' ? 'button' : 'submit'}
@@ -49,7 +43,7 @@ IconButton.defaultProps = {
 };
 
 IconButton.propTypes = {
-  variant: PropTypes.oneOf(['surface']),
+  variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
   size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
   type: PropTypes.oneOf(['button', 'submit']),
   tooltip: PropTypes.string,
diff --git a/src/app/atoms/button/IconButton.scss b/src/app/atoms/button/IconButton.scss
index a0cabc6a..9b83c089 100644
--- a/src/app/atoms/button/IconButton.scss
+++ b/src/app/atoms/button/IconButton.scss
@@ -1,9 +1,6 @@
 @use 'state';
 
-.ic-btn-surface,
-.ic-btn-primary,
-.ic-btn-caution,
-.ic-btn-danger {
+.ic-btn {
   padding: var(--sp-extra-tight);
   border: none;
   border-radius: var(--bo-radius);
@@ -31,4 +28,22 @@
   @include state.hover(var(--bg-surface-hover));
   @include focus(var(--bg-surface-hover));
   @include state.active(var(--bg-surface-active));
+}
+.ic-btn-positive {
+  @include color(var(--ic-positive-normal));
+  @include state.hover(var(--bg-positive-hover));
+  @include focus(var(--bg-positive-hover));
+  @include state.active(var(--bg-positive-active));
+}
+.ic-btn-caution {
+  @include color(var(--ic-caution-normal));
+  @include state.hover(var(--bg-caution-hover));
+  @include focus(var(--bg-caution-hover));
+  @include state.active(var(--bg-caution-active));
+}
+.ic-btn-danger {
+  @include color(var(--ic-danger-normal));
+  @include state.hover(var(--bg-danger-hover));
+  @include focus(var(--bg-danger-hover));
+  @include state.active(var(--bg-danger-active));
 }
\ No newline at end of file