diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
index ee94f5f05f..d24c92ff16 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
@@ -228,6 +228,21 @@ export const powerButtonShapeSize = 110;
 const cx = powerButtonShapeSize / 2;
 const cy = powerButtonShapeSize / 2;
 
+const powerCircle = 'M13 4.67063C13 3.65748 12.0377 2.91866 11.0946 3.28889C4.59815 5.83928 0 12.1545 0 19.5412C0 29.1835 ' +
+  '7.83502 37.0001 17.5 37.0001C27.165 37.0001 35 29.1835 35 19.5412C35 12.1545 30.4019 5.83928 23.9054 3.28889C22.9623 2.91866 22 ' +
+  '3.65748 22 4.67063C22 5.33931 22.434 5.92434 23.0519 6.17991C28.3077 8.35375 32 13.5209 32 19.5412C32 27.52 25.5148 34.0001 17.5 ' +
+  '34.0001C9.48521 34.0001 3 27.52 3 19.5412C3 13.5209 6.69234 8.35374 11.9481 6.17991C12.566 5.92434 13 5.33931 13 4.67063Z';
+const powerLine = 'M16.5 1C16.5 0.447716 16.9477 0 17.5 0C18.0523 0 18.5 0.447715 18.5 1V17C18.5 ' +
+  '17.5523 18.0523 18 17.5 18C16.9477 18 16.5 17.5523 16.5 17V1Z';
+
+const powerCircleStroke = 'M12 2.95698C12 1.45236 10.4775 0.438524 9.19424 1.22416C3.68417 4.59764 0 10.7283 0 17.7316C0 ' +
+  '28.3732 8.50659 37 19 37C29.4934 37 38 28.3732 38 17.7316C38 10.7283 34.3158 4.59764 28.8058 1.22416C27.5225 ' +
+  '0.438524 26 1.45236 26 2.95698C26 3.73878 26.4365 4.44718 27.0911 4.87461C31.2354 7.58066 34 12.3083 34 ' +
+  '17.7316C34 26.2172 27.2316 33 19 33C10.7684 33 4 26.2172 4 17.7316C4 12.3084 6.76462 7.58066 10.9089 ' +
+  '4.87461C11.5635 4.44718 12 3.73878 12 2.95698Z';
+const powerLineStroke = 'M0 2.5C0 1.11929 1.11929 0 2.5 0C3.88071 0 5 1.11929 5 2.5V15.5C5 16.8807 3.88071 18 ' +
+  '2.5 18C1.11929 18 0 16.8807 0 15.5V2.5Z';
+
 const powerButtonAnimation = (element: Element): Runner => element.animate(200, 0, 'now');
 
 export abstract class PowerButtonShape {
@@ -252,11 +267,11 @@ export abstract class PowerButtonShape {
       case PowerButtonLayout.outlined_volume:
         return new OutlinedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick);
       case PowerButtonLayout.default_power:
-        return new DefaultVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true);
+        return new DefaultPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick);
       case PowerButtonLayout.simplified_power:
-        return new SimplifiedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true);
+        return new SimplifiedPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick);
       case PowerButtonLayout.outlined_power:
-        return new OutlinedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick, true);
+        return new OutlinedPowerPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick);
     }
   }
 
