diff --git a/apps/demo/src/app/cart/cart.module.ts b/apps/demo/src/app/cart/cart.module.ts
index aa2d413f0b..adbbca553d 100644
--- a/apps/demo/src/app/cart/cart.module.ts
+++ b/apps/demo/src/app/cart/cart.module.ts
@@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { DaffLoadingIconModule } from '@daffodil/design';
import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DemoCartRoutingModule } from './cart-routing.module';
import { CartModule } from './components/cart/cart.module';
diff --git a/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.spec.ts b/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.spec.ts
index ff6e7f6cfe..251a04dc49 100644
--- a/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.spec.ts
+++ b/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.component.spec.ts
@@ -34,7 +34,7 @@ import {
daffComposeReducers,
daffIdentityReducer,
} from '@daffodil/core/state';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DaffProduct } from '@daffodil/product';
import {
DaffProductLoadSuccess,
diff --git a/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.module.ts b/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.module.ts
index 84d0d661b2..83161935f3 100644
--- a/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.module.ts
+++ b/apps/demo/src/app/cart/components/add-to-cart-notification/components/add-to-cart-notification/add-to-cart-notification.module.ts
@@ -2,11 +2,9 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import {
- DaffButtonSetModule,
- DaffLoadingIconModule,
-} from '@daffodil/design';
+import { DaffButtonSetModule } from '@daffodil/design';
import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { AddToCartNotificationComponent } from './add-to-cart-notification.component';
import { ProceedToCheckoutModule } from '../../../proceed-to-checkout/proceed-to-checkout.module';
diff --git a/apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.component.spec.ts b/apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.component.spec.ts
index e84b34ba05..e2ad6730cb 100644
--- a/apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.component.spec.ts
+++ b/apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.component.spec.ts
@@ -17,7 +17,7 @@ import {
import { DaffCart } from '@daffodil/cart';
import { DaffCartFactory } from '@daffodil/cart/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { CartSummaryWrapperComponent } from './cart-summary-wrapper.component';
import { CartSummaryComponent } from '../cart-summary/cart-summary.component';
diff --git a/apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.module.ts b/apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.module.ts
index 0dfd8d682f..d39f174da3 100644
--- a/apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.module.ts
+++ b/apps/demo/src/app/cart/components/cart-summary-wrapper/cart-summary-wrapper.module.ts
@@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { CartSummaryWrapperComponent } from './cart-summary-wrapper.component';
import { HelpBoxModule } from '../../../misc/help-box/help-box.module';
diff --git a/apps/demo/src/app/cart/pages/cart-view/cart-view.component.spec.ts b/apps/demo/src/app/cart/pages/cart-view/cart-view.component.spec.ts
index 9293ba7d6d..493e423bb4 100644
--- a/apps/demo/src/app/cart/pages/cart-view/cart-view.component.spec.ts
+++ b/apps/demo/src/app/cart/pages/cart-view/cart-view.component.spec.ts
@@ -16,8 +16,8 @@ import {
MockDaffCartFacade,
} from '@daffodil/cart/state/testing';
import { DaffCartFactory } from '@daffodil/cart/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DemoCartViewComponent } from './cart-view.component';
diff --git a/apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts b/apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts
index 1e1efb7e93..c76f95d3f2 100644
--- a/apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts
+++ b/apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts
@@ -11,8 +11,8 @@ import {
MockDaffCategoryFacade,
} from '@daffodil/category/state/testing';
import { DaffCategoryFactory } from '@daffodil/category/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DaffProduct } from '@daffodil/product';
import {
DaffProductFactory,
diff --git a/apps/demo/src/app/category/pages/category-view/category-view.module.ts b/apps/demo/src/app/category/pages/category-view/category-view.module.ts
index a3006a1790..c990b710bf 100644
--- a/apps/demo/src/app/category/pages/category-view/category-view.module.ts
+++ b/apps/demo/src/app/category/pages/category-view/category-view.module.ts
@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { DaffCategoryStateModule } from '@daffodil/category/state';
-import { DaffLoadingIconModule } from '@daffodil/design';
import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DaffProductStateModule } from '@daffodil/product/state';
import { CategoryViewComponent } from './category-view.component';
diff --git a/apps/demo/src/app/checkout/checkout.module.ts b/apps/demo/src/app/checkout/checkout.module.ts
index 0224cf4608..cd0d474770 100644
--- a/apps/demo/src/app/checkout/checkout.module.ts
+++ b/apps/demo/src/app/checkout/checkout.module.ts
@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
import { DaffCartStateModule } from '@daffodil/cart/state';
import { StateCheckoutModule } from '@daffodil/checkout';
-import { DaffLoadingIconModule } from '@daffodil/design';
import { DaffAccordionModule } from '@daffodil/design/accordion';
import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { CheckoutRoutingModule } from './checkout-routing.module';
import { DemoCheckoutStateModule } from './checkout-state.module';
diff --git a/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts b/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts
index a7840be6f0..3bbbe7df0d 100644
--- a/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts
+++ b/apps/demo/src/app/checkout/pages/checkout-view/checkout-view.component.spec.ts
@@ -38,12 +38,12 @@ import {
import { DaffPaymentFactory } from '@daffodil/checkout/testing';
import { DaffAddress } from '@daffodil/core';
import { DaffAddressFactory } from '@daffodil/core/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
import {
DaffAccordionModule,
DaffAccordionItemComponent,
} from '@daffodil/design/accordion';
import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { CheckoutViewComponent } from './checkout-view.component';
import { ShowPaymentView } from '../../actions/payment.actions';
diff --git a/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.spec.ts b/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.spec.ts
index a34556378c..749a69c55d 100644
--- a/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.spec.ts
+++ b/apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.spec.ts
@@ -8,23 +8,16 @@ import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { provideMockStore } from '@ngrx/store/testing';
-import {
- hot,
- cold,
-} from 'jasmine-marbles';
import { of } from 'rxjs';
import {
DaffSidebarModule,
DaffSidebarComponent,
- DaffLoadingIconModule,
DaffLinkSetModule,
} from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DaffNavigationTree } from '@daffodil/navigation';
-import {
- DaffNavigationFacade,
- DaffNavigationLoad,
-} from '@daffodil/navigation/state';
+import { DaffNavigationLoad } from '@daffodil/navigation/state';
import {
DaffNavigationStateTestingModule,
MockDaffNavigationFacade,
diff --git a/apps/demo/src/app/core/sidebar/sidebar.module.ts b/apps/demo/src/app/core/sidebar/sidebar.module.ts
index e5a36a8ab1..33f2670ef5 100644
--- a/apps/demo/src/app/core/sidebar/sidebar.module.ts
+++ b/apps/demo/src/app/core/sidebar/sidebar.module.ts
@@ -5,9 +5,9 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import {
DaffSidebarModule,
- DaffLoadingIconModule,
DaffLinkSetModule,
} from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DaffNavigationStateModule } from '@daffodil/navigation/state';
import { SidebarListComponent } from './components/sidebar-list/sidebar-list.component';
diff --git a/apps/demo/src/app/product/components/product-grid/product-grid.module.ts b/apps/demo/src/app/product/components/product-grid/product-grid.module.ts
index 68bca28bbe..16748b7b44 100644
--- a/apps/demo/src/app/product/components/product-grid/product-grid.module.ts
+++ b/apps/demo/src/app/product/components/product-grid/product-grid.module.ts
@@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { ProductGridComponent } from './product-grid.component';
import { ProductCardModule } from '../product-card/product-card.module';
diff --git a/apps/demo/src/app/product/components/product/product.module.ts b/apps/demo/src/app/product/components/product/product.module.ts
index da13625540..4fe3c76c2d 100644
--- a/apps/demo/src/app/product/components/product/product.module.ts
+++ b/apps/demo/src/app/product/components/product/product.module.ts
@@ -2,12 +2,10 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import {
- DaffQtyDropdownModule,
- DaffLoadingIconModule,
-} from '@daffodil/design';
+import { DaffQtyDropdownModule } from '@daffodil/design';
import { DaffAccordionModule } from '@daffodil/design/accordion';
import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { ProductComponent } from './product.component';
import { ImageGalleryModule } from '../../../core/image-gallery/image-gallery.module';
diff --git a/apps/demo/src/app/product/containers/best-sellers/best-sellers.component.spec.ts b/apps/demo/src/app/product/containers/best-sellers/best-sellers.component.spec.ts
index d9bba4c589..f4a531902d 100644
--- a/apps/demo/src/app/product/containers/best-sellers/best-sellers.component.spec.ts
+++ b/apps/demo/src/app/product/containers/best-sellers/best-sellers.component.spec.ts
@@ -9,7 +9,7 @@ import {
} from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DaffProduct } from '@daffodil/product';
import {
DaffProductStateTestingModule,
diff --git a/apps/demo/src/app/product/containers/best-sellers/best-sellers.module.ts b/apps/demo/src/app/product/containers/best-sellers/best-sellers.module.ts
index 979bba63a5..1068ad6be5 100644
--- a/apps/demo/src/app/product/containers/best-sellers/best-sellers.module.ts
+++ b/apps/demo/src/app/product/containers/best-sellers/best-sellers.module.ts
@@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DaffProductStateModule } from '@daffodil/product/state';
import { BestSellersComponent } from './best-sellers.component';
diff --git a/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.component.spec.ts b/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.component.spec.ts
index 3470ed81f1..ddde053f95 100644
--- a/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.component.spec.ts
+++ b/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.component.spec.ts
@@ -5,8 +5,8 @@ import {
} from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { DaffLoadingIconModule } from '@daffodil/design';
import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import {
DaffProductStateTestingModule,
MockDaffProductGridFacade,
diff --git a/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.module.ts b/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.module.ts
index 54b79dca2e..c3b10498d9 100644
--- a/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.module.ts
+++ b/apps/demo/src/app/product/pages/product-grid-view/product-grid-view.module.ts
@@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { DaffLoadingIconModule } from '@daffodil/design';
import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DaffProductStateModule } from '@daffodil/product/state';
import { ProductGridViewComponent } from './product-grid-view.component';
diff --git a/apps/demo/src/app/product/pages/product-view/product-view.component.spec.ts b/apps/demo/src/app/product/pages/product-view/product-view.component.spec.ts
index 9ba77fe927..5ddd26da1a 100644
--- a/apps/demo/src/app/product/pages/product-view/product-view.component.spec.ts
+++ b/apps/demo/src/app/product/pages/product-view/product-view.component.spec.ts
@@ -20,7 +20,7 @@ import {
DaffCartStateTestingModule,
MockDaffCartFacade,
} from '@daffodil/cart/state/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DaffProduct } from '@daffodil/product';
import { DaffProductLoad } from '@daffodil/product/state';
import {
diff --git a/apps/demo/src/app/product/pages/product-view/product-view.module.ts b/apps/demo/src/app/product/pages/product-view/product-view.module.ts
index babe01ec38..2f51c7be3d 100644
--- a/apps/demo/src/app/product/pages/product-view/product-view.module.ts
+++ b/apps/demo/src/app/product/pages/product-view/product-view.module.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { DaffCartStateModule } from '@daffodil/cart/state';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DaffProductStateModule } from '@daffodil/product/state';
import { ProductViewComponent } from './product-view.component';
diff --git a/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts b/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts
index 75741c5e1f..dec82737da 100644
--- a/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts
+++ b/apps/demo/src/app/thank-you/pages/thank-you-view.component.spec.ts
@@ -20,7 +20,6 @@ import {
DaffCartFactory,
DaffCartItemFactory,
} from '@daffodil/cart/testing';
-import { DaffLoadingIconModule } from '@daffodil/design';
import {
DaffAccordionModule,
DaffAccordionItemComponent,
@@ -29,6 +28,7 @@ import {
DaffContainerComponent,
DaffContainerModule,
} from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { ThankYouViewComponent } from './thank-you-view.component';
diff --git a/apps/demo/src/app/thank-you/thank-you.module.ts b/apps/demo/src/app/thank-you/thank-you.module.ts
index c2c055ceb9..686e340148 100644
--- a/apps/demo/src/app/thank-you/thank-you.module.ts
+++ b/apps/demo/src/app/thank-you/thank-you.module.ts
@@ -2,9 +2,9 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { StateCheckoutModule } from '@daffodil/checkout';
-import { DaffLoadingIconModule } from '@daffodil/design';
import { DaffAccordionModule } from '@daffodil/design/accordion';
import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { ThankYouComponentModule } from './components/thank-you/thank-you.module';
import { ThankYouViewComponent } from './pages/thank-you-view.component';
diff --git a/libs/design/button/src/button.module.ts b/libs/design/button/src/button.module.ts
index 6b09599b21..ff28620114 100644
--- a/libs/design/button/src/button.module.ts
+++ b/libs/design/button/src/button.module.ts
@@ -1,10 +1,8 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import {
- DaffLoadingIconModule,
- DaffPrefixSuffixModule,
-} from '@daffodil/design';
+import { DaffPrefixSuffixModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { DaffButtonComponent } from './button/button.component';
diff --git a/libs/design/button/src/button/button.component.spec.ts b/libs/design/button/src/button/button.component.spec.ts
index 310d9cb4ca..8a73158fd6 100644
--- a/libs/design/button/src/button/button.component.spec.ts
+++ b/libs/design/button/src/button/button.component.spec.ts
@@ -12,9 +12,11 @@ import { By } from '@angular/platform-browser';
import {
DaffPalette,
DaffStatus,
- DaffLoadingIconComponent,
- DaffLoadingIconModule,
} from '@daffodil/design';
+import {
+ DaffLoadingIconModule,
+ DaffLoadingIconComponent,
+} from '@daffodil/design/loading-icon';
import {
DaffButtonComponent,
diff --git a/libs/design/src/atoms/loading-icon/README.md b/libs/design/loading-icon/README.md
similarity index 100%
rename from libs/design/src/atoms/loading-icon/README.md
rename to libs/design/loading-icon/README.md
diff --git a/libs/design/loading-icon/examples/src/loading-icon-color/loading-icon-color.module.ts b/libs/design/loading-icon/examples/src/loading-icon-color/loading-icon-color.module.ts
index 0f5d7dddb6..f440dc4cb8 100644
--- a/libs/design/loading-icon/examples/src/loading-icon-color/loading-icon-color.module.ts
+++ b/libs/design/loading-icon/examples/src/loading-icon-color/loading-icon-color.module.ts
@@ -1,10 +1,8 @@
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
-import {
- DaffLoadingIconModule,
- DaffRadioModule,
-} from '@daffodil/design';
+import { DaffRadioModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { LoadingIconColorComponent } from './loading-icon-color.component';
diff --git a/libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.module.ts b/libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.module.ts
index ca858e3032..71d1c39ef8 100644
--- a/libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.module.ts
+++ b/libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.module.ts
@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
-import { DaffLoadingIconModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
import { LoadingIconDiameterComponent } from './loading-icon-diameter.component';
diff --git a/libs/design/loading-icon/ng-package.json b/libs/design/loading-icon/ng-package.json
new file mode 100644
index 0000000000..39b6ba33a2
--- /dev/null
+++ b/libs/design/loading-icon/ng-package.json
@@ -0,0 +1,9 @@
+{
+ "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+ "dest": "../../dist/design/loading-icon",
+ "deleteDestPath": false,
+ "lib": {
+ "entryFile": "src/index.ts",
+ "styleIncludePaths": ["../src/scss"]
+ }
+}
\ No newline at end of file
diff --git a/libs/design/loading-icon/src/index.ts b/libs/design/loading-icon/src/index.ts
new file mode 100644
index 0000000000..4aaf8f92ed
--- /dev/null
+++ b/libs/design/loading-icon/src/index.ts
@@ -0,0 +1 @@
+export * from './public_api';
diff --git a/libs/design/src/atoms/loading-icon/loading-icon-theme.scss b/libs/design/loading-icon/src/loading-icon-theme.scss
similarity index 94%
rename from libs/design/src/atoms/loading-icon/loading-icon-theme.scss
rename to libs/design/loading-icon/src/loading-icon-theme.scss
index 5368e85f5d..07d920342a 100644
--- a/libs/design/src/atoms/loading-icon/loading-icon-theme.scss
+++ b/libs/design/loading-icon/src/loading-icon-theme.scss
@@ -1,6 +1,6 @@
@use 'sass:map';
-@use '../../../scss/core';
-@use '../../../scss/theming';
+@use '../../scss/core';
+@use '../../scss/theming';
@mixin daff-loading-icon-theme($theme) {
$primary: map.get($theme, primary);
diff --git a/libs/design/src/atoms/loading-icon/loading-icon.module.ts b/libs/design/loading-icon/src/loading-icon.module.ts
similarity index 77%
rename from libs/design/src/atoms/loading-icon/loading-icon.module.ts
rename to libs/design/loading-icon/src/loading-icon.module.ts
index a5c411dbbd..b30aa1c21e 100644
--- a/libs/design/src/atoms/loading-icon/loading-icon.module.ts
+++ b/libs/design/loading-icon/src/loading-icon.module.ts
@@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { DaffLoadingIconComponent } from './loading-icon.component';
+import { DaffLoadingIconComponent } from './loading-icon/loading-icon.component';
@NgModule({
imports: [
diff --git a/libs/design/src/atoms/loading-icon/loading-icon.component.html b/libs/design/loading-icon/src/loading-icon/loading-icon.component.html
similarity index 63%
rename from libs/design/src/atoms/loading-icon/loading-icon.component.html
rename to libs/design/loading-icon/src/loading-icon/loading-icon.component.html
index 6ec6605f4e..a4e800452e 100644
--- a/libs/design/src/atoms/loading-icon/loading-icon.component.html
+++ b/libs/design/loading-icon/src/loading-icon/loading-icon.component.html
@@ -1,3 +1,3 @@
\ No newline at end of file
diff --git a/libs/design/src/atoms/loading-icon/loading-icon.component.scss b/libs/design/loading-icon/src/loading-icon/loading-icon.component.scss
similarity index 95%
rename from libs/design/src/atoms/loading-icon/loading-icon.component.scss
rename to libs/design/loading-icon/src/loading-icon/loading-icon.component.scss
index 23883c3c75..cac6f10460 100644
--- a/libs/design/src/atoms/loading-icon/loading-icon.component.scss
+++ b/libs/design/loading-icon/src/loading-icon/loading-icon.component.scss
@@ -60,7 +60,7 @@ circle {
transform: rotate(0deg);
}
- 50.5% { /* stylelint-disable-line scss/selector-nest-combinators */
+ 50.1% { /* stylelint-disable-line scss/selector-nest-combinators */
transform: rotate(0deg);
}
diff --git a/libs/design/src/atoms/loading-icon/loading-icon.component.spec.ts b/libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts
similarity index 97%
rename from libs/design/src/atoms/loading-icon/loading-icon.component.spec.ts
rename to libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts
index 01c17f46a2..1c712f3bc4 100644
--- a/libs/design/src/atoms/loading-icon/loading-icon.component.spec.ts
+++ b/libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts
@@ -9,8 +9,9 @@ import {
} from '@angular/core/testing';
import { By } from '@angular/platform-browser';
+import { DaffPalette } from '@daffodil/design';
+
import { DaffLoadingIconComponent } from './loading-icon.component';
-import { DaffPalette } from '../../core/colorable/public_api';
@Component({ template: '' })
class WrapperComponent {
diff --git a/libs/design/src/atoms/loading-icon/loading-icon.component.ts b/libs/design/loading-icon/src/loading-icon/loading-icon.component.ts
similarity index 97%
rename from libs/design/src/atoms/loading-icon/loading-icon.component.ts
rename to libs/design/loading-icon/src/loading-icon/loading-icon.component.ts
index 17b1bf264b..e68f547d9c 100644
--- a/libs/design/src/atoms/loading-icon/loading-icon.component.ts
+++ b/libs/design/loading-icon/src/loading-icon/loading-icon.component.ts
@@ -10,7 +10,7 @@ import {
import {
daffColorMixin,
DaffColorable,
-} from '../../core/colorable/public_api';
+} from '@daffodil/design';
/**
* An _elementRef and an instance of renderer2 are needed for the Colorable mixin
diff --git a/libs/design/loading-icon/src/public_api.ts b/libs/design/loading-icon/src/public_api.ts
new file mode 100644
index 0000000000..ba34af57da
--- /dev/null
+++ b/libs/design/loading-icon/src/public_api.ts
@@ -0,0 +1,2 @@
+export { DaffLoadingIconModule } from './loading-icon.module';
+export { DaffLoadingIconComponent } from './loading-icon/loading-icon.component';
diff --git a/libs/design/scss/theme.scss b/libs/design/scss/theme.scss
index fb1aa2e933..ac7cb801ed 100644
--- a/libs/design/scss/theme.scss
+++ b/libs/design/scss/theme.scss
@@ -24,7 +24,7 @@
@use '../src/atoms/form/form-field/form-field/form-field-theme' as form-field;
@use '../src/atoms/form/input/input-theme' as input;
@use '../src/atoms/form/native-select/native-select-theme' as native-select;
-@use '../src/atoms/loading-icon/loading-icon-theme' as loading-icon;
+@use '../loading-icon/src/loading-icon-theme' as loading-icon;
@use '../src/atoms/progress-indicator/progress-indicator-theme' as progress-indicator;
@use '../accordion/src/accordion-theme' as accordion;
@use '../src/molecules/callout/callout-theme' as callout;
diff --git a/libs/design/src/atoms/loading-icon/public_api.ts b/libs/design/src/atoms/loading-icon/public_api.ts
deleted file mode 100644
index 312d693774..0000000000
--- a/libs/design/src/atoms/loading-icon/public_api.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { DaffLoadingIconModule } from './loading-icon.module';
-export * from './loading-icon.component';
diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts
index b6b93927fb..ad9b75e6a0 100644
--- a/libs/design/src/public_api.ts
+++ b/libs/design/src/public_api.ts
@@ -10,7 +10,6 @@ export * from './atoms/form/input/public_api';
export * from './atoms/form/native-select/public_api';
export * from './atoms/form/checkbox/public_api';
export * from './atoms/form/quantity-field/public_api';
-export * from './atoms/loading-icon/public_api';
export * from './atoms/progress-indicator/public_api';
export * from './atoms/form/radio/public_api';
export * from './atoms/form/form-label/public_api';