1 files changed, 10 insertions, 4 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue
index 64d4414eb94..439dc0eb253 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/empty_state/ci_templates.vue
@@ -32,9 +32,10 @@ export default {
       .map(({ name, logo, title }) => {
         return {
           name: title || name,
+          description: sprintf(this.$options.i18n.description, { name: title || name }),
+          isPng: logo.endsWith('png'),
           logo,
           link: mergeUrlParams({ template: name }, this.pipelineEditorPath),
-          description: sprintf(this.$options.i18n.description, { name: title || name }),
         };
       });
 
@@ -48,6 +49,9 @@ export default {
         label: template,
       });
     },
+    logoStyle(template) {
+      return template.isPng ? { objectFit: 'contain' } : '';
+    },
   },
   i18n: {
     description: s__(
@@ -66,11 +70,13 @@ export default {
       >
         <div class="gl-display-flex gl-flex-direction-row gl-align-items-center">
           <gl-avatar
-            :src="template.logo"
-            :size="48"
+            :alt="template.name"
             class="gl-mr-5 gl-bg-white dark-mode-override"
+            :class="{ 'gl-p-2': template.isPng }"
+            :style="logoStyle(template)"
             :shape="$options.AVATAR_SHAPE_OPTION_RECT"
-            :alt="template.name"
+            :size="48"
+            :src="template.logo"
             data-testid="template-logo"
           />
           <div class="gl-flex-direction-row">