diff --git a/packages/bootstrap/scss/imageeditor/_variables.scss b/packages/bootstrap/scss/imageeditor/_variables.scss
index 0668b54ca64..61d7e62d55c 100644
--- a/packages/bootstrap/scss/imageeditor/_variables.scss
+++ b/packages/bootstrap/scss/imageeditor/_variables.scss
@@ -15,7 +15,7 @@ $kendo-image-editor-content-border-width: 1px !default;
 
 $kendo-image-editor-action-pane-padding-y: k-spacing(8) !default;
 $kendo-image-editor-action-pane-padding-x: k-spacing(4) !default;
-$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 240px, calc( 240px + #{$kendo-image-editor-content-border-width} ) ) !default;
+$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 250px, calc( 250px + #{$kendo-image-editor-content-border-width} ) ) !default;
 
 $kendo-image-editor-crop-border-width: 1px !default;
 $kendo-image-editor-crop-border-style: dashed !default;
diff --git a/packages/fluent/docs/customization-imageeditor.md b/packages/fluent/docs/customization-imageeditor.md
index 0a389ed3cfd..8d9fde6a10b 100644
--- a/packages/fluent/docs/customization-imageeditor.md
+++ b/packages/fluent/docs/customization-imageeditor.md
@@ -230,8 +230,8 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-image-editor-action-pane-width</td>
     <td>Number</td>
-    <td><code>if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) )</code></td>
-    <td><code>240px</code></td>
+    <td><code>if( $kendo-image-editor-content-border-width == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) )</code></td>
+    <td><code>270px</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Imageeditor action pane width.</div></div>
diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md
index 522fe540da3..cb277e67790 100644
--- a/packages/fluent/docs/customization.md
+++ b/packages/fluent/docs/customization.md
@@ -15769,8 +15769,8 @@ The following table lists the available variables for customizing the Fluent the
 <tr>
     <td>$kendo-image-editor-action-pane-width</td>
     <td>Number</td>
-    <td><code>if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) )</code></td>
-    <td><code>240px</code></td>
+    <td><code>if( $kendo-image-editor-content-border-width == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) )</code></td>
+    <td><code>270px</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Imageeditor action pane width.</div></div>
diff --git a/packages/fluent/scss/imageeditor/_variables.scss b/packages/fluent/scss/imageeditor/_variables.scss
index 5ec06bbc5b1..228871ba7f0 100644
--- a/packages/fluent/scss/imageeditor/_variables.scss
+++ b/packages/fluent/scss/imageeditor/_variables.scss
@@ -67,7 +67,7 @@ $kendo-image-editor-action-pane-padding-y: k-spacing(3) !default;
 $kendo-image-editor-action-pane-padding-x: k-spacing(3) !default;
 /// Imageeditor action pane width.
 /// @group imageeditor
-$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) ) !default;
+$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) ) !default;
 
 /// Crop background color of the imageeditor.
 /// @group imageeditor
diff --git a/packages/html/src/action-sheet/action-sheet.spec.tsx b/packages/html/src/action-sheet/action-sheet.spec.tsx
index aae87fba34e..975b0b5709f 100644
--- a/packages/html/src/action-sheet/action-sheet.spec.tsx
+++ b/packages/html/src/action-sheet/action-sheet.spec.tsx
@@ -9,10 +9,10 @@ const states = [];
 const options = {};
 
 export type KendoActionSheetProps = {
-    children: React.JSX.Element | React.JSX.Element[],
+    children?: React.JSX.Element | React.JSX.Element[];
     title?: string;
-    header?: typeof ActionSheetHeader;
-    footer?: string | typeof ActionSheetFooter;
+    header?: React.JSX.Element;
+    footer?: string | React.JSX.Element;
     actions?: string[];
     fullscreen?: boolean;
     adaptive?: boolean;
@@ -68,7 +68,7 @@ export const ActionSheet = (
                     return true;
             }
         })
-        : children.type === ActionSheetItems
+        : children?.type === ActionSheetItems
             ? children
             : <></>;
 