@@ -264,13 +279,6 @@ export abstract class PowerButtonShape {
   protected readonly onLabel: string;
   protected readonly offLabel: string;
 
-  protected powerCircle = 'M13 4.67063C13 3.65748 12.0377 2.91866 11.0946 3.28889C4.59815 5.83928 0 12.1545 0 19.5412C0 29.1835 ' +
-    '7.83502 37.0001 17.5 37.0001C27.165 37.0001 35 29.1835 35 19.5412C35 12.1545 30.4019 5.83928 23.9054 3.28889C22.9623 2.91866 22 ' +
-    '3.65748 22 4.67063C22 5.33931 22.434 5.92434 23.0519 6.17991C28.3077 8.35375 32 13.5209 32 19.5412C32 27.52 25.5148 34.0001 17.5 ' +
-    '34.0001C9.48521 34.0001 3 27.52 3 19.5412C3 13.5209 6.69234 8.35374 11.9481 6.17991C12.566 5.92434 13 5.33931 13 4.67063Z';
-  protected powerLine = 'M16.5 1C16.5 0.447716 16.9477 0 17.5 0C18.0523 0 18.5 0.447715 18.5 1V17C18.5 ' +
-    '17.5523 18.0523 18 17.5 18C16.9477 18 16.5 17.5523 16.5 17V1Z';
-
   protected backgroundShape: Circle;
   protected hoverShape: Circle;
   protected hovered = false;
@@ -282,8 +290,7 @@ export abstract class PowerButtonShape {
                         protected settings: PowerButtonWidgetSettings,
                         protected value: boolean,
                         protected disabled: boolean,
-                        protected onClick: () => void,
-                        protected iconMode: boolean = false) {
+                        protected onClick: () => void) {
     this.colors = createPowerButtonShapeColors(this.settings);
     this.onLabel = this.widgetContext.translate.instant('widgets.power-button.on-label').toUpperCase();
     this.offLabel = this.widgetContext.translate.instant('widgets.power-button.off-label').toUpperCase();
@@ -725,13 +732,34 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
   private offLabelShape: Text;
   private onCircleShape: Circle;
   private onLabelShape: Text;
-  private offPowerSymbolCircle: Path;
-  private offPowerSymbolLine: Path;
-  private onPowerSymbolCircle: Path;
-  private onPowerSymbolLine: Path;
   private pressedTimeline: Timeline;
   private centerGroup: G;
 
+
+  protected drawOffCenter(centerGroup: G) {
+    this.offLabelShape = this.createOffLabel('400').addTo(centerGroup);
+  }
+
+  protected drawOnCenter() {
+    this.onLabelShape = this.createOnLabel('400');
+  }
+
+  protected addMask(onCircleShape: Circle) {
+    this.createMask(onCircleShape,[this.onLabelShape]);
+  }
+
+  protected addTimeLine(pressedTimeline: Timeline) {
+    this.onLabelShape.timeline(pressedTimeline);
+  }
+
+  protected drawColor(mainColor: PowerButtonColor) {
+    this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
+  }
+
+  protected animation(scale: number) {
+    powerButtonAnimation(this.onLabelShape).transform({scale, origin: {x: cx, y: cy}});
+  }
+
   protected drawShape() {
     this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy)
     .fill({opacity: 0}).stroke({width: 0});
@@ -750,30 +778,15 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
       add.stop(1, '#FFFFFF', 1);
     }).from(0.832, 0.1188).to(0.268, 0.92);
     this.centerGroup = this.svgShape.group();
-    if (this.iconMode) {
-      this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup);
-      this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup);
-    } else {
-      this.offLabelShape = this.createOffLabel('400').addTo(this.centerGroup);
-    }
+    this.drawOffCenter(this.centerGroup);
     this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 24).center(cx, cy);
-    if (this.iconMode) {
-      this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy);
-      this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12);
-    } else {
-      this.onLabelShape = this.createOnLabel('400');
-    }
-    this.createMask(this.onCircleShape, this.iconMode ? [this.onPowerSymbolCircle, this.onPowerSymbolLine] : [this.onLabelShape]);
+    this.drawOnCenter();
+    this.addMask(this.onCircleShape);
     this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 24, cx, cy, 3, 0.3);
 
     this.pressedTimeline = new Timeline();
     this.centerGroup.timeline(this.pressedTimeline);
-    if (this.iconMode) {
-      this.onPowerSymbolCircle.timeline(this.pressedTimeline);
-      this.onPowerSymbolLine.timeline(this.pressedTimeline);
-    } else {
-      this.onLabelShape.timeline(this.pressedTimeline);
-    }
+    this.addTimeLine(this.pressedTimeline);
     this.innerShadow.timeline(this.pressedTimeline);
   }
 
@@ -793,12 +806,7 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
       this.innerBorder.fill(this.innerBorderGradient);
       this.innerBorder.attr({ 'fill-opacity': 1 });
     }
-    if (this.iconMode) {
-      this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-      this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-    } else {
-      this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-    }
+    this.drawColor(mainColor);
     this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
   }
 
@@ -823,24 +831,14 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
     this.innerShadow.show();
     const pressedScale = 0.75;
     powerButtonAnimation(this.centerGroup).transform({scale: pressedScale});
