checkBox: Reimplement styles in CSS

Stop using SVG assets other than the actual check icon. This will help
making it recolorable.

11 files changed, 49 insertions, 452 deletions

diff --git a/data/gnome-shell-icons.gresource.xml b/data/gnome-shell-icons.gresource.xml
index fb33b22dc..b882ba917 100644
--- a/data/gnome-shell-icons.gresource.xml
+++ b/data/gnome-shell-icons.gresource.xml
@@ -19,6 +19,7 @@
     <file>scalable/actions/screenshot-ui-window-symbolic.svg</file>
     <file>scalable/actions/screenshot-recorded-symbolic.svg</file>
     <file>scalable/status/background-app-ghost-symbolic.svg</file>
+    <file>scalable/status/check-symbolic.svg</file>
     <file>scalable/status/keyboard-caps-lock-symbolic.svg</file>
     <file>scalable/status/keyboard-enter-symbolic.svg</file>
     <file>scalable/status/keyboard-hide-symbolic.svg</file>
diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml
index 24b3be8db..b717e3c5b 100644
--- a/data/gnome-shell-theme.gresource.xml
+++ b/data/gnome-shell-theme.gresource.xml
@@ -3,12 +3,6 @@
   <gresource prefix="/org/gnome/shell/theme">
     <file>calendar-today.svg</file>
     <file>calendar-today-light.svg</file>
-    <file>checkbox.svg</file>
-    <file>checkbox-focused.svg</file>
-    <file>checkbox-off-focused-light.svg</file>
-    <file>checkbox-off-focused.svg</file>
-    <file>checkbox-off-light.svg</file>
-    <file>checkbox-off.svg</file>
     <file>gnome-shell.css</file>
     <file>gnome-shell-high-contrast.css</file>
     <file>gnome-shell-start.svg</file>
