diff --git a/functionalTests/designer/add-new-question.ts b/functionalTests/designer/add-new-question.ts
index bcce2a348d..252a468b3c 100644
--- a/functionalTests/designer/add-new-question.ts
+++ b/functionalTests/designer/add-new-question.ts
@@ -1,5 +1,5 @@
 import { Selector, ClientFunction } from "testcafe";
-import { setJSON, getAddNewQuestionButton, getToolboxItemByText, getVisibleElement, url, RatingToolboxItem, getListItemByText, getBarItemByTitle, getJSON } from "../helper";
+import { setJSON, getAddNewQuestionButton, getToolboxItemByText, getVisibleElement, url, RatingToolboxItem, getListItemByText, getBarItemByTitle, getJSON, getQuestionBarItemByTitle } from "../helper";
 
 const title = "Add new question";
 
@@ -137,8 +137,8 @@ test("Add New Question with sub type", async t => {
     .wait(400)
     .click(getListItemByText("Stars").nth(1))
     .expect(getVisibleElement(".svc-question__content").count).eql(1)
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Rating Scale")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Stars");
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Rating Scale")
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Stars");
 
   let expectedJson = {
     "logoPosition": "right",
@@ -159,13 +159,13 @@ test("Add New Question with sub type", async t => {
   await t.expect(resultJson).eql(expectedJson);
 
   await t
-    .click(getBarItemByTitle("Rating Scale"))
+    .click(getQuestionBarItemByTitle("Rating Scale"))
     .hover(getListItemByText("Single-Line Input").filterVisible())
     .wait(400)
     .click(getListItemByText("Password").nth(1))
     .expect(getVisibleElement(".svc-question__content").count).eql(1)
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Single-Line Input")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Password");
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Single-Line Input")
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Password");
 
   expectedJson = <any>{
     "logoPosition": "right",
@@ -186,13 +186,13 @@ test("Add New Question with sub type", async t => {
   await t.expect(resultJson).eql(expectedJson);
 
   await t
-    .click(getBarItemByTitle("Single-Line Input"))
+    .click(getQuestionBarItemByTitle("Single-Line Input"))
     .hover(getListItemByText("Single-Line Input").filterVisible())
     .wait(400)
     .click(getListItemByText("Rating Scale"))
     .expect(getVisibleElement(".svc-question__content").count).eql(1)
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(0).textContent).eql("Rating Scale")
-    .expect(getVisibleElement(".svc-question__content-actions .sv-action-bar-item__title").nth(1).textContent).eql("Labels");
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(0).textContent).eql("Rating Scale")
+    .expect(getVisibleElement(".svc-question__content-actions .svc-survey-element-toolbar-item__title").nth(1).textContent).eql("Labels");
 
   expectedJson = <any>{
     "logoPosition": "right",
diff --git a/functionalTests/designer/creator.ts b/functionalTests/designer/creator.ts
index 3acc0b6d57..a0e142de2e 100644
--- a/functionalTests/designer/creator.ts
+++ b/functionalTests/designer/creator.ts
@@ -71,27 +71,27 @@ test("Keyboard tab navigation between questions", async (t) => {
     .click(Selector(".sv-string-editor").withText("question2"))
     .expect(Selector(".sv-string-editor").withText("question2").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Delete").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Delete").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Required").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Required").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Duplicate").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Duplicate").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Text").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Text").focused).ok()
     .pressKey("shift+tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Single-Line Input").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Single-Line Input").focused).ok()
     .pressKey("shift+tab")
     .expect(Selector(".sv-string-editor").withText("question1").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Single-Line Input").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Single-Line Input").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Text").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Text").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Duplicate").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Duplicate").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Required").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Required").focused).ok()
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--selected .sv-action-bar-item").withText("Delete").focused).ok()
+    .expect(Selector(".svc-question__content--selected .svc-survey-element-toolbar__item").withText("Delete").focused).ok()
     .pressKey("tab")
     .expect(Selector(".sv-string-editor").withText("question2").focused).ok();
 });
