diff --git a/libs/ui/accordion/helm/package.json b/libs/ui/accordion/helm/package.json
index b27d70986..2c7f29f9d 100644
--- a/libs/ui/accordion/helm/package.json
+++ b/libs/ui/accordion/helm/package.json
@@ -9,6 +9,7 @@
 		"@ng-icons/lucide": ">=29.0.0",
 		"@spartan-ng/brain": "0.0.1-alpha.357",
 		"@spartan-ng/ui-core": "0.0.1-alpha.357",
+		"@spartan-ng/ui-icon-helm": "0.0.1-alpha.357",
 		"clsx": "^2.1.1"
 	},
 	"publishConfig": {
diff --git a/libs/ui/icon/helm/package.json b/libs/ui/icon/helm/package.json
index f0a08ea01..8cea57dfb 100644
--- a/libs/ui/icon/helm/package.json
+++ b/libs/ui/icon/helm/package.json
@@ -4,11 +4,7 @@
 	"sideEffects": false,
 	"dependencies": {},
 	"peerDependencies": {
-		"@angular/common": ">=18.0.0",
-		"@angular/core": ">=18.0.0",
-		"@spartan-ng/ui-core": "0.0.1-alpha.357",
-		"class-variance-authority": "^0.7.0",
-		"clsx": "^2.1.1"
+		"@angular/core": ">=18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/libs/ui/icon/helm/src/lib/hlm-icon.directive.spec.ts b/libs/ui/icon/helm/src/lib/hlm-icon.directive.spec.ts
index abd13c87b..a3a31a217 100644
--- a/libs/ui/icon/helm/src/lib/hlm-icon.directive.spec.ts
+++ b/libs/ui/icon/helm/src/lib/hlm-icon.directive.spec.ts
@@ -21,23 +21,39 @@ class HlmMockComponent {
 
 describe('HlmIconDirective', () => {
 	let r: RenderResult<HlmMockComponent>;
+	let icon: HTMLElement;
 
 	beforeEach(async () => {
 		r = await render(HlmMockComponent);
+		icon = r.container.querySelector('ng-icon')!;
 	});
 
-	it('should create', () => {
-		expect(r).toBeTruthy();
+	it('should add the xs size', async () => {
+		await r.rerender({ componentInputs: { size: 'xs' } });
+		r.fixture.detectChanges();
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 12px');
+	});
+
+	it('should add the sm size', async () => {
+		await r.rerender({ componentInputs: { size: 'sm' } });
+		r.fixture.detectChanges();
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 16px');
 	});
 
-	it('should add the appropriate size variant class', () => {
-		expect(r.container.querySelector('ng-icon')?.classList).toContain('h-6');
-		expect(r.container.querySelector('ng-icon')?.classList).toContain('w-6');
+	it('should add the base size', () => {
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 24px');
 	});
 
-	it('should compose the user classes', () => {
-		expect(r.container.querySelector('ng-icon')?.classList).toContain('inline-flex');
-		expect(r.container.querySelector('ng-icon')?.classList).toContain('test');
+	it('should add the lg size', async () => {
+		await r.rerender({ componentInputs: { size: 'lg' } });
+		r.fixture.detectChanges();
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 32px');
+	});
+
+	it('should add the xl size', async () => {
+		await r.rerender({ componentInputs: { size: 'xl' } });
+		r.fixture.detectChanges();
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 48px');
 	});
 
 	it('should forward the size property if the size is not a pre-defined size', async () => {
@@ -45,7 +61,6 @@ describe('HlmIconDirective', () => {
 		r.fixture.detectChanges();
 		const debugEl = r.fixture.debugElement.query(By.directive(NgIcon));
 		expect(debugEl.componentInstance.size()).toBe('2rem');
-		expect(r.container.querySelector('ng-icon')?.classList).not.toContain('h-6');
-		expect(r.container.querySelector('ng-icon')?.classList).not.toContain('w-6');
+		expect(icon.getAttribute('style')).toContain('--ng-icon__size: 2rem');
 	});
 });