diff --git a/data/icons/scalable/status/check-symbolic.svg b/data/icons/scalable/status/check-symbolic.svg
new file mode 100644
index 000000000..27c620d49
--- /dev/null
+++ b/data/icons/scalable/status/check-symbolic.svg
@@ -0,0 +1 @@
+<svg height="14" width="14" xmlns="http://www.w3.org/2000/svg"><g style="display:inline;opacity:1"><path style="color:#000;display:inline;fill:#bebebe;fill-opacity:1;stroke-linecap:round;-inkscape-stroke:none" d="M414.145 341.9a1.25 1.25 0 0 0-1.766.092l-5.68 6.305-2.881-2.909a1.25 1.25 0 0 0-1.766 1.77l4.743 4.768 7.442-8.262a1.25 1.25 0 0 0-.092-1.764z" transform="translate(-401 -339)"/></g></svg>
\ No newline at end of file
diff --git a/data/theme/checkbox-focused.svg b/data/theme/checkbox-focused.svg
deleted file mode 100644
index 01eb733dc..000000000
--- a/data/theme/checkbox-focused.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop offset="0" style="stop-color:#515151;stop-opacity:1"/><stop offset="1" style="stop-color:#292929;stop-opacity:1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#0b2e52;stop-opacity:1" offset="0"/><stop style="stop-color:#1862af;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="c"><stop style="stop-color:#333;stop-opacity:1" offset="0"/><stop style="stop-color:#292929;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="d"><stop style="stop-color:#16191a;stop-opacity:1" offset="0"/><stop style="stop-color:#2b3133;stop-opacity:1" offset="1"/></linearGradient></defs><g transform="translate(-342.5 -521.362)"><rect rx="3" y="524.362" x="345.5" height="18" width="18" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#3584e4;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:.34999999;marker:none;enable-background:accumulate" ry="3"/><rect rx="3" y="524.362" x="345.5" height="18" width="18" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:#3584e4;fill-opacity:1;stroke:#3584e4;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" ry="3"/><path style="color:#000;fill:#fff;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="M361.998 527.733a1.5 1.5 0 0 0-2.117.127l-6.928 7.824-2.928-2.882a1.5 1.5 0 0 0-2.12.015 1.5 1.5 0 0 0 .015 2.121l4.055 3.993a1.5 1.5 0 0 0 2.175-.075l7.975-9.006a1.5 1.5 0 0 0-.127-2.117z"/></g></svg>
\ No newline at end of file
diff --git a/data/theme/checkbox-off-focused-light.svg b/data/theme/checkbox-off-focused-light.svg
deleted file mode 100644
index 47673776d..000000000
--- a/data/theme/checkbox-off-focused-light.svg
+++ /dev/null
@@ -1,220 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="24"
-   height="24"
-   id="svg3199"
-   version="1.1"
-   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
-   sodipodi:docname="checkbox-off-focused-dark.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <defs
-     id="defs3201">
-    <linearGradient
-       id="linearGradient15404"
-       inkscape:collect="always">
-      <stop
-         id="stop15406"
-         offset="0"
-         style="stop-color:#515151;stop-opacity:1" />
-      <stop
-         id="stop15408"
-         offset="1"
-         style="stop-color:#292929;stop-opacity:1" />
-    </linearGradient>
-    <inkscape:perspective
-       sodipodi:type="inkscape:persp3d"
-       inkscape:vp_x="0 : 528.18109 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_z="744.09448 : 528.18109 : 1"
-       inkscape:persp3d-origin="372.04724 : 352.78739 : 1"
-       id="perspective3207" />
-    <inkscape:perspective
-       id="perspective3187"
-       inkscape:persp3d-origin="0.5 : 2.3333333 : 1"
-       inkscape:vp_z="1 : 2.5 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_x="0 : 2.5 : 1"
-       sodipodi:type="inkscape:persp3d" />
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient5872-5-1"
-       id="linearGradient5891-0-4"
-       gradientUnits="userSpaceOnUse"
-       x1="205.84143"
-       y1="246.7094"
-       x2="206.74803"
-       y2="231.24142" />
-    <linearGradient
-       inkscape:collect="always"
-       id="linearGradient5872-5-1">
-      <stop
-         style="stop-color:#0b2e52;stop-opacity:1"
-         offset="0"
-         id="stop5874-4-4" />
-      <stop
-         style="stop-color:#1862af;stop-opacity:1"
-         offset="1"
-         id="stop5876-0-5" />
-    </linearGradient>
-    <inkscape:path-effect
-       effect="spiro"
-       id="path-effect5837-4-6"
-       is_visible="true"
-       lpeversion="0" />
-    <inkscape:path-effect
-       effect="spiro"
-       id="path-effect14768"
-       is_visible="true"
-       lpeversion="0" />
-    <inkscape:path-effect
-       effect="spiro"
-       id="path-effect5884-4-7"
-       is_visible="true"
-       lpeversion="0" />
-    <linearGradient
-       y2="-388.72955"
-       x2="-93.031357"
-       y1="-396.34738"
-       x1="-93.031357"
-       gradientTransform="matrix(1.5918367,0,0,0.85714285,-256.56122,59.685418)"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient14219"
-       xlink:href="#linearGradient15404"
-       inkscape:collect="always" />
-    <linearGradient
-       inkscape:collect="always"
-       id="linearGradient10013-4-63-6">
-      <stop
-         style="stop-color:#333333;stop-opacity:1;"
-         offset="0"
-         id="stop10015-2-76-1" />
-      <stop
-         style="stop-color:#292929;stop-opacity:1"
-         offset="1"
-         id="stop10017-46-15-8" />
-    </linearGradient>
-    <linearGradient
-       inkscape:collect="always"
-       id="linearGradient10597-5">
-      <stop
-         style="stop-color:#16191a;stop-opacity:1;"
-         offset="0"
-         id="stop10599-2" />
-      <stop
-         style="stop-color:#2b3133;stop-opacity:1"
-         offset="1"
-         id="stop10601-5" />
-    </linearGradient>
-    <linearGradient
-       y2="-322.16354"
-       x2="921.22498"
-       y1="-330.05121"
-       x1="921.32812"
-       gradientTransform="matrix(1.5918367,0,0,0.85714285,-1456.5464,275.45191)"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient15374"
-       xlink:href="#linearGradient10013-4-63-6"
-       inkscape:collect="always" />
-    <linearGradient
-       gradientTransform="translate(-1199.9852,216.38048)"
-       y2="-227.07961"
-       x2="1203.9177"
-       y1="-217.56708"
-       x1="1203.9177"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient15376"
-       xlink:href="#linearGradient10597-5"
-       inkscape:collect="always" />
-    <linearGradient
-       id="linearGradient5581-5-2-4-6-8-7-35-8">
-      <stop
-         id="stop5583-0-92-8-0-7-6-5-1"
-         offset="0"
-         style="stop-color:#454c4c;stop-opacity:1;" />
-      <stop
-         style="stop-color:#393f3f;stop-opacity:1;"
-         offset="0.40000001"
-         id="stop5585-4-7-2-7-9-9-92-0" />
-      <stop
-         id="stop5587-6-7-2-0-3-1-21-5"
-         offset="1"
-         style="stop-color:#2d3232;stop-opacity:1;" />
-    </linearGradient>
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#a2a2a2"
-     bordercolor="#2d2d2d"
-     borderopacity="1"
-     inkscape:pageopacity="1"
-     inkscape:pageshadow="2"
-     inkscape:zoom="11.313708"
-     inkscape:cx="12.374369"
-     inkscape:cy="8.8388348"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1011"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     borderlayer="true"
-     inkscape:showpageshadow="false"
-     inkscape:snap-nodes="false"
-     inkscape:snap-bbox="true"
-     showborder="true"
-     inkscape:pagecheckerboard="0">
-    <inkscape:grid
-       type="xygrid"
-       id="grid14843"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata3204">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-342.5,-521.36218)">
-    <rect
-       rx="3"
-       y="524.36218"
-       x="345.5"
-       height="18"
-       width="18"
-       id="rect11803"
-       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#282828;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.15000001;marker:none;enable-background:accumulate"
-       ry="3" />
-    <rect
-       rx="5"
-       y="522.36218"
-       x="343.5"
-       height="22"
-       width="22"
-       id="rect2437"
-       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#3584e4;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.35;marker:none;enable-background:accumulate"
-       ry="5" />
-  </g>
-</svg>
diff --git a/data/theme/checkbox-off-focused.svg b/data/theme/checkbox-off-focused.svg
deleted file mode 100644
index d5a042e97..000000000
--- a/data/theme/checkbox-off-focused.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop offset="0" style="stop-color:#515151;stop-opacity:1"/><stop offset="1" style="stop-color:#292929;stop-opacity:1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#0b2e52;stop-opacity:1" offset="0"/><stop style="stop-color:#1862af;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="c"><stop style="stop-color:#333;stop-opacity:1" offset="0"/><stop style="stop-color:#292929;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="d"><stop style="stop-color:#16191a;stop-opacity:1" offset="0"/><stop style="stop-color:#2b3133;stop-opacity:1" offset="1"/></linearGradient></defs><g transform="translate(-342.5 -521.362)"><rect rx="3" y="524.362" x="345.5" height="18" width="18" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#fff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:.15000001;marker:none;enable-background:accumulate" ry="3"/><rect rx="5" y="522.362" x="343.5" height="22" width="22" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#3584e4;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:.35;marker:none;enable-background:accumulate" ry="5"/></g></svg>
\ No newline at end of file
diff --git a/data/theme/checkbox-off-light.svg b/data/theme/checkbox-off-light.svg
deleted file mode 100644
index 5d37c85d6..000000000
--- a/data/theme/checkbox-off-light.svg
+++ /dev/null
@@ -1,211 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="24"
-   height="24"
-   id="svg3199"
-   version="1.1"
-   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
-   sodipodi:docname="checkbox-off-dark.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <defs
-     id="defs3201">
-    <linearGradient
-       id="linearGradient15404"
-       inkscape:collect="always">
-      <stop
-         id="stop15406"
-         offset="0"
-         style="stop-color:#515151;stop-opacity:1" />
-      <stop
-         id="stop15408"
-         offset="1"
-         style="stop-color:#292929;stop-opacity:1" />
-    </linearGradient>
-    <inkscape:perspective
-       sodipodi:type="inkscape:persp3d"
-       inkscape:vp_x="0 : 528.18109 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_z="744.09448 : 528.18109 : 1"
-       inkscape:persp3d-origin="372.04724 : 352.78739 : 1"
-       id="perspective3207" />
-    <inkscape:perspective
-       id="perspective3187"
-       inkscape:persp3d-origin="0.5 : 2.3333333 : 1"
-       inkscape:vp_z="1 : 2.5 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_x="0 : 2.5 : 1"
-       sodipodi:type="inkscape:persp3d" />
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient5872-5-1"
-       id="linearGradient5891-0-4"
-       gradientUnits="userSpaceOnUse"
-       x1="205.84143"
-       y1="246.7094"
-       x2="206.74803"
-       y2="231.24142" />
-    <linearGradient
-       inkscape:collect="always"
-       id="linearGradient5872-5-1">
-      <stop
-         style="stop-color:#0b2e52;stop-opacity:1"
-         offset="0"
-         id="stop5874-4-4" />
-      <stop
-         style="stop-color:#1862af;stop-opacity:1"
-         offset="1"
-         id="stop5876-0-5" />
-    </linearGradient>
-    <inkscape:path-effect
-       effect="spiro"
-       id="path-effect5837-4-6"
-       is_visible="true"
-       lpeversion="0" />
-    <inkscape:path-effect
-       effect="spiro"
-       id="path-effect14768"
-       is_visible="true"
-       lpeversion="0" />
-    <inkscape:path-effect
-       effect="spiro"
-       id="path-effect5884-4-7"
-       is_visible="true"
-       lpeversion="0" />
-    <linearGradient
-       y2="-388.72955"
-       x2="-93.031357"
-       y1="-396.34738"
-       x1="-93.031357"
-       gradientTransform="matrix(1.5918367,0,0,0.85714285,-256.56122,59.685418)"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient14219"
-       xlink:href="#linearGradient15404"
-       inkscape:collect="always" />
-    <linearGradient
-       inkscape:collect="always"
-       id="linearGradient10013-4-63-6">
-      <stop
-         style="stop-color:#333333;stop-opacity:1;"
-         offset="0"
-         id="stop10015-2-76-1" />
-      <stop
-         style="stop-color:#292929;stop-opacity:1"
-         offset="1"
-         id="stop10017-46-15-8" />
-    </linearGradient>
-    <linearGradient
-       inkscape:collect="always"
-       id="linearGradient10597-5">
-      <stop
-         style="stop-color:#16191a;stop-opacity:1;"
-         offset="0"
-         id="stop10599-2" />
-      <stop
-         style="stop-color:#2b3133;stop-opacity:1"
-         offset="1"
-         id="stop10601-5" />
-    </linearGradient>
-    <linearGradient
-       y2="-322.16354"
-       x2="921.22498"
-       y1="-330.05121"
-       x1="921.32812"
-       gradientTransform="matrix(1.5918367,0,0,0.85714285,-1456.5464,275.45191)"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient15374"
-       xlink:href="#linearGradient10013-4-63-6"
-       inkscape:collect="always" />
-    <linearGradient
-       gradientTransform="translate(-1199.9852,216.38048)"
-       y2="-227.07961"
-       x2="1203.9177"
-       y1="-217.56708"
-       x1="1203.9177"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient15376"
-       xlink:href="#linearGradient10597-5"
-       inkscape:collect="always" />
-    <linearGradient
-       id="linearGradient5581-5-2-4-6-8-7-35-8">
-      <stop
-         id="stop5583-0-92-8-0-7-6-5-1"
-         offset="0"
-         style="stop-color:#454c4c;stop-opacity:1;" />
-      <stop
-         style="stop-color:#393f3f;stop-opacity:1;"
-         offset="0.40000001"
-         id="stop5585-4-7-2-7-9-9-92-0" />
-      <stop
-         id="stop5587-6-7-2-0-3-1-21-5"
-         offset="1"
-         style="stop-color:#2d3232;stop-opacity:1;" />
-    </linearGradient>
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#a2a2a2"
-     bordercolor="#2d2d2d"
-     borderopacity="1"
-     inkscape:pageopacity="1"
-     inkscape:pageshadow="2"
-     inkscape:zoom="11.313708"
-     inkscape:cx="12.374369"
-     inkscape:cy="8.8388348"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1011"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     borderlayer="true"
-     inkscape:showpageshadow="false"
-     inkscape:snap-nodes="false"
-     inkscape:snap-bbox="true"
-     showborder="true"
-     inkscape:pagecheckerboard="0">
-    <inkscape:grid
-       type="xygrid"
-       id="grid14843"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata3204">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-342.5,-521.36218)">
-    <rect
-       rx="3"
-       y="524.36218"
-       x="345.5"
-       height="18"
-       width="18"
-       id="rect11803"
-       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#282828;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.15000001;marker:none;enable-background:accumulate"
-       ry="3" />
-  </g>
-</svg>
diff --git a/data/theme/checkbox-off.svg b/data/theme/checkbox-off.svg
deleted file mode 100644
index 50eece1b0..000000000
--- a/data/theme/checkbox-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop offset="0" style="stop-color:#515151;stop-opacity:1"/><stop offset="1" style="stop-color:#292929;stop-opacity:1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#0b2e52;stop-opacity:1" offset="0"/><stop style="stop-color:#1862af;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="c"><stop style="stop-color:#333;stop-opacity:1" offset="0"/><stop style="stop-color:#292929;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="d"><stop style="stop-color:#16191a;stop-opacity:1" offset="0"/><stop style="stop-color:#2b3133;stop-opacity:1" offset="1"/></linearGradient></defs><rect rx="3" y="524.362" x="345.5" height="18" width="18" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;stroke:#fff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:.15000001;marker:none;enable-background:accumulate" ry="3" transform="translate(-342.5 -521.362)"/></svg>
\ No newline at end of file
diff --git a/data/theme/checkbox.svg b/data/theme/checkbox.svg
deleted file mode 100644
index da385b628..000000000
--- a/data/theme/checkbox.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop offset="0" style="stop-color:#515151;stop-opacity:1"/><stop offset="1" style="stop-color:#292929;stop-opacity:1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#0b2e52;stop-opacity:1" offset="0"/><stop style="stop-color:#1862af;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="c"><stop style="stop-color:#333;stop-opacity:1" offset="0"/><stop style="stop-color:#292929;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="d"><stop style="stop-color:#16191a;stop-opacity:1" offset="0"/><stop style="stop-color:#2b3133;stop-opacity:1" offset="1"/></linearGradient></defs><g transform="translate(-342.5 -521.362)"><rect rx="3" y="524.362" x="345.5" height="18" width="18" style="color:#000;display:inline;overflow:visible;visibility:visible;fill:#3584e4;fill-opacity:1;stroke:#3584e4;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" ry="3"/><path style="color:#000;fill:#fff;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="M361.998 527.733a1.5 1.5 0 0 0-2.117.127l-6.928 7.824-2.928-2.882a1.5 1.5 0 0 0-2.12.015 1.5 1.5 0 0 0 .015 2.121l4.055 3.993a1.5 1.5 0 0 0 2.175-.075l7.975-9.006a1.5 1.5 0 0 0-.127-2.117z"/></g></svg>
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/widgets/_check-box.scss b/data/theme/gnome-shell-sass/widgets/_check-box.scss
index 1480ade26..f18d6418c 100644
--- a/data/theme/gnome-shell-sass/widgets/_check-box.scss
+++ b/data/theme/gnome-shell-sass/widgets/_check-box.scss
@@ -1,18 +1,49 @@
 /* Check Boxes */
 