-    if (this.iconMode) {
-      powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: pressedScale, origin: {x: cx, y: cy}});
-      powerButtonAnimation(this.onPowerSymbolLine).transform({scale: pressedScale, origin: {x: cx, y: cy}});
-    } else {
-      powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale, origin: {x: cx, y: cy}});
-    }
+    this.animation(pressedScale);
     this.innerShadow.animate(6, 0.6);
   }
 
   protected onPressEnd() {
     this.pressedTimeline.finish();
     powerButtonAnimation(this.centerGroup).transform({scale: 1});
-    if (this.iconMode) {
-      powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: 1, origin: {x: cx, y: cy}});
-      powerButtonAnimation(this.onPowerSymbolLine).transform({scale: 1, origin: {x: cx, y: cy}});
-    } else {
-      powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}});
-    }
+    this.animation(1);
     this.innerShadow.animateRestore().after(() => {
       if (this.disabled) {
         this.innerShadow.hide();
@@ -850,22 +848,58 @@ class DefaultVolumePowerButtonShape extends PowerButtonShape {
 
 }
 
+class DefaultPowerPowerButtonShape extends DefaultVolumePowerButtonShape {
+  private offPowerSymbolCircle: Path;
+  private offPowerSymbolLine: Path;
+  private onPowerSymbolCircle: Path;
+  private onPowerSymbolLine: Path;
+
+  protected drawOffCenter(centerGroup: G) {
+    this.offPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy).addTo(centerGroup);
+    this.offPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12).addTo(centerGroup);
+  }
+
+  protected drawOnCenter() {
+    this.onPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy);
+    this.onPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12);
+  }
+
+  protected addMask(onCircleShape: Circle) {
+    this.createMask(onCircleShape, [this.onPowerSymbolCircle, this.onPowerSymbolLine]);
+  }
+
+  protected addTimeLine(pressedTimeline: Timeline) {
+    this.onPowerSymbolCircle.timeline(pressedTimeline);
+    this.onPowerSymbolLine.timeline(pressedTimeline);
+  }
+
+  protected drawColor(mainColor: PowerButtonColor) {
+    this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
+    this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
+  }
+
+  protected animation(scale: number) {
+    powerButtonAnimation(this.onPowerSymbolCircle).transform({scale, origin: {x: cx, y: cy}});
+    powerButtonAnimation(this.onPowerSymbolLine).transform({scale, origin: {x: cx, y: cy}});
+  }
+}
+
 class SimplifiedVolumePowerButtonShape extends PowerButtonShape {
 
   private outerBorder: Circle;
   private outerBorderMask: Circle;
   private offLabelShape: Text;
   private onLabelShape: Text;
-  private offPowerSymbolCircle: Path;
-  private offPowerSymbolLine: Path;
-  private onPowerSymbolCircle: Path;
-  private onPowerSymbolLine: Path;
   private innerShadow: InnerShadowCircle;
   private pressedShadow: InnerShadowCircle;
   private pressedTimeline: Timeline;
   private centerGroup: G;
   private onCenterGroup: G;
 
+  protected drawCenterGroup(centerGroup: G, onCenterGroup: G) {
+    this.offLabelShape = this.createOffLabel().addTo(centerGroup);
+    this.onLabelShape = this.createOnLabel().addTo(onCenterGroup);
+  }
 
   protected drawShape() {
     this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy)
@@ -874,16 +908,7 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape {
     this.createMask(this.outerBorder, [this.outerBorderMask]);
     this.centerGroup = this.svgShape.group();
     this.onCenterGroup = this.svgShape.group();
-
-    if (this.iconMode) {
-      this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup);
-      this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup);
-      this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.onCenterGroup);
-      this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.onCenterGroup);
-    } else {
-      this.offLabelShape = this.createOffLabel().addTo(this.centerGroup);
-      this.onLabelShape = this.createOnLabel().addTo(this.onCenterGroup);
-    }
+    this.drawCenterGroup(this.centerGroup, this.onCenterGroup);
     this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 4, cx, cy, 3, 0.3);
     this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 4, cx, cy, 0, 0);
     this.pressedTimeline = new Timeline();
@@ -893,15 +918,8 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape {
   }
 
   protected drawColorState(mainColor: PowerButtonColor){
-    if (this.iconMode) {
-      this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-      this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-      this.onPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-      this.onPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-    } else {
-      this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-      this.onLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-    }
+    this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
+    this.onLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
   }
 
   protected drawOff() {
@@ -943,7 +961,28 @@ class SimplifiedVolumePowerButtonShape extends PowerButtonShape {
   }
 }
 
