diff --git a/addon/components/utils/smart-blob.ts b/addon/components/utils/smart-blob.ts
index bf9fcc40..37bd4f51 100644
--- a/addon/components/utils/smart-blob.ts
+++ b/addon/components/utils/smart-blob.ts
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 
-type Size = 'md' | 'xl';
+type Size = 'sm' | 'md' | 'xl';
 interface SmartBlobArgs {
   loading: boolean;
   size: Size;
diff --git a/app/styles/components/smart-blob.less b/app/styles/components/smart-blob.less
index 64bfd792..fc22ae25 100644
--- a/app/styles/components/smart-blob.less
+++ b/app/styles/components/smart-blob.less
@@ -5,6 +5,16 @@
   border-radius: 100%;
   transition: all 1s ease-in-out;
 
+  &--sm {
+    height: 22px;
+    width: 22px;
+
+    .smart-blob {
+      width: 22px;
+      height: 22px;
+    }
+  }
+
   &--xl {
     height: 64px;
     width: 64px;
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 7d3f529d..e1c9ca40 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -22,6 +22,7 @@
   />
   <div class="fx-row fx-gap-px-12 fx-xalign-center">
     <OSS::ToggleSwitch @value={{this.blobLoading}} @onChange={{this.onBlobSwitch}} />
+    <Utils::SmartBlob @loading={{this.blobLoading}} @size="sm" />
     <Utils::SmartBlob @loading={{this.blobLoading}} />
     <Utils::SmartBlob @loading={{this.blobLoading}} @size="xl" />
   </div>
diff --git a/tests/integration/components/utils/smart-blob-test.ts b/tests/integration/components/utils/smart-blob-test.ts
index 36b795bc..da0a1eb1 100644
--- a/tests/integration/components/utils/smart-blob-test.ts
+++ b/tests/integration/components/utils/smart-blob-test.ts
@@ -39,11 +39,13 @@ module('Integration | Component | utils/smart-blob', function (hooks) {
   });
 
   module('@size', function () {
-    test('it applies the correct size class', async function (assert) {
-      this.set('size', 'xl');
-      await render(hbs`<Utils::SmartBlob @size={{this.size}} />`);
+    ['sm', 'xl', 'md'].forEach((size) => {
+      test(`it applies the correct size class for @size='${size}'`, async function (assert) {
+        this.set('size', size);
+        await render(hbs`<Utils::SmartBlob @size={{this.size}} />`);
 
-      assert.dom('.smart-blob-container').hasClass('smart-blob-container--xl');
+        assert.dom('.smart-blob-container').hasClass(`smart-blob-container--${size}`);
+      });
     });
 
     test('it defaults to md size', async function (assert) {