diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index aa2d30a3cef..fd5c3c81a53 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -20,10 +20,13 @@
     width: 100%;
   }
 
-  &.svg-250 {
-    img,
-    svg {
-      width: 250px;
+  $image-widths: 250 306 394;
+  @each $width in $image-widths {
+    &.svg-#{$width} {
+      img,
+      svg {
+        width: #{$width + 'px'};
+      }
     }
   }
 }
diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml
index f7d06d8ceb9..85d802a9d9c 100644
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -90,11 +90,12 @@
           .build-loader-animation.js-build-refresh
     - else
       - illustration = @build.playable? ? 'illustrations/manual_action.svg' : 'illustrations/job_not_triggered.svg'
+      - illustration_size = @build.playable? ? 'svg-394' : 'sgv-306'
       - title = @build.playable? ? _('This job requires a manual action') : _('This job has not been triggered yet')
       - content = @build.playable? ? _('This job depends on a user to trigger its process. Often they are used to deploy code to production environments.') : _('This job depends on upstream jobs that need to succeed in order for this job to be triggered.')
       .row.empty-state
         .col-xs-12
-          .svg-content
+          .svg-content{ class: illustration_size }
             = image_tag illustration
         .col-xs-12
           .text-content