-class OutlinedVolumePowerButtonShape extends PowerButtonShape {
+class SimplifiedPowerPowerButtonShape extends SimplifiedVolumePowerButtonShape {
+  private offPowerSymbolCircle: Path;
+  private offPowerSymbolLine: Path;
+  private onPowerSymbolCircle: Path;
+  private onPowerSymbolLine: Path;
+
+  protected drawCenterGroup(centerGroup: G, onCenterGroup: G) {
+    this.offPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy).addTo(centerGroup);
+    this.offPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12).addTo(centerGroup);
+    this.onPowerSymbolCircle = this.svgShape.path(powerCircle).center(cx, cy).addTo(onCenterGroup);
+    this.onPowerSymbolLine = this.svgShape.path(powerLine).center(cx, cy-12).addTo(onCenterGroup);
+  }
+
+  protected drawColorState(mainColor: PowerButtonColor) {
+    this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
+    this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
+    this.onPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
+    this.onPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
+  }
+}
+
+  class OutlinedVolumePowerButtonShape extends PowerButtonShape {
   private outerBorder: Circle;
   private outerBorderMask: Circle;
   private outerBorderGradient: Gradient;
@@ -952,15 +991,35 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
   private offLabelShape: Text;
   private onCircleShape: Circle;
   private onLabelShape: Text;
-  private offPowerSymbolCircle: Path;
-  private offPowerSymbolLine: Path;
-  private onPowerSymbolCircle: Path;
-  private onPowerSymbolLine: Path;
   private pressedShadow: InnerShadowCircle;
   private pressedTimeline: Timeline;
   private centerGroup: G;
   private onCenterGroup: G;
 
+  protected drawOffCenter(centerGroup: G) {
+    this.offLabelShape = this.createOffLabel('800').addTo(centerGroup);
+  }
+
+  protected drawOnCenter() {
+    this.onLabelShape = this.createOnLabel('800');
+  }
+
+  protected addMask(onCircleShape: Circle) {
+    this.createMask(onCircleShape,[this.onLabelShape]);
+  }
+
+  protected addTimeLine(pressedTimeline: Timeline) {
+    this.onLabelShape.timeline(pressedTimeline);
+  }
+
+  protected drawColor(mainColor: PowerButtonColor) {
+    this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
+  }
+
+  protected animation(scale: number) {
+    powerButtonAnimation(this.onLabelShape).transform({scale, origin: {x: cx, y: cy}});
+  }
+
   protected drawShape() {
     this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy)
     .fill({opacity: 0}).stroke({width: 0});
@@ -975,42 +1034,19 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
     this.innerBorderMask = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy);
     this.createMask(this.innerBorder, [this.innerBorderMask]);
     this.centerGroup = this.svgShape.group();
-    if (this.iconMode) {
-      this.powerCircle = 'M12 2.95698C12 1.45236 10.4775 0.438524 9.19424 1.22416C3.68417 4.59764 0 10.7283 0 17.7316C0 ' +
-        '28.3732 8.50659 37 19 37C29.4934 37 38 28.3732 38 17.7316C38 10.7283 34.3158 4.59764 28.8058 1.22416C27.5225 ' +
-        '0.438524 26 1.45236 26 2.95698C26 3.73878 26.4365 4.44718 27.0911 4.87461C31.2354 7.58066 34 12.3083 34 ' +
-        '17.7316C34 26.2172 27.2316 33 19 33C10.7684 33 4 26.2172 4 17.7316C4 12.3084 6.76462 7.58066 10.9089 ' +
-        '4.87461C11.5635 4.44718 12 3.73878 12 2.95698Z';
-      this.powerLine = 'M0 2.5C0 1.11929 1.11929 0 2.5 0C3.88071 0 5 1.11929 5 2.5V15.5C5 16.8807 3.88071 18 ' +
-        '2.5 18C1.11929 18 0 16.8807 0 15.5V2.5Z';
-
-      this.offPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy).addTo(this.centerGroup);
-      this.offPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12).addTo(this.centerGroup);
-    } else {
-      this.offLabelShape = this.createOffLabel('800').addTo(this.centerGroup);
-    }
+    this.drawOffCenter(this.centerGroup);
     this.onCenterGroup = this.svgShape.group();
     this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy)
     .addTo(this.onCenterGroup);
