diff --git a/libs/components/src/icon/icon.component.ts b/libs/components/src/icon/icon.component.ts
index cad4fab6865..8fba51f872b 100644
--- a/libs/components/src/icon/icon.component.ts
+++ b/libs/components/src/icon/icon.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, input } from "@angular/core";
+import { Component, effect, input } from "@angular/core";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 
 import { Icon, isIcon } from "./icon";
@@ -15,18 +15,18 @@ import { Icon, isIcon } from "./icon";
 export class BitIconComponent {
   innerHtml: SafeHtml | null = null;
 
-  // TODO: Skipped for migration because:
-  //  Accessor inputs cannot be migrated as they are too complex.
-  @Input() set icon(icon: Icon) {
-    if (!isIcon(icon)) {
-      return;
-    }
-
-    const svg = icon.svg;
-    this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
-  }
+  icon = input<Icon>();
 
   readonly ariaLabel = input<string | undefined>(undefined);
 
-  constructor(private domSanitizer: DomSanitizer) {}
+  constructor(private domSanitizer: DomSanitizer) {
+    effect(() => {
+      const icon = this.icon();
+      if (!isIcon(icon)) {
+        return;
+      }
+      const svg = icon.svg;
+      this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
+    });
+  }
 }
diff --git a/libs/components/src/icon/icon.components.spec.ts b/libs/components/src/icon/icon.components.spec.ts
index 7d499cdd419..76e86971587 100644
--- a/libs/components/src/icon/icon.components.spec.ts
+++ b/libs/components/src/icon/icon.components.spec.ts
@@ -4,7 +4,6 @@ import { Icon, svgIcon } from "./icon";
 import { BitIconComponent } from "./icon.component";
 
 describe("IconComponent", () => {
-  let component: BitIconComponent;
   let fixture: ComponentFixture<BitIconComponent>;
 
   beforeEach(async () => {
@@ -13,14 +12,13 @@ describe("IconComponent", () => {
     }).compileComponents();
 
     fixture = TestBed.createComponent(BitIconComponent);
-    component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
   it("should have empty innerHtml when input is not an Icon", () => {
     const fakeIcon = { svg: "harmful user input" } as Icon;
 
-    component.icon = fakeIcon;
+    fixture.componentRef.setInput("icon", fakeIcon);
     fixture.detectChanges();
 
     const el = fixture.nativeElement as HTMLElement;
@@ -30,7 +28,7 @@ describe("IconComponent", () => {
   it("should contain icon when input is a safe Icon", () => {
     const icon = svgIcon`<svg><text x="0" y="15">safe icon</text></svg>`;
 
-    component.icon = icon;
+    fixture.componentRef.setInput("icon", icon);
     fixture.detectChanges();
 
     const el = fixture.nativeElement as HTMLElement;