Check box check mark using vector image

qgcresources.qrc

@@ -55,7 +55,7 @@
 		<file alias="camera.svg">resources/camera.svg</file>
         <file alias="camera_photo.svg">src/Camera/images/camera_photo.svg</file>
         <file alias="camera_video.svg">src/Camera/images/camera_video.svg</file>
-        <file alias="check.png">src/QmlControls/check.png</file>
+        <file alias="checkbox-check.svg">src/QmlControls/checkbox-check.svg</file>
         <file alias="FirmwareUpgradeIcon.png">src/VehicleSetup/FirmwareUpgradeIcon.png</file>
         <file alias="FlightModesComponentIcon.png">src/AutoPilotPlugins/PX4/Images/FlightModesComponentIcon.png</file>
         <file alias="CameraTrigger.svg">src/AutoPilotPlugins/PX4/Images/CameraTrigger.svg</file>

src/QmlControls/QGCCheckBox.qml

@@ -12,7 +12,6 @@ CheckBox {
 
     property var    _qgcPal: QGCPalette { colorGroupEnabled: enabled }
     property bool   _noText: text === ""
-    property real   _radius: ScreenTools.defaultFontPixelHeight * 0.16
 
     activeFocusOnPress: true
 
@@ -35,19 +34,22 @@ CheckBox {
         indicator:  Item {
             implicitWidth:  ScreenTools.checkBoxIndicatorSize
             implicitHeight: implicitWidth
-
             Rectangle {
                 anchors.fill:   parent
-                radius:         _radius
-                border.color:   "black"
+                color:          _qgcPal.window
+                border.color:   _qgcPal.text
+                border.width:   1
                 opacity:        control.checkedState === Qt.PartiallyChecked ? 0.5 : 1
-
-                Rectangle {
-                    anchors.margins:    parent.height / 4
-                    anchors.fill:       parent
-                    radius:             _radius
-                    color:              "black"
-                    visible:            control.checkedState === Qt.Checked
+                QGCColoredImage {
+                    source: "/qmlimages/checkbox-check.svg"
+                    color:      _qgcPal.text
+                    opacity:    control.checkedState === Qt.Checked ? control.enabled ? 1 : 0.5 : 0
+                    mipmap:     true
+                    fillMode:   Image.PreserveAspectFit
+                    width:      parent.width * 0.75
+                    height:     width
+                    sourceSize.height: height
+                    anchors.centerIn:  parent
                 }
             }
         }

src/QmlControls/checkbox-check.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<path class="st0" d="M33.7,65.7l1.9-3.8c9.9-21.2,31.6-50.1,35.3-55.3L72,4C60,9.1,44.2,23.4,35.1,32.2l-7.9,7.9L11.1,29.3
+	c-2.4-0.9-3.8-0.7-5.2,1.1l-5.1,5.7c-1.3,1.8-1,4.4,0.8,5.8L28,66.6C29.8,67.9,32.3,67.6,33.7,65.7C33.6,65.8,33.7,65.7,33.7,65.7z"
+	/>
+</svg>