-    if (this.iconMode) {
-      this.onPowerSymbolCircle = this.svgShape.path(this.powerCircle).center(cx, cy);
-      this.onPowerSymbolLine = this.svgShape.path(this.powerLine).center(cx, cy-12);
-    } else {
-      this.onLabelShape = this.createOnLabel('800');
-    }
-    this.createMask(this.onCircleShape, this.iconMode ? [this.onPowerSymbolCircle, this.onPowerSymbolLine] : [this.onLabelShape]);
+    this.drawOnCenter();
+    this.addMask(this.onCircleShape);
     this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 30, cx, cy, 0, 0);
     this.backgroundShape.addClass('tb-small-shadow');
 
     this.pressedTimeline = new Timeline();
     this.centerGroup.timeline(this.pressedTimeline);
     this.onCenterGroup.timeline(this.pressedTimeline);
-    if (this.iconMode) {
-      this.onPowerSymbolCircle.timeline(this.pressedTimeline);
-      this.onPowerSymbolLine.timeline(this.pressedTimeline);
-    } else {
-      this.onLabelShape.timeline(this.pressedTimeline);
-    }
+    this.addTimeLine(this.pressedTimeline);
     this.pressedShadow.timeline(this.pressedTimeline);
   }
 
@@ -1022,12 +1058,7 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
       this.outerBorder.attr({ 'fill-opacity': 1 });
     }
     this.innerBorder.attr({fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-    if (this.iconMode) {
-      this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-      this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-    } else {
-      this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
-    }
+    this.drawColor(mainColor);
     this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
   }
 
@@ -1048,12 +1079,7 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
     const pressedScale = 0.75;
     powerButtonAnimation(this.centerGroup).transform({scale: pressedScale});
     powerButtonAnimation(this.onCenterGroup).transform({scale: 0.98});
-    if (this.iconMode) {
-      powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}});
-      powerButtonAnimation(this.onPowerSymbolLine).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}});
-    } else {
-      powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale / 0.98, origin: {x: cx, y: cy}});
-    }
+    this.animation(pressedScale / 0.98);
     this.pressedShadow.animate(6, 0.6);
   }
 
@@ -1061,13 +1087,44 @@ class OutlinedVolumePowerButtonShape extends PowerButtonShape {
     this.pressedTimeline.finish();
     powerButtonAnimation(this.centerGroup).transform({scale: 1});
     powerButtonAnimation(this.onCenterGroup).transform({scale: 1});
-    if (this.iconMode) {
-      powerButtonAnimation(this.onPowerSymbolCircle).transform({scale: 1, origin: {x: cx, y: cy}});
-      powerButtonAnimation(this.onPowerSymbolLine).transform({scale: 1, origin: {x: cx, y: cy}});
-    } else {
-      powerButtonAnimation(this.onLabelShape).transform({scale: 1, origin: {x: cx, y: cy}});
-    }
+    this.animation(1);
     this.pressedShadow.animateRestore();
   }
 
 }
+
+class OutlinedPowerPowerButtonShape extends OutlinedVolumePowerButtonShape {
+  private offPowerSymbolCircle: Path;
+  private offPowerSymbolLine: Path;
+  private onPowerSymbolCircle: Path;
+  private onPowerSymbolLine: Path;
+
+  protected drawOffCenter(centerGroup: G) {
+    this.offPowerSymbolCircle = this.svgShape.path(powerCircleStroke).center(cx, cy).addTo(centerGroup);
+    this.offPowerSymbolLine = this.svgShape.path(powerLineStroke).center(cx, cy-12).addTo(centerGroup);
+  }
+
+  protected drawOnCenter() {
+    this.onPowerSymbolCircle = this.svgShape.path(powerCircleStroke).center(cx, cy);
+    this.onPowerSymbolLine = this.svgShape.path(powerLineStroke).center(cx, cy-12);
+  }
+
+  protected addMask(onCircleShape: Circle) {
+    this.createMask(onCircleShape, [this.onPowerSymbolCircle, this.onPowerSymbolLine]);
+  }
+
+  protected addTimeLine(pressedTimeline: Timeline) {
+    this.onPowerSymbolCircle.timeline(pressedTimeline);
+    this.onPowerSymbolLine.timeline(pressedTimeline);
+  }
+
+  protected drawColor(mainColor: PowerButtonColor) {
+    this.offPowerSymbolCircle.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
+    this.offPowerSymbolLine.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity});
+  }
+
+  protected animation(scale: number) {
+    powerButtonAnimation(this.onPowerSymbolCircle).transform({scale, origin: {x: cx, y: cy}});
+    powerButtonAnimation(this.onPowerSymbolLine).transform({scale, origin: {x: cx, y: cy}});
+  }
+}