diff --git a/CHANGELOG b/CHANGELOG
index c8748151b1c39435e169e20937f2df6addf87f0f..a18311fabdc271d3b4a928ed3cae8eac3bf604b7 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -57,6 +57,7 @@ v 8.12.0 (unreleased)
   - Load branches asynchronously in Cherry Pick and Revert dialogs.
   - Add merge request versions !5467
   - Change using size to use count and caching it for number of group members. !5935
+  - Replace play icon font with svg (ClemMakesApps)
   - Added 'only_allow_merge_if_build_succeeds' project setting in the API. !5930 (Duck)
   - Reduce number of database queries on builds tab
   - Capitalize mentioned issue timeline notes (ClemMakesApps)
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index edb2ff01f88435932c36178773106709d1a3e417..b0ba112476bea1f3dd2517ef3478e71a3c61d0df 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -183,6 +183,13 @@
     &.dropdown-menu-user-link {
       line-height: 16px;
     }
+
+    .icon-play {
+      fill: $table-text-gray;
+      margin-right: 6px;
+      height: 12px;
+      width: 11px;
+    }
   }
 
   .dropdown-header {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 55f9d4a001123f9549b31aace1063f1e85e2bdf3..d01c60ee6abb5bb15d8596f1abd7f757ea9558d6 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -4,8 +4,9 @@
     margin: 0;
   }
 
-  .fa-play {
-    font-size: 14px;
+  .icon-play {
+    height: 13px;
+    width: 12px;
   }
 
   .dropdown-new {
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index b56c072766091dff698f592864024c2d58605bc7..2911576b66f0adcb5e5f74bd2f3c9504b11df363 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -213,6 +213,13 @@
           border-color: $border-white-normal;
         }
       }
+
+      .btn {
+        .icon-play {
+          height: 13px;
+          width: 12px;
+        }
+      }
     }
   }
 
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index 1fdf32466f234ac7c99e032935fa185d0be9b59a..73de8abe55b906275ad669f60ccf7925aa937b78 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -89,4 +89,4 @@
               = icon('repeat')
           - elsif build.playable?
             = link_to play_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Play', class: 'btn btn-build' do
-              = icon('play')
+              = custom_icon('icon_play')
diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml
index b119f6edf14909ca5711c58e230453fc91a2fadb..bb9493f51583cf8169e36212249345022fb3dbfe 100644
--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ b/app/views/projects/ci/pipelines/_pipeline.html.haml
@@ -66,13 +66,13 @@
           - if actions.any?
             .btn-group
               %a.dropdown-toggle.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
-                = icon("play")
+                = custom_icon('icon_play')
                 %b.caret
               %ul.dropdown-menu.dropdown-menu-align-right
                 - actions.each do |build|
                   %li
                     = link_to play_namespace_project_build_path(pipeline.project.namespace, pipeline.project, build), method: :post, rel: 'nofollow' do
-                      = icon("play")
+                      = custom_icon('icon_play')
                       %span= build.name.humanize
           - if artifacts.present?
             .btn-group
diff --git a/app/views/projects/deployments/_actions.haml b/app/views/projects/deployments/_actions.haml
index f7bf3b834ef469da187f4297d8c0a0ae2b54ca14..16d134eb6b6694108cb38b26c76aba03f32349a0 100644
--- a/app/views/projects/deployments/_actions.haml
+++ b/app/views/projects/deployments/_actions.haml
@@ -5,13 +5,13 @@
       .inline
         .dropdown
           %a.dropdown-new.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
-            = icon("play")
+            = custom_icon('icon_play')
             %b.caret
           %ul.dropdown-menu.dropdown-menu-align-right
             - actions.each do |action|
               %li
                 = link_to [:play, @project.namespace.becomes(Namespace), @project, action], method: :post, rel: 'nofollow' do
-                  = icon("play")
+                  = custom_icon('icon_play')
                   %span= action.name.humanize
 
     - if local_assigns.fetch(:allow_rollback, false)
diff --git a/app/views/shared/icons/_icon_play.svg b/app/views/shared/icons/_icon_play.svg
index 80a6d41dbf651c6295f1e62e5e44220e7e6d457f..e965afa9a56100d1f044c8c3b429215f3b0c111d 100644
--- a/app/views/shared/icons/_icon_play.svg
+++ b/app/views/shared/icons/_icon_play.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 11"><path fill-rule="evenodd" d="m9.283 6.47l-7.564 4.254c-.949.534-1.719.266-1.719-.576v-9.292c0-.852.756-1.117 1.719-.576l7.564 4.254c.949.534.963 1.392 0 1.934"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 11" class="icon-play">
+  <path fill-rule="evenodd" d="m9.283 6.47l-7.564 4.254c-.949.534-1.719.266-1.719-.576v-9.292c0-.852.756-1.117 1.719-.576l7.564 4.254c.949.534.963 1.392 0 1.934"/>
+  </svg>
\ No newline at end of file