Fix UI self service icons on the my device page (#21593)

relates to #21496

Fix a rendering bug on the self service section of the my device page
where the icon was rendering too large

**Before**


![image](https://github.com/user-attachments/assets/450c242e-9096-4a67-9003-6ef1675c9618)

**After**


![image](https://github.com/user-attachments/assets/9b6ccda1-17d8-4ad8-acc0-2a9438a306d9)

- [x] Manual QA for all new/changed functionality

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;