From a623ddb0dcdc42b0bd4f9d20c79e82387d9b5547 Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Thu, 16 Nov 2017 13:34:15 -0600
Subject: [PATCH 1/4] replaced download icon for the sprite based one

---
 .../pipelines/components/pipelines_artifacts.vue      | 11 +++++++----
 .../components/mr_widget_header.js                    |  7 +++++--
 app/helpers/blob_helper.rb                            |  2 +-
 app/views/projects/artifacts/browse.html.haml         |  2 +-
 app/views/projects/blob/viewers/_download.html.haml   |  2 +-
 app/views/projects/buttons/_download.html.haml        |  2 +-
 app/views/projects/ci/builds/_build.html.haml         |  2 +-
 7 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
index 751a20991af..fada8fd90df 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
@@ -1,5 +1,6 @@
 <script>
   import tooltip from '../../vue_shared/directives/tooltip';
+  import Icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -11,6 +12,9 @@
     directives: {
       tooltip,
     },
+    components: {
+      Icon,
+    },
   };
 </script>
 <template>
@@ -24,10 +28,9 @@
       data-placement="top"
       data-toggle="dropdown"
       aria-label="Artifacts">
-      <i
-        class="fa fa-download"
-        aria-hidden="true">
-      </i>
+      <icon 
+        name="download">
+      </icon>
       <i
         class="fa fa-caret-down"
         aria-hidden="true">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index 13e4cb5717e..1f8bd2646ea 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -1,5 +1,6 @@
 import tooltip from '../../vue_shared/directives/tooltip';
 import { pluralize } from '../../lib/utils/text_utility';
+import { spriteIcon } from '../../lib/utils/common_utils';
 
 export default {
   name: 'MRWidgetHeader',
@@ -25,6 +26,9 @@ export default {
         gfm: `\`${this.mr.sourceBranch}\``,
       });
     },