diff --git a/functionalTests/designer/hovers.ts b/functionalTests/designer/hovers.ts
index 50f62ca39e..d0416790d3 100644
--- a/functionalTests/designer/hovers.ts
+++ b/functionalTests/designer/hovers.ts
@@ -117,7 +117,7 @@ test("Question hover and events", async t => {
   await t
     .maximizeWindow();
   const questionTitle = Selector(".svc-string-editor").withText("string_editor");
-  const action = Selector(".svc-tab-designer .svc-question__adorner.svc-hovered .sv-action-bar-item[title=Delete]");
+  const action = Selector(".svc-tab-designer .svc-question__adorner.svc-hovered .svc-survey-element-toolbar__item[title=Delete]");
   await t
     .hover(questionTitle, { offsetX: 5, offsetY: 5 })
     .wait(300)
diff --git a/functionalTests/designer/question-wrapper.ts b/functionalTests/designer/question-wrapper.ts
index 030debed2a..5d6237939a 100644
--- a/functionalTests/designer/question-wrapper.ts
+++ b/functionalTests/designer/question-wrapper.ts
@@ -163,13 +163,13 @@ test("Single input question wrapper action change require", async (t) => {
   let title = await questionTitle.innerText;
   await t
     .expect(normalize(title)).eql("1. question1")
-    .expect(requiredActionButton.hasClass("sv-action-bar-item--active")).notOk()
+    .expect(requiredActionButton.hasClass("svc-survey-element-toolbar__item--active")).notOk()
 
     .click(requiredActionButton);
   title = await questionTitle.innerText;
   await t
     .expect(normalize(title)).eql("1. question1 *")
-    .expect(requiredActionButton.hasClass("sv-action-bar-item--active")).ok();
+    .expect(requiredActionButton.hasClass("svc-survey-element-toolbar__item--active")).ok();
 });
 
 test("Single input question wrapper action delete", async (t) => {
@@ -243,9 +243,9 @@ test("Rating question required property", async (t) => {
     .hover(getToolboxItemByText("Rating Scale"))
     .click(getToolboxItemByText("Rating Scale"))
     .expect(isrequiredButton.visible).ok()
-    .expect(isrequiredButton.find(".svc-required-action").classNames).notContains("sv-action-bar-item--active")
+    .expect(isrequiredButton.find(".svc-required-action").classNames).notContains("svc-survey-element-toolbar__item--active")
     .click(isrequiredButton)
-    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("sv-action-bar-item--active");
+    .expect(isrequiredButton.find(".svc-required-action").classNames).contains("svc-survey-element-toolbar__item--active");
 });
 
 fixture`${title}`.page`${urlDropdownCollapseView}`.beforeEach(async (t) => {
@@ -377,7 +377,7 @@ test("No tab stop in dynamic panel", async (t) => {
     .expect(Selector(".svc-question__content--panel .svc-action-button").withText("Add Question").focused).ok()
     .pressKey("tab")
     .pressKey("tab")
-    .expect(Selector(".svc-question__content--panel .sv-action-bar-item").withText("Panel").focused).ok();
+    .expect(Selector(".svc-question__content--panel .svc-survey-element-toolbar__item").withText("Panel").focused).ok();
 });
 
 test("Question adorner - collapse button in differen modes", async (t) => {
diff --git a/functionalTests/designer/responsiveness.ts b/functionalTests/designer/responsiveness.ts
index a6ad2a146b..169df6fd90 100644
--- a/functionalTests/designer/responsiveness.ts
+++ b/functionalTests/designer/responsiveness.ts
@@ -195,7 +195,7 @@ test("property grid for mobile devices", async (t) => {
 
     .click(Selector(".svd-grid-hide"))
     .click(getAddNewQuestionButton())
-    .click(getBarItemByTitle("Open settings").filterVisible().nth(0))
+    .click(Selector(".svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible().nth(0))
     .expect(Selector(selectedObjectTextSelector).innerText).eql("question1")
 
     .resizeWindow(1920, 900)
@@ -245,17 +245,13 @@ test("test tab for mobile devices", async (t) => {
     .expect(creatorFooterToolbarActions.nth(1).id).eql("svd-preview")
     .expect(creatorFooterToolbarActions.nth(2).id).eql("prevPage")
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(true)
-    //.expect(creatorFooterToolbarActions.nth(2).hasClass("sv-action-bar-item--secondary")).notOk()
     .expect(creatorFooterToolbarActions.nth(3).id).eql("nextPage")
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(false)
-    //.expect(creatorFooterToolbarActions.nth(3).hasClass("sv-action-bar-item--secondary")).ok()
     .expect(creatorFooterToolbarActions.nth(4).id).eql("showInvisible")
 
     .click(creatorFooterToolbarActions.nth(3))
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(2).hasAttribute("disabled")).eql(false)
-    //.expect(creatorFooterToolbarActions.nth(2).hasClass("sv-action-bar-item--secondary")).ok()
     .expect(creatorFooterToolbarActions.find(".sv-action-bar-item").nth(3).hasAttribute("disabled")).eql(true)
-    //.expect(creatorFooterToolbarActions.nth(3).hasClass("sv-action-bar-item--secondary")).notOk()
 
     .resizeWindow(1920, 900)
     .expect(testTabToolbar.exists).ok()
@@ -295,10 +291,10 @@ test("Property grid editor popup", async (t) => {
     .expect(Selector(".sv-popup--modal").visible).ok()
     .click(Selector("button").withExactText("Cancel"))
     .resizeWindow(380, 600)
-    .click(Selector(".sv-action-bar-item[title=\"Open settings\"]").filterVisible())
+    .click(Selector(".svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible())
     .click(Selector(".svd-grid-hide"))
     .click(question1, { offsetX: 5, offsetY: 5 })
-    .click(Selector(".svc-question__content-actions .sv-action-bar-item[title=\"Open settings\"]").filterVisible())
+    .click(Selector(".svc-question__content-actions .svc-survey-element-toolbar__item[title=\"Open settings\"]").filterVisible())
     .click(Selector("span").withExactText("Set Default Answer"))
     .expect(Selector(".sv-popup--overlay").visible).ok();
 });
diff --git a/functionalTests/designer/surface.ts b/functionalTests/designer/surface.ts
index ced35609e0..a435d972e3 100644
--- a/functionalTests/designer/surface.ts
+++ b/functionalTests/designer/surface.ts
@@ -390,9 +390,9 @@ test("Check page adorner state is restored after shrink and stretch", async (t)
   };
   await setJSON(json);
   await t.click(".svc-page", { offsetX: 3, offsetY: 3 });
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).ok();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok();
   await t.resizeWindow(500, 1080);
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).notOk();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).notOk();
   await t.resizeWindow(1920, 1080);
-  await t.expect(Selector(".svc-page__content-actions #duplicate .sv-action-bar-item__title--with-icon").visible).ok();
+  await t.expect(Selector(".svc-page__content-actions #duplicate .svc-page-toolbar-item__title--with-icon").visible).ok();
 });
\ No newline at end of file
diff --git a/functionalTests/designer/toolbox.ts b/functionalTests/designer/toolbox.ts
index b0dbd3b386..ad18ea5f65 100644
--- a/functionalTests/designer/toolbox.ts
+++ b/functionalTests/designer/toolbox.ts
@@ -338,7 +338,7 @@ test("toolbar responsiveness in compact mode", async (t) => {
     .expect(Selector(".svc-toolbox__category>.svc-toolbox__tool").count).eql(22)
 
     .click(".svc-question__content--text", { offsetX: 200, offsetY: 20 })
-    .click(Selector(".sv-action-bar-item__title").withText("Save as Toolbox Item"))
+    .click(Selector(".svc-survey-element-toolbar-item__title").withText("Save as Toolbox Item"))
 
     .expect(Selector(".svc-toolbox .sv-dots__item").visible).ok()
     .expect(Selector(".svc-toolbox__container").clientHeight).lte(510)
diff --git a/functionalTests/helper.ts b/functionalTests/helper.ts
index 215437304b..db6e760a32 100644
--- a/functionalTests/helper.ts
+++ b/functionalTests/helper.ts
@@ -119,6 +119,9 @@ export function getPropertyGridCategory(categoryName) {
 export function getBarItemByTitle(text: string) {
   return Selector(".sv-action-bar-item[title=\"" + text + "\"]");
 }
+export function getQuestionBarItemByTitle(text: string) {
+  return Selector(".svc-survey-element-toolbar__item[title=\"" + text + "\"]");
+}
 export function getListItemByText(text) {
   return Selector(".sv-popup__content .sv-list .sv-list__item").withText(text).filterVisible();
 }
diff --git a/packages/survey-creator-angular/src/add-question-type-selector.component.html b/packages/survey-creator-angular/src/add-question-type-selector.component.html
index a40569c0ff..a2318d2e61 100644
--- a/packages/survey-creator-angular/src/add-question-type-selector.component.html
+++ b/packages/survey-creator-angular/src/add-question-type-selector.component.html
@@ -1,8 +1,8 @@
 <ng-template #template>
   <button type="button" [key2click] (click)="selectQuestionType($event)" [attr.title]="questionTypeSelectorModel.title"
     [attr.aria-label]="questionTypeSelectorModel.title" class="svc-element__question-type-selector">
-    <svg class="svc-element__question-type-selector-icon" [iconName]="questionTypeSelectorModel.iconName" [size]="24"
-      sv-ng-svg-icon></svg>
+    <svg class="svc-element__question-type-selector-icon" [iconName]="questionTypeSelectorModel.iconName"
+      [size]="'auto'" sv-ng-svg-icon></svg>
     <sv-ng-popup *ngIf="renderPopup" [popupModel]="questionTypeSelectorModel.popupModel"></sv-ng-popup>
   </button>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-creator-angular/src/add-question.component.html b/packages/survey-creator-angular/src/add-question.component.html
index e371edad46..12f19c5fd8 100644
--- a/packages/survey-creator-angular/src/add-question.component.html
+++ b/packages/survey-creator-angular/src/add-question.component.html
@@ -3,7 +3,7 @@
     (click)="addNewQuestion($event)"
     (mouseover)="adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)"
     data-bind="clickBubble: false">
-    <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24" sv-ng-svg-icon></svg>
+    <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="'auto'" sv-ng-svg-icon></svg>
     <span class="svc-add-new-item-button__text">
       {{ adorner.addNewQuestionText }}
     </span>
diff --git a/packages/survey-creator-angular/src/adorners/image-item-value.component.html b/packages/survey-creator-angular/src/adorners/image-item-value.component.html
index 56037b5995..c6e09420db 100644
--- a/packages/survey-creator-angular/src/adorners/image-item-value.component.html
+++ b/packages/survey-creator-angular/src/adorners/image-item-value.component.html
@@ -14,17 +14,18 @@
         <span *ngIf="adorner.isDraggable && adorner.canRenderControls"
           class="svc-context-button svc-image-item-value-controls__drag-area-indicator"
           (pointerdown)="adorner.onPointerDown($event)" [attr.title]="undefined" [attr.aria-label]="undefined">
-          <svg [iconName]="'icon-drag-24x24'" [size]="24" sv-ng-svg-icon></svg>
+          <svg [iconName]="'icon-drag-24x24'" [size]="'auto'" sv-ng-svg-icon></svg>
         </span>
         <div *ngIf="adorner.canRenderControls" class="svc-context-container svc-image-item-value-controls">
           <ng-container *ngIf="adorner.allowRemove && !adorner.isUploading">
             <span class="svc-context-button" (click)="adorner.chooseFile(adorner)" [key2click] [attr.title]="undefined"
               [attr.aria-label]="undefined">
-              <svg role="button" [iconName]="'icon-choosefile'" [size]="24" [title]="adorner.selectFileTitle" sv-ng-svg-icon></svg>
+              <svg role="button" [iconName]="'icon-choosefile'" [size]="'auto'" [title]="adorner.selectFileTitle" sv-ng-svg-icon></svg>
             </span>
             <span class="svc-context-button svc-context-button--danger" (click)="adorner.remove(adorner)" [key2click]
               [attr.title]="undefined" [attr.aria-label]="undefined">
-              <svg role="button" [iconName]="'icon-delete'" [size]="24" [title]="adorner.removeFileTitle" sv-ng-svg-icon></svg>
+              <svg role="button" [iconName]="'icon-delete'" [size]="'auto'" [title]="adorner.removeFileTitle"
+                sv-ng-svg-icon></svg>
             </span>
           </ng-container>
         </div>
@@ -48,7 +49,7 @@
           <span class="svc-context-button svc-image-item-value-controls__add"
             *ngIf="adorner.allowAdd && !adorner.isUploading" [key2click] (click)="adorner.chooseNewFile(adorner)"
             [attr.title]="undefined" [attr.aria-label]="undefined">
-            <svg [iconName]="'icon-add-lg'" [size]="24" sv-ng-svg-icon [title]="adorner.addFileTitle"></svg>
+            <svg [iconName]="'icon-add-lg'" [size]="'auto'" sv-ng-svg-icon [title]="adorner.addFileTitle"></svg>
           </span>
         </div>
       </ng-container>
diff --git a/packages/survey-creator-angular/src/adorners/item-value.component.html b/packages/survey-creator-angular/src/adorners/item-value.component.html
index 595eb92483..88e96dd064 100644
--- a/packages/survey-creator-angular/src/adorners/item-value.component.html
+++ b/packages/survey-creator-angular/src/adorners/item-value.component.html
@@ -6,7 +6,7 @@
     <div class="svc-item-value__ghost"></div>
     <div class="svc-item-value-controls">
       <span *ngIf="adorner.isDraggable" class="svc-item-value-controls__button svc-item-value-controls__drag">
-        <svg class="svc-item-value-controls__drag-icon" [iconName]="'icon-drag-24x24'" [size]="24"
+        <svg class="svc-item-value-controls__drag-icon" [iconName]="'icon-drag-24x24'" [size]="'auto'"
           [attr.title]="adorner.dragTooltip" sv-ng-svg-icon></svg>
       </span>
       <span *ngIf="adorner.allowAdd" class="svc-item-value-controls__button svc-item-value-controls__add" [key2click]
diff --git a/packages/survey-creator-angular/src/adorners/matrix-cell.component.html b/packages/survey-creator-angular/src/adorners/matrix-cell.component.html
index 12bd370f9b..6fb29dfda8 100644
--- a/packages/survey-creator-angular/src/adorners/matrix-cell.component.html
+++ b/packages/survey-creator-angular/src/adorners/matrix-cell.component.html
@@ -5,8 +5,9 @@
     <div class="svc-matrix-cell--selected" [class.svc-visible]="adorner.isSelected"></div>
     <ng-container *ngTemplateOutlet="contentTempl"></ng-container>
     <div *ngIf="isSupportCellEditor" class="svc-matrix-cell__question-controls">
-      <span class="svc-matrix-cell__question-controls-button" (click)="adorner.editQuestion(adorner, $event)" [key2click]>
-        <svg [iconName]="'icon-edit'" [size]="24" [size]="24" sv-ng-svg-icon></svg>
+      <span class="svc-matrix-cell__question-controls-button svc-context-button"
+        (click)="adorner.editQuestion(adorner, $event)" [key2click]>
+        <svg [iconName]="'icon-edit'" [size]="'auto'" [size]="'auto'" sv-ng-svg-icon></svg>
       </span>
     </div>
   </div>
diff --git a/packages/survey-creator-angular/src/adorners/question-image.component.html b/packages/survey-creator-angular/src/adorners/question-image.component.html
index 3db77b1214..e017013a51 100644
--- a/packages/survey-creator-angular/src/adorners/question-image.component.html
+++ b/packages/survey-creator-angular/src/adorners/question-image.component.html
@@ -4,7 +4,7 @@
       <input type="file" aria-hidden="true" tabindex="-1" [accept]="adorner.acceptedTypes"
         class="svc-choose-file-input" />
       <span class="svc-context-button" [key2click] [attr.title]="undefined" [attr.aria-label]="undefined">
-        <svg [iconName]="'icon-choosefile'" [size]="24" (click)="adorner.chooseFile(adorner)" sv-ng-svg-icon></svg>
+        <svg [iconName]="'icon-choosefile'" [size]="'auto'" (click)="adorner.chooseFile(adorner)" sv-ng-svg-icon></svg>
       </span>
     </ng-container>
   </div>
diff --git a/packages/survey-creator-angular/src/components/question-error.component.html b/packages/survey-creator-angular/src/components/question-error.component.html
index 0e5e5dbf76..0aaf80df21 100644
--- a/packages/survey-creator-angular/src/components/question-error.component.html
+++ b/packages/survey-creator-angular/src/components/question-error.component.html
@@ -1,5 +1,5 @@
 <div>
-  <svg [class]="cssClasses.error.icon" [iconName]="('icon-alert_24x24')" [size]="24" sv-ng-svg-icon></svg>
+  <svg [class]="cssClasses.error.icon" [iconName]="('icon-alert_24x24')" [size]="'auto'" sv-ng-svg-icon></svg>
   <span [class]="cssClasses ? cssClasses.error.item : 'panel-error-item'" [model]="error.locText" sv-ng-string>
   </span>
 </div>
\ No newline at end of file
diff --git a/packages/survey-creator-angular/src/header/logo-image.component.html b/packages/survey-creator-angular/src/header/logo-image.component.html
index 5a7d8828a7..9efe7f9a7f 100644
--- a/packages/survey-creator-angular/src/header/logo-image.component.html
+++ b/packages/survey-creator-angular/src/header/logo-image.component.html
@@ -15,11 +15,11 @@
         <div class="svc-context-container svc-logo-image-controls">
           <span class="svc-context-button" (click)="model.chooseFile(model)" [key2click] [attr.title]="undefined"
             [attr.aria-label]="undefined">
-            <svg [iconName]="'icon-choosefile'" [size]="24" sv-ng-svg-icon></svg>
+            <svg [iconName]="'icon-choosefile'" [size]="'auto'" sv-ng-svg-icon></svg>
           </span>
           <span class="svc-context-button svc-context-button--danger" (click)="model.remove(model)" [key2click]
             [attr.title]="undefined" [attr.aria-label]="undefined">
-            <svg [iconName]="'icon-clear'" [size]="24" sv-ng-svg-icon></svg>
+            <svg [iconName]="'icon-clear'" [size]="'auto'" sv-ng-svg-icon></svg>
           </span>
         </div>
         <sv-logo-image [data]="survey"></sv-logo-image>
diff --git a/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html b/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
index 141076c7fd..b1eb6ef05e 100644
--- a/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
+++ b/packages/survey-creator-angular/src/page-navigator/page-navigator.component.html
@@ -2,7 +2,7 @@
   <div class="svc-page-navigator" #container [visible]="model.visible">
       <div class="svc-page-navigator__selector"
           (click)="model.togglePageSelector($event)" [key2click] [attr.title]="model.pageSelectorCaption" [class.svc-page-navigator__selector--opened]="model.isPopupOpened">
-          <svg class="svc-page-navigator__navigator-icon" [iconName]="model.icon" [size]="24" sv-ng-svg-icon></svg>
+          <svg class="svc-page-navigator__navigator-icon" [iconName]="model.icon" [size]="'auto'" sv-ng-svg-icon></svg>
           <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
       </div>
       <div>
diff --git a/packages/survey-creator-angular/src/page.component.html b/packages/survey-creator-angular/src/page.component.html
index c789b33fbb..f26defcfcd 100644
--- a/packages/survey-creator-angular/src/page.component.html
+++ b/packages/survey-creator-angular/src/page.component.html
@@ -6,7 +6,7 @@
   <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
   <div *ngIf="adorner.allowDragging && !adorner.isGhost" class="svc-question__drag-area"
     (pointerdown)="adorner.onPointerDown($event)">
-    <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
+    <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
       sv-ng-svg-icon></svg>
     <div class="svc-page__content-actions">
       <sv-action-bar [model]="adorner.actionContainer"></sv-action-bar>
diff --git a/packages/survey-creator-angular/src/panel.component.html b/packages/survey-creator-angular/src/panel.component.html
index 173d82ddaa..a749187332 100644
--- a/packages/survey-creator-angular/src/panel.component.html
+++ b/packages/survey-creator-angular/src/panel.component.html
@@ -16,7 +16,7 @@
       <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
       <div *ngIf="adorner.allowDragging && adorner.element.isInteractiveDesignElement" class="svc-question__drag-area"
         (pointerdown)="adorner.onPointerDown($event)">
-        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
+        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
           sv-ng-svg-icon></svg>
         <div class="svc-question__top-actions">
           <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
@@ -29,7 +29,7 @@
             <div class="svc-panel__placeholder">{{ adorner.placeholderText }}</div>
             <div *ngIf="adorner.showAddQuestionButton" class="svc-panel__add-new-question svc-action-button" [key2click]
               (click)="addNewQuestion($event)">
-              <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="24"
+              <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="'auto'"
                 sv-ng-svg-icon></svg>
               <span class="svc-add-new-item-button__text">
                 {{ adorner.addNewQuestionText }}
diff --git a/packages/survey-creator-angular/src/question-widget.component.html b/packages/survey-creator-angular/src/question-widget.component.html
index 2ea5c9cd54..c19791ede9 100644
--- a/packages/survey-creator-angular/src/question-widget.component.html
+++ b/packages/survey-creator-angular/src/question-widget.component.html
@@ -2,7 +2,8 @@
   <div *ngIf="adorner" class="svc-question__adorner" [class]="adorner.rootCss()" (mouseover)="adorner.hover($event, $event.currentTarget)" (mouseleave)="adorner.hover($event, $event.currentTarget)" [attr.data-sv-drop-target-survey-element]="adorner.element.name || null">
     <div *ngIf="adorner.element.isInteractiveDesignElement" class="svc-question__content" [class]="adorner.css()" [key2click] (click)="adorner.select(adorner, $event)" data-bind="clickBubble: false" #container>
       <div *ngIf="adorner.allowDragging" class="svc-question__drag-area" (pointerdown)="adorner.onPointerDown($event)">
-        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24" sv-ng-svg-icon></svg>
+        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
+          sv-ng-svg-icon></svg>
       </div>
       <div class="svc-widget__content">
         <ng-template [component]="{ name: componentName, data: componentData }"></ng-template>
diff --git a/packages/survey-creator-angular/src/question.component.html b/packages/survey-creator-angular/src/question.component.html
index 38f6559126..318876c167 100644
--- a/packages/survey-creator-angular/src/question.component.html
+++ b/packages/survey-creator-angular/src/question.component.html
@@ -14,7 +14,7 @@
       <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
       <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
       <div *ngIf="adorner.allowDragging" class="svc-question__drag-area" (pointerdown)="adorner.onPointerDown($event)">
-        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="24"
+        <svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
           sv-ng-svg-icon></svg>
         <div class="svc-question__top-actions">
           <sv-action-bar [model]="adorner.topActionContainer" [handleClick]="false"></sv-action-bar>
diff --git a/packages/survey-creator-angular/src/questions/logic-operator.component.html b/packages/survey-creator-angular/src/questions/logic-operator.component.html
index 02f1c9c5d3..62864bf3e0 100644
--- a/packages/survey-creator-angular/src/questions/logic-operator.component.html
+++ b/packages/survey-creator-angular/src/questions/logic-operator.component.html
@@ -17,7 +17,7 @@
           <div>{{model.readOnlyText}}</div>
         </div>
         <div *ngIf="model.allowClear && model.cssClasses.cleanButtonIconId" [class]="model.cssClasses.cleanButton" (click)="clear" [visible]="!model.isEmpty()">
-          <svg [class]="model.cssClasses.cleanButtonSvg" [iconName]="model.cssClasses.cleanButtonIconId" [size]="'auto'" [title]="model.clearCaption" [size]="24" sv-ng-svg-icon></svg>
+          <svg [class]="model.cssClasses.cleanButtonSvg" [iconName]="model.cssClasses.cleanButtonIconId" [size]="'auto'" [title]="model.clearCaption" sv-ng-svg-icon></svg>
         </div>
       </div>
         <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
diff --git a/packages/survey-creator-angular/src/side-bar/tab-button.component.html b/packages/survey-creator-angular/src/side-bar/tab-button.component.html
index abed4768ca..0bf9b5ae5e 100644
--- a/packages/survey-creator-angular/src/side-bar/tab-button.component.html
+++ b/packages/survey-creator-angular/src/side-bar/tab-button.component.html
@@ -4,7 +4,7 @@
       [attr.title]="model.tooltip" (click)="model.action()">
       <div class="svc-menu-action__icon">
         <div class="svc-menu-action__icon-container">
-          <svg [iconName]="model.iconName" [size]="24" sv-ng-svg-icon></svg>
+          <svg [iconName]="model.iconName" [size]="'auto'" sv-ng-svg-icon></svg>
         </div>
       </div>
     </div>
diff --git a/packages/survey-creator-core/creator-themes-import.js b/packages/survey-creator-core/creator-themes-import.js
index bc4de6e162..c29968231c 100644
--- a/packages/survey-creator-core/creator-themes-import.js
+++ b/packages/survey-creator-core/creator-themes-import.js
@@ -69,7 +69,7 @@ function capitalizedFirstLetter(word) {
 }
 
 function getCorrectValue(variableKey, value) {
-  if(variableKey.indexOf("-opacity-") > -1) {
+  if(variableKey.indexOf("-opacity") > -1) {
     return parseInt(value) / 100;
   } else {
     return value;
diff --git a/packages/survey-creator-core/src/components/action-container-view-model.ts b/packages/survey-creator-core/src/components/action-container-view-model.ts
index d084327546..9108a9e817 100644
--- a/packages/survey-creator-core/src/components/action-container-view-model.ts
+++ b/packages/survey-creator-core/src/components/action-container-view-model.ts
@@ -221,7 +221,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
 
   protected createActionContainer(): ActionContainer {
     const actionContainer = new SurveyElementActionContainer();
-    actionContainer.dotsItem.iconSize = 16;
+    actionContainer.dotsItem.iconSize = "auto" as any;
     actionContainer.dotsItem.popupModel.horizontalPosition = "center";
     return actionContainer;
   }
@@ -360,9 +360,9 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     const expandIcon = "icon-expandpanel-16x16";
     return {
       id: "collapse",
-      css: "sv-action-bar-item--secondary sv-action-bar-item--collapse",
+      css: "sv-action-bar-item--collapse",
       iconName: new ComputedUpdater<string>(() => this.collapsed ? expandIcon : collapseIcon) as any,
-      iconSize: 16,
+      iconSize: "auto",
       action: () => {
         this.collapsed = !this.collapsed;
       }
@@ -424,10 +424,10 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "duplicate",
         iconName: "icon-duplicate_16x16",
-        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right",
         title: this.creator.getLocString("survey.duplicate"),
         visibleIndex: 10,
-        iconSize: 16,
+        iconSize: "auto",
         action: () => this.duplicate(),
         onFocus: (isMouse: boolean, event: any) => this.disableActionFocusing(isMouse, event)
       })
@@ -437,11 +437,11 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "settings",
         iconName: "icon-settings_16x16",
-        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right",
         title: this.creator.getLocString("ed.settings"),
         locTooltipName: "ed.settingsTooltip",
         visibleIndex: 20,
-        iconSize: 16,
+        iconSize: "auto",
         action: () => {
           this.creator.setShowSidebar(true, true);
           if (!this.creator.isMobileView) {
@@ -457,11 +457,11 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       new Action({
         id: "delete",
         iconName: "icon-delete_16x16",
-        css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+        css: "svc-action-bar-item--right",
         //needSeparator: items.length > 0,
         title: this.creator.getLocString("pe.delete"),
         visibleIndex: 30,
-        iconSize: 16,
+        iconSize: "auto",
         action: () => {
           this.delete();
         },
diff --git a/packages/survey-creator-core/src/components/item-value.scss b/packages/survey-creator-core/src/components/item-value.scss
index cb8b422adf..5a3b0d84ae 100644
--- a/packages/survey-creator-core/src/components/item-value.scss
+++ b/packages/survey-creator-core/src/components/item-value.scss
@@ -78,6 +78,13 @@
 .svc-item-value-controls__drag-icon {
   display: block;
   transition: opacity $creator-transition-duration;
+  width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3));
+  height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3));
+
+  .sv-svg-icon {
+    width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3));
+    height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3));
+  }
 }
 
 .svc-item-value-wrapper:hover:not(.svc-item-value--ghost),
@@ -88,7 +95,11 @@
 }
 
 .svc-item-value-controls__drag {
-  padding: calcSize(0.5) calcSize(1);
+  padding: var(--ctr-survey-item-actionbar-drag-indicator-padding-top, calcSize(0.5))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-right,  calcSize(1))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-item-actionbar-drag-indicator-padding-left,  calcSize(1));
+
   cursor: move;
   opacity: 0.25;
 
diff --git a/packages/survey-creator-core/src/components/matrix-cell.scss b/packages/survey-creator-core/src/components/matrix-cell.scss
index aae70c76ee..c8dd9304c0 100644
--- a/packages/survey-creator-core/src/components/matrix-cell.scss
+++ b/packages/survey-creator-core/src/components/matrix-cell.scss
@@ -53,19 +53,7 @@
 }
 
 .svc-matrix-cell__question-controls-button {
-  display: block;
-  width: calcSize(6);
-  height: calcSize(6);
-  background: $background;
   border: 1px solid $border;
-  box-sizing: border-box;
-  border-radius: 50%;
-  padding: calcSize(1.5);
-  cursor: pointer;
-
-  use {
-    fill: $foreground-light;
-  }
 }
 
 .svc-matrix-cell:hover .svc-matrix-cell__question-controls {
diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
index 79eaec18f7..21a3ce2ef6 100644
--- a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
+++ b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
@@ -8,13 +8,18 @@ svc-page-navigator,
 
 .svc-page-navigator__navigator-icon {
   display: block;
-  height: calcSize(3);
-  width: calcSize(3);
-  border-radius: var(--ctr-page-navigator-button-corner-radius, 50%);
+  width: var(--ctr-page-navigator-button-icon-width, calcSize(3));
+  height: var(--ctr-page-navigator-button-icon-height, calcSize(3));
   padding: var(--ctr-page-navigator-button-padding, calcSize(1.25));
+  border-radius: var(--ctr-page-navigator-button-corner-radius, 50%);
   cursor: pointer;
   transition: background-color $creator-transition-duration;
 
+  .sv-svg-icon {
+    width: var(--ctr-page-navigator-button-icon-width, calcSize(3));
+    height: var(--ctr-page-navigator-button-icon-height, calcSize(3));
+  }
+
   use {
     fill: var(--ctr-page-navigator-button-icon-color, $foreground-light);
     transition: fill $creator-transition-duration;
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
index 0de0f9b642..fc53562886 100644
--- a/packages/survey-creator-core/src/components/page.scss
+++ b/packages/survey-creator-core/src/components/page.scss
@@ -67,57 +67,116 @@ svc-page {
   }
 }
 
-.svc-page__content-actions {
-  .sv-action-bar-item {
-    border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, 4px);
-    background-color: transparent;
-    color: var(--ctr-survey-page-toolbar-item-text-color, $foreground);
-    transition: background-color $creator-transition-duration;
-  }
+.svc-page-toolbar__item {
+  @include defaultActionButtonSettings;
+  --thm-survey-question-panel-toolbar-item-padding-top: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-top) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+
+  --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5));
+  border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, calcSize(0.5));
+  padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  justify-content: center;
+  align-items: center;
 
-  .sv-action-bar-item__icon {
-    use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+  background-color: transparent;
+  transition: background-color $creator-transition-duration;
+}
 
-  //hovered state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
-  }
+.svc-page-toolbar__item--with-text {
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+
+  padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
 
-  //pressed state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
-  }
+.svc-page-toolbar .sv-action:last-of-type .svc-page-toolbar__item {
+  margin-inline-end: 0;
+}
 
-  //disabled state
-  .sv-action-bar-item:disabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
-  }
+.svc-page-toolbar .sv-action:first-of-type .svc-page-toolbar__item {
+  margin-inline-start: 0;
+}
 
-  .sv-action-bar-item--secondary {
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+//hovered state
+.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):hover:enabled,
+.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):focus:enabled {
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
+}
 
-  .sv-action-bar-item--active {
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
+//pressed state
+.svc-page-toolbar__item:not(.svc-page-toolbar__item--pressed):active:enabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+}
+
+//disabled state
+.svc-page-toolbar__item:disabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
+}
+
+.svc-page-toolbar__item--active {
+  .svc-page-toolbar-item__icon use {
+    fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
   }
+}
+
+.svc-page-toolbar__item--pressed:not(.svc-page-toolbar__item--active) {
+  background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, $background-dim);
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+}
 
+.svc-page-toolbar-item__icon {
+  --thm-survey-page-toolbar-item-icon-width: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --thm-survey-page-toolbar-item-icon-height: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  width: var(--thm-survey-page-toolbar-item-icon-width, calcSize(2));
+  height: var(--thm-survey-page-toolbar-item-icon-height, calcSize(2));
+}
+
+.svc-page-toolbar-item__icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
+}
+
+.svc-page-toolbar-item__title {
+  @include ctrSmallBoldFont;
+  color: var(--ctr-survey-page-toolbar-item-text-color, $foreground);
+}
+
+.svc-page__content-actions {
   .sv-action-bar-item-dropdown {
     border-radius: calcCornerRadius(0.5);
     background-color: transparent;
   }
-
-  .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
-    background-color: var(--ctr-survey-page-toolbar-item-background-color-selected, $background-dim);
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
-  }
 }
 
 .svc-page__content:focus,
