diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less
index 43a5376735..acfbeeeed2 100755
--- a/src/definitions/modules/checkbox.less
+++ b/src/definitions/modules/checkbox.less
@@ -793,8 +793,64 @@
     }
 }
 
+& when (@variationCheckboxColored) {
+  /*--------------
+       Colored
+  ---------------*/
+
+  each(@colors, {
+    @color: replace(@key, '@', '');
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+    @isVeryDark: @colors[@@color][isVeryDark];
+  
+    .ui.@{color}.checkbox input:checked ~ label::after {
+      color: @c;
+    }
+    .ui.@{color}.radio.checkbox input:checked ~ label::after {
+      background-color: @c;
+    }
+    .ui.@{color}.toggle.checkbox input:checked ~ label::before,
+    .ui.@{color}.slider.checkbox input:checked ~ label::before {
+      background-color: @c !important;
+    }
+
+    & when (@variationCheckboxOutline) {
+      /*--------------
+        Outline
+      ---------------*/
+      .ui.@{color}.outline.checkbox input:checked ~ label::before {
+        border-color: @c;
+      }
+      .ui.@{color}.outline.toggle.checkbox input:checked ~ label::after,
+      .ui.@{color}.outline.slider.checkbox input:checked ~ label::after {
+        box-shadow: @subtleShadow,
+        0 0 0 1px @c inset;
+      }
+    }
+  })
+}
+
 /*--------------------
-        Size
+        outline
+---------------------*/
+
+& when (@variationCheckboxOutline) {
+  .ui.outline.checkbox input:checked ~ label::before {
+    border-color: @checkboxActiveCheckColor;
+  }
+  .ui.outline.toggle.checkbox input:checked ~ label::after {
+    box-shadow: @subtleShadow,
+    0 0 0 1px @toggleOnLaneColor inset;
+  }
+  .ui.outline.slider.checkbox input:checked ~ label::after {
+    box-shadow: @subtleShadow,
+    0 0 0 1px @checkboxActiveCheckColor inset;
+  }
+}
+
+/*--------------------
+          Size
 ---------------------*/
 
 each(@variationCheckboxSizes, {
@@ -861,4 +917,47 @@ each(@variationCheckboxSizes, {
   }
 })
 
+/*--------------------
+          Icon
+---------------------*/
+
+& when (@variationCheckboxIcon) {
+  .ui.icon.checkbox input ~ label i {
+    width: auto;
+    margin: 0 !important;
+    line-height: @checkboxLineHeight;
+  }
+
+  .ui.icon.checkbox input:not(:checked) ~ label i {
+    display: none;
+  }
+
+  .ui.icon.checkbox input:checked ~ label i:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: @checkboxSize;
+    height: @checkboxSize;
+    text-align: center;
+    font-size: @checkboxIconCheckFontSize;
+  }
+
+  & when (@variationCheckboxColored) {
+    /*--------------
+        Colored
+    ---------------*/
+
+    each(@colors, {
+      @color: replace(@key, '@', '');
+      @c: @colors[@@color][color];
+      @l: @colors[@@color][light];
+      @isVeryDark: @colors[@@color][isVeryDark];
+    
+      .ui.@{color}.checkbox input:checked ~ label i::before {
+        color: @c;
+      }
+    })
+  }
+}
+
 .loadUIOverrides();
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
index bc6e79db6c..a059f48bf3 100644
--- a/src/themes/default/globals/variation.variables
+++ b/src/themes/default/globals/variation.variables
@@ -388,6 +388,9 @@
 @variationCheckboxFitted: true;
 @variationCheckboxRightAligned: true;
 @variationCheckboxSizes: @variationAllSizes;
+@variationCheckboxColored: true;
+@variationCheckboxOutline: true;
+@variationCheckboxIcon: true;
 
 /* Dimmer */
 @variationDimmerInverted: true;
diff --git a/src/themes/default/modules/checkbox.overrides b/src/themes/default/modules/checkbox.overrides
index e83ad9f2cb..f2b8c2e8b5 100644
--- a/src/themes/default/modules/checkbox.overrides
+++ b/src/themes/default/modules/checkbox.overrides
@@ -16,8 +16,8 @@
 }
 
 /* Checked */
-.ui.checkbox input:checked ~ .box:after,
-.ui.checkbox input:checked ~ label:after {
+.ui.checkbox:not(.icon) input:checked ~ .box:after,
+.ui.checkbox:not(.icon) input:checked ~ label:after {
   content: '\e800';
 }
 
diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables
index 61b9cf8fa2..8e4b7007df 100644
--- a/src/themes/default/modules/checkbox.variables
+++ b/src/themes/default/modules/checkbox.variables
@@ -26,6 +26,7 @@
 @checkboxCheckTop: 0;
 @checkboxCheckLeft: 0;
 @checkboxCheckSize: @checkboxSize;
+@checkboxIconCheckFontSize: 12px;
 
 /* Label */
 @labelFontSize: @relativeMedium;