diff --git a/packages/components/src/components/icon/shadow.tsx b/packages/components/src/components/icon/shadow.tsx
index b492fe6a40..97512aa7c4 100644
--- a/packages/components/src/components/icon/shadow.tsx
+++ b/packages/components/src/components/icon/shadow.tsx
@@ -3,6 +3,7 @@ import { validateLabel, watchString } from '../../schema';
 import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
+import clsx from 'clsx';
 /**
  * @part icon - Ermöglicht das Styling des inneren Icons.
  */
@@ -27,7 +28,7 @@ export class KolIcon implements IconAPI {
 					 * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden
 					 */
 					aria-label={ariaShow ? this.state._label : undefined}
-					class={this.state._icons}
+					class={clsx('kol-icon__icon', this.state._icons)}
 					part="icon"
 					role="img"
 				></i>
diff --git a/packages/components/src/components/icon/style.scss b/packages/components/src/components/icon/style.scss
index 94421b5099..a73954e107 100644
--- a/packages/components/src/components/icon/style.scss
+++ b/packages/components/src/components/icon/style.scss
@@ -2,19 +2,20 @@
 @import '../../assets/codicons/codicon';
 
 @layer kol-component {
-	/* :host implicitly inherits font-size, see below */
+	/*
+	* Necessary to center icon
+	 */
 	:host {
-		font-size: rem(16);
-		color: inherit;
 		display: contents;
-		line-height: inherit;
 	}
 
-	/*
-   * The <code>:important</code> is important, because we should always override the font icon style.
-   */
-	:host > i,
-	:host > i:before {
-		font-size: inherit !important;
+	.kol-icon {
+		font-size: rem(16);
+		color: inherit;
+		line-height: inherit;
+		&__icon,
+		&__icon:before {
+			font-size: inherit !important;
+		}
 	}
 }
diff --git a/packages/components/src/components/icon/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/icon/test/__snapshots__/snapshot.spec.tsx.snap
index f572b20139..98191b8f7d 100644
--- a/packages/components/src/components/icon/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/icon/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`kol-icon should render with _label="Aria-Label" _icons="codicon codicon-home" 1`] = `
 <kol-icon class="kol-icon" exportparts="icon">
   <template shadowrootmode="open">
-    <i aria-label="Aria-Label" class="codicon codicon-home" part="icon" role="img"></i>
+    <i aria-label="Aria-Label" class="codicon codicon-home kol-icon__icon" part="icon" role="img"></i>
   </template>
 </kol-icon>
 `;