diff --git a/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.module.ts b/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.module.ts
index 8bdff92664..da138734e3 100644
--- a/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.module.ts
+++ b/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.module.ts
@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffCalloutModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCalloutModule } from '@daffodil/design';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { DaffioHomeCalloutPlatformsComponent } from './home-callout-platforms.component';
 
diff --git a/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts b/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts
index edb75aa3f0..5c2f7d3a40 100644
--- a/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts
+++ b/apps/daffio/src/app/content/home/components/home-callout-pwa/home-callout-pwa.module.ts
@@ -4,11 +4,11 @@ import { RouterModule } from '@angular/router';
 
 import {
   DaffCalloutModule,
-  DaffImageModule,
   DaffCardModule,
 } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { DaffioHomeCalloutPwaComponent } from './home-callout-pwa.component';
 
diff --git a/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts b/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts
index 074b521e5c..3bca27437c 100644
--- a/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts
+++ b/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts
@@ -2,12 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffHeroModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffHeroModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { DaffioHomeHeroComponent } from './home-hero.component';
 
diff --git a/libs/design/card/examples/src/basic-card/basic-card.module.ts b/libs/design/card/examples/src/basic-card/basic-card.module.ts
index 34a1ca101e..47a5f521a1 100644
--- a/libs/design/card/examples/src/basic-card/basic-card.module.ts
+++ b/libs/design/card/examples/src/basic-card/basic-card.module.ts
@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { BasicCardComponent } from './basic-card.component';
 
diff --git a/libs/design/card/examples/src/card-orientation/card-orientation.module.ts b/libs/design/card/examples/src/card-orientation/card-orientation.module.ts
index 95a5295041..813f66f72a 100644
--- a/libs/design/card/examples/src/card-orientation/card-orientation.module.ts
+++ b/libs/design/card/examples/src/card-orientation/card-orientation.module.ts
@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { CardOrientationComponent } from './card-orientation.component';
 
diff --git a/libs/design/card/examples/src/card-theming/card-theming.module.ts b/libs/design/card/examples/src/card-theming/card-theming.module.ts
index 7955d04cdd..e576eaf966 100644
--- a/libs/design/card/examples/src/card-theming/card-theming.module.ts
+++ b/libs/design/card/examples/src/card-theming/card-theming.module.ts
@@ -2,10 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { CardThemingComponent } from './card-theming.component';
 
diff --git a/libs/design/card/examples/src/linkable-card/linkable-card.module.ts b/libs/design/card/examples/src/linkable-card/linkable-card.module.ts
index 60cdd7482c..ca1006d914 100644
--- a/libs/design/card/examples/src/linkable-card/linkable-card.module.ts
+++ b/libs/design/card/examples/src/linkable-card/linkable-card.module.ts
@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { LinkableCardComponent } from './linkable-card.component';
 
diff --git a/libs/design/card/examples/src/raised-card/raised-card.module.ts b/libs/design/card/examples/src/raised-card/raised-card.module.ts
index 252ccb5905..de82adbb39 100644
--- a/libs/design/card/examples/src/raised-card/raised-card.module.ts
+++ b/libs/design/card/examples/src/raised-card/raised-card.module.ts
@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { RaisedCardComponent } from './raised-card.component';
 