diff --git a/packages/html/src/imageeditor/templates/imageeditor-crop.tsx b/packages/html/src/imageeditor/templates/imageeditor-crop.tsx
index b573d3be3e2..e2f58cee98f 100644
--- a/packages/html/src/imageeditor/templates/imageeditor-crop.tsx
+++ b/packages/html/src/imageeditor/templates/imageeditor-crop.tsx
@@ -26,8 +26,8 @@ export const ImageEditorCrop = (props: any) => (
         actionPane={
             <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
                 <>
-                    <Button themeColor="primary">Confirm</Button>
-                    <Button>Cancel</Button>
+                    <Button themeColor="primary" icon="check">Confirm</Button>
+                    <Button icon="cancel-outline">Cancel</Button>
                 </>
             }>
                 <Fieldset layout="grid" legend="Crop Image" cols={2} gapX={2}>
@@ -56,7 +56,7 @@ export const ImageEditorCrop = (props: any) => (
                         label="Height:"
                         editor={ <NumericTextbox showClearButton={false} value="68" /> }
                     />
-                    <FormField
+                   <FormField
                         colSpan="2"
                         editor={ <CheckboxWithLabelAfter>Lock aspect ratio</CheckboxWithLabelAfter> }
                     />
diff --git a/packages/html/src/imageeditor/templates/imageeditor-resize.tsx b/packages/html/src/imageeditor/templates/imageeditor-resize.tsx
index c9c70e1a746..58322d15760 100644
--- a/packages/html/src/imageeditor/templates/imageeditor-resize.tsx
+++ b/packages/html/src/imageeditor/templates/imageeditor-resize.tsx
@@ -26,8 +26,8 @@ export const ImageEditorResize = (props: any) => (
         actionPane={
             <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
                 <>
-                    <Button themeColor="primary">Confirm</Button>
-                    <Button>Cancel</Button>
+                    <Button themeColor="primary" icon="check">Confirm</Button>
+                    <Button icon="cancel-outline">Cancel</Button>
                 </>
             }>
                 <Fieldset layout="grid" legend="Resize Image" cols={2} gapX={2}>
diff --git a/packages/material/scss/imageeditor/_variables.scss b/packages/material/scss/imageeditor/_variables.scss
index 595a5a9ccd4..aec3cce8eb2 100644
--- a/packages/material/scss/imageeditor/_variables.scss
+++ b/packages/material/scss/imageeditor/_variables.scss
@@ -15,7 +15,7 @@ $kendo-image-editor-content-border-width: 1px !default;
 
 $kendo-image-editor-action-pane-padding-y: k-spacing(8) !default;
 $kendo-image-editor-action-pane-padding-x: k-spacing(4) !default;
-$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 240px, calc(240px + #{$kendo-image-editor-content-border-width}) ) !default;
+$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 280px, calc(280px + #{$kendo-image-editor-content-border-width}) ) !default;
 
 $kendo-image-editor-crop-border-width: 1px !default;
 $kendo-image-editor-crop-border-style: dashed !default;
diff --git a/tests/_output/bootstrap/imageeditor/imageeditor-crop-pane.png b/tests/_output/bootstrap/imageeditor/imageeditor-crop-pane.png
index 922bb37df99..654b362225b 100644
Binary files a/tests/_output/bootstrap/imageeditor/imageeditor-crop-pane.png and b/tests/_output/bootstrap/imageeditor/imageeditor-crop-pane.png differ
diff --git a/tests/_output/bootstrap/imageeditor/imageeditor-resize-pane.png b/tests/_output/bootstrap/imageeditor/imageeditor-resize-pane.png
index 2973a22f996..bad2a20bc8d 100644
Binary files a/tests/_output/bootstrap/imageeditor/imageeditor-resize-pane.png and b/tests/_output/bootstrap/imageeditor/imageeditor-resize-pane.png differ
diff --git a/tests/_output/classic/imageeditor/imageeditor-crop-pane.png b/tests/_output/classic/imageeditor/imageeditor-crop-pane.png
index 82b735241fa..cc7cc871c56 100644
Binary files a/tests/_output/classic/imageeditor/imageeditor-crop-pane.png and b/tests/_output/classic/imageeditor/imageeditor-crop-pane.png differ
diff --git a/tests/_output/classic/imageeditor/imageeditor-resize-pane.png b/tests/_output/classic/imageeditor/imageeditor-resize-pane.png
index be9eae9c239..04da12b5074 100644
Binary files a/tests/_output/classic/imageeditor/imageeditor-resize-pane.png and b/tests/_output/classic/imageeditor/imageeditor-resize-pane.png differ
diff --git a/tests/_output/default/imageeditor/imageeditor-crop-pane.png b/tests/_output/default/imageeditor/imageeditor-crop-pane.png
index b83c1628cd8..5701499fec9 100644
Binary files a/tests/_output/default/imageeditor/imageeditor-crop-pane.png and b/tests/_output/default/imageeditor/imageeditor-crop-pane.png differ
diff --git a/tests/_output/default/imageeditor/imageeditor-resize-pane.png b/tests/_output/default/imageeditor/imageeditor-resize-pane.png
index 3ab51cb2db7..d2f2a37b924 100644
Binary files a/tests/_output/default/imageeditor/imageeditor-resize-pane.png and b/tests/_output/default/imageeditor/imageeditor-resize-pane.png differ
diff --git a/tests/_output/fluent/imageeditor/imageeditor-crop-pane.png b/tests/_output/fluent/imageeditor/imageeditor-crop-pane.png
index 1c2f748eed9..2f72a24c4aa 100644
Binary files a/tests/_output/fluent/imageeditor/imageeditor-crop-pane.png and b/tests/_output/fluent/imageeditor/imageeditor-crop-pane.png differ
diff --git a/tests/_output/fluent/imageeditor/imageeditor-resize-pane.png b/tests/_output/fluent/imageeditor/imageeditor-resize-pane.png
index e14346c6fa6..5a9d8f40a1a 100644
Binary files a/tests/_output/fluent/imageeditor/imageeditor-resize-pane.png and b/tests/_output/fluent/imageeditor/imageeditor-resize-pane.png differ
diff --git a/tests/_output/material/imageeditor/imageeditor-crop-pane.png b/tests/_output/material/imageeditor/imageeditor-crop-pane.png
index 45b857ca0a9..af4ec4e5d3f 100644
Binary files a/tests/_output/material/imageeditor/imageeditor-crop-pane.png and b/tests/_output/material/imageeditor/imageeditor-crop-pane.png differ
diff --git a/tests/_output/material/imageeditor/imageeditor-resize-pane.png b/tests/_output/material/imageeditor/imageeditor-resize-pane.png
index 17b0a528762..873df31a007 100644
Binary files a/tests/_output/material/imageeditor/imageeditor-resize-pane.png and b/tests/_output/material/imageeditor/imageeditor-resize-pane.png differ
diff --git a/tests/imageeditor/imageeditor-crop-pane.html b/tests/imageeditor/imageeditor-crop-pane.html
index 9e4a1e220b3..84d882600ee 100644
--- a/tests/imageeditor/imageeditor-crop-pane.html
+++ b/tests/imageeditor/imageeditor-crop-pane.html
@@ -202,9 +202,19 @@ <h4>Image Editor Crop Pane</h4>
                         </fieldset>
                         <div class="k-form-buttons">
                             <button class="k-button k-button-md k-button-solid k-button-solid-primary k-rounded-md">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-check">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M434.7 82.7 480 128 192 416 32 256l45.3-45.3L192 325.5z"></path>
+                                    </svg>
+                                </span>
                                 <span class="k-button-text">Confirm</span>
                             </button>
                             <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-cancel-outline">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M256 32c-56.1 0-107.4 20.6-146.7 54.7-8.1 7-15.6 14.6-22.6 22.6C52.6 148.6 32 199.9 32 256c0 123.7 100.3 224 224 224 56.1 0 107.4-20.6 146.7-54.7 8.1-7 15.6-14.6 22.6-22.6C459.4 363.4 480 312.1 480 256c0-123.7-100.3-224-224-224m0 416c-106 0-192-86-192-192 0-47.2 17.1-90.5 45.4-124L380 402.6c-33.5 28.3-76.8 45.4-124 45.4m146.6-68L132 109.4C165.5 81.1 208.8 64 256 64c106 0 192 86 192 192 0 47.2-17.1 90.5-45.4 124"></path>
+                                    </svg>
+                                </span>
                                 <span class="k-button-text">Cancel</span>
                             </button>
                         </div>
diff --git a/tests/imageeditor/imageeditor-resize-pane.html b/tests/imageeditor/imageeditor-resize-pane.html
index a0e15557a0b..b664ff2de46 100644
--- a/tests/imageeditor/imageeditor-resize-pane.html
+++ b/tests/imageeditor/imageeditor-resize-pane.html
@@ -194,9 +194,19 @@ <h4>Image Editor Resize Pane</h4>
                         </fieldset>
                         <div class="k-form-buttons">
                             <button class="k-button k-button-md k-button-solid k-button-solid-primary k-rounded-md">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-check">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M434.7 82.7 480 128 192 416 32 256l45.3-45.3L192 325.5z"></path>
+                                    </svg>
+                                </span>
                                 <span class="k-button-text">Confirm</span>
                             </button>
                             <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-cancel-outline">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M256 32c-56.1 0-107.4 20.6-146.7 54.7-8.1 7-15.6 14.6-22.6 22.6C52.6 148.6 32 199.9 32 256c0 123.7 100.3 224 224 224 56.1 0 107.4-20.6 146.7-54.7 8.1-7 15.6-14.6 22.6-22.6C459.4 363.4 480 312.1 480 256c0-123.7-100.3-224-224-224m0 416c-106 0-192-86-192-192 0-47.2 17.1-90.5 45.4-124L380 402.6c-33.5 28.3-76.8 45.4-124 45.4m146.6-68L132 109.4C165.5 81.1 208.8 64 256 64c106 0 192 86 192 192 0 47.2-17.1 90.5-45.4 124"></path>
+                                    </svg>
+                                </span>
                                 <span class="k-button-text">Cancel</span>
                             </button>
                         </div>