diff --git a/src/ol/style/Circle.js b/src/ol/style/Circle.js
index 59161e0456..9ac4a5939e 100644
--- a/src/ol/style/Circle.js
+++ b/src/ol/style/Circle.js
@@ -10,6 +10,7 @@ import RegularShape from './RegularShape.js';
  * @property {import("./Fill.js").default} [fill] Fill style.
  * @property {number} radius Circle radius.
  * @property {import("./Stroke.js").default} [stroke] Stroke style.
+ * @property {Array<number>} [offset=[0,0]] offset
  */
 
 
@@ -30,7 +31,8 @@ class CircleStyle extends RegularShape {
       points: Infinity,
       fill: options.fill,
       radius: options.radius,
-      stroke: options.stroke
+      stroke: options.stroke,
+      offset: options.offset !== undefined ? options.offset : [0, 0]
     });
 
   }
@@ -45,7 +47,8 @@ class CircleStyle extends RegularShape {
     const style = new CircleStyle({
       fill: this.getFill() ? this.getFill().clone() : undefined,
       stroke: this.getStroke() ? this.getStroke().clone() : undefined,
-      radius: this.getRadius()
+      radius: this.getRadius(),
+      offset: this.getOffset().slice()
     });
     style.setOpacity(this.getOpacity());
     style.setScale(this.getScale());
diff --git a/src/ol/style/Icon.js b/src/ol/style/Icon.js
index b918487247..100f8892e8 100644
--- a/src/ol/style/Icon.js
+++ b/src/ol/style/Icon.js
@@ -84,6 +84,7 @@ class Icon extends ImageStyle {
       opacity: opacity,
       rotation: rotation,
       scale: scale,
+      offset: options.offset !== undefined ? options.offset : [0, 0],
       rotateWithView: rotateWithView
     });
 
@@ -172,12 +173,6 @@ class Icon extends ImageStyle {
     this.iconImage_ = getIconImage(
       image, /** @type {string} */ (src), imgSize, this.crossOrigin_, imageState, this.color_);
 
-    /**
-     * @private
-     * @type {Array<number>}
-     */
-    this.offset_ = options.offset !== undefined ? options.offset : [0, 0];
-
     /**
      * @private
      * @type {import("./IconOrigin.js").default}
diff --git a/src/ol/style/Image.js b/src/ol/style/Image.js
index 6d8fd421b0..a5d552b197 100644
--- a/src/ol/style/Image.js
+++ b/src/ol/style/Image.js
@@ -10,6 +10,7 @@ import {abstract} from '../util.js';
  * @property {boolean} rotateWithView
  * @property {number} rotation
  * @property {number} scale
+ * @property {Array<number>} offset
  */
 
 
@@ -51,6 +52,12 @@ class ImageStyle {
      */
     this.scale_ = options.scale;
 
+    /**
+     * @private
+     * @type {Array<number>}
+     */
+    this.offset_ = options.offset;
+
   }
 
   /**
@@ -63,7 +70,8 @@ class ImageStyle {
       opacity: this.getOpacity(),
       scale: this.getScale(),
       rotation: this.getRotation(),
-      rotateWithView: this.getRotateWithView()
+      rotateWithView: this.getRotateWithView(),
+      offset: this.getOffset().slice()
     });
   }
 
@@ -103,6 +111,15 @@ class ImageStyle {
     return this.scale_;
   }
 
+  /**
+   * Get the offset of the shape
+   * @return {Array<number>} Shape's center offset
+   * @api
+   */
+  getOffset() {
+    return this.offset_;
+  }
+
   /**
    * Get the anchor point in pixels. The anchor determines the center point for the
    * symbolizer.
diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js
index 42b4063fe7..1ab5ab500d 100644
--- a/src/ol/style/RegularShape.js
+++ b/src/ol/style/RegularShape.js
@@ -20,7 +20,7 @@ import ImageStyle from './Image.js';
  * @property {number} [radius1] Outer radius of a star.
  * @property {number} [radius2] Inner radius of a star.
  * @property {number} [angle=0] Shape's angle in radians. A value of 0 will have one of the shape's point facing up.
- * @property {Array<number>} [offset] Offset of the shape
+ * @property {Array<number>} [offset=[0,0]] Offset of the shape
  * @property {import("./Stroke.js").default} [stroke] Stroke style.
  * @property {number} [rotation=0] Rotation in radians (positive rotation clockwise).
  * @property {boolean} [rotateWithView=false] Whether to rotate the shape with the view.
@@ -62,7 +62,8 @@ class RegularShape extends ImageStyle {
       opacity: 1,
       rotateWithView: rotateWithView,
       rotation: options.rotation !== undefined ? options.rotation : 0,
-      scale: 1
+      scale: 1,
+      offset: options.offset !== undefined ? options.offset : [0, 0]
     });
 
     /**
@@ -89,12 +90,6 @@ class RegularShape extends ImageStyle {
      */
     this.origin_ = [0, 0];
 
-    /**
-     * @private
-     * @type {Array<number>}
-     */
-    this.offset_ = options.offset ? options.offset : [0, 0];
-
     /**
      * @private
      * @type {number}
@@ -168,7 +163,7 @@ class RegularShape extends ImageStyle {
       stroke: this.getStroke() ? this.getStroke().clone() : undefined,
       rotation: this.getRotation(),
       rotateWithView: this.getRotateWithView(),
-      offset: this.getOffset()
+      offset: this.getOffset().slice()
     });
     style.setOpacity(this.getOpacity());
     style.setScale(this.getScale());
@@ -192,15 +187,6 @@ class RegularShape extends ImageStyle {
     return this.angle_;
   }
 
-  /**
-   * Get the offset of the shape
-   * @return {Array<number>} Shape's center offset
-   * @api
-   */
-  getOffset() {
-    return this.offset_;
-  }
-
   /**
    * Get the fill style for the shape.
    * @return {import("./Fill.js").default} Fill style.