-// these are equal to the size of the SVG assets
-$check_height: 24px;
-$check_width: 24px;
-
-
 .check-box {
   StBoxLayout { spacing: .8em; }
+
   StBin {
-    width: $check_width;
-    height: $check_height;
-    background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off.svg"));
+    border-radius: 7px;
+    padding: 2px;
+  }
+
+  &:focus StBin {
+    // Trick due to St limitations. It needs a background to draw a box-shadow
+    background-color: rgba(0, 0, 0, 0.01);
+    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .65);
+  }
+
+  StIcon {
+    icon-size: 14px;
+    padding: 1px;
+
+    color: transparent;
+    border-radius: 6px;
+    border: 2px solid transparentize(if($variant == 'light', black, white), .85);
+  }
+
+  &:hover StIcon {
+    border-color: transparentize(if($variant == 'light', black, white), .8);
+  }
+
+  &:active StIcon {
+    border-color: transparentize(if($variant == 'light', black, white), .7);
+  }
+
+  &:checked StIcon {
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
+    border-color: transparent;
+  }
+
+  &:checked:hover StIcon {
+    background-color: lighten($selected_bg_color, 5%);
+    color: lighten($selected_fg_color, 5%);
+  }
+
+  &:checked:active StIcon {
+    background-color: darken($selected_bg_color, 7%);
+    color: darken($selected_fg_color, 7%);
   }
-  &:focus StBin { background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-focused-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"));; }
-  &:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); }
-  &:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); }
 }
diff --git a/js/ui/checkBox.js b/js/ui/checkBox.js
index d64bd0d6c..206504576 100644
--- a/js/ui/checkBox.js
+++ b/js/ui/checkBox.js
@@ -20,6 +20,11 @@ class CheckBox extends St.Button {
         this._box = new St.Bin({ y_align: Clutter.ActorAlign.START });
         container.add_actor(this._box);
 
+        this._check = new St.Icon({
+            icon_name: 'check-symbolic',
+        });
+        this._box.add_actor(this._check);
+
         this._label = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
         this._label.clutter_text.set_line_wrap(true);
         this._label.clutter_text.set_ellipsize(Pango.EllipsizeMode.NONE);