diff --git a/src/v2/img/sprites/svg/common/icon-checkmark.svg b/src/v2/img/sprites/svg/common/icon-checkmark.svg
new file mode 100644
index 00000000..96050ab3
--- /dev/null
+++ b/src/v2/img/sprites/svg/common/icon-checkmark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M10.38752 15.35011l-3.18743-4.2499c-.49706-.66275-1.43726-.79707-2.1-.3-.66274.49705-.79706 1.43725-.3 2.1l4.5 6c.63218.8429 1.91357.78847 2.472-.10501l7.5-12c.43906-.7025.2255-1.62793-.477-2.067-.7025-.43906-1.62793-.2255-2.067.477l-6.34057 10.14491z"/>
+</svg>
diff --git a/src/v2/scss/components/_forms/_checkbox.scss b/src/v2/scss/components/_forms/_checkbox.scss
index bbd0b6d0..e7a5ea24 100644
--- a/src/v2/scss/components/_forms/_checkbox.scss
+++ b/src/v2/scss/components/_forms/_checkbox.scss
@@ -13,5 +13,35 @@
         }
       }
     }
+
+    &._svg {
+      .control__indicator {
+        position: relative;
+
+        .svg-icon._icon-checkmark {
+          display: none;
+          position: absolute;
+          top: 2px;
+          left: 2px;
+          width: 16px;
+          height: 16px;
+          fill: $white;
+        }
+      }
+
+      .control__input {
+        &:checked ~ .control__indicator {
+          background-image: none;
+
+          ._icon-checkmark {
+            display: block;
+          }
+        }
+      }
+
+      .control__description {
+        margin-left: 6px;
+      }
+    }
   }
 }
diff --git a/src/v2/scss/sprites/_common.scss b/src/v2/scss/sprites/_common.scss
index f9a25013..ce4afdfd 100644
--- a/src/v2/scss/sprites/_common.scss
+++ b/src/v2/scss/sprites/_common.scss
@@ -23,6 +23,11 @@
 	height: 32px;
 }
 
+.sprite-img._icon-checkmark {
+	width: 24px;
+	height: 24px;
+}
+
 .sprite-img._icon-facebook {
 	width: 24px;
 	height: 24px;
diff --git a/templates/v2/components/forms/checkboxes.jinja2 b/templates/v2/components/forms/checkboxes.jinja2
index 670eff53..98ab06bb 100644
--- a/templates/v2/components/forms/checkboxes.jinja2
+++ b/templates/v2/components/forms/checkboxes.jinja2
@@ -6,25 +6,52 @@
     <div class="container page-content">
         <div class="row">
             <div class="col-lg-9">
-                <h2>States</h2>
+                <h2>Bg-img realization</h2>
                 <table>
                     <tr>
                         <td>
-                            Enabled Selected<br>
                             <label class="ui option checkbox">
-                                <input type="checkbox" class="control__input">
+                                <input type="checkbox" class="control__input" checked>
                                 <span class="control__indicator"></span>
+                                <span class="control__description">Enabled Selected</span>
                             </label>
 
                         </td>
                         <td>
-                            Disabled Selected
+                            <label class="ui option checkbox disabled">
+                                <input type="checkbox" class="control__input" checked disabled>
+                                <span class="control__indicator"></span>
+                                <span class="control__description">Disabled Selected</span>
+                            </label>
                         </td>
-                        <td>Hover Selected</td>
-                        <td>Focus Selected</td>
-                        <td>Pressed Selected</td>
                     </tr>
                 </table>
+              <br>
+              <br>
+                <h2>Svg realization</h2>
+                <table>
+                  <tr>
+                    <td>
+                      <label class="ui option checkbox _svg">
+                        <input type="checkbox" class="control__input" checked>
+                        <span class="control__indicator">
+                          {{ macros.svg_icon('checkmark') }}
+                        </span>
+                        <span class="control__description">Enabled Selected</span>
+                      </label>
+
+                    </td>
+                    <td>
+                      <label class="ui option checkbox _svg disabled">
+                        <input type="checkbox" class="control__input" checked disabled>
+                        <span class="control__indicator">
+                          {{ macros.svg_icon('checkmark') }}
+                        </span>
+                        <span class="control__description">Disabled Selected</span>
+                      </label>
+                    </td>
+                  </tr>
+                </table>
             </div>
         </div>
     </div>