diff --git a/source/_patterns/00-base/icons/_icons.helpers.scss b/source/_patterns/00-base/icons/_icons.helpers.scss
index 41d40d7975..dfb8da8add 100644
--- a/source/_patterns/00-base/icons/_icons.helpers.scss
+++ b/source/_patterns/00-base/icons/_icons.helpers.scss
@@ -9,7 +9,11 @@
 	&::#{$position} {
 		--icon-font-family: "#{"icons-" + $size + "-" + $style}",
 			"missing-icons" !important;
-		--icon-font-size: #{to-rem($pxValue: $size)};
+
+		font-size: var(
+			--icon-font-size-#{$position},
+			var(--icon-font-size, #{to-rem($pxValue: $size)})
+		);
 
 		@if $position == "before" {
 			margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
@@ -30,8 +34,6 @@
 			/*** icon - partial ***/
 			// * use !important to prevent issues with browser extensions that change fonts
 			font-family: var(--icon-font-family) !important;
-
-			font-size: var(--icon-font-size);
 			font-style: normal;
 			font-variant: normal;
 
diff --git a/source/_patterns/00-base/icons/_icons.md b/source/_patterns/00-base/icons/_icons.md
index 147f12bf4d..650f60570a 100644
--- a/source/_patterns/00-base/icons/_icons.md
+++ b/source/_patterns/00-base/icons/_icons.md
@@ -94,6 +94,22 @@ In case of the need to display only the icon and hide the text next to it, use t
 .is-icon-text-replace
 ```
 
+###### Tweaking icons `font-size`
+
+If you'd like to control the icons `font-size` any further (defining sizes in between all of the `data-icon-variant` declarations, like e.g. having an icon `font-size` of `23px` instead of `24px` when defining `data-icon-variant="24-outline"`), you could set set one of the CSS variables `--icon-font-size-before` or `--icon-font-size-after` (in this case `--icon-font-size-before: 23px`).
+
+```html
+<a
+  href="#"
+  data-icon="alarm"
+  data-icon-variant="24-outline"
+  style="--icon-font-size-before: 23px"
+  >Alarm</a
+>
+```
+
+#### Further tweaking
+
 ### SVG files
 
 As mentioned above we're even also providing all of the icon sources (`svg` files) within this package in the folder `node_modules/@db-ui/core/dist/icons/`.
diff --git a/source/_patterns/00-base/icons/_icons.placeholder.scss b/source/_patterns/00-base/icons/_icons.placeholder.scss
index 456a3ee533..578c368588 100644
--- a/source/_patterns/00-base/icons/_icons.placeholder.scss
+++ b/source/_patterns/00-base/icons/_icons.placeholder.scss
@@ -10,8 +10,6 @@
 	// * use !important to prevent issues with browser extensions that change fonts
 	font-family: var(--icon-font-family) !important;
 
-	font-size: var(--icon-font-size);
-
 	// * Better Font Rendering ===========
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
diff --git a/source/_patterns/00-base/icons/icons.scss b/source/_patterns/00-base/icons/icons.scss
index 4311ea8bac..666517a1fa 100644
--- a/source/_patterns/00-base/icons/icons.scss
+++ b/source/_patterns/00-base/icons/icons.scss
@@ -12,6 +12,10 @@
 	&::before {
 		@extend %icon;
 		margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
+		font-size: var(
+			--icon-font-size-before,
+			var(--icon-font-size, #{to-rem($pxValue: $icon-size)})
+		);
 	}
 }
 
@@ -19,6 +23,10 @@
 	&::after {
 		@extend %icon;
 		margin-inline-start: var(--icon-margin-before, #{$icon-content-space});
+		font-size: var(
+			--icon-font-size-after,
+			var(--icon-font-size, #{to-rem($pxValue: $icon-size)})
+		);
 	}
 }