diff --git a/app/controllers/projects/badges_controller.rb b/app/controllers/projects/badges_controller.rb
index c24bf211760..09a384e89ab 100644
--- a/app/controllers/projects/badges_controller.rb
+++ b/app/controllers/projects/badges_controller.rb
@@ -21,11 +21,22 @@ class Projects::BadgesController < Projects::ApplicationController
 
   private
 
+  def badge_layout
+    case params[:style]
+    when 'flat'
+      'badge'
+    when 'flat-square'
+      'badge_flat-square'
+    else
+      'badge'
+    end
+  end
+
   def render_badge(badge)
     respond_to do |format|
       format.html { render_404 }
       format.svg do
-        render 'badge', locals: { badge: badge.template }
+        render badge_layout, locals: { badge: badge.template }
       end
     end
   end
diff --git a/app/views/projects/badges/badge_flat-square.svg.erb b/app/views/projects/badges/badge_flat-square.svg.erb
new file mode 100644
index 00000000000..5b90da15ef5
--- /dev/null
+++ b/app/views/projects/badges/badge_flat-square.svg.erb
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="<%= badge.width %>" height="20">
+  <g shape-rendering="crispEdges">
+    <path fill="<%= badge.key_color %>" d="M0 0 h<%= badge.key_width %> v20 H0 z"/>
+    <path fill="<%= badge.value_color %>" d="M<%= badge.key_width %> 0 h<%= badge.value_width %> v20 H<%= badge.key_width %> z"/>
+  </g>
+
+  <g fill="#fff" text-anchor="middle">
+    <g font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
+      <text x="<%= badge.key_text_anchor %>" y="14">
+        <%= badge.key_text %>
+      </text>
+      <text x="<%= badge.value_text_anchor %>" y="14">
+        <%= badge.value_text %>
+      </text>
+    </g>
+  </g>
+</svg>
diff --git a/changelogs/unreleased/30120-add-flat-square-badge-style.yml b/changelogs/unreleased/30120-add-flat-square-badge-style.yml
new file mode 100644
index 00000000000..a542a58d3fc
--- /dev/null
+++ b/changelogs/unreleased/30120-add-flat-square-badge-style.yml
@@ -0,0 +1,5 @@
+---
+title: Add flat-square badge style
+merge_request: 24172
+author: Fabian Schneider @fabsrc
+type: added
diff --git a/doc/user/project/pipelines/settings.md b/doc/user/project/pipelines/settings.md
index 88d745b0ce4..5aa26af5265 100644
--- a/doc/user/project/pipelines/settings.md
+++ b/doc/user/project/pipelines/settings.md
@@ -157,7 +157,27 @@ into your `README.md`:
 ![coverage](https://gitlab.com/gitlab-org/gitlab-ce/badges/master/coverage.svg?job=coverage)
 ```
 
-### Environment Variables
+### Badge styles
+
+Pipeline badges can be rendered in different styles by adding the `style=style_name` parameter to the URL. Currently two styles are available:
+
+#### Flat (default)
+
+```
+https://example.gitlab.com/<namespace>/<project>/badges/<branch>/coverage.svg?style=flat
+```
+
+![Badge flat style](https://gitlab.com/gitlab-org/gitlab-ce/badges/master/coverage.svg?job=coverage&style=flat)
+
+#### Flat square
+
+```
+https://example.gitlab.com/<namespace>/<project>/badges/<branch>/coverage.svg?style=flat-square
+```
+
+![Badge flat square style](https://gitlab.com/gitlab-org/gitlab-ce/badges/master/coverage.svg?job=coverage&style=flat-square)
+
+## Environment Variables
 
 [Environment variables](../../../ci/variables/README.html#variables) can be set in an environment to be available to a runner.
 
diff --git a/spec/controllers/projects/badges_controller_spec.rb b/spec/controllers/projects/badges_controller_spec.rb
index 2556bc3ae50..8eac3d9a459 100644
--- a/spec/controllers/projects/badges_controller_spec.rb
+++ b/spec/controllers/projects/badges_controller_spec.rb
@@ -22,7 +22,44 @@ describe Projects::BadgesController do
     expect(response).to have_gitlab_http_status(:ok)
   end
 
-  def get_badge(badge)
-    get badge, params: { namespace_id: project.namespace.to_param, project_id: project, ref: pipeline.ref }, format: :svg
+  it 'renders the `flat` badge layout by default' do
+    get_badge(:coverage)
+
+    expect(response).to render_template('projects/badges/badge')
+  end
+
+  context 'when style param is set to `flat`' do
+    it 'renders the `flat` badge layout' do
+      get_badge(:coverage, 'flat')
+
+      expect(response).to render_template('projects/badges/badge')
+    end
+  end
+
+  context 'when style param is set to an invalid type' do
+    it 'renders the `flat` (default) badge layout' do
+      get_badge(:coverage, 'xxx')
+
+      expect(response).to render_template('projects/badges/badge')
+    end
+  end
+
+  context 'when style param is set to `flat-square`' do
+    it 'renders the `flat-square` badge layout' do
+      get_badge(:coverage, 'flat-square')
+
+      expect(response).to render_template('projects/badges/badge_flat-square')
+    end
+  end
+
+  def get_badge(badge, style = nil)
+    params = {
+      namespace_id: project.namespace.to_param,
+      project_id: project,
+      ref: pipeline.ref,
+      style: style
+    }
+
+    get badge, params: params, format: :svg
   end
 end