diff --git a/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss b/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss
index a94db1daa5..bb62bd5cb8 100644
--- a/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss
+++ b/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss
@@ -22,6 +22,10 @@
     display: block;
   }
 
+  // These following classs are when a software icon is passed a url prop. In
+  // this case we need to add custom width,height, and padding to show these
+  // icons correctly.
+
   // we use this selector to give higher specifity than the selector
   // ".core-wrapper a img" which is in /styles/global/_styles.scss
   // TODO: we should change ".core-wrapper a img" selector in that file
@@ -34,6 +38,22 @@
     margin-left: 0;
   }
 
+  >img.software-icon__software-img-medium {
+    width: 38px;
+    height: 38px;
+    border-radius: $border-radius-xlarge;
+    padding: 1px;
+    margin-left: 0;
+  }
+
+  >img.software-icon__software-img-large {
+    width: 60px;
+    height: 60px;
+    border-radius: $border-radius-xxlarge;
+    padding: 1px;
+    margin-left: 0;
+  }
+
   >img.software-icon__software-img-xlarge {
     width: 88px;
     height: 88px;