@@ -140,6 +199,8 @@ svc-page {
     z-index: 1;
 
     .svc-question__drag-element {
+      width: var(--ctr-survey-page-drag-indicator-width, calcSize(3));
+      height: var(--ctr-survey-page-drag-indicator-height, calcSize(2));
       opacity: var(--ctr-survey-page-drag-indicator-opacity, 0.5);
     }
   }
@@ -245,6 +306,7 @@ svc-page {
 
 .svc-element__add-new-question {
   -webkit-tap-highlight-color: transparent;
+  height: auto;
 }
 
 .svc-add-new-item-button__text {
@@ -255,21 +317,21 @@ svc-page {
 .svc-element__question-type-selector {
   appearance: none;
   display: flex;
-  height: calcSize(5);
-  padding: calcSize(1);
+  padding: var(--ctr-button-contextual-button-padding-top, calcSize(1))
+    var(--ctr-button-contextual-button-padding-right, calcSize(1))
+    var(--ctr-button-contextual-button-padding-bottom, calcSize(1))
+    var(--ctr-button-contextual-button-padding-left, calcSize(1));
+  border-radius: var(--ctr-button-contextual-button-corner-radius, 2px);
   box-sizing: border-box;
   border: none;
-  border-radius: 2px;
   background-color: transparent;
   cursor: pointer;
-  margin-inline-end: calcSize(1); // margin-right
+  margin: var(--ctr-button-contextual-button-margin-vertical, calcSize(1))
+    var(--ctr-button-contextual-button-margin-horizontal, calcSize(1));
+  margin-inline-start: 0; // TODO
   outline: none;
   transition: background-color $creator-transition-duration;
 
-  use {
-    fill: var(--ctr-library-contextual-button-icon-color, $foreground-light);
-  }
-
   &:hover {
     background-color: var(--ctr-button-contextual-button-background-color-hovered, $background-dim);
   }
@@ -279,6 +341,20 @@ svc-page {
   }
 }
 
+.svc-element__question-type-selector-icon {
+  width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+  height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
+
+  .sv-svg-icon {
+    width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+    height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
+  }
+
+  use {
+    fill: var(--ctr-button-contextual-button-icon-color, $foreground-light);
+  }
+}
+
 .svc-page--drag-over-empty:after {
   content: " ";
   position: absolute;
diff --git a/packages/survey-creator-core/src/components/page.ts b/packages/survey-creator-core/src/components/page.ts
index 86e012a7c5..490e860247 100644
--- a/packages/survey-creator-core/src/components/page.ts
+++ b/packages/survey-creator-core/src/components/page.ts
@@ -156,6 +156,16 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
   protected createActionContainer(): ActionContainer<Action> {
     const container = new ActionContainer();
     container.sizeMode = "small";
+    container.cssClasses = {
+      root: "svc-page-toolbar sv-action-bar",
+      item: "svc-page-toolbar__item",
+      itemWithTitle: "svc-page-toolbar__item--with-text",
+      itemActive: "svc-page-toolbar__item--active",
+      itemPressed: "svc-page-toolbar__item--pressed",
+      itemIcon: "svc-page-toolbar-item__icon",
+      itemTitle: "svc-page-toolbar-item__title",
+      itemTitleWithIcon: "svc-page-toolbar-item__title--with-icon",
+    };
     return container;
   }
   protected getExpandCollapseAction(): IAction {
diff --git a/packages/survey-creator-core/src/components/popup.scss b/packages/survey-creator-core/src/components/popup.scss
index 22e08e8c93..382a2493c3 100644
--- a/packages/survey-creator-core/src/components/popup.scss
+++ b/packages/survey-creator-core/src/components/popup.scss
@@ -141,13 +141,16 @@
 
     &.sv-list__item--group {
       & > .sv-list__item-body {
-        background: var(--ctr-list-item-background-color-selected, $primary-light);
-        color: var(--ctr-list-item-text-color-selected, $foreground);
+        background: var(--ctr-list-item-background-color-selected-submenu, $primary-light);
+        color: var(--ctr-list-item-text-color-selected-submenu, $foreground);
         font-weight: 400;
       }
 
       .sv-list__item-icon use {
-        fill: var(--ctr-list-item-icon-color-hovered, $foreground-light);
+        fill: var(--ctr-list-item-icon-color-selected-submenu, $foreground-light);
+      }
+      .sv-list-item__marker-icon use {
+        fill: var(--ctr-list-item-submenu-arrow-color-selected-item-submenu, $foreground-light);
       }
     }
   }
diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
index 3434e64c58..f6dc907314 100644
--- a/packages/survey-creator-core/src/components/question.scss
+++ b/packages/survey-creator-core/src/components/question.scss
@@ -52,63 +52,152 @@ svc-question {
   }
 }
 
-.svc-question__adorner {
-  .sv-action-bar-item {
-    background-color: transparent;
-    color: var(--ctr-survey-question-panel-toolbar-item-text-color, $foreground);
-    transition:
-      background $creator-transition-duration,
-      color $creator-transition-duration,
-      opacity $creator-transition-duration;
-  }
+.svc-survey-element-toolbar__item {
+  @include defaultActionButtonSettings;
+  --thm-survey-question-panel-toolbar-item-padding-top: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-top) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-bottom: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2);
+
+  margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5));
+  border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.25));
+  padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1))
+    var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
 
-  .sv-action-bar-item__icon {
-    use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+  justify-content: center;
+  align-items: center;
 
-  //hovered state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
-  }
+  background-color: transparent;
+  transition:
+    background $creator-transition-duration,
+    opacity $creator-transition-duration;
+}
 
-  //pressed state
-  .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
-  }
+.svc-survey-element-toolbar__item--with-text {
+  --thm-survey-question-panel-toolbar-item-padding-right: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right)
+  );
+  padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
 
-  //disabled state
-  .sv-action-bar-item:disabled {
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
-  }
+.svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item {
+  margin-inline-end: 0;
+}
 
-  .sv-action-bar-item--secondary {
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+.svc-survey-element-toolbar .sv-action:first-of-type .svc-survey-element-toolbar__item {
+  margin-inline-start: 0;
+}
 
-  .sv-action-bar-item--active {
-    .sv-action-bar-item__icon use {
-      fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
-    }
-  }
+.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text {
+  --thm-survey-question-panel-toolbar-item-padding-left: calc(
+    var(--ctr-survey-question-panel-toolbar-item-padding-left) +
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left-with-text)
+  );
+  --thm-survey-question-panel-toolbar-item-gap: calc(
+    var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
 
-  .sv-action-bar-item-dropdown {
-    background-color: transparent;
+  flex-direction: row-reverse;
+  padding-inline-start: var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1));
+  gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5));
+}
+
+.svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon {
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5));
+
+  .svc-survey-element-toolbar-item__icon {
+    padding: 0;
+    width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3));
+    height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3));
   }
+}
+
+//hovered state
+.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):hover:enabled,
+.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):focus:enabled {
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
+}
+
+//pressed state
+.svc-survey-element-toolbar__item:not(.svc-survey-element-toolbar__item--pressed):active:enabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
+}
+
+//disabled state
+.svc-survey-element-toolbar__item:disabled {
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-disabled, 0.25);
+}
 
-  .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
-    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, $background-dim);
-    opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+.svc-survey-element-toolbar__item--active {
+  .svc-survey-element-toolbar-item__icon use {
+    fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
   }
+}
+
+.svc-survey-element-toolbar__item--pressed:not(.svc-survey-element-toolbar__item--active) {
+  background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-selected, $background-dim);
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 50%);
+}
 
-  .sv-action-bar-item.sv-action-bar-item--active:not(.sv-action-bar-item--pressed):enabled:hover,
-  .sv-action-bar-item.sv-action-bar-item--active:not(.sv-action-bar-item--pressed):enabled:focus,
-  .sv-action-bar-item.sv-action-bar-item--active {
-    background-color: $secondary-backcolor-semi-light;
+.svc-survey-element-toolbar__item--active:not(.svc-survey-element-toolbar__item--pressed):enabled:hover,
+.svc-survey-element-toolbar__item--active:not(.svc-survey-element-toolbar__item--pressed):enabled:focus,
+.svc-survey-element-toolbar__item--active {
+  background-color: $secondary-backcolor-semi-light;
+}
+
+.svc-survey-element-toolbar-item__icon,
+.svc-survey-element-toolbar__dots-item .sv-svg-icon.sv-action-bar-item__icon {
+  --ctr-survey-question-toolbar-item-icon-width: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+  );
+  --ctr-survey-question-toolbar-item-icon-height: calc(
+    var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
+      var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+  );
+
+  width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2));
+  height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
+}
+
+.svc-survey-element-toolbar .svc-survey-element-toolbar-item__icon use {
+  fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, $secondary);
+}
+
+.svc-survey-element-toolbar-item__title {
+  @include ctrSmallBoldFont;
+  color: var(--ctr-survey-question-panel-toolbar-item-text-color, $foreground);
+  transition: color $creator-transition-duration;
+}
+
+.svc-question__adorner {
+  .sv-action-bar-item-dropdown {
+    background-color: transparent;
   }
 }
 
@@ -303,80 +392,85 @@ svc-question {
     margin-top: calcSize(2);
   }
 
-  .sv-action--convertTo {
-    max-width: max-content;
-
-    .sv-action-bar-item {
-      flex-direction: row-reverse;
-    }
-
-    .sv-action-bar-item--icon {
-      max-width: 100%;
-      padding: calcSize(0.5);
-    }
-
-    .sv-action-bar-item__title {
-      display: inline-block;
-      justify-content: left;
-    }
-
-    .sv-action-bar-item__icon {
-      margin-inline-start: calcSize(0.5);
+  .svc-action-bar-item--right:first-of-type {
+    margin-inline-start: auto;
+  }
+}
 
-      &:last-child {
-        margin-inline-start: 0;
-      }
-    }
+.svc-dropdown-action--convertTo {
+  max-width: max-content;
 
-    .sv-action-bar-item__icon:last-child {
-      use {
-        fill: $primary;
-      }
-    }
+  .svc-survey-element-toolbar__item {
+    flex-direction: row-reverse;
+  }
 
-    .sv-action-bar-item__title--with-icon {
-      margin-inline-start: 0; // margin-left
-      margin-inline-end: 0; // margin-right
-    }
+  .sv-action-bar-item--icon {
+    max-width: 100%;
+    padding: calcSize(0.5);
   }
 
-  .sv-action--convertTo.sv-action--hidden {
-    min-width: 0;
+  .svc-survey-element-toolbar-item__title {
+    display: inline-block;
+    justify-content: left;
   }
 
-  .sv-action--convertTo-last {
-    margin-inline-end: auto; // margin-right
+  .svc-survey-element-toolbar-item__icon {
+    &:last-child {
+      margin-inline-start: 0;
+    }
   }
 
-  .svc-action-bar-item--right:first-of-type {
-    margin-inline-start: auto;
+  .svc-survey-element-toolbar-item__icon:last-child {
+    use {
+      fill: $primary;
+    }
   }
+}
 
-  .sv-dots {
-    width: calcSize(4);
-    margin-left: calcSize(1);
-    margin-right: calcSize(0.5);
+.svc-dropdown-action--convertTo.sv-action--hidden {
+  min-width: 0;
+}
 
-    &.sv-action--hidden {
-      width: 0;
-      margin: 0;
+.svc-dropdown-action--convertTo-last {
+  margin-inline-end: auto; // margin-right
+}
 
-      .sv-action__content {
-        display: none;
-      }
-    }
+.svc-survey-element-toolbar__dots-item {
+  width: calcSize(4);
+  margin-left: calcSize(1);
+  margin-right: calcSize(0.5);
 
-    .sv-dots__item {
-      margin-left: 0;
+  &.sv-action--hidden {
+    width: 0;
+    margin: 0;
+
+    .sv-action__content {
+      display: none;
     }
   }
 
   .sv-dots__item {
-    //border-radius: calcSize(0.5);
+    margin-left: 0;
+  }
 
-    use {
-      fill: $secondary;
-    }
+  .sv-list__item-icon {
+    --ctr-survey-question-toolbar-item-icon-width: calc(
+      var(--ctr-survey-question-panel-toolbar-item-icon-container-width) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-left)
+    );
+    --ctr-survey-question-toolbar-item-icon-height: calc(
+      var(--ctr-survey-question-panel-toolbar-item-icon-container-height) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) -
+        var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom)
+    );
+
+    width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2));
+    height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2));
+  }
+
+  use {
+    fill: $secondary;
   }
 }
 
@@ -736,11 +830,11 @@ svc-question,
 // EO reset styles for drag-drop-ghost-survey-element to avoid layout jumping while dragging
 
 .svc-hovered > .svc-question__content > .svc-question__drag-area > .svc-question__drag-element {
-  opacity: 0.5;
+  opacity: var(--ctr-survey-question-panel-drag-area-drag-indicator-opacity, 0.5);
 }
 
 .svc-question__content.svc-question__content--selected > .svc-question__drag-area > .svc-question__drag-element {
-  opacity: 0.5;
+  opacity: var(--ctr-survey-question-panel-drag-area-drag-indicator-opacity, 0.5);
   z-index: 1;
 }
 .svc-element__header--hidden {
@@ -868,9 +962,10 @@ svc-question,
 
 .svc-question__drag-element {
   width: 100%;
-  height: calcSize(4);
   opacity: 0;
   transition: opacity $creator-transition-duration;
+  width: var(--ctr-survey-question-panel-drag-area-drag-indicator-width, calcSize(3));
+  height: var(--ctr-survey-question-panel-drag-area-drag-indicator-height, calcSize(2));
 
   use {
     fill: var(--ctr-survey-question-panel-drag-area-drag-indicator-color, $foreground-light);
@@ -1167,6 +1262,8 @@ svc-question,
   .svc-panel__add-new-question-container {
     .svc-panel__add-new-question-icon {
       display: block;
+      width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+      height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
     }
 
     .svc-element__question-type-selector {
@@ -1184,11 +1281,6 @@ svc-question,
   }
 }
 
-.sv-list__container .sv-action-bar-item--secondary {
-  .sv-list__item-icon use {
-    fill: $secondary;
-  }
-}
 
 .sd-panel {
   .svc-row {
@@ -1332,21 +1424,26 @@ svc-question,
   top: 0;
   right: 0;
   visibility: hidden;
+}
 
-  .sv-action-bar-item {
-    margin: 0;
-    padding: calcSize(0.5);
-    opacity: 0.5;
-    height: 24px;
+.svc-survey-element-top-toolbar__item {
+  @include defaultActionButtonSettings;
+  padding: var(--ctr-survey-question-panel-toolbar-item-padding-top-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-right-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-bottom-small, calcSize(0.5))
+    var(--ctr-survey-question-panel-toolbar-item-padding-left-small, calcSize(0.5));
+  border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, 2px);
+  opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-muted, 0.5);
+  background-color: transparent;
 
-    &:hover,
-    &:focus {
-      opacity: initial;
-    }
+  &:hover,
+  &:focus {
+    opacity: initial;
+    background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
+  }
 
-    .sv-action-bar-item__icon use {
-      fill: $foreground-dim-light;
-    }
+  use {
+    fill: $foreground-dim-light;
   }
 }
 
diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
index e9b2e9afae..26303f7ddf 100644
--- a/packages/survey-creator-core/src/components/question.ts
+++ b/packages/survey-creator-core/src/components/question.ts
@@ -34,7 +34,7 @@ import {
   propertyExists,
   toggleHovered
 } from "../utils/utils";
-import { SurveyElementAdornerBase } from "./action-container-view-model";
+import { SurveyElementActionContainer, SurveyElementAdornerBase } from "./action-container-view-model";
 require("./question.scss");
 import { settings } from "../creator-settings";
 import { StringEditorConnector, StringItemsNavigatorBase } from "./string-editor";
@@ -298,8 +298,30 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
   }
   protected createActionContainers(): void {
     super.createActionContainers();
+    const defaultCssClasses = {
+      root: "svc-survey-element-toolbar sv-action-bar",
+      item: "svc-survey-element-toolbar__item",
+      itemWithTitle: "svc-survey-element-toolbar__item--with-text",
+      itemAsIcon: "svc-survey-element-toolbar__item--icon",
+      itemActive: "svc-survey-element-toolbar__item--active",
+      itemPressed: "svc-survey-element-toolbar__item--pressed",
+      itemIcon: "svc-survey-element-toolbar-item__icon",
+      itemTitle: "svc-survey-element-toolbar-item__title",
+      itemTitleWithIcon: "svc-survey-element-toolbar-item__title--with-icon",
+    };
+
     this.actionContainer.sizeMode = "small";
+    this.actionContainer.cssClasses = defaultCssClasses;
+    (<SurveyElementActionContainer>this.actionContainer).dotsItem.css += " svc-survey-element-toolbar__dots-item";
+    (<SurveyElementActionContainer>this.actionContainer).dotsItem.innerCss += " svc-survey-element-toolbar__item";
     this.topActionContainer = new ActionContainer();
+    this.topActionContainer.cssClasses = {
+      root: "svc-survey-element-top-toolbar sv-action-bar",
+      item: "svc-survey-element-top-toolbar__item",
+      itemIcon: "svc-survey-element-toolbar-item__icon",
+      itemTitle: "svc-survey-element-toolbar-item__title",
+      itemTitleWithIcon: "svc-survey-element-toolbar-item__title--with-icon",
+    };
     this.topActionContainer.sizeMode = "small";
     this.topActionContainer.setItems([this.expandCollapseAction]);
   }
@@ -477,7 +499,8 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       enabled: true,
       visibleIndex: 0,
       title: !!currItem ? currItem.title : editorLocalization.getString("qt." + this.currentType),
-      iconName: "icon-chevron_16x16"
+      iconName: "icon-chevron_16x16",
+      iconSize: "auto"
     };
     const newAction = this.createDropdownModel({
       actionData: actionData,
@@ -492,9 +515,6 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       }
       return "icon-chevron_16x16";
     });
