diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index f65e22a31c51158f084c934c4d87c4528c79f778..f56c402091f22d27043a0508b6a8288bdef14a90 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -7,6 +7,7 @@ import csrf from './lib/utils/csrf';
 import axios from './lib/utils/axios_utils';
 import { n__, __ } from '~/locale';
 import { getFilename } from '~/lib/utils/file_upload';
+import { spriteIcon } from '~/lib/utils/common_utils';
 
 Dropzone.autoDiscover = false;
 
@@ -25,7 +26,7 @@ function getErrorMessage(res) {
 
 export default function dropzoneInput(form, config = { parallelUploads: 2 }) {
   const divHover = '<div class="div-dropzone-hover"></div>';
-  const iconPaperclip = '<i class="fa fa-paperclip div-dropzone-icon"></i>';
+  const iconPaperclip = spriteIcon('paperclip', 'div-dropzone-icon');
   const $attachButton = form.find('.button-attach-file');
   const $attachingFileMessage = form.find('.attaching-file-message');
   const $cancelButton = form.find('.button-cancel-uploading-files');
diff --git a/app/assets/javascripts/notes/components/note_attachment.vue b/app/assets/javascripts/notes/components/note_attachment.vue
index 72f9a4c7e74aa1686785b6bd70cba5fdcef6f8e9..b20facc40329c02f6628757be6ebf3e2801a9b02 100644
--- a/app/assets/javascripts/notes/components/note_attachment.vue
+++ b/app/assets/javascripts/notes/components/note_attachment.vue
@@ -1,6 +1,11 @@
 <script>
+import { GlIcon } from '@gitlab/ui';
+
 export default {
   name: 'NoteAttachment',
+  components: {
+    GlIcon,
+  },
   props: {
     attachment: {
       type: Object,
@@ -29,7 +34,7 @@ export default {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <i class="fa fa-paperclip" aria-hidden="true"> </i> {{ attachment.filename }}
+        <gl-icon name="paperclip" /> {{ attachment.filename }}
       </a>
     </div>
   </div>
diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss
index 7b1953be69d75fb1156ac6c413a02811f5148f3f..937ed5119cb5fa5fe5792c4ca76bacf045db4489 100644
--- a/app/assets/stylesheets/fontawesome_custom.scss
+++ b/app/assets/stylesheets/fontawesome_custom.scss
@@ -117,10 +117,6 @@
   content: '\f077';
 }
 
-.fa-paperclip::before {
-  content: '\f0c6';
-}
-
 .fa-bug::before {
   content: '\f188';
 }
diff --git a/app/views/events/event/_note.html.haml b/app/views/events/event/_note.html.haml
index 4e936025c746ffe116567e174f01251d53e267d5..2fa595503e5f3b302aa69df4787dad2a3704f709 100644
--- a/app/views/events/event/_note.html.haml
+++ b/app/views/events/event/_note.html.haml
@@ -25,5 +25,5 @@
           = image_tag note.attachment.url, class: 'note-image-attach'
       - else
         = link_to note.attachment.url, target: '_blank', class: 'note-file-attach' do
-          %i.fa.fa-paperclip
+          = sprite_icon("paperclip")
           = note.attachment_identifier
diff --git a/app/views/shared/notes/_note.html.haml b/app/views/shared/notes/_note.html.haml
index 97ed285287106e2f8e54b0015537ebc58225bf6b..f1352be28e32fe1c6a4ceb28b9bbb5cbd495c1d7 100644
--- a/app/views/shared/notes/_note.html.haml
+++ b/app/views/shared/notes/_note.html.haml
@@ -72,7 +72,7 @@
               = image_tag note.attachment.url, class: 'note-image-attach'
           .attachment
             = link_to note.attachment.url, target: '_blank' do
-              = icon('paperclip')
+              = sprite_icon('paperclip')
               = note.attachment_identifier
               = link_to delete_attachment_project_note_path(note.project, note),
                 title: _('Delete this attachment'), method: :delete, remote: true, data: { confirm: _('Are you sure you want to remove the attachment?') }, class: 'danger js-note-attachment-delete' do
diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
index 93684ed48ee88059cf5e9b0316c10e1d948244ab..7c11d073566a12721b116240b67d8303415e3382 100644
--- a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
+++ b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
@@ -52,9 +52,13 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
             <div
               class="div-dropzone-hover"
             >
-              <i
-                class="fa fa-paperclip div-dropzone-icon"
-              />
+              <svg
+                class="div-dropzone-icon"
+              >
+                <use
+                  xlink:href="undefined#paperclip"
+                />
+              </svg>
             </div>
           </div>