diff --git a/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/SoftwareIcon.tsx b/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/SoftwareIcon.tsx
index 960c2aeeb7..324a5eab29 100644
--- a/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/SoftwareIcon.tsx
+++ b/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/SoftwareIcon.tsx
@@ -58,7 +58,7 @@ const SoftwareIcon = ({
   if (isApiUrl) {
     if (isLoading) {
       // Return empty div while loading custom icon so component size doesn't jump
-      return <div className={classNames} />;
+      return <div className={classNames.concat(" loading-placeholder")} />;
     }
     if (currentCustomIconBlob) {
       // Uses custom icon blob from API if fetch succeeded
diff --git a/frontend/styles/global/_animations.scss b/frontend/styles/global/_animations.scss
index f440c434ba..021dcdabd4 100644
--- a/frontend/styles/global/_animations.scss
+++ b/frontend/styles/global/_animations.scss
@@ -37,4 +37,25 @@
         opacity: 1;
         transform: translateX(0);
     }
+}
+
+.loading-placeholder {
+    $from: #f5f5f5;
+    $to: scale-color($from, $lightness: -10%);
+
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(-90deg, #efefef 0%, #fcfcfc 50%, #efefef 100%);
+    background-size: 400% 400%;
+    animation: pulse 1s ease-in-out infinite;
+
+    @keyframes pulse {
+        0% {
+            background-position: 0% 0%
+        }
+
+        100% {
+            background-position: -135% 0%
+        }
+    }
 }
\ No newline at end of file