+    downloadIcon() {
+      return spriteIcon('download');
+    },
   },
   methods: {
     isBranchTitleLong(branchTitle) {
@@ -82,8 +86,7 @@ export default {
             aria-label="Download as"
             role="button">
             <i
-              class="fa fa-download"
-              aria-hidden="true">
+              v-html="downloadIcon">
             </i>
             <i
               class="fa fa-caret-down"
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 556ed233ccf..613a0db3556 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -232,7 +232,7 @@ module BlobHelper
     return if blob.empty?
 
     if blob.raw_binary? || blob.stored_externally?
-      icon = icon('download')
+      icon = sprite_icon('download')
       title = 'Download'
     else
       icon = icon('file-code-o')
diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml
index fe02cbcbf95..7ff7466e561 100644
--- a/app/views/projects/artifacts/browse.html.haml
+++ b/app/views/projects/artifacts/browse.html.haml
@@ -18,7 +18,7 @@
     .tree-controls
       = link_to download_project_job_artifacts_path(@project, @build),
         rel: 'nofollow', download: '', class: 'btn btn-default download' do
-        = icon('download')
+        = sprite_icon('download')
         Download artifacts archive
 
   .tree-content-holder
diff --git a/app/views/projects/blob/viewers/_download.html.haml b/app/views/projects/blob/viewers/_download.html.haml
index 253566c43be..f9b1da05a00 100644
--- a/app/views/projects/blob/viewers/_download.html.haml
+++ b/app/views/projects/blob/viewers/_download.html.haml
@@ -2,6 +2,6 @@
   .center.render-error.vertical-center
     = link_to blob_raw_path do
       %h1.light
-        = icon('download')
+        = sprite_icon('download')
       %h4
         Download (#{number_to_human_size(viewer.blob.raw_size)})
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index fa6f6d0b588..fa9a9bfc8f7 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -3,7 +3,7 @@
 - if !project.empty_repo? && can?(current_user, :download_code, project)
   .project-action-button.dropdown.inline>
     %button.btn.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download') }
-      = icon('download')
+      = sprite_icon('download')
       = icon("caret-down")
       %span.sr-only=  _('Select Archive Format')
     %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' }
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index 86510b8ab93..ee7aae0c44b 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -96,7 +96,7 @@
     .pull-right
       - if can?(current_user, :read_build, job) && job.artifacts?
         = link_to download_project_job_artifacts_path(job.project, job), rel: 'nofollow', download: '', title: 'Download artifacts', class: 'btn btn-build' do
-          = icon('download')
+          = sprite_icon('download')
       - if can?(current_user, :update_build, job)
         - if job.active?
           = link_to cancel_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: 'Cancel', class: 'btn btn-build' do

From 1e8de50375f39b22750015340a4e01521c82df05 Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Fri, 1 Dec 2017 12:57:34 -0600
Subject: [PATCH 2/4] Replaced some fork icons instances and fixed the Icon
 component on the MR Widget

---
 .../components/mr_widget_header.js                 | 14 +++++++-------
 app/assets/stylesheets/pages/merge_requests.scss   |  6 ++++++
 app/assets/stylesheets/pages/pipelines.scss        |  6 ++++++
 app/views/projects/blob/_editor.html.haml          |  2 +-
 app/views/projects/branches/_branch.html.haml      |  3 ++-
 app/views/projects/ci/builds/_build.html.haml      |  2 +-
 .../merge_requests/_merge_request.html.haml        |  2 +-
 app/views/shared/projects/_project.html.haml       |  2 +-
 8 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index 1f8bd2646ea..38c3ec874c6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -1,6 +1,6 @@
 import tooltip from '../../vue_shared/directives/tooltip';
 import { pluralize } from '../../lib/utils/text_utility';
-import { spriteIcon } from '../../lib/utils/common_utils';
+import Icon from '../../vue_shared/components/icon.vue';
 
 export default {
   name: 'MRWidgetHeader',
@@ -10,6 +10,9 @@ export default {
   directives: {
     tooltip,
   },
+  components: {
+    Icon,
+  },
   computed: {
     shouldShowCommitsBehindText() {
       return this.mr.divergedCommitsCount > 0;
@@ -26,9 +29,6 @@ export default {
         gfm: `\`${this.mr.sourceBranch}\``,
       });
     },
-    downloadIcon() {
-      return spriteIcon('download');
-    },
   },
   methods: {
     isBranchTitleLong(branchTitle) {
@@ -85,9 +85,9 @@ export default {
             data-toggle="dropdown"
             aria-label="Download as"
             role="button">
-            <i
-              v-html="downloadIcon">
-            </i>
+            <icon
+              name="download">
+            </icon>
             <i
               class="fa fa-caret-down"
               aria-hidden="true">
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index e75a35d78ad..373e01931ad 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -723,3 +723,9 @@
     font-size: 16px;
   }
 }
+
+.fork-sprite {
+  width: 12px;
+  height: 12px;
+  margin-right: -5px;
+}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 9805fc4f882..05c1033c5f7 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -143,6 +143,12 @@
       fill: $gl-text-color-secondary;
     }
 
+    .sprite {
+      width: 12px;
+      height: 12px;
+      fill: $gl-text-color;
+    }
+
     .fa {
       font-size: 12px;
       color: $gl-text-color;
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 7777f55ddd7..75cc558c9a4 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -3,7 +3,7 @@
 .file-holder-bottom-radius.file-holder.file.append-bottom-default
   .js-file-title.file-title.clearfix{ data: { current_action: action } }
     .editor-ref
-      = icon('code-fork')
+      = sprite_icon('fork')
       = ref
     %span.editor-file-name
       - if current_action?(:edit) || current_action?(:update)
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 573050e597d..8a8011c27b4 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -8,7 +8,8 @@
 %li{ class: "js-branch-#{branch.name}" }
   %div
     = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated ref-name' do
-      = icon('code-fork', class: 'append-right-5') + "#{branch.name}"
+      = sprite_icon('fork', size: 8)
+      = branch.name
     &nbsp;
     - if branch.name == @repository.root_ref
       %span.label.label-primary default
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index ee7aae0c44b..0cd2d45c74b 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -22,7 +22,7 @@
     - if ref
       - if job.ref
         .icon-container
-          = job.tag? ? icon('tag') : icon('code-fork')
+          = job.tag? ? icon('tag') : sprite_icon('fork', css_class: 'sprite')
         = link_to job.ref, project_ref_path(job.project, job.ref), class: "ref-name"
       - else
         .light none
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 2b5e8711b0a..591da3b6638 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -30,7 +30,7 @@
           %span.project-ref-path
             &nbsp;
             = link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do
-              = icon('code-fork')
+              = sprite_icon('fork', css_class: 'fork-sprite')
               = merge_request.target_branch
         - if merge_request.labels.any?
           &nbsp;
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 003f5fa52eb..63aa4e29ec9 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -52,7 +52,7 @@
             = render_project_pipeline_status(project.pipeline_status)
         - if forks
           %span.prepend-left-10
-            = icon('code-fork')
+            = sprite_icon('fork')
             = number_with_delimiter(project.forks_count)
         - if stars
           %span.prepend-left-10

From 39018a7445142a6c93699e0ba86889bd931eb198 Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Fri, 1 Dec 2017 13:30:49 -0600
Subject: [PATCH 3/4] code-fork replacements

---
 .../javascripts/vue_shared/components/commit.vue      | 11 ++++++-----
 app/views/projects/blob/_editor.html.haml             |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index 52814de8b2d..59ca9a0a6d4 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -2,13 +2,14 @@
   import commitIconSvg from 'icons/_icon_commit.svg';
   import userAvatarLink from './user_avatar/user_avatar_link.vue';
   import tooltip from '../directives/tooltip';
+  import Icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
       /**
        * Indicates the existance of a tag.
        * Used to render the correct icon, if true will render `fa-tag` icon,
-       * if false will render `fa-code-fork` icon.
+       * if false will render a svg sprite fork icon
        */
       tag: {
         type: Boolean,
@@ -107,6 +108,7 @@
     },
     components: {
       userAvatarLink,
+      Icon,
     },
     created() {
       this.commitIconSvg = commitIconSvg;
@@ -123,11 +125,10 @@
           class="fa fa-tag"
           aria-hidden="true">
         </i>
-        <i
+        <icon
           v-if="!tag"
-          class="fa fa-code-fork"
-          aria-hidden="true">
-        </i>
+          name="fork">
+        </icon>
       </div>
 
       <a
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 75cc558c9a4..c9fa90acd11 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -3,7 +3,7 @@
 .file-holder-bottom-radius.file-holder.file.append-bottom-default
   .js-file-title.file-title.clearfix{ data: { current_action: action } }
     .editor-ref
-      = sprite_icon('fork')
+      = sprite_icon('fork', size: 12)
       = ref
     %span.editor-file-name
       - if current_action?(:edit) || current_action?(:update)

From 5bbc322bd383adccf997b945abe7f07759b70013 Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Wed, 6 Dec 2017 12:38:35 -0600
Subject: [PATCH 4/4] Replaced the remaining code-fork icons

---
 .../cycle_analytics/components/stage_review_component.vue  | 7 ++++++-
 .../cycle_analytics/components/stage_staging_component.vue | 7 ++++++-
 .../cycle_analytics/components/stage_test_component.vue    | 7 ++++++-
 .../pipelines/components/pipelines_artifacts.vue           | 4 ++--
 .../components/mr_widget_header.js                         | 4 ++--
 app/assets/stylesheets/framework/wells.scss                | 6 +++++-
 app/assets/stylesheets/pages/merge_requests.scss           | 2 --
 app/assets/stylesheets/pages/pipeline_schedules.scss       | 4 ++++
 app/helpers/commits_helper.rb                              | 2 +-
 app/views/projects/branches/_branch.html.haml              | 2 +-
 .../projects/commit/_limit_exceeded_message.html.haml      | 2 +-
 app/views/projects/deployments/_commit.html.haml           | 2 +-
 app/views/projects/forks/error.html.haml                   | 3 +--
 .../_generic_commit_status.html.haml                       | 2 +-
 app/views/projects/merge_requests/_merge_request.html.haml | 2 +-
 .../pipeline_schedules/_pipeline_schedule.html.haml        | 2 +-
 spec/javascripts/vue_shared/components/commit_spec.js      | 4 ++--
 17 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
index f54ea7df522..cbce9205e75 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
@@ -2,6 +2,7 @@
   import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
   import limitWarning from './limit_warning_component.vue';
   import totalTime from './total_time_component.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -12,6 +13,7 @@
       userAvatarImage,
       totalTime,
       limitWarning,
+      icon,
     },
   };
 </script>
@@ -52,7 +54,10 @@
           </template>
           <template v-else>
             <span class="merge-request-branch" v-if="mergeRequest.branch">
-              <i class= "fa fa-code-fork"></i>
+              <icon
+                name="fork"
+                :size="16">
+              </icon>
               <a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a>
             </span>
           </template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
index 5d95ddcd90e..508a411e599 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
@@ -3,6 +3,7 @@
   import iconBranch from '../svg/icon_branch.svg';
   import limitWarning from './limit_warning_component.vue';
   import totalTime from './total_time_component.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -13,6 +14,7 @@
       userAvatarImage,
       totalTime,
       limitWarning,
+      icon,
     },
     computed: {
       iconBranch() {
@@ -37,7 +39,10 @@
           <user-avatar-image :img-src="build.author.avatarUrl"/>
           <h5 class="item-title">
             <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
-            <i class="fa fa-code-fork"></i>
+            <icon
+              name="fork"
+              :size="16">
+            </icon>
             <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
             <span class="icon-branch" v-html="iconBranch"></span>
             <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
index 04d5440b77b..88fa6b073ca 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
@@ -3,6 +3,7 @@
   import iconBranch from '../svg/icon_branch.svg';
   import limitWarning from './limit_warning_component.vue';
   import totalTime from './total_time_component.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -12,6 +13,7 @@
     components: {
       totalTime,
       limitWarning,
+      icon,
     },
     computed: {
       iconBuildStatus() {
@@ -40,7 +42,10 @@
             <a :href="build.url" class="item-build-name">{{ build.name }}</a>
             &middot;
             <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
-            <i class="fa fa-code-fork"></i>
+            <icon
+              name="fork"
+              :size="16">
+            </icon>
             <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
             <span class="icon-branch" v-html="iconBranch"></span>
             <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
index fada8fd90df..831aa92ac4f 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
@@ -1,6 +1,6 @@
 <script>
   import tooltip from '../../vue_shared/directives/tooltip';
-  import Icon from '../../vue_shared/components/icon.vue';
+  import icon from '../../vue_shared/components/icon.vue';
 
   export default {
     props: {
@@ -13,7 +13,7 @@
       tooltip,
     },
     components: {
-      Icon,
+      icon,
     },
   };
 </script>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
index 38c3ec874c6..85bfd03a3cf 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js
@@ -1,6 +1,6 @@
 import tooltip from '../../vue_shared/directives/tooltip';
 import { pluralize } from '../../lib/utils/text_utility';
-import Icon from '../../vue_shared/components/icon.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
 export default {
   name: 'MRWidgetHeader',
@@ -11,7 +11,7 @@ export default {
     tooltip,
   },
   components: {
-    Icon,
+    icon,
   },
   computed: {
     shouldShowCommitsBehindText() {
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index 735fc4babd7..2f3a80daa90 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -16,6 +16,10 @@
       .commit-sha,
       .commit-info {
         margin-left: 4px;
+
+        .fork-svg {
+          margin-right: 4px;
+        }
       }
 
       .ref-name {
@@ -79,7 +83,7 @@
     }
 
     .limit-icon {
-      margin: 0 8px;
+      margin: 0 4px;
     }
 
     .limit-message {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 373e01931ad..f887a11004f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -725,7 +725,5 @@
 }
 
 .fork-sprite {
-  width: 12px;
-  height: 12px;
   margin-right: -5px;
 }
diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss
index 7e2297c283f..b698a4f9afa 100644
--- a/app/assets/stylesheets/pages/pipeline_schedules.scss
+++ b/app/assets/stylesheets/pages/pipeline_schedules.scss
@@ -39,6 +39,10 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    svg {
+      vertical-align: middle;
+    }
   }
 
   .next-run-cell {
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index 2d304f7eb91..0333c29e2fd 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -63,7 +63,7 @@ module CommitsHelper
   # Returns a link formatted as a commit branch link
   def commit_branch_link(url, text)
     link_to(url, class: 'label label-gray ref-name branch-link') do
-      icon('code-fork', class: 'append-right-5') + "#{text}"
+      sprite_icon('fork', size: 16, css_class: 'fork-svg') + "#{text}"
     end
   end
 
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 8a8011c27b4..acf67b83890 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -8,7 +8,7 @@
 %li{ class: "js-branch-#{branch.name}" }
   %div
     = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated ref-name' do
-      = sprite_icon('fork', size: 8)
+      = sprite_icon('fork', size: 12)
       = branch.name
     &nbsp;
     - if branch.name == @repository.root_ref
diff --git a/app/views/projects/commit/_limit_exceeded_message.html.haml b/app/views/projects/commit/_limit_exceeded_message.html.haml
index 84a52d49487..a264f3517c4 100644
--- a/app/views/projects/commit/_limit_exceeded_message.html.haml
+++ b/app/views/projects/commit/_limit_exceeded_message.html.haml
@@ -1,7 +1,7 @@
 .has-tooltip{ class: "limit-box limit-box-#{objects} prepend-left-5", data: { title: "Project has too many #{label_for_message} to search"} }
   .limit-icon
     - if objects == :branch
-      = icon('code-fork')
+      = sprite_icon('fork', size: 12)
     - else
       = icon('tag')
   .limit-message
diff --git a/app/views/projects/deployments/_commit.html.haml b/app/views/projects/deployments/_commit.html.haml
index 014486be868..c7ac687e4a6 100644
--- a/app/views/projects/deployments/_commit.html.haml
+++ b/app/views/projects/deployments/_commit.html.haml
@@ -2,7 +2,7 @@
   .branch-commit
     - if deployment.ref
       %span.icon-container
-        = deployment.tag? ? icon('tag') : icon('code-fork')
+        = deployment.tag? ? icon('tag') : sprite_icon('fork', css_class: 'sprite')
       = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
     .icon-container.commit-icon
       = custom_icon("icon_commit")
diff --git a/app/views/projects/forks/error.html.haml b/app/views/projects/forks/error.html.haml
index d365bcd4ecc..e8a89b8c6fc 100644
--- a/app/views/projects/forks/error.html.haml
+++ b/app/views/projects/forks/error.html.haml
@@ -2,7 +2,7 @@
 - if @forked_project && !@forked_project.saved?
   .alert.alert-danger.alert-block
     %h4
-      %i.fa.fa-code-fork
+      = sprite_icon('fork', size: 16)
       Fork Error!
     %p
       You tried to fork
@@ -21,5 +21,4 @@
 
     %p
       = link_to new_project_fork_path(@project), title: "Fork", class: "btn" do
-        %i.fa.fa-code-fork
         Try to fork again
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
index b98dc09534f..2599ce5c4b8 100644
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
@@ -19,7 +19,7 @@
     - if ref
       - if generic_commit_status.ref
         .icon-container
-          = generic_commit_status.tags.any? ? icon('tag') : icon('code-fork')
+          = generic_commit_status.tags.any? ? icon('tag') : sprite_icon('fork', size: 10)
         = link_to generic_commit_status.ref, project_commits_path(generic_commit_status.project, generic_commit_status.ref)
       - else
         .light none
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 591da3b6638..f45a000833b 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -30,7 +30,7 @@
           %span.project-ref-path
             &nbsp;
             = link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do
-              = sprite_icon('fork', css_class: 'fork-sprite')
+              = sprite_icon('fork', size: 12, css_class: 'fork-sprite')
               = merge_request.target_branch
         - if merge_request.labels.any?
           &nbsp;
diff --git a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
index f8c4005a9e0..800e234275c 100644
--- a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
+++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml
@@ -3,7 +3,7 @@
     %td
       = pipeline_schedule.description
     %td.branch-name-cell
-      = icon('code-fork')
+      = sprite_icon('fork', size: 12)
       - if pipeline_schedule.ref.present?
         = link_to pipeline_schedule.ref, project_ref_path(@project, pipeline_schedule.ref), class: "ref-name"
     %td
diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js
index d5754aaa9e7..fdead874209 100644
--- a/spec/javascripts/vue_shared/components/commit_spec.js
+++ b/spec/javascripts/vue_shared/components/commit_spec.js
@@ -10,7 +10,7 @@ describe('Commit component', () => {
     CommitComponent = Vue.extend(commitComp);
   });
 
-  it('should render a code-fork icon if it does not represent a tag', () => {
+  it('should render a fork icon if it does not represent a tag', () => {
     component = new CommitComponent({
       propsData: {
         tag: false,
@@ -30,7 +30,7 @@ describe('Commit component', () => {
       },
     }).$mount();
 
-    expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-code-fork');
+    expect(component.$el.querySelector('.icon-container').children).toContain('svg');
   });
 
   describe('Given all the props', () => {