diff --git a/libs/design/card/examples/src/stroked-card/stroked-card.module.ts b/libs/design/card/examples/src/stroked-card/stroked-card.module.ts
index e9861583c9..cab6441e55 100644
--- a/libs/design/card/examples/src/stroked-card/stroked-card.module.ts
+++ b/libs/design/card/examples/src/stroked-card/stroked-card.module.ts
@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import {
-  DaffCardModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffCardModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { StrokedCardComponent } from './stroked-card.component';
 
diff --git a/libs/design/src/atoms/image/README.md b/libs/design/image/README.md
similarity index 100%
rename from libs/design/src/atoms/image/README.md
rename to libs/design/image/README.md
diff --git a/libs/design/image/examples/src/basic-image/basic-image.module.ts b/libs/design/image/examples/src/basic-image/basic-image.module.ts
index 8bd98d5489..595013322a 100644
--- a/libs/design/image/examples/src/basic-image/basic-image.module.ts
+++ b/libs/design/image/examples/src/basic-image/basic-image.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { BasicImageComponent } from './basic-image.component';
 
diff --git a/libs/design/image/examples/src/load-image/load-image.module.ts b/libs/design/image/examples/src/load-image/load-image.module.ts
index 8adeb2d389..bf83b19ab4 100644
--- a/libs/design/image/examples/src/load-image/load-image.module.ts
+++ b/libs/design/image/examples/src/load-image/load-image.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { LoadImageComponent } from './load-image.component';
 
diff --git a/libs/design/image/examples/src/skeleton-image/skeleton-image.module.ts b/libs/design/image/examples/src/skeleton-image/skeleton-image.module.ts
index cc3153b196..913a25e8a2 100644
--- a/libs/design/image/examples/src/skeleton-image/skeleton-image.module.ts
+++ b/libs/design/image/examples/src/skeleton-image/skeleton-image.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { SkeletonImageComponent } from './skeleton-image.component';
 
diff --git a/libs/design/image/ng-package.json b/libs/design/image/ng-package.json
new file mode 100644
index 0000000000..d492658df5
--- /dev/null
+++ b/libs/design/image/ng-package.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/image",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../src/scss"]
+  }
+} 
\ No newline at end of file
diff --git a/libs/design/src/atoms/image/image.module.ts b/libs/design/image/src/image.module.ts
similarity index 81%
rename from libs/design/src/atoms/image/image.module.ts
rename to libs/design/image/src/image.module.ts
index d934468ccf..0b1777d6e5 100644
--- a/libs/design/src/atoms/image/image.module.ts
+++ b/libs/design/image/src/image.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffImageComponent } from './image.component';
+import { DaffImageComponent } from './image/image.component';
 
 @NgModule({
   declarations: [
diff --git a/libs/design/src/atoms/image/image.component.html b/libs/design/image/src/image/image.component.html
similarity index 100%
rename from libs/design/src/atoms/image/image.component.html
rename to libs/design/image/src/image/image.component.html
diff --git a/libs/design/src/atoms/image/image.component.scss b/libs/design/image/src/image/image.component.scss
similarity index 93%
rename from libs/design/src/atoms/image/image.component.scss
rename to libs/design/image/src/image/image.component.scss
index bf7fd86f8d..b7da51dc8d 100644
--- a/libs/design/src/atoms/image/image.component.scss
+++ b/libs/design/image/src/image/image.component.scss
@@ -1,4 +1,4 @@
-@use 'state';
+@use '../../../scss/state';
 
 :host {
 	display: inline-block;
diff --git a/libs/design/src/atoms/image/image.component.spec.ts b/libs/design/image/src/image/image.component.spec.ts
similarity index 100%
rename from libs/design/src/atoms/image/image.component.spec.ts
rename to libs/design/image/src/image/image.component.spec.ts
diff --git a/libs/design/src/atoms/image/image.component.ts b/libs/design/image/src/image/image.component.ts
similarity index 96%
rename from libs/design/src/atoms/image/image.component.ts
rename to libs/design/image/src/image/image.component.ts
index d635e80f06..1345fb5289 100644
--- a/libs/design/src/atoms/image/image.component.ts
+++ b/libs/design/image/src/image/image.component.ts
@@ -14,8 +14,8 @@ import { DomSanitizer } from '@angular/platform-browser';
 import {
   daffSkeletonableMixin,
   DaffSkeletonable,
-} from '../../core/skeletonable/public_api';
-import { daffThumbnailCompatToken } from '../../molecules/media-gallery/public_api';
+  daffThumbnailCompatToken,
+} from '@daffodil/design';
 
 const validateProperty = (object: Record<string, any>, prop: string) => {
   if (object[prop] === null || object[prop] === undefined || object[prop] === '') {
diff --git a/libs/design/src/atoms/image/specs/image-props.spec.ts b/libs/design/image/src/image/specs/image-props.spec.ts
similarity index 100%
rename from libs/design/src/atoms/image/specs/image-props.spec.ts
rename to libs/design/image/src/image/specs/image-props.spec.ts
diff --git a/libs/design/image/src/index.ts b/libs/design/image/src/index.ts
new file mode 100644
index 0000000000..4aaf8f92ed
--- /dev/null
+++ b/libs/design/image/src/index.ts
@@ -0,0 +1 @@
+export * from './public_api';
diff --git a/libs/design/image/src/public_api.ts b/libs/design/image/src/public_api.ts
new file mode 100644
index 0000000000..e5568814f6
--- /dev/null
+++ b/libs/design/image/src/public_api.ts
@@ -0,0 +1,2 @@
+export { DaffImageModule } from './image.module';
+export { DaffImageComponent } from './image/image.component';
diff --git a/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts b/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts
index 2237f17313..a38df19309 100644
--- a/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts
+++ b/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts
@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import {
-  DaffMediaGalleryModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffMediaGalleryModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { BasicMediaGalleryComponent } from './basic-media-gallery.component';
 
diff --git a/libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts b/libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts
index abe5c6eb79..d7af4a4bd9 100644
--- a/libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts
+++ b/libs/design/media-gallery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts
@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import {
-  DaffMediaGalleryModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffMediaGalleryModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery.component';
 
diff --git a/libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts b/libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts
index e0ff7112ad..5e3e662ad4 100644
--- a/libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts
+++ b/libs/design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts
@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import {
-  DaffMediaGalleryModule,
-  DaffImageModule,
-} from '@daffodil/design';
+import { DaffMediaGalleryModule } from '@daffodil/design';
+import { DaffImageModule } from '@daffodil/design/image';
 
 import { SkeletonMediaGalleryComponent } from './skeleton-media-gallery.component';
 
diff --git a/libs/design/src/atoms/image/public_api.ts b/libs/design/src/atoms/image/public_api.ts
deleted file mode 100644
index df9bc96b8c..0000000000
--- a/libs/design/src/atoms/image/public_api.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { DaffImageModule } from './image.module';
-export { DaffImageComponent } from './image.component';
diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts
index 9d342a0881..090de3480e 100644
--- a/libs/design/src/public_api.ts
+++ b/libs/design/src/public_api.ts
@@ -6,7 +6,6 @@
 export * from './atoms/form/core/public_api';
 export * from './atoms/form/form-field/public_api';
 export * from './atoms/form/error-message/public_api';
-export * from './atoms/image/public_api';
 export * from './atoms/form/input/public_api';
 export * from './atoms/form/native-select/public_api';
 export * from './atoms/form/checkbox/public_api';