-    newAction.iconSize = <any>new ComputedUpdater(() => {
-      return newAction.mode === "small" ? 24 : 16;
-    });
     newAction.disableHide = true;
     return newAction;
   }
@@ -632,9 +652,9 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
   private createDropdownModel(options: { actionData: IAction, items: Array<IAction>, updateListModel: (listModel: ListModel) => void }): Action {
     const newAction = createDropdownActionModel({
       id: options.actionData.id,
-      css: "sv-action--convertTo sv-action-bar-item--secondary",
+      css: "svc-dropdown-action--convertTo",
       iconName: options.actionData.iconName,
-      iconSize: 16,
+      iconSize: "auto",
       title: options.actionData.title,
       enabled: options.actionData.enabled,
       visibleIndex: options.actionData.visibleIndex,
@@ -669,12 +689,12 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       id: "isrequired",
       ariaChecked: <any>new ComputedUpdater<boolean>(() => this.isRequired),
       ariaRole: "checkbox",
-      css: "svc-action-bar-item--right sv-action-bar-item--secondary",
+      css: "svc-action-bar-item--right",
       innerCss: "svc-required-action",
       title: this.creator.getLocString("pe.isRequired"),
       visibleIndex: 20,
       iconName: "icon-required",
-      iconSize: 16,
+      iconSize: "auto",
       active: <any>new ComputedUpdater<boolean>(() => this.isRequired),
       action: () => {
         if (
@@ -711,7 +731,7 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
     if (!!inputTypeConverter) {
       items.push(inputTypeConverter);
     }
-    items[items.length - 1].css += " sv-action--convertTo-last";
+    items[items.length - 1].css += " svc-dropdown-action--convertTo-last";
     if (
       typeof element["isRequired"] !== "undefined" &&
       propertyExists(element, "isRequired") &&
diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts
index 000d44a4e4..4e68c6eca4 100644
--- a/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts
+++ b/packages/survey-creator-core/src/components/side-bar/side-bar-model.ts
@@ -123,6 +123,7 @@ export class SidebarModel extends Base {
     this._collapseAction = new Action({
       id: "svd-grid-hide",
       iconName: "icon-collapse-panel",
+      iconSize: "auto",
       css: "svd-grid-hide",
       locTitleName: "ed.hidePanel",
       showTitle: false,
@@ -147,6 +148,7 @@ export class SidebarModel extends Base {
       this._expandAction = new Action({
         id: "svd-grid-expand",
         iconName: "icon-expand-panel",
+        iconSize: "auto",
         css: "svd-grid-expand",
         needSeparator: true,
         action: () => {
diff --git a/packages/survey-creator-core/src/components/side-bar/side-bar.scss b/packages/survey-creator-core/src/components/side-bar/side-bar.scss
index 05f56ab697..e312a6194a 100644
--- a/packages/survey-creator-core/src/components/side-bar/side-bar.scss
+++ b/packages/survey-creator-core/src/components/side-bar/side-bar.scss
@@ -327,9 +327,19 @@ $tabs-width: calc(var(--ctr-menu-toolbar-button-padding-left, 8px) + var(--ctr-m
   }
 }
 
-
 .svd-grid-hide {
   margin-inline-end: auto;
+
+  .sv-action-bar-item--icon {
+    padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-right, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-left, calcSize(1));
+  }
+  .sv-svg-icon {
+    width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3));
+    height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3));
+  }
 }
 
 .svc-side-bar {
diff --git a/packages/survey-creator-core/src/components/side-bar/tab-control.scss b/packages/survey-creator-core/src/components/side-bar/tab-control.scss
index 9f9ee2936f..efb7509550 100644
--- a/packages/survey-creator-core/src/components/side-bar/tab-control.scss
+++ b/packages/survey-creator-core/src/components/side-bar/tab-control.scss
@@ -158,6 +158,11 @@
   justify-content: center;
   align-items: center;
 
+  .sv-svg-icon {
+    width: var(--ctr-menu-toolbar-button-icon-width, 24px);
+    height: var(--ctr-menu-toolbar-button-icon-height, 24px);
+  }
+
   use {
     fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light);
   }
diff --git a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
index 5466358b69..e193513f94 100644
--- a/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/designer-plugin.ts
@@ -163,6 +163,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
       id: "theme-settings",
       locTooltipName: "pe.tabs.creatorSettingTitle",
       iconName: "icon-config",
+      iconSize: "auto",
       pressed: false,
       action: () => {
         this.creator.sidebar.expandSidebar();
@@ -245,6 +246,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
           id: p.name,
           tooltip: p.title,
           iconName: pgTabIcons[p.name] || pgTabIcons["undefined"],
+          iconSize: "auto",
           active: this.activePageIsPropertyGrid && p.name === this.propertyGrid.survey.currentPage.name,
           pressed: false,
           action: () => {
@@ -314,6 +316,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     const toolboxAction = new Action({
       id: "svd-toolbox",
       iconName: "icon-toolbox",
+      iconSize: "auto",
       needSeparator: true,
       action: () => {
         if (!this.creator.showSidebar) {
@@ -332,6 +335,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.surveySettingsAction = new Action({
       id: "svd-settings",
       iconName: "icon-settings",
+      iconSize: "auto",
       needSeparator: <any>new ComputedUpdater<boolean>(() => {
         return notShortCircuitAnd(this.creator.toolboxLocation !== "sidebar", !this.creator.isMobileView);
       }),
@@ -354,6 +358,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.saveSurveyAction = new Action({
       id: "svd-save",
       iconName: "icon-save",
+      iconSize: "auto",
       action: () => this.creator.saveSurveyActionHandler(),
       active: false,
       enabled: false,
@@ -368,6 +373,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.designerAction = new Action({
       id: "svd-designer",
       iconName: "icon-config",
+      iconSize: "auto",
       visible: this.createVisibleUpdater(),
       active: true,
       locTitleName: "ed.designer",
@@ -378,6 +384,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.previewAction = new Action({
       id: "svd-preview",
       iconName: "icon-preview",
+      iconSize: "auto",
       action: () => {
         this.creator.makeNewViewActive(this.creator.showThemeTab ? "theme" : "test");
       },
diff --git a/packages/survey-creator-core/src/components/tabs/designer.ts b/packages/survey-creator-core/src/components/tabs/designer.ts
index 9c75cb313b..d6b53cbe29 100644
--- a/packages/survey-creator-core/src/components/tabs/designer.ts
+++ b/packages/survey-creator-core/src/components/tabs/designer.ts
@@ -95,11 +95,13 @@ export class TabDesignerViewModel extends Base {
       id: "collapseAll",
       locTooltipName: "ed.collapseAllTooltip",
       iconName: "icon-collapseall-24x24",
+      iconSize: "auto",
       action: action
     }, {
       id: "expandAll",
       locTooltipName: "ed.expandAllTooltip",
       iconName: "icon-expandall-24x24",
+      iconSize: "auto",
       action: action
     }]);
   }
diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts b/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts
index 90893813e1..a00d78091d 100644
--- a/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts
@@ -96,7 +96,7 @@ export abstract class JsonEditorBaseModel extends Base {
         title: title,
         tooltip: error.text,
         iconName: "icon-error",
-        iconSize: 16,
+        iconSize: "auto",
         data: {
           error: error,
           showFixButton: error.isFixable,
@@ -162,6 +162,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
     this.importAction = new Action({
       id: "svc-json-import",
       iconName: "icon-load",
+      iconSize: "auto",
       locTitleName: "ed.surveyJsonImportButton",
       locTooltipName: "ed.surveyJsonImportButton",
       visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
@@ -188,6 +189,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
     this.exportAction = new Action({
       id: "svc-json-export",
       iconName: "icon-download",
+      iconSize: "auto",
       locTitleName: "ed.surveyJsonExportButton",
       locTooltipName: "ed.surveyJsonExportButton",
       visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
@@ -202,6 +204,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
     this.copyAction = new Action({
       id: "svc-json-copy",
       iconName: "icon-copy",
+      iconSize: "auto",
       locTitleName: "ed.surveyJsonCopyButton",
       locTooltipName: "ed.surveyJsonCopyButton",
       visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
diff --git a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss
index 4f26a931ed..632314f631 100644
--- a/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss
+++ b/packages/survey-creator-core/src/components/tabs/json-editor-textarea.scss
@@ -100,6 +100,8 @@ svc-tab-json-editor-textarea {
 
 .svc-json-error__icon {
   fill: $red;
+  width: var(--ctr-code-viewer-code-error-row-icon-width, calcSize(2));
+  height: var(--ctr-code-viewer-code-error-row-icon-height, calcSize(2));
 }
 
 .svc-json-error__container {
diff --git a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
index a05636f04b..71438ae3d1 100644
--- a/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/logic-plugin.ts
@@ -146,6 +146,7 @@ export class TabLogicPlugin implements ICreatorPlugin {
       this.fastEntryAction = new Action({
         id: "svc-logic-fast-entry",
         iconName: "icon-fast-entry",
+        iconSize: "auto",
         locTitleName: "pe.fastEntry",
         visible: false,
         component: "sv-action-bar-item",
diff --git a/packages/survey-creator-core/src/components/tabs/preview.ts b/packages/survey-creator-core/src/components/tabs/preview.ts
index 649639839c..aeebf6a159 100644
--- a/packages/survey-creator-core/src/components/tabs/preview.ts
+++ b/packages/survey-creator-core/src/components/tabs/preview.ts
@@ -73,6 +73,12 @@ export class PreviewViewModel extends Base {
   constructor(protected surveyProvider: SurveyCreatorModel, private startThemeClasses: any = defaultV2Css) {
     super();
     this.simulator = new SurveySimulatorModel(surveyProvider);
+    this.pages.cssClasses = {
+      root: "sv-action-bar svc-pages-toolbar",
+      item: "sv-action-bar-item svc-survey-element-toolbar__item",
+      itemAsIcon: "svc-survey-element-toolbar__item--icon",
+      itemIcon: "sv-action-bar-item__icon svc-survey-element-toolbar-item__icon",
+    };
   }
 
   public get isMobileView() {
@@ -239,9 +245,6 @@ export class PreviewViewModel extends Base {
       this.prevPageAction.iconName = <any>new ComputedUpdater<string>(() => {
         return this.surveyProvider.isMobileView ? "icon-arrow-left" : "icon-arrow-left_16x16";
       });
-      this.prevPageAction.iconSize = <any>new ComputedUpdater<number>(() => {
-        return this.surveyProvider.isMobileView ? 24 : 16;
-      });
       this.prevPageAction.action = () => setNearPage(false);
       pageActions.push(this.prevPageAction);
     }
@@ -278,9 +281,6 @@ export class PreviewViewModel extends Base {
       this.nextPageAction.iconName = <any>new ComputedUpdater<string>(() => {
         return this.surveyProvider.isMobileView ? "icon-arrow-right" : "icon-arrow-right_16x16";
       });
-      this.nextPageAction.iconSize = <any>new ComputedUpdater<number>(() => {
-        return this.surveyProvider.isMobileView ? 24 : 16;
-      });
       this.nextPageAction.action = () => setNearPage(true);
       pageActions.push(this.nextPageAction);
     }
diff --git a/packages/survey-creator-core/src/components/tabs/test-plugin.ts b/packages/survey-creator-core/src/components/tabs/test-plugin.ts
index b0121bcbf7..5bcb7d5f80 100644
--- a/packages/survey-creator-core/src/components/tabs/test-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/test-plugin.ts
@@ -150,6 +150,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.deviceSelectorAction = createDropdownActionModel({
         id: "deviceSelector",
         iconName: "icon-device-desktop",
+        iconSize: "auto",
         mode: "small",
         visible: <any>new ComputedUpdater<boolean>(() => {
           return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
@@ -168,6 +169,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.orientationSelectorAction = new Action({
         id: "orientationSelector",
         iconName: "icon-device-rotate",
+        iconSize: "auto",
         mode: "small",
         visible: <any>new ComputedUpdater<boolean>(() => {
           return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
@@ -183,6 +185,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.invisibleToggleAction = new Action({
         id: "showInvisible",
         iconName: "icon-invisible-items",
+        iconSize: "auto",
         mode: "small",
         needSeparator: <any>new ComputedUpdater<boolean>(() => {
           return !this.creator.isMobileView;
@@ -236,6 +239,7 @@ export class TabTestPlugin implements ICreatorPlugin {
       this.changeThemeAction = new Action({
         id: "themeSwitcher",
         iconName: "icon-theme",
+        iconSize: "auto",
         component: "sv-action-bar-item-dropdown",
         mode: "large",
         locTitleName: this.getThemeLocName(getStartThemeName()),
@@ -276,6 +280,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.designerAction = new Action({
       id: "svd-designer",
       iconName: "icon-config",
+      iconSize: "auto",
       action: () => { this.creator.makeNewViewActive("designer"); },
       visible: this.createVisibleUpdater(),
       locTitleName: "ed.designer",
@@ -285,6 +290,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.previewAction = new Action({
       id: "svd-preview",
       iconName: "icon-preview",
+      iconSize: "auto",
       active: true,
       visible: this.createVisibleUpdater(),
       locTitleName: "tabs.preview",
@@ -295,6 +301,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.prevPageAction = new Action({
       id: "prevPage",
       iconName: "icon-arrow-left_16x16",
+      iconSize: "auto",
       needSeparator: <any>new ComputedUpdater<boolean>(() => {
         return this.creator.isMobileView;
       }),
@@ -304,6 +311,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.nextPageAction = new Action({
       id: "nextPage",
       iconName: "icon-arrow-right_16x16",
+      iconSize: "auto",
       visible: false
     });
     return items;
diff --git a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
index 537946e9e7..f3afe2d7b4 100644
--- a/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
+++ b/packages/survey-creator-core/src/components/tabs/theme-plugin.ts
@@ -499,6 +499,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.designerAction = new Action({
       id: "svd-designer",
       iconName: "icon-config",
+      iconSize: "auto",
       action: () => { this.creator.makeNewViewActive("designer"); },
       visible: this.createVisibleUpdater(),
       locTitleName: "ed.designer",
@@ -508,6 +509,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.prevPageAction = new Action({
       id: "prevPage",
       iconName: "icon-arrow-left_16x16",
+      iconSize: "auto",
       needSeparator: <any>new ComputedUpdater<boolean>(() => {
         return this.creator.isMobileView;
       }),
@@ -517,12 +519,14 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.nextPageAction = new Action({
       id: "nextPage",
       iconName: "icon-arrow-right_16x16",
+      iconSize: "auto",
       visible: false
     });
 
     this.previewAction = new Action({
       id: "svd-preview",
       iconName: "icon-preview",
+      iconSize: "auto",
       active: true,
       visible: this.createVisibleUpdater(),
       locTitleName: "tabs.preview",
@@ -533,6 +537,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.testAgainAction = new Action({
       id: "testSurveyAgain",
       visible: false,
+      iconSize: "auto",
       locTitleName: "ed.testSurveyAgain",
       action: () => {
         this.model.testAgain();
@@ -542,6 +547,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.undoAction = new Action({
       id: "action-undo-theme",
       iconName: "icon-undo",
+      iconSize: "auto",
       locTitleName: "ed.undo",
       showTitle: false,
       visible: this.createVisibleUpdater(),
@@ -550,6 +556,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.redoAction = new Action({
       id: "action-redo-theme",
       iconName: "icon-redo",
+      iconSize: "auto",
       locTitleName: "ed.redo",
       showTitle: false,
       visible: this.createVisibleUpdater(),
@@ -561,6 +568,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.saveThemeAction = new Action({
       id: "svd-save-theme",
       iconName: "icon-save",
+      iconSize: "auto",
       action: () => {
         this.creator.saveThemeActionHandler();
         this.saveThemeAction.enabled = false;
@@ -579,6 +587,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.resetTheme = new Action({
       id: "svc-reset-theme",
       iconName: "icon-reset",
+      iconSize: "auto",
       locTitleName: "ed.themeResetButton",
       locTooltipName: "ed.themeResetButton",
       mode: "small",
@@ -596,6 +605,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.themeSettingsAction = new Action({
       id: "svc-theme-settings",
       iconName: "icon-theme",
+      iconSize: "auto",
       action: () => {
         if (!this.creator.showSidebar) {
           this.creator.setShowSidebar(true, true);
@@ -613,6 +623,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.importAction = new Action({
       id: "svc-theme-import",
       iconName: "icon-load",
+      iconSize: "auto",
       locTitleName: "ed.themeImportButton",
       locTooltipName: "ed.themeImportButton",
       visible: this.createVisibleUpdater(),
@@ -639,6 +650,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
     this.exportAction = new Action({
       id: "svc-theme-export",
       iconName: "icon-download",
+      iconSize: "auto",
       locTitleName: "ed.themeExportButton",
       locTooltipName: "ed.themeExportButton",
       visible: this.createVisibleUpdater(),
@@ -654,6 +666,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
       this.invisibleToggleAction = new Action({
         id: "showInvisible",
         iconName: "icon-invisible-items",
+        iconSize: "auto",
         mode: "small",
         locTitleName: "ts.showInvisibleElements",
         visible: false,
diff --git a/packages/survey-creator-core/src/components/tabs/translation.ts b/packages/survey-creator-core/src/components/tabs/translation.ts
index b55cf1f073..1a2c0a671b 100644
--- a/packages/survey-creator-core/src/components/tabs/translation.ts
+++ b/packages/survey-creator-core/src/components/tabs/translation.ts
@@ -771,6 +771,7 @@ export class Translation extends Base implements ITranslationLocales {
           const locale = q.value[rowIndex].name;
           options.actions.splice(0, 0, new Action({
             iconName: "icon-language",
+            iconSize: "auto",
             locTooltipName: "ed.translateUsigAI",
             location: "end",
             action: () => this.showTranslationEditor(locale)
@@ -1087,6 +1088,7 @@ export class Translation extends Base implements ITranslationLocales {
     this.addLanguageAction = createDropdownActionModel({
       id: "svc-translation-choose-language",
       iconName: "icon-add",
+      iconSize: "auto",
       enabled: <any>(new ComputedUpdater(() => this.isChooseLanguageEnabled && !this.readOnly)),
     }, {
       items: this.chooseLanguageActions,
@@ -1577,11 +1579,12 @@ export class TranslationEditor {
     navigationBar.cssClasses = survey.css.actionBar;
     navigationBar.containerCss = survey.css.footer;
     survey.addNavigationItem(this.createLocaleFromAction());
-    const actionCss = "svc-action-bar-item--right sv-action-bar-item--secondary";
+    const actionCss = "svc-action-bar-item--right";
     if (this.options.getHasMachineTranslation()) {
       survey.addNavigationItem(new Action({
         id: "svc-translation-machine",
         iconName: "icon-language",
+        iconSize: "auto",
         css: actionCss,
         locTitleName: "ed.translateUsigAI",
         component: "sv-action-bar-item",
@@ -1646,7 +1649,6 @@ export class TranslationEditor {
       css: "st-translation-machine-from",
       location: "start",
       title: defaultLocaleTitle,
-      iconSize: "auto",
       innerCss: "st-translation-machine-from__btn",
       data: {
         additionalTitleCss: "st-translation-machine-from__title",
@@ -1665,6 +1667,7 @@ export class TranslationEditor {
     if(!!action) {
       action.enabled = this.fromLocales.length > 0;
       action.iconName = action.enabled ? "icon-chevron_16x16" : undefined;
+      action.iconSize = "auto";
       action.data.containerCss = new CssClassBuilder()
         .append("st-translation-machine-from__container")
         .append("st-translation-machine-from__container--disabled", !action.enabled)
@@ -1680,6 +1683,7 @@ export function createImportCSVAction(action: () => void, needSeparator: boolean
   return new Action({
     id: "svc-translation-import",
     iconName: "icon-load",
+    iconSize: "auto",
     locTitleName: "ed.translationImportFromSCVButton",
     locTooltipName: "ed.translationImportFromSCVButton",
     mode: isInEditor ? "large" : "small",
@@ -1692,6 +1696,7 @@ export function createExportCSVAction(action: () => void, isInEditor: boolean =
   return new Action({
     id: "svc-translation-export",
     iconName: "icon-download",
+    iconSize: "auto",
     locTitleName: "ed.translationExportToSCVButton",
     locTooltipName: "ed.translationExportToSCVButton",
     mode: isInEditor ? "large" : "small",
diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
index 01c0e45fb1..e22c4be8f9 100644
--- a/packages/survey-creator-core/src/creator-base.ts
+++ b/packages/survey-creator-core/src/creator-base.ts
@@ -3745,6 +3745,7 @@ export class SurveyCreatorModel extends Base
       title: item.title,
       id: item.name,
       iconName: item.iconName,
+      iconSize: "auto",
       visible: item.visible,
       enabled: item.enabled,
       needSeparator: needSeparator
diff --git a/packages/survey-creator-core/src/custom-questions/question-color.ts b/packages/survey-creator-core/src/custom-questions/question-color.ts
index bc985f4425..cafc78e7b3 100644
--- a/packages/survey-creator-core/src/custom-questions/question-color.ts
+++ b/packages/survey-creator-core/src/custom-questions/question-color.ts
@@ -151,6 +151,7 @@ export class QuestionColorModel extends QuestionTextModel {
     const dropdownAction = this.dropdownAction;
     dropdownAction.cssClasses = { item: classes.colorDropdown };
     dropdownAction.iconName = classes.colorDropdownIcon;
+    dropdownAction.iconSize = "auto" as any;
     const listModel = <ListModel<ItemValue>>dropdownAction.popupModel.contentComponentData.model;
     listModel.cssClasses = {};
     listModel.cssClasses = {
diff --git a/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts b/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts
index 6352ee4008..6853836326 100644
--- a/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts
+++ b/packages/survey-creator-core/src/plugins/undo-redo/undo-redo-controller.ts
@@ -156,6 +156,7 @@ export class UndoRedoController extends Base {
     this.undoAction = new Action({
       id: "action-undo",
       iconName: "icon-undo",
+      iconSize: "auto",
       locTitleName: "ed.undo",
       showTitle: false,
       visible: <any>new ComputedUpdater(() => this.creator.activeTab === "designer"),
@@ -167,6 +168,7 @@ export class UndoRedoController extends Base {
     this.redoAction = new Action({
       id: "action-redo",
       iconName: "icon-redo",
+      iconSize: "auto",
       locTitleName: "ed.redo",
       showTitle: false,
       visible: <any>new ComputedUpdater(() => this.creator.activeTab === "designer"),
diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss
index dfbc604c8f..35d06c6cfd 100644
--- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss
+++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-action-bar.scss
@@ -39,8 +39,16 @@
   }
 }
 
+.spg-action-button--icon {
+  padding: var(--ctr-actionbar-button-padding-top-large-icon, calcSize(1))
+    var(--ctr-actionbar-button-padding-right-large-icon, calcSize(1))
+    var(--ctr-actionbar-button-padding-bottom-large-icon, calcSize(1))
+    var(--ctr-actionbar-button-padding-left-large-icon, calcSize(1));
+}
 .spg-action-button__icon {
   display: block;
+  width: var(--ctr-actionbar-button-icon-width, calcSize(3));
+  height: var(--ctr-actionbar-button-icon-height, calcSize(3));
 
   use {
     fill: var(--ctr-actionbar-button-icon-color, $foreground-light);
diff --git a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
index f709d8d637..ad23f727c3 100644
--- a/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
+++ b/packages/survey-creator-core/src/property-grid-theme/blocks/spg-question.scss
@@ -146,10 +146,12 @@
 
 .spg-question__erbox {
   @include ctrDefaultFont;
-  padding: calcSize(1) calcSize(1.5) calcSize(1) calcSize(1.5);
+  padding: var(--ctr-error-message-padding-top, calcSize(1)) var(--ctr-error-message-padding-right, calcSize(1.5))
+    var(--ctr-error-message-padding-bottom, calcSize(1)) var(--ctr-error-message-padding-left, calcSize(1.5));
+
   color: var(--ctr-error-message-text-color, $foreground);
   background-color: var(--ctr-error-message-background-color, $red-light);
-  border-radius: calcSize(0.5);
+  border-radius: var(--ctr-error-message-corner-radius, calcSize(0.5));
 }
 
 .spg-question__erbox,
@@ -157,15 +159,18 @@
 sv-question-error {
   & > div {
     display: flex;
-    gap: calcSize(1);
+    gap: var(--ctr-error-message-gap, calcSize(1));
   }
 }
 
-
-
 .spg-question__erbox-icon {
+  width: var(--ctr-error-message-icon-width, calcSize(3));
+  height: var(--ctr-error-message-icon-height, calcSize(3));
+  
   .sv-svg-icon {
     vertical-align: top;
+    width: var(--ctr-error-message-icon-width, calcSize(3));
+    height: var(--ctr-error-message-icon-height, calcSize(3));
   }
 
   use {
diff --git a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss b/packages/survey-creator-core/src/property-grid-theme/property-grid.scss
index 1bee4c6c2e..5236c0cd7b 100644
--- a/packages/survey-creator-core/src/property-grid-theme/property-grid.scss
+++ b/packages/survey-creator-core/src/property-grid-theme/property-grid.scss
@@ -124,8 +124,11 @@
     flex-grow: 1;
 
     .spg-action-button--icon {
-      opacity: 0.5;
-      padding: calcSize(0.5);
+      padding: var(--ctr-actionbar-button-padding-top-small-icon, calcSize(0.5))
+        var(--ctr-actionbar-button-padding-right-small-icon, calcSize(0.5))
+        var(--ctr-actionbar-button-padding-bottom-small-icon, calcSize(0.5))
+        var(--ctr-actionbar-button-padding-left-small-icon, calcSize(0.5));
+      opacity: var(--ctr-actionbar-button-opacity-muted, 0.5);
     }
 
     .spg-action-button--icon:focus,
@@ -137,6 +140,11 @@
       opacity: var(--ctr-actionbar-button-opacity-pressed, 0.5);
     }
 
+    .spg-action-button__icon {
+      width: var(--ctr-actionbar-button-icon-width-small, calcSize(2));
+      height: var(--ctr-actionbar-button-icon-height-small, calcSize(2));
+    }
+
     svg {
       fill: $foreground-dim-light;
     }
diff --git a/packages/survey-creator-core/src/property-grid/index.ts b/packages/survey-creator-core/src/property-grid/index.ts
index 7ced86f63d..4963069fa0 100644
--- a/packages/survey-creator-core/src/property-grid/index.ts
+++ b/packages/survey-creator-core/src/property-grid/index.ts
@@ -373,7 +373,6 @@ export class PropertyGridTitleActionsCreator {
     if (!!helpAction) {
       actions.unshift(helpAction);
       question.getTitleToolbar().containerCss += " spg-title-toolbar--single-help-action";
-      helpAction.iconSize = 16;
     }
     if (actions.length > 0) {
       options.titleActions = actions;
@@ -390,6 +389,7 @@ export class PropertyGridTitleActionsCreator {
       title: getLocString("pe.clear"),
       showTitle: false,
       iconName: "icon-clear",
+      iconSize: "auto",
       innerCss: "spg-action-button--danger",
       enabled: enabled,
       visible: <any>new ComputedUpdater<boolean>(() => {
@@ -428,6 +428,7 @@ export class PropertyGridTitleActionsCreator {
     var setupAction = {
       id: "property-grid-setup",
       iconName: property.isArray ? "icon-fast-entry" : "icon-wizard",
+      iconSize: "auto",
       enabled: enabled,
       title: getLocString("pe.edit"),
       showTitle: false,
@@ -444,6 +445,7 @@ export class PropertyGridTitleActionsCreator {
       tooltip: question.description,
       id: "property-grid-help",
       iconName: this.getHelpActionIconName(question),
+      iconSize: "auto",
       css: "spg-help-action",
       showTitle: false,
       action: () => {
diff --git a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
index 24127617dc..e5b3cedaee 100644
--- a/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
+++ b/packages/survey-creator-core/src/property-grid/property-grid-view-model.ts
@@ -159,7 +159,7 @@ export class PropertyGridViewModel extends Base {
     this.objectSelectionAction = new MenuButton({
       id: "svd-grid-object-selector",
       title: this.selectedElementName,
-      css: "sv-action--object-selector sv-action-bar-item--secondary",
+      css: "sv-action--object-selector",
       component: "sv-action-bar-item-dropdown",
       disableHide: true,
       pressed: false,
diff --git a/packages/survey-creator-core/src/responsivity.scss b/packages/survey-creator-core/src/responsivity.scss
index e768c7a026..7fd4e418d1 100644
--- a/packages/survey-creator-core/src/responsivity.scss
+++ b/packages/survey-creator-core/src/responsivity.scss
@@ -117,24 +117,24 @@
   .svc-question__content-actions {
     width: calc(100% + 3 * #{$base-unit});
 
-    .sv-action-bar-item {
+    .svc-survey-element-toolbar__item {
       border: 0;
     }
   }
 
   .svc-page__content-actions {
-    .sv-action-bar {
+    .svc-page-toolbar {
       padding-right: calcSize(1);
 
       .sv-action {
         .sv-action__content {
           padding-right: 0;
-
-          .sv-action-bar-item__title--with-icon {
-            display: none;
-          }
         }
       }
     }
   }
+
+  .svc-page-toolbar-item__title--with-icon {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index 6cec96e155..3e14c6d5a6 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -49,15 +49,19 @@ const Theme = {
     "--ctr-toolbox-item-text-opacity-disabled": 0.25,
     "--ctr-page-navigator-button-opacity-pressed": 0.5,
     "--ctr-button-text-opacity-disabled": 0.25,
-    "--ctr-notification-opacity": "75px",
+    "--ctr-notification-opacity": 0.75,
     "--ctr-notification-opacity-error": 1,
     "--ctr-toolbox-group-header-border-width-top": "0px",
     "--ctr-toolbox-group-header-border-width-left": "0px",
     "--ctr-toolbox-group-header-border-width-right": "0px",
+    "--ctr-data-table-cell-drop-down-arrow-opacity": 0.5,
     "--ctr-data-table-row-padding-left": "0px",
+    "--ctr-data-table-row-border-width-last-row": "0px",
     "--ctr-toolbox-separator-padding-right": "0px",
     "--ctr-survey-question-panel-toolbar-item-opacity-pressed": 0.5,
     "--ctr-survey-question-panel-toolbar-item-opacity-disabled": 0.25,
+    "--ctr-survey-question-panel-toolbar-item-opacity-muted": 0.5,
+    "--ctr-survey-question-panel-drag-area-drag-indicator-opacity": 0.5,
     "--ctr-label-padding-left": "0px",
     "--ctr-label-padding-right": "0px",
     "--ctr-survey-action-button-opacity-disabled": 0.25,
@@ -90,7 +94,7 @@ const Theme = {
     "--ctr-toolbox-item-shadow-subitem-1-color": "#00000000",
     "--ctr-toolbox-item-shadow-subitem-2-color": "#00000000",
     "--ctr-toolbox-submenu-margin-left": "0px",
-    "--ctr-survey-page-drag-indicator-opacity": "50px",
+    "--ctr-survey-page-drag-indicator-opacity": 0.5,
     "--ctr-toggle-button-thumb-border-width": "0px",
     "--ctr-line-height-unit": "8px",
     "--ctr-font-unit": "8px",
@@ -149,6 +153,7 @@ const Theme = {
     "--ctr-actionbar-button-corner-radius": "var(--sjs-corner-radius-x1)",
     "--ctr-popup-menu-corner-radius": "var(--sjs-corner-radius-x1)",
     "--ctr-popup-menu-footer-padding-left": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-icon-color": "var(--sjs-layer-1-foreground-50)",
     "--ctr-button-group-item-background-color-disabled": "var(--sjs-layer-1-background-500)",
     "--ctr-radio-button-background-color-selected-hovered": "var(--sjs-layer-1-background-500)",
     "--ctr-checkbox-background-color-selected-hovered": "var(--sjs-layer-1-background-500)",
@@ -172,6 +177,8 @@ const Theme = {
     "--ctr-popup-corner-radius": "var(--sjs-corner-radius-x2)",
     "--ctr-shadow-large-color": "var(--sjs-special-glow)",
     "--ctr-shadow-medium-color": "var(--sjs-special-glow)",
+    "--ctr-button-contextual-button-margin-horizontal": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-margin-vertical": "var(--sjs-spacing-x1)",
     "--ctr-button-padding-horizontal-small": "var(--sjs-spacing-x4)",
     "--ctr-button-padding-vertical-small": "var(--sjs-spacing-x150)",
     "--ctr-button-corner-radius": "var(--sjs-corner-radius-x075)",
@@ -241,6 +248,10 @@ const Theme = {
     "--ctr-actionbar-button-padding-bottom-large-icon": "var(--sjs-spacing-x1)",
     "--ctr-actionbar-button-text-color": "var(--sjs-primary-background-500)",
     "--ctr-actionbar-button-background-color-hovered": "var(--sjs-primary-background-10)",
+    "--ctr-actionbar-button-padding-left-small-icon": "var(--sjs-spacing-x05)",
+    "--ctr-actionbar-button-padding-right-small-icon": "var(--sjs-spacing-x05)",
+    "--ctr-actionbar-button-padding-top-small-icon": "var(--sjs-spacing-x05)",
+    "--ctr-actionbar-button-padding-bottom-small-icon": "var(--sjs-spacing-x05)",
     "--ctr-actionbar-button-padding-left-medium-text": "var(--sjs-spacing-x2)",
     "--ctr-actionbar-button-padding-right-medium-text": "var(--sjs-spacing-x2)",
     "--ctr-actionbar-button-padding-top-medium-text": "var(--sjs-spacing-x05)",
@@ -266,6 +277,10 @@ const Theme = {
     "--ctr-editor-button-padding-bottom": "var(--sjs-spacing-x1)",
     "--ctr-editor-button-padding-left": "var(--sjs-spacing-x1)",
     "--ctr-editor-button-padding-right": "var(--sjs-spacing-x1)",
+    "--ctr-actionbar-button-icon-width-small": "var(--sjs-size-x2)",
+    "--ctr-actionbar-button-icon-height-small": "var(--sjs-size-x2)",
+    "--ctr-actionbar-button-icon-width": "var(--sjs-size-x3)",
+    "--ctr-actionbar-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-editor-color-swatch-icon-width": "var(--sjs-size-x2)",
     "--ctr-editor-color-swatch-icon-height": "var(--sjs-size-x2)",
     "--ctr-editor-button-icon-width": "var(--sjs-size-x3)",
@@ -315,6 +330,8 @@ const Theme = {
     "--ctr-page-navigator-item-gap": "var(--sjs-spacing-x1)",
     "--ctr-page-navigator-item-corner-radius": "var(--sjs-corner-radius-x075)",
     "--ctr-page-navigator-button-padding": "var(--sjs-spacing-x125)",
+    "--ctr-page-navigator-button-icon-width": "var(--sjs-size-x3)",
+    "--ctr-page-navigator-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-page-navigator-button-corner-radius": "var(--sjs-corner-radius-x1)",
     "--ctr-page-navigator-button-background-color-hovered": "var(--sjs-primary-background-10)",
     "--ctr-button-background-color": "var(--sjs-layer-1-background-500)",
@@ -426,12 +443,14 @@ const Theme = {
     "--ctr-data-table-cell-padding-right": "var(--sjs-spacing-x1)",
     "--ctr-data-table-cell-padding-top": "var(--sjs-spacing-x1)",
     "--ctr-data-table-cell-padding-bottom": "var(--sjs-spacing-x1)",
+    "--ctr-data-table-cell-drop-down-arrow-color": "var(--sjs-layer-1-foreground-50)",
     "--ctr-data-table-cell-text-color-header": "var(--sjs-layer-3-foreground-50)",
     "--ctr-data-table-cell-border-color-focused": "var(--sjs-primary-background-500)",
     "--ctr-data-table-cell-corner-radius-focused": "var(--sjs-corner-radius-x075)",
     "--ctr-data-table-row-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-data-table-row-background-color-header": "var(--sjs-layer-3-background-500)",
     "--ctr-data-table-row-border-color": "var(--sjs-border-10)",
+    "--ctr-data-table-row-border-width": "var(--sjs-stroke-x1)",
     "--ctr-data-table-row-padding-top": "var(--sjs-spacing-x05)",
     "--ctr-data-table-row-padding-bottom": "var(--sjs-spacing-x05)",
     "--ctr-data-table-row-padding-right": "var(--sjs-spacing-x05)",
@@ -440,6 +459,14 @@ const Theme = {
     "--ctr-data-table-row-padding-bottom-header": "var(--sjs-spacing-x1)",
     "--ctr-data-table-row-background-color-drop-spot": "var(--sjs-layer-1-background-400)",
     "--ctr-error-message-background-color": "var(--sjs-semantic-red-background-10)",
+    "--ctr-error-message-corner-radius": "var(--sjs-corner-radius-x05)",
+    "--ctr-error-message-gap": "var(--sjs-spacing-x1)",
+    "--ctr-error-message-padding-left": "var(--sjs-spacing-x150)",
+    "--ctr-error-message-padding-right": "var(--sjs-spacing-x150)",
+    "--ctr-error-message-padding-top": "var(--sjs-spacing-x1)",
+    "--ctr-error-message-padding-bottom": "var(--sjs-spacing-x1)",
+    "--ctr-error-message-icon-width": "var(--sjs-size-x3)",
+    "--ctr-error-message-icon-height": "var(--sjs-size-x3)",
     "--ctr-error-message-icon-color": "var(--sjs-semantic-red-background-500)",
     "--ctr-error-message-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-toolbox-separator-color": "var(--sjs-border-25)",
@@ -454,18 +481,42 @@ const Theme = {
     "--ctr-toolbox-group-gap": "var(--sjs-spacing-x05)",
     "--ctr-toolbox-group-padding-left": "var(--sjs-spacing-x150)",
     "--ctr-toolbox-group-padding-right": "var(--sjs-spacing-x150)",
+    "--ctr-button-contextual-button-corner-radius": "var(--sjs-corner-radius-x05)",
+    "--ctr-button-contextual-button-padding-left": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-padding-right": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-padding-top": "var(--sjs-spacing-x1)",
+    "--ctr-button-contextual-button-padding-bottom": "var(--sjs-spacing-x1)",
     "--ctr-button-contextual-button-background-color-hovered": "var(--sjs-layer-3-background-500)",
+    "--ctr-button-contextual-button-icon-width": "var(--sjs-size-x3)",
+    "--ctr-button-contextual-button-icon-height": "var(--sjs-size-x3)",
     "--ctr-button-contextual-button-background-color-focused": "var(--sjs-primary-background-10)",
+    "--ctr-survey-question-panel-toolbar-item-gap": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-padding-left": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-padding-right": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-padding-top": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-padding-bottom": "var(--sjs-spacing-x05)",
     "--ctr-survey-question-panel-toolbar-item-background-color-hovered": "var(--sjs-layer-1-background-400)",
+    "--ctr-survey-question-panel-toolbar-item-icon-container-width": "var(--sjs-size-x3)",
+    "--ctr-survey-question-panel-toolbar-item-icon-container-height": "var(--sjs-size-x3)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-left": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-right": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-top": "var(--sjs-spacing-x05)",
+    "--ctr-survey-question-panel-toolbar-item-icon-padding-bottom": "var(--sjs-spacing-x05)",
     "--ctr-survey-question-panel-toolbar-item-icon-color": "var(--sjs-secondary-background-500)",
     "--ctr-survey-question-panel-toolbar-item-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-survey-question-panel-toolbar-item-background-color-selected": "var(--sjs-secondary-background-10)",
     "--ctr-survey-page-toolbar-item-icon-color-pressed": "var(--sjs-layer-3-foreground-50)",
     "--ctr-survey-page-toolbar-item-text-color": "var(--sjs-layer-3-foreground-100)",
+    "--ctr-survey-question-panel-toolbar-item-padding-left-with-text": "var(--sjs-spacing-x1)",
+    "--ctr-survey-question-panel-toolbar-item-padding-right-with-text": "var(--sjs-spacing-x1)",
     "--ctr-survey-page-toolbar-item-background-color-selected": "var(--sjs-primary-background-10)",
     "--ctr-survey-question-panel-drag-area-drag-indicator-color": "var(--sjs-layer-1-foreground-50)",
+    "--ctr-survey-question-panel-drag-area-drag-indicator-width": "var(--sjs-size-x3)",
+    "--ctr-survey-question-panel-drag-area-drag-indicator-height": "var(--sjs-size-x2)",
     "--ctr-preview-pager-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-preview-pager-border-color": "var(--sjs-border-25)",
+    "--ctr-code-viewer-code-error-row-icon-width": "var(--sjs-size-x2)",
+    "--ctr-code-viewer-code-error-row-icon-height": "var(--sjs-size-x2)",
     "--ctr-code-viewer-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-code-viewer-text-color": "var(--sjs-code-gray-300)",
     "--ctr-code-viewer-line-number-panel-background-color": "var(--sjs-layer-2-background-500)",
@@ -515,6 +566,8 @@ const Theme = {
     "--ctr-search-button-padding-vertical": "var(--sjs-spacing-x05)",
     "--ctr-search-button-padding-horizontal": "var(--sjs-spacing-x05)",
     "--ctr-search-button-background-color-hovered": "var(--sjs-layer-1-background-400)",
+    "--ctr-search-button-icon-width": "var(--sjs-size-x2)",
+    "--ctr-search-button-icon-height": "var(--sjs-size-x2)",
     "--ctr-property-grid-search-button-icon-color": "var(--sjs-layer-3-foreground-50)",
     "--ctr-property-grid-search-button-background-color-hovered": "var(--sjs-layer-3-background-400)",
     "--ctr-property-grid-search-icon-color": "var(--sjs-layer-3-foreground-50)",
@@ -522,6 +575,7 @@ const Theme = {
     "--ctr-scrollbar-background-color": "var(--sjs-border-10)",
     "--ctr-scrollbar-padding-vertical": "var(--sjs-spacing-x05)",
     "--ctr-scrollbar-width": "var(--sjs-size-x150)",
+    "--ctr-survey-question-panel-toolbar-gap": "var(--sjs-spacing-x1)",
     "--ctr-survey-info-panel-background-color": "var(--sjs-layer-2-background-500)",
     "--ctr-survey-info-panel-text-color": "var(--sjs-layer-2-foreground-50)",
     "--ctr-survey-action-button-icon-color-positive": "var(--sjs-primary-background-500)",
@@ -531,6 +585,12 @@ const Theme = {
     "--ctr-survey-action-button-background-color-hovered-positive": "var(--sjs-primary-background-10)",
     "--ctr-survey-action-button-background-color-hovered-negative": "var(--sjs-semantic-red-background-10)",
     "--ctr-survey-action-button-icon-color-disabled": "var(--sjs-layer-1-foreground-50)",
+    "--ctr-survey-contextual-button-width": "var(--sjs-size-x6)",
+    "--ctr-survey-contextual-button-height": "var(--sjs-size-x6)",
+    "--ctr-survey-contextual-button-padding-left": "var(--sjs-spacing-x150)",
+    "--ctr-survey-contextual-button-padding-right": "var(--sjs-spacing-x150)",
+    "--ctr-survey-contextual-button-padding-top": "var(--sjs-spacing-x150)",
+    "--ctr-survey-contextual-button-padding-bottom": "var(--sjs-spacing-x150)",
     "--lbr-action-button-icon-color-negative": "var(--sjs-semantic-red-background-500)",
     "--ctr-property-grid-background-color": "var(--sjs-layer-1-background-500)",
     "--ctr-survey-header-logo-placeholder-icon-color": "var(--sjs-layer-3-foreground-50)",
@@ -543,11 +603,18 @@ const Theme = {
     "--ctr-survey-image-picker-drop-spot-color": "var(--sjs-layer-2-background-500)",
     "--ctr-data-table-row-corner-radius-floating": "var(--sjs-corner-radius-x05)",
     "--ctr-survey-item-actionbar-drag-indicator-color": "var(--sjs-layer-1-foreground-50)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-left": "var(--sjs-spacing-x1)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-right": "var(--sjs-spacing-x1)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-top": "var(--sjs-spacing-x05)",
+    "--ctr-survey-item-actionbar-drag-indicator-padding-bottom": "var(--sjs-spacing-x05)",
+    "--ctr-survey-item-actionbar-drag-indicator-width": "var(--sjs-size-x3)",
+    "--ctr-survey-item-actionbar-drag-indicator-height": "var(--sjs-size-x3)",
     "--ctr-toolbox-search-padding-left": "var(--sjs-spacing-x3)",
     "--ctr-toolbox-search-padding-right": "var(--sjs-spacing-x2)",
     "--ctr-toolbox-search-padding-top": "var(--sjs-spacing-x250)",
     "--ctr-toolbox-search-icon-color-placeholder": "var(--sjs-layer-1-foreground-50)",
     "--ctr-toolbox-search-padding-bottom": "var(--sjs-spacing-x250)",
+    "--ctr-toolbox-search-gap": "var(--sjs-spacing-x1)",
     "--ctr-toolbox-search-text-color": "var(--sjs-layer-1-foreground-100)",
     "--ctr-toolbox-search-border-width-bottom": "var(--sjs-stroke-x1)",
     "--ctr-toolbox-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)",
@@ -602,6 +669,8 @@ const Theme = {
     "--ctr-list-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)",
     "--ctr-property-grid-search-icon-width": "var(--sjs-size-x3)",
     "--ctr-property-grid-search-icon-height": "var(--sjs-size-x3)",
+    "--ctr-toolbox-search-icon-width": "var(--sjs-size-x3)",
+    "--ctr-toolbox-search-icon-height": "var(--sjs-size-x3)",
     "--ctr-expression-item-padding-left-button": "var(--sjs-spacing-x4)",
     "--ctr-expression-item-padding-right-button": "var(--sjs-spacing-x4)",
     "--ctr-toolbox-shadow-floating-1-offset-x": "var(--ctr-shadow-medium-offset-x)",
@@ -695,6 +764,8 @@ const Theme = {
     "--ctr-toolbox-submenu-shadow-2-spread": "var(--ctr-shadow-large-spread)",
     "--ctr-toolbox-submenu-shadow-2-color": "var(--ctr-shadow-large-color)",
     "--ctr-toolbox-submenu-margin-top": "var(--sjs-spacing-x1n)",
+    "--ctr-list-item-background-color-selected-submenu": "var(--sjs-primary-background-10)",
+    "--ctr-list-item-text-color-selected-submenu": "var(--sjs-layer-1-foreground-100)",
     "--ctr-list-item-icon-color-selected-submenu": "var(--sjs-primary-background-500)",
     "--ctr-list-item-submenu-arrow-color-selected-item-submenu": "var(--sjs-layer-1-foreground-75)",
     "--ctr-menu-item-padding-left-icon": "var(--sjs-spacing-x2)",
@@ -713,6 +784,8 @@ const Theme = {
     "--ctr-data-table-form-border-color": "var(--sjs-border-10)",
     "--ctr-menu-toolbar-button-padding-left-with-description": "var(--sjs-spacing-x150)",
     "--ctr-menu-toolbar-button-padding-right-with-description": "var(--sjs-spacing-x150)",
+    "--ctr-survey-page-drag-indicator-width": "var(--sjs-size-x3)",
+    "--ctr-survey-page-drag-indicator-height": "var(--sjs-size-x2)",
     "--ctr-survey-resize-frame-grip-width": "var(--sjs-size-x150)",
     "--ctr-survey-resize-frame-grip-height": "var(--sjs-size-x150)",
     "--ctr-survey-resize-frame-margin": "var(--sjs-spacing-x1n)",
diff --git a/packages/survey-creator-core/src/utils/context-button.scss b/packages/survey-creator-core/src/utils/context-button.scss
index 02a47801ee..4446eeeb4d 100644
--- a/packages/survey-creator-core/src/utils/context-button.scss
+++ b/packages/survey-creator-core/src/utils/context-button.scss
@@ -11,12 +11,21 @@
   box-sizing: border-box;
   background-color: $background;
   border-radius: 50%;
-  width: calcSize(6);
-  height: calcSize(6);
+  width: var(--ctr-survey-contextual-button-width, calcSize(6));
+  height: var(--ctr-survey-contextual-button-height, calcSize(6));
+  padding: var(--ctr-survey-contextual-button-padding-top, calcSize(1.5))
+    var(--ctr-survey-contextual-button-padding-right, calcSize(1.5))
+    var(--ctr-survey-contextual-button-padding-bottom, calcSize(1.5))
+    var(--ctr-survey-contextual-button-padding-left, calcSize(1.5));
+
   cursor: pointer;
-  padding: calcSize(1.5);
   outline: none;
 
+  .sv-svg-icon {
+    width: var(--ctr-button-contextual-button-icon-width, calcSize(3));
+    height: var(--ctr-button-contextual-button-icon-height, calcSize(3));
+  }
+
   use {
     fill: $foreground-light;
     transition: fill $creator-transition-duration;
diff --git a/packages/survey-creator-core/src/utils/layout.scss b/packages/survey-creator-core/src/utils/layout.scss
index 46d413f876..405ac68f6d 100644
--- a/packages/survey-creator-core/src/utils/layout.scss
+++ b/packages/survey-creator-core/src/utils/layout.scss
@@ -35,10 +35,18 @@
 .sv-action-bar--default-size-mode .sv-action-bar-separator {
   height: calcSize(5);
 }
+.sv-action-bar--default-size-mode .sv-action-bar-item {
+  height: auto;
+  width: auto;
+}
 
 .sv-action-bar--small-size-mode .sv-action-bar-separator {
   height: calcSize(4);
 }
+.sv-action-bar--small-size-mode .sv-action-bar-item {
+  height: auto;
+  width: auto;
+}
 
 .svc-creator--mobile {
   .sv-action-bar-separator {
@@ -106,9 +114,18 @@
     height: auto;
   }
 
+  .sv-action-bar-item--icon {
+    padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-right, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1))
+      var(--ctr-menu-toolbar-button-padding-left, calcSize(1));
+    border-radius: var(--ctr-menu-toolbar-button-corner-radius, 0);
+  }
+
   .sv-action-bar-item__icon {
     width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3));
     height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3));
+
     use {
       fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light);
     }
@@ -130,11 +147,6 @@
     opacity: var(--ctr-menu-toolbar-button-opacity-disabled, 0.25);
   }
 
-  .sv-action-bar-item--secondary {
-    .sv-action-bar-item__icon use {
-      fill: $secondary;
-    }
-  }
 
   .sv-action-bar-item--active {
     .sv-action-bar-item__icon use {
@@ -167,5 +179,10 @@
       border-top: 1px solid $border;
       box-sizing: border-box;
     }
+
+    .sv-action-bar-item__icon {
+      width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3));
+      height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3));
+    }
   }
 }
\ No newline at end of file
diff --git a/packages/survey-creator-core/src/variables.scss b/packages/survey-creator-core/src/variables.scss
index 6caf1fdda9..1d1fac10a2 100644
--- a/packages/survey-creator-core/src/variables.scss
+++ b/packages/survey-creator-core/src/variables.scss
@@ -83,6 +83,18 @@ $tab-min-height: var(--tab-min-height, auto);
   text-overflow: ellipsis;
 }
 
+@mixin defaultActionButtonSettings {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+  display: flex;
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
 @mixin disableUserSelect {
   -moz-user-select: none;
   -webkit-user-select: none;
diff --git a/packages/survey-creator-core/tests/creator-base.tests.ts b/packages/survey-creator-core/tests/creator-base.tests.ts
index fde6f91e1a..a5d1e093b1 100644
--- a/packages/survey-creator-core/tests/creator-base.tests.ts
+++ b/packages/survey-creator-core/tests/creator-base.tests.ts
@@ -2477,16 +2477,16 @@ test("convertInputType, change inputType for a text question", (): any => {
   expect(questionModel.getActionById("convertInputType")).toBeFalsy();
   let action = questionModel.getActionById("convertTo");
   expect(action).toBeTruthy();
-  expect(action.css.indexOf("sv-action--convertTo-last") > -1).toBeTruthy();
+  expect(action.css.indexOf("svc-dropdown-action--convertTo-last") > -1).toBeTruthy();
   question = creator.survey.getQuestionByName("q2");
   creator.selectElement(question);
   questionModel = new QuestionAdornerViewModel(creator, question, undefined);
   action = questionModel.getActionById("convertTo");
   expect(action).toBeTruthy();
-  expect(action.css.indexOf("sv-action--convertTo-last") > -1).toBeFalsy();
+  expect(action.css.indexOf("svc-dropdown-action--convertTo-last") > -1).toBeFalsy();
   action = questionModel.getActionById("convertInputType");
   expect(action).toBeTruthy();
-  expect(action.css.indexOf("sv-action--convertTo-last") > -1).toBeTruthy();
+  expect(action.css.indexOf("svc-dropdown-action--convertTo-last") > -1).toBeTruthy();
   expect(action.title).toBe("Text");
   let popup = action.popupModel;
   let popupViewModel = new PopupDropdownViewModel(popup); // need for popupModel.onShow
diff --git a/packages/survey-creator-knockout/src/action-button.html b/packages/survey-creator-knockout/src/action-button.html
index ed4c2989be..2cf6acb09b 100644
--- a/packages/survey-creator-knockout/src/action-button.html
+++ b/packages/survey-creator-knockout/src/action-button.html
@@ -12,13 +12,13 @@
 <!-- ko if: data.iconName-->
 <!-- ko if: data.disabled -->
 <sv-svg-icon class="svc-action-button svc-action-button--disabled svc-action-button--icon"
-  data-bind="class: data.classes, attr: { title: data.title}" params="iconName: data.iconName, size: 24">
+  data-bind="class: data.classes, attr: { title: data.title}" params="iconName: data.iconName, size: 'auto'">
 </sv-svg-icon>
 <!-- /ko -->
 <!-- ko ifnot: data.disabled -->
 <sv-svg-icon class="svc-action-button svc-action-button--icon"
   data-bind="click: onClick, key2click, attr: { title: data.title, 'aria-label': data.text }, class: data.classes, css:{'svc-action-button--selected':data.selected}"
-  params="iconName: data.iconName, size: 24">
+  params="iconName: data.iconName, size: 'auto'">
 </sv-svg-icon>
 <!-- /ko -->
 <!-- /ko -->
\ No newline at end of file
diff --git a/packages/survey-creator-knockout/src/add-question-type-selector.html b/packages/survey-creator-knockout/src/add-question-type-selector.html
index 57100cb35d..81c7a425e8 100644
--- a/packages/survey-creator-knockout/src/add-question-type-selector.html
+++ b/packages/survey-creator-knockout/src/add-question-type-selector.html
@@ -2,7 +2,7 @@
 <button type="button"
   data-bind="click: action, key2click, clickBubble: false, attr: { title: title, 'aria-label': title }"
   class="svc-element__question-type-selector">
-  <sv-svg-icon class="svc-element__question-type-selector-icon" params="iconName: iconName, size: 24, title: title">
+  <sv-svg-icon class="svc-element__question-type-selector-icon" params="iconName: iconName, size: 'auto', title: title">
   </sv-svg-icon>
   <!-- ko if: $parent.renderPopup -->
   <sv-popup params="model: popupModel"></sv-popup>
diff --git a/packages/survey-creator-knockout/src/add-question.html b/packages/survey-creator-knockout/src/add-question.html
index c78fec2cdd..df6e1ead56 100644
--- a/packages/survey-creator-knockout/src/add-question.html
+++ b/packages/survey-creator-knockout/src/add-question.html
@@ -1,6 +1,6 @@
 <div
   data-bind="css: 'svc-element__add-new-question ' + buttonClass, click: data.addNewQuestion, key2click, clickBubble: false, event: { mouseover: function(m, e) { data.hoverStopper && data.hoverStopper(e, $element); }}">
-  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 24 } } -->
+  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 'auto' } } -->
   <!-- /ko -->
   <span class="svc-add-new-item-button__text" data-bind="text: data.addNewQuestionText">
   </span>
diff --git a/packages/survey-creator-knockout/src/adorners/image-item-value.html b/packages/survey-creator-knockout/src/adorners/image-item-value.html
index 4fb144b1ea..a8fee43d3d 100644
--- a/packages/survey-creator-knockout/src/adorners/image-item-value.html
+++ b/packages/survey-creator-knockout/src/adorners/image-item-value.html
@@ -15,7 +15,7 @@
     <!-- ko if: isDraggable && canRenderControls-->
     <sv-svg-icon class="svc-context-button svc-image-item-value-controls__drag-area-indicator"
       data-bind="event: { pointerdown: function(model, event) { onPointerDown(event); } }"
-      params="iconName: 'icon-drag-24x24', size: 24">
+      params="iconName: 'icon-drag-24x24', size: 'auto'">
     </sv-svg-icon>
     <!-- /ko -->
 
@@ -23,9 +23,9 @@
     <div class="svc-context-container svc-image-item-value-controls" data-bind="event: { pointerdown: blockEvent }">
       <!-- ko if: allowRemove && !isUploading -->
       <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click"
-        params="iconName: 'icon-choosefile', size: 24, title: selectFileTitle" role="button"></sv-svg-icon>
+        params="iconName: 'icon-choosefile', size: 'auto', title: selectFileTitle" role="button"></sv-svg-icon>
       <sv-svg-icon class="svc-context-button svc-context-button--danger" data-bind="click: remove, key2click"
-        params="iconName: 'icon-delete', size: 24, title: removeFileTitle" role="button"></sv-svg-icon>
+        params="iconName: 'icon-delete', size: 'auto', title: removeFileTitle" role="button"></sv-svg-icon>
       <!-- /ko -->
     </div>
     <!-- /ko -->
@@ -50,7 +50,8 @@
     <div class="svc-image-item-value-controls" data-bind="event: { pointerdown: blockEvent }">
       <!-- ko if: allowAdd && !isUploading -->
       <sv-svg-icon class="svc-context-button svc-image-item-value-controls__add"
-        data-bind="click: chooseNewFile, key2click, clickBubble: false" params="iconName: 'icon-add-lg', size: 24, title: addFileTitle">
+        data-bind="click: chooseNewFile, key2click, clickBubble: false"
+        params="iconName: 'icon-add-lg', size: 'auto', title: addFileTitle">
       </sv-svg-icon>
       <!-- /ko -->
     </div>
diff --git a/packages/survey-creator-knockout/src/adorners/item-value.html b/packages/survey-creator-knockout/src/adorners/item-value.html
index d0a05d26da..055558d170 100644
--- a/packages/survey-creator-knockout/src/adorners/item-value.html
+++ b/packages/survey-creator-knockout/src/adorners/item-value.html
@@ -5,7 +5,7 @@
     <!-- ko if: isDraggable -->
     <span class="svc-item-value-controls__button svc-item-value-controls__drag">
       <sv-svg-icon class="svc-item-value-controls__drag-icon"
-        params="iconName: 'icon-drag-24x24', size: 24, title: dragTooltip"></sv-svg-icon>
+        params="iconName: 'icon-drag-24x24', size: 'auto', title: dragTooltip"></sv-svg-icon>
     </span>
     <!-- /ko -->
     <!-- ko if: allowAdd -->
diff --git a/packages/survey-creator-knockout/src/adorners/matrix-cell.html b/packages/survey-creator-knockout/src/adorners/matrix-cell.html
index 53fb4612a5..39c08f864d 100644
--- a/packages/survey-creator-knockout/src/adorners/matrix-cell.html
+++ b/packages/survey-creator-knockout/src/adorners/matrix-cell.html
@@ -7,8 +7,8 @@
 
   <!-- ko if: $data.isSupportCellEditor -->
   <div class="svc-matrix-cell__question-controls">
-    <sv-svg-icon class="svc-matrix-cell__question-controls-button" data-bind="click: editQuestion, key2click"
-      params="iconName: 'icon-edit', size: 24"></sv-svg-icon>
+    <sv-svg-icon class="svc-matrix-cell__question-controls-button svc-context-button" data-bind="click: editQuestion, key2click"
+      params="iconName: 'icon-edit', size: 'auto'"></sv-svg-icon>
   </div>
   <!-- /ko -->
 
diff --git a/packages/survey-creator-knockout/src/adorners/panel.html b/packages/survey-creator-knockout/src/adorners/panel.html
index 3b84375678..8382ca6865 100644
--- a/packages/survey-creator-knockout/src/adorners/panel.html
+++ b/packages/survey-creator-knockout/src/adorners/panel.html
@@ -20,7 +20,7 @@
     <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
     <!-- ko if: allowDragging && $data.element.isInteractiveDesignElement -->
     <div class="svc-question__drag-area" data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event) } }">
-      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
       <!-- /ko -->
       <div class="svc-question__top-actions">
         <!-- ko component: { name: 'sv-action-bar', params: { model: topActionContainer, handleClick: false } } -->
@@ -38,7 +38,7 @@
         <!-- ko if: showAddQuestionButton -->
         <div class="svc-panel__add-new-question svc-action-button"
           data-bind="click: addNewQuestion, key2click, clickBubble: false">
-          <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 24 } } -->
+          <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 'auto' } } -->
           <!-- /ko -->
           <span class="svc-add-new-item-button__text" data-bind="text: $data.addNewQuestionText">
           </span>
diff --git a/packages/survey-creator-knockout/src/adorners/question-image.html b/packages/survey-creator-knockout/src/adorners/question-image.html
index 0d548e81b0..2ac30f974f 100644
--- a/packages/survey-creator-knockout/src/adorners/question-image.html
+++ b/packages/survey-creator-knockout/src/adorners/question-image.html
@@ -4,7 +4,7 @@
   <input type="file" aria-hidden="true" tabindex="-1" class="svc-choose-file-input"
     data-bind="attr: { accept: acceptedTypes }" />
   <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click"
-    params="iconName: 'icon-choosefile', size: 24"></sv-svg-icon>
+    params="iconName: 'icon-choosefile', size: 'auto'"></sv-svg-icon>
   <!-- /ko -->
 </div>
 <!-- /ko -->
diff --git a/packages/survey-creator-knockout/src/adorners/question.html b/packages/survey-creator-knockout/src/adorners/question.html
index e7b021744f..5039f6d263 100644
--- a/packages/survey-creator-knockout/src/adorners/question.html
+++ b/packages/survey-creator-knockout/src/adorners/question.html
@@ -21,7 +21,7 @@
     <!-- ko if: allowDragging -->
     <div class="svc-question__drag-area"
       data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event); return true; } }">
-      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
       <!-- /ko -->
       <div class="svc-question__top-actions">
         <!-- ko component: { name: 'sv-action-bar', params: { model: topActionContainer, handleClick: false } } -->
diff --git a/packages/survey-creator-knockout/src/header/logo-image.html b/packages/survey-creator-knockout/src/header/logo-image.html
index 6e621f1b66..7e6fa9ecf1 100644
--- a/packages/survey-creator-knockout/src/header/logo-image.html
+++ b/packages/survey-creator-knockout/src/header/logo-image.html
@@ -14,9 +14,9 @@
   <div data-bind="css: containerCss">
     <div class="svc-context-container svc-logo-image-controls">
       <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click"
-        params="iconName: 'icon-choosefile', size: 24"></sv-svg-icon>
+        params="iconName: 'icon-choosefile', size: 'auto'"></sv-svg-icon>
       <sv-svg-icon class="svc-context-button svc-context-button--danger" data-bind="click: remove, key2click"
-        params="iconName: 'icon-clear', size: 24"></sv-svg-icon>
+        params="iconName: 'icon-clear', size: 'auto'"></sv-svg-icon>
     </div>
     <!-- ko component: { name: 'sv-logo-image', params: survey } -->
     <!-- /ko -->
diff --git a/packages/survey-creator-knockout/src/page-navigator/page-navigator.html b/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
index 98b73b1674..043cf56614 100644
--- a/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
+++ b/packages/survey-creator-knockout/src/page-navigator/page-navigator.html
@@ -2,7 +2,7 @@
 <div class="svc-page-navigator">
     <div class="svc-page-navigator__selector"
         data-bind="click: togglePageSelector, key2click, attr: { title: pageSelectorCaption }, css: { 'svc-page-navigator__selector--opened': isPopupOpened }">
-        <sv-svg-icon class="svc-page-navigator__navigator-icon" params="iconName: icon, size: 24"></sv-svg-icon>
+        <sv-svg-icon class="svc-page-navigator__navigator-icon" params="iconName: icon, size: 'auto'"></sv-svg-icon>
         <sv-popup params="model: popupModel, cssClass: 'svc-page-navigator__popup'"></sv-popup>
     </div>
     <div>
diff --git a/packages/survey-creator-knockout/src/page.html b/packages/survey-creator-knockout/src/page.html
index 7e28e7d256..755ab55001 100644
--- a/packages/survey-creator-knockout/src/page.html
+++ b/packages/survey-creator-knockout/src/page.html
@@ -6,7 +6,7 @@
   <!-- ko if: allowDragging && !isGhost -->
   <div class="svc-question__drag-area"
     data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event); return true; } }">
-    <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+    <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
     <!-- /ko -->
     <div class="svc-page__content-actions">
       <!-- ko component: { name: 'sv-action-bar', params: { model: actionContainer } } -->
diff --git a/packages/survey-creator-knockout/src/question-widget.html b/packages/survey-creator-knockout/src/question-widget.html
index a8e4a23b98..3ff6e83db0 100644
--- a/packages/survey-creator-knockout/src/question-widget.html
+++ b/packages/survey-creator-knockout/src/question-widget.html
@@ -5,7 +5,7 @@
     <!-- ko if: allowDragging -->
     <div class="svc-question__drag-area"
       data-bind="visible:allowDragging, event: {pointerdown: (model, event)=>{onPointerDown(event)}}">
-      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 24 } } -->
+      <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-question__drag-element', iconName: 'icon-drag-area-indicator_24x16', size: 'auto' } } -->
       <!-- /ko -->
     </div>
     <!-- /ko -->
diff --git a/packages/survey-creator-knockout/src/side-bar/tab-button.html b/packages/survey-creator-knockout/src/side-bar/tab-button.html
index 9f19f105c8..a9fcfc20c5 100644
--- a/packages/survey-creator-knockout/src/side-bar/tab-button.html
+++ b/packages/survey-creator-knockout/src/side-bar/tab-button.html
@@ -4,7 +4,7 @@
     attr: { title: model.tooltip }">
     <div class="svc-menu-action__icon">
       <div class="svc-menu-action__icon-container">
-        <!-- ko component: { name: 'sv-svg-icon', params: { iconName: model.iconName, size: 24 } } -->
+        <!-- ko component: { name: 'sv-svg-icon', params: { iconName: model.iconName, size: 'auto' } } -->
         <!-- /ko -->
       </div>
     </div>
diff --git a/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html b/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html
index ee6f860b40..ef311ebdb2 100644
--- a/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html
+++ b/packages/survey-creator-knockout/src/survey-renderers/question-error/question-error.html
@@ -1,6 +1,6 @@
 <div>
   <sv-svg-icon aria-hidden="true" data-bind="css: cssClasses.error.icon"
-    params="iconName: 'icon-alert_24x24', size: 24">
+    params="iconName: 'icon-alert_24x24', size: 'auto'">
   </sv-svg-icon>
   <span data-bind="css: cssClasses.error.item">
     <!-- ko template: { name: 'survey-string', data: error.locText } --><!-- /ko -->
diff --git a/packages/survey-creator-react/src/AddQuestionButton.tsx b/packages/survey-creator-react/src/AddQuestionButton.tsx
index 80d65da20d..3c52187948 100644
--- a/packages/survey-creator-react/src/AddQuestionButton.tsx
+++ b/packages/survey-creator-react/src/AddQuestionButton.tsx
@@ -29,7 +29,7 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action
       <span className="svc-element__question-type-selector-icon">
         <SvgIcon
           iconName={questionTypeSelectorModel.iconName}
-          size={24}
+          size={"auto"}
           title={this.model.addNewQuestionText}
         ></SvgIcon>
       </span>
@@ -52,7 +52,7 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action
         <SvgIcon
           className={"svc-panel__add-new-question-icon"}
           iconName={"icon-add_24x24"}
-          size={24}
+          size={"auto"}
         ></SvgIcon>
         <span className="svc-add-new-item-button__text">
           {this.model.addNewQuestionText}
diff --git a/packages/survey-creator-react/src/ImageItemValueWrapper.tsx b/packages/survey-creator-react/src/ImageItemValueWrapper.tsx
index 10d10b1a56..7fd2afa97a 100644
--- a/packages/survey-creator-react/src/ImageItemValueWrapper.tsx
+++ b/packages/survey-creator-react/src/ImageItemValueWrapper.tsx
@@ -84,7 +84,7 @@ export class ImageItemValueAdornerComponent extends CreatorModelElement<
 
         <div className="svc-image-item-value-controls">
           {this.model.allowAdd && !this.model.isUploading ? attachKey2click(<span className="svc-context-button svc-image-item-value-controls__add" onClick={() => this.model.chooseNewFile(this.model)}>
-            <SvgIcon size={24} iconName={"icon-add-lg"} title={this.model.addFileTitle}></SvgIcon>
+            <SvgIcon size={"auto"} iconName={"icon-add-lg"} title={this.model.addFileTitle}></SvgIcon>
           </span>) : null}
         </div>
       </>);
@@ -100,7 +100,7 @@ export class ImageItemValueAdornerComponent extends CreatorModelElement<
               <span className="svc-context-button svc-image-item-value-controls__drag-area-indicator"
                 onPointerDown={(event: any) => this.model.onPointerDown(event)}
               >
-                <SvgIcon size={24} iconName={"icon-drag-24x24"}></SvgIcon>
+                <SvgIcon size={"auto"} iconName={"icon-drag-24x24"}></SvgIcon>
               </span>
               : null
           }
@@ -112,13 +112,13 @@ export class ImageItemValueAdornerComponent extends CreatorModelElement<
                   className="svc-context-button"
                   onClick={() => this.model.chooseFile(this.model)}
                 >
-                  <SvgIcon role="button" size={24} iconName={"icon-choosefile"} title={this.model.selectFileTitle}></SvgIcon>
+                  <SvgIcon role="button" size={"auto"} iconName={"icon-choosefile"} title={this.model.selectFileTitle}></SvgIcon>
                 </span>) : null}
                 {this.model.allowRemove && !this.model.isUploading ? attachKey2click(<span
                   className="svc-context-button svc-context-button--danger"
                   onClick={() => this.model.remove(this.model)}
                 >
-                  <SvgIcon role="button" size={24} iconName={"icon-delete"} title={this.model.removeFileTitle}></SvgIcon>
+                  <SvgIcon role="button" size={"auto"} iconName={"icon-delete"} title={this.model.removeFileTitle}></SvgIcon>
                 </span>) : null}
               </div>
               : null
diff --git a/packages/survey-creator-react/src/ItemValueWrapper.tsx b/packages/survey-creator-react/src/ItemValueWrapper.tsx
index 46dd714f9e..0808b0eab7 100644
--- a/packages/survey-creator-react/src/ItemValueWrapper.tsx
+++ b/packages/survey-creator-react/src/ItemValueWrapper.tsx
@@ -79,7 +79,7 @@ export class ItemValueAdornerComponent extends CreatorModelElement<
           <span
             className="svc-item-value-controls__button svc-item-value-controls__drag"
           >
-            <SvgIcon className="svc-item-value-controls__drag-icon" size={24} iconName={"icon-drag-24x24"} title={this.model.dragTooltip}></SvgIcon>
+            <SvgIcon className="svc-item-value-controls__drag-icon" size={"auto"} iconName={"icon-drag-24x24"} title={this.model.dragTooltip}></SvgIcon>
           </span>
         ) : null}
         {this.model.allowRemove ? attachKey2click(<span
diff --git a/packages/survey-creator-react/src/LogoImage.tsx b/packages/survey-creator-react/src/LogoImage.tsx
index a4bb2845ac..b9d233cb5d 100644
--- a/packages/survey-creator-react/src/LogoImage.tsx
+++ b/packages/survey-creator-react/src/LogoImage.tsx
@@ -37,7 +37,7 @@ export class LogoImageComponent extends CreatorModelElement<ILogoImageComponentP
       className="svc-context-button"
       onClick={() => this.model.chooseFile(this.model)}
     >
-      <SvgIcon size={24} iconName={"icon-choosefile"}></SvgIcon>
+      <SvgIcon size={"auto"} iconName={"icon-choosefile"}></SvgIcon>
     </span>);
   }
   renderClearButton() {
@@ -45,7 +45,7 @@ export class LogoImageComponent extends CreatorModelElement<ILogoImageComponentP
       className="svc-context-button svc-context-button--danger"
       onClick={() => this.model.remove(this.model)}
     >
-      <SvgIcon size={24} iconName={"icon-clear"}></SvgIcon>
+      <SvgIcon size={"auto"} iconName={"icon-clear"}></SvgIcon>
     </span>);
   }
   renderButtons() {
diff --git a/packages/survey-creator-react/src/MatrixCellWrapper.tsx b/packages/survey-creator-react/src/MatrixCellWrapper.tsx
index 1b8b717aa5..19f852aa1a 100644
--- a/packages/survey-creator-react/src/MatrixCellWrapper.tsx
+++ b/packages/survey-creator-react/src/MatrixCellWrapper.tsx
@@ -54,8 +54,8 @@ export class MatrixCellAdornerComponent extends CreatorModelElement<
     let controls = null;
     if (!!this.model.isSupportCellEditor) {
       controls = <div className="svc-matrix-cell__question-controls">
-        {attachKey2click(<span className="svc-matrix-cell__question-controls-button" onClick={(event: any) => this.model.editQuestion(this.model, event)}>
-          <SvgIcon size={24} iconName={"icon-edit"}></SvgIcon>
+        {attachKey2click(<span className="svc-matrix-cell__question-controls-button svc-context-button" onClick={(event: any) => this.model.editQuestion(this.model, event)}>
+          <SvgIcon size={"auto"} iconName={"icon-edit"}></SvgIcon>
         </span>)}
       </div>;
     }
diff --git a/packages/survey-creator-react/src/PageNavigator.tsx b/packages/survey-creator-react/src/PageNavigator.tsx
index 7424f69de2..bf1112ad61 100644
--- a/packages/survey-creator-react/src/PageNavigator.tsx
+++ b/packages/survey-creator-react/src/PageNavigator.tsx
@@ -88,7 +88,7 @@ export class SurveyPageNavigator extends CreatorModelElement<
           <SvgIcon
             className="svc-page-navigator__navigator-icon"
             iconName={this.model.icon}
-            size={24}
+            size={"auto"}
             title={this.model.pageSelectorCaption}
           ></SvgIcon>
 
diff --git a/packages/survey-creator-react/src/adorners/Page.tsx b/packages/survey-creator-react/src/adorners/Page.tsx
index b74ce18c66..3df26f2e24 100644
--- a/packages/survey-creator-react/src/adorners/Page.tsx
+++ b/packages/survey-creator-react/src/adorners/Page.tsx
@@ -116,7 +116,7 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
       <div className={"svc-question__drag-area"}
         onPointerDown={(event: any) => this.model.onPointerDown(event)}
       >
-        <SvgIcon className="svc-question__drag-element" size={24} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
+        <SvgIcon className="svc-question__drag-element" size={"auto"} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
         {actions}
       </div>
     );
diff --git a/packages/survey-creator-react/src/adorners/Panel.tsx b/packages/survey-creator-react/src/adorners/Panel.tsx
index 174abf1307..bba1a5339f 100644
--- a/packages/survey-creator-react/src/adorners/Panel.tsx
+++ b/packages/survey-creator-react/src/adorners/Panel.tsx
@@ -35,7 +35,7 @@ export class PanelAdornerComponent extends QuestionAdornerComponent {
             <SvgIcon
               className={"svc-panel__add-new-question-icon"}
               iconName={"icon-add_24x24"}
-              size={24}
+              size={"auto"}
             ></SvgIcon>
             <span className="svc-add-new-item-button__text">
               {this.model.addNewQuestionText}
diff --git a/packages/survey-creator-react/src/adorners/QuestionHeader.tsx b/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
index e88c0dcc33..592b957787 100644
--- a/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionHeader.tsx
@@ -26,7 +26,7 @@ export class QuestionWrapperHeader extends React.Component<QuestionWrapperHeader
           this.props.model.onPointerDown(event)
         }
       >
-        <SvgIcon className="svc-question__drag-element" size={24} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
+        <SvgIcon className="svc-question__drag-element" size={"auto"} iconName={"icon-drag-area-indicator_24x16"}></SvgIcon>
         <div className="svc-question__top-actions">
           <SurveyActionBar model={this.props.model.topActionContainer} handleClick={false}></SurveyActionBar>
         </div>
diff --git a/packages/survey-creator-react/src/adorners/QuestionImage.tsx b/packages/survey-creator-react/src/adorners/QuestionImage.tsx
index 6e9b8655d7..7d7bbf4fb8 100644
--- a/packages/survey-creator-react/src/adorners/QuestionImage.tsx
+++ b/packages/survey-creator-react/src/adorners/QuestionImage.tsx
@@ -53,7 +53,7 @@ export class QuestionImageAdornerComponent extends QuestionAdornerComponent {
         className="svc-context-button"
         onClick={() => this.imageModel.chooseFile(this.imageModel)}
       >
-        <SvgIcon size={24} iconName={"icon-choosefile"}></SvgIcon>
+        <SvgIcon size={"auto"} iconName={"icon-choosefile"}></SvgIcon>
       </span>) : null}
     </div>);
   }
diff --git a/packages/survey-creator-react/src/side-bar/TabButton.tsx b/packages/survey-creator-react/src/side-bar/TabButton.tsx
index 066d5550be..d7f8bbbe27 100644
--- a/packages/survey-creator-react/src/side-bar/TabButton.tsx
+++ b/packages/survey-creator-react/src/side-bar/TabButton.tsx
@@ -22,7 +22,7 @@ export class TabButtonComponent extends SurveyElementBase<{ model: MenuButton },
       >
         <div className="svc-menu-action__icon">
           <div className="svc-menu-action__icon-container">
-            <SvgIcon iconName={this.props.model.iconName} size={24}></SvgIcon>
+            <SvgIcon iconName={this.props.model.iconName} size={"auto"}></SvgIcon>
           </div>
         </div>
       </div>, this.props.model
diff --git a/packages/survey-creator-vue/src/adorners/CustomWidget.vue b/packages/survey-creator-vue/src/adorners/CustomWidget.vue
index 4715e6a7bd..c8dda0be6b 100644
--- a/packages/survey-creator-vue/src/adorners/CustomWidget.vue
+++ b/packages/survey-creator-vue/src/adorners/CustomWidget.vue
@@ -25,7 +25,7 @@
           :is="'sv-svg-icon'"
           class="svc-question__drag-element"
           :iconName="'icon-drag-area-indicator_24x16'"
-          :size="24"
+          :size="'auto'"
         ></SvComponent>
       </div>
       <div class="svc-widget__content">
diff --git a/packages/survey-creator-vue/src/adorners/Image.vue b/packages/survey-creator-vue/src/adorners/Image.vue
index 4a23247990..85a4d02586 100644
--- a/packages/survey-creator-vue/src/adorners/Image.vue
+++ b/packages/survey-creator-vue/src/adorners/Image.vue
@@ -20,7 +20,7 @@
         <SvComponent
           :is="'sv-svg-icon'"
           :iconName="'icon-choosefile'"
-          :size="24"
+          :size="'auto'"
           @click="model.chooseFile(model)"
         ></SvComponent>
       </span>
diff --git a/packages/survey-creator-vue/src/adorners/ImageItemValue.vue b/packages/survey-creator-vue/src/adorners/ImageItemValue.vue
index 8a195620e7..6c1cf119ac 100644
--- a/packages/survey-creator-vue/src/adorners/ImageItemValue.vue
+++ b/packages/survey-creator-vue/src/adorners/ImageItemValue.vue
@@ -33,7 +33,7 @@
           <SvComponent
             :is="'sv-svg-icon'"
             :iconName="'icon-drag-24x24'"
-            :size="24"
+            :size="'auto'"
           ></SvComponent>
         </span>
         <div
@@ -51,7 +51,7 @@
               :is="'sv-svg-icon'"
               role="button"
               :iconName="'icon-choosefile'"
-              :size="24"
+              :size="'auto'"
               :title="adorner.selectFileTitle"
             ></SvComponent>
           </span>
@@ -66,7 +66,7 @@
               :is="'sv-svg-icon'"
               role="button"
               :iconName="'icon-delete'"
-              :size="24"
+              :size="'auto'"
               :title="adorner.removeFileTitle"
             ></SvComponent>
           </span>
@@ -109,7 +109,7 @@
             <SvComponent
               :is="'sv-svg-icon'"
               :iconName="'icon-add-lg'"
-              :size="24"
+              :size="'auto'"
               :title="adorner.addFileTitle"
             ></SvComponent>
           </span>
diff --git a/packages/survey-creator-vue/src/adorners/ItemValue.vue b/packages/survey-creator-vue/src/adorners/ItemValue.vue
index d72876b67c..e53d412e75 100644
--- a/packages/survey-creator-vue/src/adorners/ItemValue.vue
+++ b/packages/survey-creator-vue/src/adorners/ItemValue.vue
@@ -22,7 +22,7 @@
           :is="'sv-svg-icon'"
           class="svc-item-value-controls__drag-icon"
           :iconName="'icon-drag-24x24'"
-          :size="24"
+          :size="'auto'"
           :title="adorner.dragTooltip"
         ></SvComponent>
       </span>
diff --git a/packages/survey-creator-vue/src/adorners/MatrixCell.vue b/packages/survey-creator-vue/src/adorners/MatrixCell.vue
index bc7dfc1c83..d1251219de 100644
--- a/packages/survey-creator-vue/src/adorners/MatrixCell.vue
+++ b/packages/survey-creator-vue/src/adorners/MatrixCell.vue
@@ -16,14 +16,14 @@
       class="svc-matrix-cell__question-controls"
     >
       <span
-        class="svc-matrix-cell__question-controls-button"
+        class="svc-matrix-cell__question-controls-button svc-context-button"
         @click="adorner.editQuestion(adorner, $event)"
         v-key2click
       >
         <SvComponent
           :is="'sv-svg-icon'"
           :iconName="'icon-edit'"
-          :size="24"
+          :size="'auto'"
         ></SvComponent>
       </span>
     </div>
diff --git a/packages/survey-creator-vue/src/adorners/Panel.vue b/packages/survey-creator-vue/src/adorners/Panel.vue
index ef8f950eda..964e1a62c0 100644
--- a/packages/survey-creator-vue/src/adorners/Panel.vue
+++ b/packages/survey-creator-vue/src/adorners/Panel.vue
@@ -54,7 +54,7 @@
           :is="'sv-svg-icon'"
           class="svc-question__drag-element"
           :iconName="'icon-drag-area-indicator_24x16'"
-          :size="24"
+          :size="'auto'"
         ></SvComponent>
         <div class="svc-question__top-actions">
           <SvComponent
@@ -84,7 +84,7 @@
               :is="'sv-svg-icon'"
               class="svc-panel__add-new-question-icon"
               :iconName="'icon-add_24x24'"
-              :size="24"
+              :size="'auto'"
             ></SvComponent>
             <span class="svc-add-new-item-button__text">
               {{ adorner.addNewQuestionText }}
diff --git a/packages/survey-creator-vue/src/adorners/QuestionBase.vue b/packages/survey-creator-vue/src/adorners/QuestionBase.vue
index 96bcd7651d..87d973abae 100644
--- a/packages/survey-creator-vue/src/adorners/QuestionBase.vue
+++ b/packages/survey-creator-vue/src/adorners/QuestionBase.vue
@@ -53,7 +53,7 @@
           v-bind="{
             css: 'svc-question__drag-element',
             iconName: 'icon-drag-area-indicator_24x16',
-            size: 24,
+            size: 'auto',
           }"
         ></SvComponent>
         <div class="svc-question__top-actions">
diff --git a/packages/survey-creator-vue/src/components/QuestionError.vue b/packages/survey-creator-vue/src/components/QuestionError.vue
index d66ebd0ffd..8c42f22f42 100644
--- a/packages/survey-creator-vue/src/components/QuestionError.vue
+++ b/packages/survey-creator-vue/src/components/QuestionError.vue
@@ -4,7 +4,7 @@
       :is="'sv-svg-icon'"
       :class="cssClasses.error.icon"
       :iconName="'icon-alert_24x24'"
-      :size="24"
+      :size="'auto'"
     ></SvComponent>
     <span
       :class="
diff --git a/packages/survey-creator-vue/src/header/Logo.vue b/packages/survey-creator-vue/src/header/Logo.vue
index 0589e88368..36ac4fd3ee 100644
--- a/packages/survey-creator-vue/src/header/Logo.vue
+++ b/packages/survey-creator-vue/src/header/Logo.vue
@@ -33,7 +33,7 @@
             <SvComponent
               :is="'sv-svg-icon'"
               :iconName="'icon-choosefile'"
-              :size="24"
+              :size="'auto'"
             ></SvComponent>
           </span>
           <span
@@ -46,7 +46,7 @@
             <SvComponent
               :is="'sv-svg-icon'"
               :iconName="'icon-clear'"
-              :size="24"
+              :size="'auto'"
             ></SvComponent>
           </span>
         </div>
diff --git a/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue b/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
index 4632388b96..acf00e8d14 100644
--- a/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
+++ b/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
@@ -11,7 +11,7 @@
         :is="'sv-svg-icon'"
         class="svc-page-navigator__navigator-icon"
         :iconName="model.icon"
-        :size="24"
+        :size="'auto'"
       ></SvComponent>
       <SvComponent :is="'sv-popup'" :model="model.popupModel"></SvComponent>
     </div>
diff --git a/packages/survey-creator-vue/src/side-bar/TabButton.vue b/packages/survey-creator-vue/src/side-bar/TabButton.vue
index 84b76b5aae..9bfa60eae7 100644
--- a/packages/survey-creator-vue/src/side-bar/TabButton.vue
+++ b/packages/survey-creator-vue/src/side-bar/TabButton.vue
@@ -11,7 +11,7 @@
           <SvComponent
             :is="'sv-svg-icon'"
             :iconName="model.iconName"
-            :size="24"
+            :size="'auto'"
           ></SvComponent>
         </div>
       </div>
diff --git a/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue b/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue
index fc713d44e9..bb1832203a 100644
--- a/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue
@@ -14,7 +14,7 @@
       :is="'sv-svg-icon'"
       class="svc-panel__add-new-question-icon"
       :iconName="'icon-add_24x24'"
-      :size="24"
+      :size="'auto'"
     ></SvComponent>
     <span class="svc-add-new-item-button__text">
       {{ item.data.addNewQuestionText }}
diff --git a/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue b/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
index 30d040a279..6febb79215 100644
--- a/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/AddQuestionTypeSelector.vue
@@ -16,7 +16,7 @@
       class="svc-element__question-type-selector-icon"
       v-bind="{
         iconName: questionTypeSelectorModel.iconName,
-        size: 24,
+        size: 'auto',
         title: questionTypeSelectorModel.title,
       }"
     ></SvComponent>
diff --git a/packages/survey-creator-vue/src/tabs/designer/Page.vue b/packages/survey-creator-vue/src/tabs/designer/Page.vue
index 4168df1276..b2778a16cc 100644
--- a/packages/survey-creator-vue/src/tabs/designer/Page.vue
+++ b/packages/survey-creator-vue/src/tabs/designer/Page.vue
@@ -35,7 +35,7 @@
         v-bind="{
           css: 'svc-question__drag-element',
           iconName: 'icon-drag-area-indicator_24x16',
-          size: 24,
+          size: 'auto',
         }"
       ></SvComponent>
       <div class="svc-page__content-actions">
diff --git a/visualRegressionTests/tests/designer/etalons/matrix-cell-edit-bool.png b/visualRegressionTests/tests/designer/etalons/matrix-cell-edit-bool.png
index dcc776d86d..24943e0291 100644
Binary files a/visualRegressionTests/tests/designer/etalons/matrix-cell-edit-bool.png and b/visualRegressionTests/tests/designer/etalons/matrix-cell-edit-bool.png differ
diff --git a/visualRegressionTests/tests/designer/pg-editors.ts b/visualRegressionTests/tests/designer/pg-editors.ts
index ec6ee171aa..a364a53899 100644
--- a/visualRegressionTests/tests/designer/pg-editors.ts
+++ b/visualRegressionTests/tests/designer/pg-editors.ts
@@ -1,4 +1,4 @@
-import { url, setJSON, takeElementScreenshot, getPropertyGridCategory, generalGroupName, wrapVisualTest, addQuestionByAddQuestionButton, resetHoverToCreator, surveySettingsButtonSelector, inputMaskSettingsGroupName, getListItemByText, getVisibleElement, changeToolboxSearchEnabled, getToolboxItemByAriaLabel } from "../../helper";
+import { url, setJSON, takeElementScreenshot, getPropertyGridCategory, generalGroupName, wrapVisualTest, addQuestionByAddQuestionButton, resetHoverToCreator, surveySettingsButtonSelector, inputMaskSettingsGroupName, getListItemByText, getVisibleElement, changeToolboxSearchEnabled, getToolboxItemByAriaLabel, getQuestionBarItemByTitle } from "../../helper";
 import { ClientFunction, Selector } from "testcafe";
 const title = "Property Grid Editors";
 
@@ -830,7 +830,7 @@ test("popup overlay in property grid", async (t) => {
 
     await t
       .click("div[data-sv-drop-target-survey-element='question1']", { offsetX: 200, offsetY: 30 })
-      .click(getVisibleElement(".sv-action-bar-item[title='Open settings']"))
+      .click(getQuestionBarItemByTitle("Open settings"))
       .click(Selector(".spg-dropdown[aria-label='Input type']"));
 
     await takeElementScreenshot("pg-overlay-popup.png", getVisibleElement(".sv-popup .sv-popup__container"), t, comparer);
diff --git a/visualRegressionTests/tests/designer/translation-tab.ts b/visualRegressionTests/tests/designer/translation-tab.ts
index 14ab4c1542..e43ed3bbe7 100644
--- a/visualRegressionTests/tests/designer/translation-tab.ts
+++ b/visualRegressionTests/tests/designer/translation-tab.ts
@@ -77,7 +77,7 @@ test("tranlation property grid", async (t) => {
   });
 });
 
-test("tranlation property grid", async (t) => {
+test("tranlation property grid + onMachineTranslate", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await t.resizeWindow(2560, 1440);
     await ClientFunction(() => {