From a777fd55843d09005c624434fc2f797af168ccf9 Mon Sep 17 00:00:00 2001
From: Giga Chubinidze <giga@scinote.net>
Date: Thu, 8 Jun 2023 10:33:37 +0400
Subject: [PATCH] New icons implementation [SCI-8366]

---
 app/assets/javascripts/application.js.erb     |  6 ++--
 app/assets/javascripts/dashboard/calendar.js  |  4 +--
 .../javascripts/dashboard/quick_start.js      |  4 +--
 app/assets/javascripts/experiments/show.js    |  2 +-
 app/assets/javascripts/experiments/table.js   |  2 +-
 .../global_activities/side_pane.js            |  2 +-
 .../label_templates_datatable.js              |  2 +-
 app/assets/javascripts/my_modules.js          |  2 +-
 .../javascripts/my_modules/repositories.js    |  4 +--
 .../javascripts/reports/reports_datatable.js  |  2 +-
 .../repositories/renderers/columns/asset.js   |  4 +--
 .../renderers/columns/date_time_helper.js     |  4 +--
 .../repositories/renderers/view_renderers.js  |  4 +--
 .../repositories/repository_datatable.js      |  4 +--
 .../status_column_type.js                     |  2 +-
 .../javascripts/repository_columns/index.js   |  8 ++---
 .../javascripts/sitewide/datatable_helpers.js |  4 +--
 .../javascripts/sitewide/drag_n_drop.js       |  4 +--
 .../javascripts/sitewide/dropdown_selector.js |  4 +--
 .../javascripts/sitewide/show_password.js     |  2 +-
 .../settings/teams/invite_users_modal.js      |  2 +-
 .../shared_styles/constants/fonts.scss        |  1 +
 .../shared_styles/global_elements.scss        |  8 ++---
 .../reports/date_input_component.html.erb     |  2 +-
 .../protocol_linked_children_datatable.rb     |  6 ++--
 app/datatables/teams_datatable.rb             |  2 +-
 app/helpers/bootstrap_form_helper.rb          |  2 +-
 app/helpers/global_activities_helper.rb       |  2 +-
 app/helpers/results_helper.rb                 |  8 ++---
 app/javascript/packs/tiny_mce.js              |  2 +-
 app/javascript/vue/bmt_filter/container.vue   |  6 ++--
 app/javascript/vue/bmt_filter/filter.vue      |  2 +-
 .../vue/bmt_filter/saved_filter.vue           |  2 +-
 .../label_template/insert_field_dropdown.vue  |  6 ++--
 .../notifications/notifications_flyout.vue    |  2 +-
 app/javascript/vue/navigation/top_menu.vue    |  8 ++---
 app/javascript/vue/protocol/attachments.vue   |  2 +-
 app/javascript/vue/protocol/container.vue     | 12 ++++----
 .../modals/reorderable_items_modal.vue        |  2 +-
 .../vue/protocol/protocolMetadata.vue         |  2 +-
 .../vue/protocol/protocolOptions.vue          | 10 +++----
 app/javascript/vue/protocol/step.vue          | 16 +++++-----
 .../step_attachments/context_menu.vue         |  8 ++---
 .../protocol/step_attachments/file_modal.vue  |  2 +-
 .../protocol/step_attachments/uploading.vue   |  2 +-
 .../vue/protocol/step_elements/checklist.vue  |  6 ++--
 .../protocol/step_elements/checklistItem.vue  |  4 +--
 .../vue/protocol/step_elements/table.vue      |  6 ++--
 .../vue/protocol/step_elements/text.vue       |  4 +--
 .../vue/repository_filter/container.vue       |  4 +--
 .../vue/repository_filter/filter.vue          |  2 +-
 .../vue/repository_filter/saved_filter.vue    |  2 +-
 .../vue/repository_search/container.vue       |  8 ++---
 app/javascript/vue/shared/date_picker.vue     |  2 +-
 app/javascript/vue/shared/inline_edit.vue     |  2 +-
 app/javascript/vue/shared/pdf_viewer.vue      |  6 ++--
 app/javascript/vue/shared/time_picker.vue     |  2 +-
 app/javascript/vue/shared/tinymce.vue         |  2 +-
 app/services/toolbars/experiments_service.rb  | 10 +++----
 .../toolbars/label_templates_service.rb       |  8 ++---
 app/services/toolbars/my_modules_service.rb   | 10 +++----
 app/services/toolbars/projects_service.rb     | 20 ++++++-------
 app/services/toolbars/protocols_service.rb    | 10 +++----
 app/services/toolbars/reports_service.rb      |  6 ++--
 app/services/toolbars/repositories_service.rb | 12 ++++----
 .../toolbars/repository_rows_service.rb       | 16 +++++-----
 .../modals/_edit_modal.html.erb               |  2 +-
 .../partials/_new_assignments_form.html.erb   |  2 +-
 app/views/assets/_asset_context_menu.html.erb |  8 ++---
 app/views/assets/_new_asset.html.erb          |  2 +-
 app/views/canvas/_edit.html.erb               |  4 +--
 app/views/canvas/edit/_my_module.html.erb     |  2 +-
 .../canvas/full_zoom/_my_module.html.erb      |  6 ++--
 .../full_zoom/_my_module_hidden.html.erb      |  2 +-
 .../medium_zoom/_my_module_hidden.html.erb    |  2 +-
 .../small_zoom/_my_module_hidden.html.erb     |  2 +-
 app/views/dashboards/_current_tasks.html.erb  |  4 +--
 app/views/dashboards/_quick_start.html.erb    |  6 ++--
 .../dashboards/current_tasks/_task.html.erb   |  2 +-
 .../experiments/_assigned_users.html.erb      |  4 +--
 .../experiments/_dropdown_actions.html.erb    | 12 ++++----
 app/views/experiments/_show_header.html.erb   |  2 +-
 .../experiments/_table_display_modal.html.erb |  4 +--
 .../experiments/_table_due_date.html.erb      |  2 +-
 .../experiments/_table_row_actions.html.erb   | 10 +++----
 app/views/experiments/_table_toolbar.html.erb |  6 ++--
 app/views/experiments/canvas.html.erb         |  4 +--
 app/views/experiments/module_archive.html.erb |  4 +--
 .../global_activities/_date_picker.html.erb   |  2 +-
 .../global_activities/_top_pane.html.erb      |  8 ++---
 .../references/_project_folder.html.erb       |  2 +-
 .../references/_protocol.html.erb             |  4 +--
 .../references/_report.html.erb               |  2 +-
 .../references/_repository_base.html.erb      |  2 +-
 .../references/_repository_row.html.erb       |  2 +-
 .../references/_team.html.erb                 |  2 +-
 .../label_printers/_fluics_settings.html.erb  |  6 ++--
 .../label_printers/_zebra_settings.html.erb   |  4 +--
 .../label_templates/_index_toolbar.html.erb   |  2 +-
 app/views/label_templates/index.html.erb      |  2 +-
 .../reports/template_values_editor.html.erb   | 10 +++----
 app/views/my_module_tags/_index_edit.html.erb | 10 +++----
 app/views/my_modules/_header.html.erb         |  2 +-
 .../_module_header_due_date.html.erb          |  4 +--
 .../_module_header_start_date.html.erb        |  4 +--
 app/views/my_modules/_result.html.erb         |  6 ++--
 app/views/my_modules/_tags.html.erb           |  2 +-
 .../my_modules/activities/_top_pane.html.erb  |  8 ++---
 app/views/my_modules/archive/_result.html.erb |  6 ++--
 ..._repository_records_modal_content.html.erb |  2 +-
 .../my_modules/modals/_new_modal.html.erb     |  2 +-
 ..._repository_records_modal_content.html.erb |  6 ++--
 .../_consume_stock_modal_content.html.erb     |  2 +-
 .../repositories/_full_view_modal.html.erb    |  4 +--
 .../repositories/_full_view_sidebar.html.erb  |  4 +--
 .../repositories/_full_view_version.html.erb  |  2 +-
 .../_repositories_dropdown_list.html.erb      |  2 +-
 .../repositories/_repositories_list.html.erb  |  2 +-
 app/views/my_modules/results.html.erb         | 12 ++++----
 .../experiment_archive/_experiment.html.erb   |  6 ++--
 .../projects/index/_folder_card.html.erb      |  2 +-
 app/views/projects/index/_header.html.erb     |  2 +-
 .../index/_project_actions_dropdown.html.erb  | 16 +++++-----
 .../projects/index/_project_card.html.erb     |  4 +--
 app/views/projects/index/_toolbar.html.erb    |  6 ++--
 .../modals/_move_to_folders_tree.html.erb     |  2 +-
 .../modals/_move_to_modal_contents.html.erb   |  4 +--
 app/views/projects/show/_experiment.html.erb  |  4 +--
 .../_experiment_actions_dropdown.html.erb     | 12 ++++----
 .../projects/show/_experiment_card.html.erb   |  2 +-
 app/views/projects/show/_header.html.erb      |  2 +-
 .../projects/show/_new_experiment.html.erb    |  2 +-
 app/views/projects/show/_toolbar.html.erb     |  4 +--
 .../import_export/_import_modal.html.erb      |  2 +-
 app/views/protocols/index.html.erb            |  2 +-
 .../protocols/index/_general_toolbar.html.erb |  4 +--
 .../protocols/index/_protocol_access.html.erb |  2 +-
 .../index/_protocol_versions_modal.html.erb   |  4 +--
 .../index/_protocolsio_modal_body.html.erb    |  4 +--
 app/views/protocols/show.html.erb             |  2 +-
 .../_content_document_preview.html.erb        |  4 +--
 app/views/reports/_index_toolbar.html.erb     |  2 +-
 .../_my_module_result_asset_element.html.erb  |  2 +-
 .../elements/_step_asset_element.html.erb     |  2 +-
 app/views/reports/new.html.erb                |  2 +-
 .../reports/wizard/_project_contents.html.erb |  8 ++---
 .../reports/wizard/_second_step.html.erb      |  4 +--
 app/views/reports/wizard/_third_step.html.erb |  8 ++---
 .../repositories/_repository_filters.html.erb |  2 +-
 .../_repository_row_info_modal.html.erb       |  4 +--
 app/views/repositories/_sidebar.html.erb      |  2 +-
 .../repositories/_toolbar_buttons.html.erb    |  8 ++---
 .../repositories/_view_archived_btn.html.erb  |  2 +-
 app/views/repositories/index.html.erb         |  2 +-
 app/views/repositories/show.html.erb          |  2 +-
 .../toolbar/_print_label_button.html.erb      |  2 +-
 .../toolbar/_row_actions.html.erb             | 14 ++++-----
 .../toolbar/_save_filters.html.erb            |  2 +-
 .../_manage_column_modal_index.html.erb       |  2 +-
 .../manage_column_partials/_status.html.erb   |  4 +--
 .../_manage_modal_content.html.erb            |  2 +-
 app/views/search/index.html.erb               | 30 +++++++++----------
 app/views/search/new.html.erb                 |  2 +-
 app/views/search/results/_assets.html.erb     |  2 +-
 app/views/search/results/_comments.html.erb   |  2 +-
 .../search/results/_experiments.html.erb      |  2 +-
 app/views/search/results/_modules.html.erb    |  2 +-
 .../search/results/_project_folders.html.erb  |  2 +-
 app/views/search/results/_projects.html.erb   |  2 +-
 app/views/search/results/_protocols.html.erb  |  2 +-
 app/views/search/results/_reports.html.erb    |  2 +-
 .../search/results/_repositories.html.erb     |  2 +-
 app/views/search/results/_results.html.erb    |  6 ++--
 app/views/search/results/_steps.html.erb      |  2 +-
 app/views/search/results/_tables.html.erb     |  2 +-
 app/views/shared/_bio_eddie_modal.html.erb    |  2 +-
 app/views/shared/_file_edit_modal.html.erb    |  2 +-
 app/views/shared/_filter_dropdown.html.erb    |  2 +-
 app/views/shared/_inline_editing.html.erb     |  2 +-
 app/views/shared/_marvinjs_modal.html.erb     |  2 +-
 .../shared/_my_modules_list_partial.html.erb  |  2 +-
 app/views/shared/_pdf_viewer.html.erb         |  6 ++--
 .../shared/_repository_row_reminder.html.erb  |  2 +-
 .../shared/_tiny_mce_extra_buttons.html.erb   |  2 +-
 app/views/shared/comments/_comment.html.erb   |  4 +--
 app/views/shared/comments/_comments.html.erb  |  2 +-
 .../comments/_comments_sidebar.html.erb       |  4 +--
 app/views/shared/comments/_item.html.erb      |  4 +--
 .../shared/file_preview/_content.html.erb     | 16 +++++-----
 .../filter_dropdown/_datetime_search.html.erb |  4 +--
 .../shared/sidebar/_experiments.html.erb      |  2 +-
 app/views/shared/sidebar/_my_module.html.erb  |  2 +-
 app/views/shared/sidebar/_my_modules.html.erb |  4 +--
 app/views/shared/sidebar/_projects.html.erb   |  2 +-
 .../sidebar/_projects_tree_branch.html.erb    |  2 +-
 .../sidebar/_templates_sidebar.html.erb       |  2 +-
 .../shared/smart_annotation/_menu.html.erb    |  4 +--
 .../shared/smart_annotation/_users.html.erb   |  2 +-
 .../user_my_modules/_index_edit.html.erb      |  4 +--
 .../registrations/_manage_devices.html.erb    |  2 +-
 .../edit_partials/_avatar.html.erb            |  2 +-
 .../account/preferences/index.html.erb        |  2 +-
 .../settings/teams/_user_dropdown.html.erb    |  4 +--
 app/views/users/settings/teams/index.html.erb |  2 +-
 app/views/users/settings/teams/show.html.erb  |  6 ++--
 .../settings/webhooks/_webhook_form.html.erb  |  2 +-
 .../users/settings/webhooks/index.html.erb    | 12 ++++----
 config/locales/en.yml                         |  8 ++---
 208 files changed, 450 insertions(+), 447 deletions(-)

diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
index ed7288660..c47a7bb85 100644
--- a/app/assets/javascripts/application.js.erb
+++ b/app/assets/javascripts/application.js.erb
@@ -38,7 +38,9 @@
 //= require_directory ./access_permissions
 //= require sidebar
 //= require turbolinks
-
+//= require scinote/enterprise/organization_management/application
+//= require scinote/enterprise/audit_trails/application
+//= require scinote/enterprise/electronic_signatures/application
 // Initialize links for submitting forms. This is useful for submitting
 // forms with clicking on links outside form in cases when other than
 // GET method is used.
@@ -334,7 +336,7 @@ const renderUserNamePopover = (url, fullName, email, html) => {
                   <h5 class='full-name'>${fullName}</h5>
                 </div>
                 <div class='col-xs-3 text-right'>
-                  <span class='fas fa-times' aria-hidden='true'></span>
+                  <span class='sn-icon sn-icon-close-remove' aria-hidden='true'></span>
                 </div>
               </div>
               <div class='row'>
diff --git a/app/assets/javascripts/dashboard/calendar.js b/app/assets/javascripts/dashboard/calendar.js
index c52a2d5d0..a6eb2984c 100644
--- a/app/assets/javascripts/dashboard/calendar.js
+++ b/app/assets/javascripts/dashboard/calendar.js
@@ -6,11 +6,11 @@ var DasboardCalendarWidget = (function() {
     return `<script id="calendar-template" type="text/template">
               <div class="controls">
                 <div class="clndr-previous-button">
-                  <div class="btn btn-light icon-btn"><i class="fas fa-angle-double-left"></i></div>
+                  <div class="btn btn-light icon-btn"><i class="sn-icon sn-icon-double-navigate-before"></i></div>
                 </div>
                 <div class="clndr-title"><%= month %> <%= year %></div>
                 <div class="clndr-next-button">
-                  <div class="btn btn-light icon-btn"><i class="fas fa-angle-double-right"></i></div>
+                  <div class="btn btn-light icon-btn"><i class="sn-icon sn-icon sn-icon-double-navigate-after"></i></div>
                 </div>
               </div>
               <div class="days-container">
diff --git a/app/assets/javascripts/dashboard/quick_start.js b/app/assets/javascripts/dashboard/quick_start.js
index 20af31ab8..4ab10a6ae 100644
--- a/app/assets/javascripts/dashboard/quick_start.js
+++ b/app/assets/javascripts/dashboard/quick_start.js
@@ -31,7 +31,7 @@ var DasboardQuickStartWidget = (function() {
       selectAppearance: 'simple',
       optionLabel: (data) => {
         if (data.value === 0) {
-          return `<i class="fas fa-plus"></i>
+          return `<i class="sn-icon sn-icon-new-task"></i>
                   <span class="create-new">${I18n.t('dashboard.create_task_modal.filter_create_new')}</span>
                   <span>"${data.label}"</span>`;
         }
@@ -61,7 +61,7 @@ var DasboardQuickStartWidget = (function() {
       selectAppearance: 'simple',
       optionLabel: (data) => {
         if (data.value === 0) {
-          return `<i class="fas fa-plus"></i>
+          return `<i class="sn-icon sn-icon-new-task"></i>
                   <span class="create-new">${I18n.t('dashboard.create_task_modal.filter_create_new')}</span>
                   <span>"${data.label}"</span>`;
         }
diff --git a/app/assets/javascripts/experiments/show.js b/app/assets/javascripts/experiments/show.js
index 32765e5a4..8487b0009 100644
--- a/app/assets/javascripts/experiments/show.js
+++ b/app/assets/javascripts/experiments/show.js
@@ -80,7 +80,7 @@
               return `<span class="my-module-tags-color" style="background:${data.params.color}"></span>
                       ${data.label}`;
             }
-            return `<span class="my-module-tags-color new"><i class="fas fa-plus"></i></span>
+            return `<span class="my-module-tags-color new"><i class="sn-icon sn-icon-new-task"></i></span>
                     ${data.label + ' '}
                     <span class="my-module-tags-create-new"> ${I18n.t('my_modules.details.create_new_tag')}</span>`;
           },
diff --git a/app/assets/javascripts/experiments/table.js b/app/assets/javascripts/experiments/table.js
index fdf01a0cd..2e5dd8931 100644
--- a/app/assets/javascripts/experiments/table.js
+++ b/app/assets/javascripts/experiments/table.js
@@ -119,7 +119,7 @@ var ExperimnetTable = {
           <div ref="dropdown" class="dropdown my-module-menu" data-url="${data.urls.actions_dropdown}">
             <div class="btn btn-ligh icon-btn open-my-module-menu" tabindex="0"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" >
-              <i class="fas fa-ellipsis-h"></i>
+              <i class="sn-icon sn-icon-more-hori"></i>
             </div>
             <div class="dropdown-menu dropdown-menu-right">
               <a class="open-access-modal hidden" data-action="remote-modal" href="${data.urls.access}"></a>
diff --git a/app/assets/javascripts/global_activities/side_pane.js b/app/assets/javascripts/global_activities/side_pane.js
index b2af8049d..722998302 100644
--- a/app/assets/javascripts/global_activities/side_pane.js
+++ b/app/assets/javascripts/global_activities/side_pane.js
@@ -228,7 +228,7 @@ var globalActivities = (function() {
               ${dateContainer[0].dataset.periodLabel}
               ${$('.ga-side .date-selector.filter-block')[0].dataset.periodSelect}
             </div>
-            <i class="fas fa-times"></i>
+            <i class="sn-icon sn-icon-close-remove"></i>
           </div>`).appendTo('.ga-top .ga-tags')
           .find('.fa-times').click(() => {
             $('.date-selector .date.clear').click();
diff --git a/app/assets/javascripts/label_templates/label_templates_datatable.js b/app/assets/javascripts/label_templates/label_templates_datatable.js
index 0c153a9d2..f9b212e0e 100644
--- a/app/assets/javascripts/label_templates/label_templates_datatable.js
+++ b/app/assets/javascripts/label_templates/label_templates_datatable.js
@@ -20,7 +20,7 @@
   }
 
   function renderDefaultTemplateHTML(data) {
-    return data ? '<i class="fas fa-thumbtack"></i>' : '';
+    return data ? '<i class="sn-icon sn-icon-dashboard"></i>' : '';
   }
 
   function renderNameHTML(data, type, row) {
diff --git a/app/assets/javascripts/my_modules.js b/app/assets/javascripts/my_modules.js
index f99afb8f0..606e9495a 100644
--- a/app/assets/javascripts/my_modules.js
+++ b/app/assets/javascripts/my_modules.js
@@ -148,7 +148,7 @@
           return `<span class="my-module-tags-color" style="background:${data.params.color}"></span>
                   ${data.label}`;
         }
-        return `<span class="my-module-tags-color new"><i class="fas fa-plus"></i></span>
+        return `<span class="my-module-tags-color new"><i class="sn-icon sn-icon-new-task"></i></span>
                   ${data.label + ' '}
                 <span class="my-module-tags-create-new"> ${I18n.t('my_modules.details.create_new_tag')}</span>`;
       },
diff --git a/app/assets/javascripts/my_modules/repositories.js b/app/assets/javascripts/my_modules/repositories.js
index 480865a6c..531631d45 100644
--- a/app/assets/javascripts/my_modules/repositories.js
+++ b/app/assets/javascripts/my_modules/repositories.js
@@ -188,7 +188,7 @@ var MyModuleRepositories = (function() {
         if (row.hasActiveReminders) {
           recordName = `<div class="dropdown row-reminders-dropdown"
                           data-row-reminders-url="${row.rowRemindersUrl}" tabindex='-1'>
-                          <i class="fas fa-bell dropdown-toggle row-reminders-icon"
+                          <i class="sn-icon sn-icon-notifications dropdown-toggle row-reminders-icon"
                              data-toggle="dropdown" id="rowReminders${row.DT_RowId}}"></i>
                           <ul class="dropdown-menu" role="menu" aria-labelledby="rowReminders${row.DT_RowId}">
                           </ul>
@@ -286,7 +286,7 @@ var MyModuleRepositories = (function() {
         var dataTableWrapper = $(tableContainer).closest('.dataTables_wrapper');
         DataTableHelpers.initLengthAppearance(dataTableWrapper);
         DataTableHelpers.initSearchField(dataTableWrapper, I18n.t('repositories.show.filter_inventory_items'));
-        $('<img class="barcode-scanner" src="/images/icon_small/barcode.png"></img>').appendTo($('.search-container'));
+        $("<i class='sn-icon sn-icon-barcode'></i>").appendTo($('.search-container'));
         dataTableWrapper.find('.main-actions, .pagination-row').removeClass('hidden');
         if (options.assign_mode) {
           renderFullViewAssignButtons();
diff --git a/app/assets/javascripts/reports/reports_datatable.js b/app/assets/javascripts/reports/reports_datatable.js
index f97a2073e..bd3f4f46f 100644
--- a/app/assets/javascripts/reports/reports_datatable.js
+++ b/app/assets/javascripts/reports/reports_datatable.js
@@ -44,7 +44,7 @@
 
     if (data.preview_url) {
       return `<a href="#" class="file-preview-link docx" data-preview-url="${data.preview_url}">
-                <i class="fas fa-file-word"></i>
+                <i class="sn-icon sn-icon-file-word"></i>
                 ${I18n.t('projects.reports.index.docx')}
               </a>`;
     }
diff --git a/app/assets/javascripts/repositories/renderers/columns/asset.js b/app/assets/javascripts/repositories/renderers/columns/asset.js
index 0d75973b9..ed15caeb9 100644
--- a/app/assets/javascripts/repositories/renderers/columns/asset.js
+++ b/app/assets/javascripts/repositories/renderers/columns/asset.js
@@ -67,9 +67,9 @@ var AssetColumnHelper = (function() {
                value=""
                data-type="RepositoryAssetValue">
         <div class="file-upload-button ${empty ? 'new-file' : ''}">
-          <i class="fas fa-paperclip icon"></i>
+          <i class="sn-icon sn-icon-files icon"></i>
           <label data-placeholder="${placeholder}" for="repository_file_${columnId}_${rowId}">${fileName}</label>
-          <span class="delete-action fas fa-trash"> </span>
+          <span class="delete-action sn-icon sn-icon-delete"> </span>
         </div>
       </div>`);
   }
diff --git a/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js b/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js
index 827d46a42..c346b4e02 100644
--- a/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js
+++ b/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js
@@ -141,7 +141,7 @@ var DateTimeHelper = (function() {
                 data-datetime-part="date"
                 data-selected-date="${dateDataValue}"
                 value='${value}'/>
-        <i class="fas fa-calendar-alt"></i>
+        <i class="sn-icon sn-icon-calendar"></i>
       </div>
     `;
   }
@@ -154,7 +154,7 @@ var DateTimeHelper = (function() {
                data-mask-type="time"
                value='${value}'
                placeholder="HH:mm"/>
-        <i class="fas fa-clock"></i>
+        <i class="sn-icon sn-icon-created"></i>
       </div>
     `;
   }
diff --git a/app/assets/javascripts/repositories/renderers/view_renderers.js b/app/assets/javascripts/repositories/renderers/view_renderers.js
index f8c52241d..4d4293f05 100644
--- a/app/assets/javascripts/repositories/renderers/view_renderers.js
+++ b/app/assets/javascripts/repositories/renderers/view_renderers.js
@@ -185,7 +185,7 @@ $.fn.dataTable.render.AssignedTasksValue = function(data, row) {
                 <div class="sci-input-container right-icon">
                   <input id="searchAssignedTasks" type="text" class="sci-input-field search-tasks"
                     placeholder="${I18n.t('repositories.table.assigned_search')}"></input>
-                  <i class="fas fa-times-circle clear-search"></i>
+                  <i class="sn-icon sn-icon-close-remove clear-search"></i>
                 </div>
                 <div class="tasks"></div>
               </div>
@@ -195,7 +195,7 @@ $.fn.dataTable.render.AssignedTasksValue = function(data, row) {
   }
   if (row.hasActiveReminders) {
     return `<div class="dropdown row-reminders-dropdown" data-row-reminders-url="${row.rowRemindersUrl}" tabindex='-1'>
-              <i class="fas fa-bell dropdown-toggle row-reminders-icon" data-toggle="dropdown"
+              <i class="sn-icon sn-icon-notifications dropdown-toggle row-reminders-icon" data-toggle="dropdown"
                 id="rowReminders${row.DT_RowId}}"></i>
               <ul class="dropdown-menu" role="menu" aria-labelledby="rowReminders${row.DT_RowId}">
               </ul>
diff --git a/app/assets/javascripts/repositories/repository_datatable.js b/app/assets/javascripts/repositories/repository_datatable.js
index 07a16e874..009d7be73 100644
--- a/app/assets/javascripts/repositories/repository_datatable.js
+++ b/app/assets/javascripts/repositories/repository_datatable.js
@@ -528,9 +528,9 @@ var RepositoryDatatable = (function(global) {
           let content = $.fn.dataTable.render.AssignedTasksValue(data, row);
           let icon;
           if (!row.recordEditable) {
-            icon = `<i class="repository-row-lock-icon fas fa-lock" title="${I18n.t('repositories.table.locked_item')}"></i>`;
+            icon = `<i class="repository-row-lock-icon sn-icon sn-icon-locked-task" title="${I18n.t('repositories.table.locked_item')}"></i>`;
           } else if (EDITABLE) {
-            icon = '<i class="repository-row-edit-icon fas fa-pencil-alt" data-view-mode="active"></i>';
+            icon = '<i class="repository-row-edit-icon sn-icon sn-icon-edit" data-view-mode="active"></i>';
           } else {
             icon = '';
           }
diff --git a/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js b/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js
index 48b4f1cbf..3dde46127 100644
--- a/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js
+++ b/app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js
@@ -12,7 +12,7 @@ var RepositoryStatusColumnType = (function() {
       <input placeholder=${I18n.t('libraries.manange_modal_column.name_placeholder')}
              class="status-item-field"
              type="text"/>
-      <span class="status-item-icon-trash fas fa-trash"></span>
+      <span class="status-item-icon-trash sn-icon sn-icon-delete"></span>
     </div>`;
   }
 
diff --git a/app/assets/javascripts/repository_columns/index.js b/app/assets/javascripts/repository_columns/index.js
index 464888266..cf604556e 100644
--- a/app/assets/javascripts/repository_columns/index.js
+++ b/app/assets/javascripts/repository_columns/index.js
@@ -287,7 +287,7 @@ var RepositoryColumns = (function() {
         let colId = $(el).attr('id');
         let colIndex = $(el).attr('data-column-index');
         let visible = TABLE.column(colIndex).visible();
-        let visClass = (visible) ? 'fa-eye' : 'fa-eye-slash';
+        let visClass = (visible) ? 'sn-icon-visibility-show' : 'sn-icon-visibility-hide';
         let visLi = (visible) ? '' : 'col-invisible';
         let visText = $(TABLE_ID).data('columns-visibility-text');
         let customColumn = ($(el).attr('data-type')) ? 'editable' : '';
@@ -311,14 +311,14 @@ var RepositoryColumns = (function() {
           destroyButton = `<button class="btn icon-btn btn-light delete-repo-column manage-repo-column"
                               data-action="destroy"
                               data-modal-url="${destroyUrl}">
-                              <span class="fas fa-trash" title="Delete"></span>
+                              <span class="sn-icon sn-icon-delete" title="Delete"></span>
                           </button>`;
         }
 
         let listItem = `<li class="col-list-el ${visLi} ${customColumn} ${editableRow}" data-position="${colIndex}" data-id="${colId}">
           <i class="grippy"></i>
           <span class="vis-controls">
-            <span class="vis fas ${visClass}" title="${visText}"></span>
+            <span class="vis sn-icon ${visClass}" title="${visText}"></span>
           </span>
           <span class="text">${generateColumnNameTooltip(thederName)}</span>
           <span class="column-type pull-right">${getColumnTypeText(el, colId)}</span>
@@ -326,7 +326,7 @@ var RepositoryColumns = (function() {
             <button class="btn icon-btn btn-light edit-repo-column manage-repo-column"
                     data-action="edit"
                     data-modal-url="${editUrl}">
-              <span class="fas fa-pencil-alt" title="Edit"></span>
+              <span class="sn-icon sn-icon-edit" title="Edit"></span>
             </button>
             ${destroyButton}
           </span>
diff --git a/app/assets/javascripts/sitewide/datatable_helpers.js b/app/assets/javascripts/sitewide/datatable_helpers.js
index 57c4d00df..b2677941e 100644
--- a/app/assets/javascripts/sitewide/datatable_helpers.js
+++ b/app/assets/javascripts/sitewide/datatable_helpers.js
@@ -30,10 +30,10 @@ var DataTableHelpers = (function() {
       $('.dataTables_filter').append(`
           <button class="btn btn-light icon-btn search-icon"
                   title="${I18n.t('repositories.show.button_tooltip.search')}">
-            <i class="fas fa-search"></i>
+            <i class="sn-icon sn-icon-search"></i>
           </button>
           <div class="sci-input-container right-icon search-container">
-            <i class="fas fa-search"></i>
+            <i class="sn-icon sn-icon-search"></i>
           </div>`).find('.sci-input-container').prepend(tableFilterInput);
       $('.dataTables_filter').find('label').remove();
 
diff --git a/app/assets/javascripts/sitewide/drag_n_drop.js b/app/assets/javascripts/sitewide/drag_n_drop.js
index 5863f4edd..f98fa70e8 100644
--- a/app/assets/javascripts/sitewide/drag_n_drop.js
+++ b/app/assets/javascripts/sitewide/drag_n_drop.js
@@ -318,11 +318,11 @@
     function uploadedAssetPreview(asset, i) {
       var html = `<div class="panel panel-default panel-result-attachment-new" data-item-uuid="${asset.uuid}">
                     <div class="panel-heading">
-                      <span class="fas fa-paperclip"></span>
+                      <span class="sn-icon sn-icon-files"></span>
                       ${I18n.t('assets.drag_n_drop.file_label')}
                       <div class="pull-right">
                         <a data-item-id="${asset.uuid}" href="#">
-                          <span class="fas fa-times"></span>
+                          <span class="sn-icon sn-icon-close-remove"></span>
                         </a>
                       </div>
                     </div>
diff --git a/app/assets/javascripts/sitewide/dropdown_selector.js b/app/assets/javascripts/sitewide/dropdown_selector.js
index 60eab52cc..aa81ad067 100644
--- a/app/assets/javascripts/sitewide/dropdown_selector.js
+++ b/app/assets/javascripts/sitewide/dropdown_selector.js
@@ -218,7 +218,7 @@ var dropdownSelector = (function() {
     if (config.customDropdownIcon) {
       return config.customDropdownIcon();
     }
-    return '<i class="fas fa-caret-down right-icon"></i><i class="fas fa-search right-icon simple-dropdown"></i>';
+    return '<i class="sn-icon sn-icon-close-hide right-icon"></i><i class="sn-icon sn-icon-search right-icon simple-dropdown"></i>';
   }
 
   // Set new data
@@ -741,7 +741,7 @@ var dropdownSelector = (function() {
       var tag = $(`<div class="${tagAppearance} ${customClass}" style="${customStyle ? customStyle(data) : ''}" >
                   <div class="tag-label">
                   </div>
-                  <i class="fas fa-times ${selector.data('config').singleSelect ? 'hidden' : ''}"></i>
+                  <i class="sn-icon sn-icon-close-remove ${selector.data('config').singleSelect ? 'hidden' : ''}"></i>
                 </div>`).insertBefore(container.find('.input-field .search-field'));
 
 
diff --git a/app/assets/javascripts/sitewide/show_password.js b/app/assets/javascripts/sitewide/show_password.js
index 9a437ca86..5c9499f62 100644
--- a/app/assets/javascripts/sitewide/show_password.js
+++ b/app/assets/javascripts/sitewide/show_password.js
@@ -1,7 +1,7 @@
 function initShowPassword() {
   $('.fas.fa-eye.show-password').remove();
   $.each($('input[type="password"]'), function(i, e) {
-    $(`<i class="fas fa-eye show-password"
+    $(`<i class="sn-icon sn-icon-visibility-show show-password"
           style="
             cursor: pointer;
             z-index: 10;
diff --git a/app/assets/javascripts/users/settings/teams/invite_users_modal.js b/app/assets/javascripts/users/settings/teams/invite_users_modal.js
index 960456c9d..afde6d223 100644
--- a/app/assets/javascripts/users/settings/teams/invite_users_modal.js
+++ b/app/assets/javascripts/users/settings/teams/invite_users_modal.js
@@ -45,7 +45,7 @@
       tagClass: 'users-dropdown-list',
       inputTagMode: true,
       selectKeys: [13, 32, 44, 188],
-      customDropdownIcon: () => { return '<i class="fas fa-search right-icon"></i>'; },
+      customDropdownIcon: () => { return '<i class="sn-icon sn-icon-search right-icon"></i>'; },
       onChange: () => {
         let values = dropdownSelector.getValues(emailsInput);
         if (values.length > 0) {
diff --git a/app/assets/stylesheets/shared_styles/constants/fonts.scss b/app/assets/stylesheets/shared_styles/constants/fonts.scss
index d8f6bbdea..52745179f 100644
--- a/app/assets/stylesheets/shared_styles/constants/fonts.scss
+++ b/app/assets/stylesheets/shared_styles/constants/fonts.scss
@@ -29,6 +29,7 @@ $font-fas-plus: "\f02b";
 
 .sn-icon {
   font-size: 24px !important;
+  vertical-align: middle;
 
   &.mini {
     font-size: 16px !important;
diff --git a/app/assets/stylesheets/shared_styles/global_elements.scss b/app/assets/stylesheets/shared_styles/global_elements.scss
index 5bfab7225..f7d2d8a86 100644
--- a/app/assets/stylesheets/shared_styles/global_elements.scss
+++ b/app/assets/stylesheets/shared_styles/global_elements.scss
@@ -40,7 +40,7 @@
   <hr>
   <div class="sci-toggles-group">
     <input type="radio" name="test1" class="sci-toggle-item">
-    <span class="sci-toggle-item-label"><i class="fas fa-th-large"></i></span>
+    <span class="sci-toggle-item-label"><i class="sn-icon sn-icon-grid-view"></i></span>
     <input type="radio" name="test1" class="sci-toggle-item">
     <span class="sci-toggle-item-label"><i class="fas fa-th-list"></i></span>
     <input type="radio" name="test1" class="sci-toggle-item">
@@ -53,19 +53,19 @@
   <hr>
   <div class="sci-input-container left-icon" style="width: 300px">
     <input type="text" class="sci-input-field" placeholder="Placeholder"></input>
-    <i class="fas fa-search"></i>
+    <i class="sn-icon sn-icon-search"></i>
   </div>
   <hr>
   <div class="sci-input-container right-icon"  style="width: 300px">
     <label>Right icon</label>
     <input type="text" class="sci-input-field" placeholder="Placeholder"></input>
-    <i class="fas fa-search"></i>
+    <i class="sn-icon sn-icon-search"></i>
   </div>
   <hr>
   <div class="sci-input-container right-icon success"  style="width: 300px">
     <label>Success and icon</label>
     <input type="text" class="sci-input-field" placeholder="Placeholder"></input>
-    <i class="fas fa-search"></i>
+    <i class="sn-icon sn-icon-search"></i>
   </div>
   <hr>
   <div class="sci-input-container error" data-error-text="Error text"  style="width: 300px">
diff --git a/app/components/reports/date_input_component.html.erb b/app/components/reports/date_input_component.html.erb
index b2df5b536..0a3d5c53c 100644
--- a/app/components/reports/date_input_component.html.erb
+++ b/app/components/reports/date_input_component.html.erb
@@ -2,7 +2,7 @@
   <div class="sci-input-container">
     <%= label_tag @name, @label %>
     <div class="datetime-picker-container">
-      <span class="fas fa-calendar-alt"></span>
+      <span class="sn-icon sn-icon-calendar"></span>
       <input type="datetime"
              name="<%= @name %>"
              data-toggle='date-time-picker'
diff --git a/app/datatables/protocol_linked_children_datatable.rb b/app/datatables/protocol_linked_children_datatable.rb
index 17ccd5d3c..2a87aaf6e 100644
--- a/app/datatables/protocol_linked_children_datatable.rb
+++ b/app/datatables/protocol_linked_children_datatable.rb
@@ -57,19 +57,19 @@ class ProtocolLinkedChildrenDatatable < CustomDatatable
   def record_html(record)
     res = ''
     res += "<ol class='breadcrumb'>"
-    res += "<li><span class='fas fa-folder'></span>&nbsp;"
+    res += "<li><span class='sn-icon sn-icon-projects'></span>&nbsp;"
     res += @controller.render_to_string(
       partial: 'search/results/partials/project_text.html.erb',
       locals: { project: record.my_module.experiment.project }
     )
     res += '</li>'
-    res += "<li><i class='fas fa-flask'></i>&nbsp;"
+    res += "<li><i class='sn-icon sn-icon-experiment'></i>&nbsp;"
     res += @controller.render_to_string(
       partial: 'search/results/partials/experiment_text.html.erb',
       locals: { experiment: record.my_module.experiment }
     )
     res += '</li>'
-    res += "<li><span class='fas fa-credit-card'></span>&nbsp;"
+    res += "<li><span class='sn-icon sn-icon-task'></span>&nbsp;"
     res += @controller.render_to_string(
       partial: 'search/results/partials/my_module_text.html.erb',
       locals: { my_module: record.my_module, link_to_page: :protocols }
diff --git a/app/datatables/teams_datatable.rb b/app/datatables/teams_datatable.rb
index a760d3946..879be566b 100644
--- a/app/datatables/teams_datatable.rb
+++ b/app/datatables/teams_datatable.rb
@@ -87,7 +87,7 @@ class TeamsDatatable < CustomDatatable
   # If user is last admin of team, don't allow
   # him/her to leave team
   def leave_team_button(record)
-    button = "<span class=\"fas fa-sign-out-alt\"></span>
+    button = "<span class=\"sn-icon sn-icon-sign-out\"></span>
               <span class=\"hidden-xs\">
                 #{I18n.t('users.settings.teams.index.leave')}
               </span>"
diff --git a/app/helpers/bootstrap_form_helper.rb b/app/helpers/bootstrap_form_helper.rb
index 229c9b88a..e7644dfc0 100644
--- a/app/helpers/bootstrap_form_helper.rb
+++ b/app/helpers/bootstrap_form_helper.rb
@@ -42,7 +42,7 @@ module BootstrapFormHelper
 
       if options[:clear]
         res << "<span class='input-group-addon' data-toggle='clear-date-time-picker' data-target='#{id}'>" \
-               "<i class='fas fa-times'></i></span></div>"
+               "<i class='sn-icon sn-icon-close-remove'></i></span></div>"
       end
 
       res << '</div></div></div></div>'
diff --git a/app/helpers/global_activities_helper.rb b/app/helpers/global_activities_helper.rb
index db2679db6..6962b3399 100644
--- a/app/helpers/global_activities_helper.rb
+++ b/app/helpers/global_activities_helper.rb
@@ -18,7 +18,7 @@ module GlobalActivitiesHelper
         end
 
       if key == 'comment' && parameters[key].strip.present?
-        parameters[key] = '<i class="fas fa-comment"></i>' + parameters[key]
+        parameters[key] = '<i class="sn-icon sn-icon-comments"></i>' + parameters[key]
       end
     end
 
diff --git a/app/helpers/results_helper.rb b/app/helpers/results_helper.rb
index 275f3b77a..6e0450693 100644
--- a/app/helpers/results_helper.rb
+++ b/app/helpers/results_helper.rb
@@ -42,17 +42,17 @@ module ResultsHelper
   end
 
   def result_icon_class(result)
-    return 'fas fa-table' unless result
+    return 'sn-icon sn-icon-tables' unless result
 
     if result.is_asset
-      'fas fa-paperclip'
+      'sn-icon sn-icon-files'
     elsif result.is_text
       'fas fa-font'
     elsif result.is_table
-      'fas fa-table'
+      'sn-icon sn-icon-tables'
     else
       # just return table for any other result
-      'fas fa-table'
+      'sn-icon sn-icon-tables'
     end
   end
 end
diff --git a/app/javascript/packs/tiny_mce.js b/app/javascript/packs/tiny_mce.js
index f67c80f8e..f7323da99 100644
--- a/app/javascript/packs/tiny_mce.js
+++ b/app/javascript/packs/tiny_mce.js
@@ -74,7 +74,7 @@ window.TinyMCE = (() => {
     const lastUpdated = $(selector).data('last-updated');
     let notificationBar;
     const restoreBtn = $('<button class="btn restore-draft-btn">Restore Draft</button>');
-    const cancelBtn = $('<span class="fas fa-times"></span>');
+    const cancelBtn = $('<span class="sn-icon sn-icon-close-remove"></span>');
 
     // Check whether we have draft stored
 
diff --git a/app/javascript/vue/bmt_filter/container.vue b/app/javascript/vue/bmt_filter/container.vue
index 27d8206e5..5e9490512 100644
--- a/app/javascript/vue/bmt_filter/container.vue
+++ b/app/javascript/vue/bmt_filter/container.vue
@@ -4,7 +4,7 @@
       <div id="savedFiltersContainer" class="dropdown saved-filters-container" @click="toggleSavedFilters">
         <div class="title" id="savedFilterDropdown">
           {{ i18n.t('repositories.show.bmt_search.title') }}
-          <i v-if="savedFilters.length" class="fas fa-caret-down"></i>
+          <i v-if="savedFilters.length" class="sn-icon sn-icon-close-hide"></i>
         </div>
         <div v-if="savedFilters.length" class="dropdown-menu saved-filters-list">
           <SavedFilterElement
@@ -18,7 +18,7 @@
         </div>
       </div>
       <button class="btn btn-light clear-filters-btn" @click="closeSavedFilters() && clearFilters()">
-        <i class="fas fa-times-circle"></i>
+        <i class="sn-icon sn-icon-close-remove"></i>
         {{ i18n.t('repositories.show.bmt_search.clear_all') }}
       </button>
     </div>
@@ -38,7 +38,7 @@
     </div>
     <div class="footer" @click="closeSavedFilters">
       <button class="btn btn-light add-filter" @click="addFilter">
-        <i class="fas fa-plus"></i>
+        <i class="sn-icon sn-icon-new-task"></i>
         {{ i18n.t('repositories.show.bmt_search.add_filter') }}
       </button>
       <button @click="fetchCIDs" class="btn btn-primary">
diff --git a/app/javascript/vue/bmt_filter/filter.vue b/app/javascript/vue/bmt_filter/filter.vue
index 297513a82..9ad431701 100644
--- a/app/javascript/vue/bmt_filter/filter.vue
+++ b/app/javascript/vue/bmt_filter/filter.vue
@@ -19,7 +19,7 @@
       </div>
       <div class="filter-remove">
         <button class="btn btn-light icon-btn " @click="$emit('filter:delete')">
-          <i class="fas fa-trash"></i>
+          <i class="sn-icon sn-icon-delete"></i>
         </button>
       </div>
       <hr>
diff --git a/app/javascript/vue/bmt_filter/saved_filter.vue b/app/javascript/vue/bmt_filter/saved_filter.vue
index beae58af0..433a9219b 100644
--- a/app/javascript/vue/bmt_filter/saved_filter.vue
+++ b/app/javascript/vue/bmt_filter/saved_filter.vue
@@ -2,7 +2,7 @@
   <div class="saved-filters-element">
     <span @click="loadFilters">{{ savedFilter.attributes.name }}</span>
     <button v-if="canManageFilters" class="btn btn-light icon-btn" @click="deleteFilter">
-      <i class="fas fa-trash"></i>
+      <i class="sn-icon sn-icon-delete"></i>
     </button>
   </div>
 </template>
diff --git a/app/javascript/vue/label_template/insert_field_dropdown.vue b/app/javascript/vue/label_template/insert_field_dropdown.vue
index 6c8e5ecc0..7f3f374d0 100644
--- a/app/javascript/vue/label_template/insert_field_dropdown.vue
+++ b/app/javascript/vue/label_template/insert_field_dropdown.vue
@@ -25,7 +25,7 @@
             @click="insertTag(field)"
         >
           {{ field.key }}
-          <i class="fas fa-plus-square"></i>
+          <i class="sn-icon sn-icon-plus-square"></i>
         </div>
         <div v-if="filteredFields.common.length" class="block-title">
           {{ i18n.t('label_templates.show.insert_dropdown.common_fields') }}
@@ -40,7 +40,7 @@
         >
           <i v-if="field.icon" :class="field.icon"></i>
           {{ field.key }}
-          <i class="fas fa-plus-square"></i>
+          <i class="sn-icon sn-icon-plus-square"></i>
         </div>
         <template v-for="(repository, index) in filteredFields.repositories">
           <div :key="`repository_${index}`" class="block-title">
@@ -55,7 +55,7 @@
             @click="insertTag(field)"
           >
             {{ field.key }}
-            <i class="fas fa-plus-square"></i>
+            <i class="sn-icon sn-icon-plus-square"></i>
           </div>
         </template>
         <div class="no-results" v-if="this.noResults">
diff --git a/app/javascript/vue/navigation/notifications/notifications_flyout.vue b/app/javascript/vue/navigation/notifications/notifications_flyout.vue
index d4a9b9f93..04cbe6421 100644
--- a/app/javascript/vue/navigation/notifications/notifications_flyout.vue
+++ b/app/javascript/vue/navigation/notifications/notifications_flyout.vue
@@ -2,7 +2,7 @@
   <div class="sci--navigation--notificaitons-flyout">
     <div class="sci--navigation--notificaitons-flyout-title">
       {{ i18n.t('nav.notifications.title') }}
-      <i class="fas fa-times" @click="$emit('close')"></i>
+      <i class="sn-icon sn-icon-close-remove" @click="$emit('close')"></i>
     </div>
     <div class="sci--navigation--notificaitons-flyout-tabs">
       <div class="sci--navigation--notificaitons-flyout-tab"
diff --git a/app/javascript/vue/navigation/top_menu.vue b/app/javascript/vue/navigation/top_menu.vue
index aad31e8ce..e22f39860 100644
--- a/app/javascript/vue/navigation/top_menu.vue
+++ b/app/javascript/vue/navigation/top_menu.vue
@@ -18,11 +18,11 @@
     </div>
     <div v-if="user" class="sci--navigation--top-menu-search left-icon sci-input-container" :class="{'disabled' : !currentTeam}">
       <input type="text" class="sci-input-field" :placeholder="i18n.t('nav.search')" @change="searchValue"/>
-      <i class="fas fa-search"></i>
+      <i class="sn-icon sn-icon-search"></i>
     </div>
     <div v-if="user" class="dropdown">
       <button class="btn btn-light icon-btn" data-toggle="dropdown">
-        <i class="fas fa-question-circle"></i>
+        <i class="sn-icon sn-icon-help"></i>
       </button>
       <ul v-if="user" class="dropdown-menu dropdown-menu-right">
         <li v-for="(item, i) in helpMenu" :key="i">
@@ -34,7 +34,7 @@
     </div>
     <div v-if="user" class="dropdown">
       <button class="btn btn-light icon-btn" data-toggle="dropdown">
-        <i class="fas fa-cog"></i>
+        <i class="sn-icon sn-icon-settings"></i>
       </button>
       <ul class="dropdown-menu dropdown-menu-right">
         <li v-for="(item, i) in settingsMenu" :key="i">
@@ -55,7 +55,7 @@
               :data-unseen="unseenNotificationsCount"
               data-toggle="dropdown"
               @click="notificationsOpened = !notificationsOpened">
-        <i class="fas fa-bell"></i>
+        <i class="sn-icon sn-icon-notifications"></i>
       </button>
       <div v-if="notificationsOpened" class="sci--navigation--notificaitons-flyout-backdrop" @click="notificationsOpened = false"></div>
       <NotificationsFlyout
diff --git a/app/javascript/vue/protocol/attachments.vue b/app/javascript/vue/protocol/attachments.vue
index e4eaddbd9..ec91b07a4 100644
--- a/app/javascript/vue/protocol/attachments.vue
+++ b/app/javascript/vue/protocol/attachments.vue
@@ -17,7 +17,7 @@
             <li class="divider-label">{{ i18n.t("protocols.steps.attachments.add") }}</li>
             <li>
               <a class="action-link attachments-view-mode" @click="$emit('attachments:openFileModal')">
-                <i class="fas fa-upload"></i>
+                <i class="sn-icon sn-icon-import"></i>
                 {{ i18n.t('protocols.steps.attachments.menu.file_from_pc') }}
               </a>
             </li>
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index f98c61746..3abc04199 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -19,11 +19,11 @@
              @keyup.enter="addStep(steps.length)"
              @click="addStep(steps.length)"
              tabindex="0">
-              <span class="fas fa-plus" aria-hidden="true"></span>
+              <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
               <span>{{ i18n.t("protocols.steps.new_step") }}</span>
           </a>
           <button class="btn btn-secondary" data-toggle="modal" data-target="#print-protocol-modal" tabindex="0">
-            <span class="fas fa-print" aria-hidden="true"></span>
+            <span class="sn-icon sn-icon-printer" aria-hidden="true"></span>
             <span>{{ i18n.t("protocols.print.button") }}</span>
           </button>
           <ProtocolOptions
@@ -104,11 +104,11 @@
         <div id="protocol-steps-container" :class=" inRepository ? 'protocol-steps collapse in' : ''">
           <div v-if="steps.length > 0" class="protocol-step-actions">
             <button class="btn btn-light" @click="collapseSteps" tabindex="0">
-              <span class="fas fa-caret-up"></span>
+              <span class="sn-icon sn-icon-open-show"></span>
               {{ i18n.t("protocols.steps.collapse_label") }}
             </button>
             <button class="btn btn-light" @click="expandSteps" tabindex="0">
-              <span class="fas fa-caret-down"></span>
+              <span class="sn-icon sn-icon-close-hide"></span>
               {{ i18n.t("protocols.steps.expand_label") }}
             </button>
             <a v-if="urls.reorder_steps_url"
@@ -126,7 +126,7 @@
             <template v-for="(step, index) in steps">
               <div class="step-block" :key="step.id">
                 <div v-if="index > 0 && urls.add_step_url" class="insert-step" @click="addStep(index)">
-                  <i class="fas fa-plus"></i>
+                  <i class="sn-icon sn-icon-new-task"></i>
                 </div>
                 <Step
                   :step.sync="steps[index]"
@@ -143,7 +143,7 @@
             </template>
           </div>
           <button v-if="(steps.length > 0 || inRepository) && urls.add_step_url" :class="!inRepository ? 'btn btn-primary' : 'btn btn-secondary'" @click="addStep(steps.length)">
-            <i class="fas fa-plus"></i>
+            <i class="sn-icon sn-icon-new-task"></i>
             {{ i18n.t("protocols.steps.new_step") }}
           </button>
         </div>
diff --git a/app/javascript/vue/protocol/modals/reorderable_items_modal.vue b/app/javascript/vue/protocol/modals/reorderable_items_modal.vue
index c55cdc4a6..c4acd87eb 100644
--- a/app/javascript/vue/protocol/modals/reorderable_items_modal.vue
+++ b/app/javascript/vue/protocol/modals/reorderable_items_modal.vue
@@ -18,7 +18,7 @@
           >
             <div v-for="(item, index) in reorderedItems" :key="item.id" class="step-element-header">
               <div class="step-element-grip step-element-grip--draggable">
-                <i class="fas fa-grip-vertical"></i>
+                <i class="sn-icon sn-icon-drag"></i>
               </div>
               <div class="step-element-name">
                 <strong v-if="includeNumbers" class="step-element-number">{{ index + 1 }}</strong>
diff --git a/app/javascript/vue/protocol/protocolMetadata.vue b/app/javascript/vue/protocol/protocolMetadata.vue
index 1fae59c5f..9c53ac91c 100644
--- a/app/javascript/vue/protocol/protocolMetadata.vue
+++ b/app/javascript/vue/protocol/protocolMetadata.vue
@@ -14,7 +14,7 @@
       </div>
       <div class="actions-block">
         <a class="btn btn-light icon-btn pull-right" :href="protocol.attributes.urls.print_protocol_url" target="_blank">
-          <span class="fas fa-print" aria-hidden="true"></span>
+          <span class="sn-icon sn-icon-printer" aria-hidden="true"></span>
         </a>
         <button class="btn btn-light" @click="openVersionsModal">{{ i18n.t("protocols.header.versions") }}</button>
         <button v-if="protocol.attributes.urls.publish_url" @click="$emit('publish')" class="btn btn-primary">{{ i18n.t("protocols.header.publish") }}</button>
diff --git a/app/javascript/vue/protocol/protocolOptions.vue b/app/javascript/vue/protocol/protocolOptions.vue
index 419023d34..c0306f181 100644
--- a/app/javascript/vue/protocol/protocolOptions.vue
+++ b/app/javascript/vue/protocol/protocolOptions.vue
@@ -10,7 +10,7 @@
         aria-expanded="true"
         tabindex="0"
       >
-        <span class="fas fa-cog"></span>
+        <span class="sn-icon sn-icon-settings"></span>
         <span>{{ i18n.t("my_modules.protocol.options_dropdown.title") }}</span>
         <span class="caret"></span>
       </button>
@@ -24,7 +24,7 @@
             data-action="load-from-repository"
             @click="loadProtocol"
           >
-            <span class="fas fa-edit"></span>
+            <span class="sn-icon sn-icon-protocols-templates"></span>
             <span>{{ i18n.t("my_modules.protocol.options_dropdown.load_from_repo") }}</span>
           </a>
         </li>
@@ -46,7 +46,7 @@
             :href="protocol.attributes.urls.export_url"
             :class="{ disabled: !protocol.attributes.urls.export_url }"
           >
-            <span class="fas fa-upload"></span>
+            <span class="sn-icon sn-icon-import"></span>
             <span>{{
               i18n.t("my_modules.protocol.options_dropdown.export")
             }}</span>
@@ -82,7 +82,7 @@
             data-action="revert"
             @click="revertProtocol"
           >
-            <span class="fas fa-undo"></span>
+            <span class="sn-icon sn-icon-restore"></span>
             <span>{{
               i18n.t("my_modules.protocol.options_dropdown.revert_protocol")
             }}</span>
@@ -93,7 +93,7 @@
             data-turbolinks="false"
             @click.prevent="openStepsDeletingModal()"
           >
-            <span class="fas fa-trash"></span>
+            <span class="sn-icon sn-icon-delete"></span>
             <span>{{
               i18n.t("my_modules.protocol.options_dropdown.delete_steps")
             }}</span>
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index a0dba02be..0ddcee6ae 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -67,11 +67,11 @@
               {{ i18n.t('protocols.steps.insert.title') }}
             </li>
             <li class="action" @click="createElement('table')">
-              <i class="fas fa-table"></i>
+              <i class="sn-icon sn-icon-tables"></i>
               {{ i18n.t('protocols.steps.insert.table') }}
             </li>
             <li class="action dropdown-submenu-item">
-              <i class="fas fa-table"></i>
+              <i class="sn-icon sn-icon-tables"></i>
               {{ i18n.t('protocols.steps.insert.well_plate') }}
               <span class="caret"></span>
 
@@ -82,7 +82,7 @@
               </ul>
             </li>
             <li class="action"  @click="createElement('checklist')">
-              <i class="fas fa-list"></i>
+              <i class="sn-icon sn-icon-activities"></i>
               {{ i18n.t('protocols.steps.insert.checklist') }}
             </li>
             <li class="action"  @click="createElement('text')">
@@ -90,7 +90,7 @@
               {{ i18n.t('protocols.steps.insert.text') }}
             </li>
             <li v-if="attachmentsReady" class="action"  @click="showFileModal = true">
-              <i class="fas fa-paperclip"></i>
+              <i class="sn-icon sn-icon-files"></i>
               {{ i18n.t('protocols.steps.insert.attachment') }}
             </li>
           </ul>
@@ -103,7 +103,7 @@
            data-object-type="Step"
            @click="openCommentsSidebar"
            :data-object-id="step.id">
-          <i class="fas fa-comment"></i>
+          <i class="sn-icon sn-icon-comments"></i>
           <span class="comments-counter"
                 :id="`comment-count-${step.id}`"
                 :class="{'unseen': step.attributes.unseen_comments}"
@@ -114,7 +114,7 @@
         <div v-if="urls.update_url" class="step-actions-container">
           <div ref="actionsDropdownButton" class="dropdown">
             <button class="btn btn-light dropdown-toggle insert-button" type="button" :id="'stepOptionsMenu_' + step.id" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="true">
-              <i class="fas fa-ellipsis-h"></i>
+              <i class="sn-icon sn-icon-more-hori"></i>
             </button>
             <ul ref="actionsDropdown" class="dropdown-menu dropdown-menu-right insert-element-dropdown" :aria-labelledby="'stepOptionsMenu_' + step.id">
               <li class="title">
@@ -125,11 +125,11 @@
                 {{ i18n.t('protocols.steps.options_dropdown.rearrange') }}
               </li>
               <li v-if="urls.duplicate_step_url" class="action" @click="duplicateStep">
-                <i class="fas fa-clone"></i>
+                <i class="sn-icon sn-icon-duplicate"></i>
                 {{ i18n.t('protocols.steps.options_dropdown.duplicate') }}
               </li>
               <li v-if="urls.delete_url" class="action" @click="showDeleteModal">
-                <i class="fas fa-trash"></i>
+                <i class="sn-icon sn-icon-delete"></i>
                 {{ i18n.t('protocols.steps.options_dropdown.delete') }}
               </li>
             </ul>
diff --git a/app/javascript/vue/protocol/step_attachments/context_menu.vue b/app/javascript/vue/protocol/step_attachments/context_menu.vue
index e6820915a..e7c81c545 100644
--- a/app/javascript/vue/protocol/step_attachments/context_menu.vue
+++ b/app/javascript/vue/protocol/step_attachments/context_menu.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="dropdown asset-context-menu" ref="menu">
     <button class="btn btn-light dropdown-toggle icon-btn" type="button" id="dropdownAssetContextMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-      <i class="fas fa-ellipsis-h"></i>
+      <i class="sn-icon sn-icon-more-hori"></i>
     </button>
 
     <ul class="dropdown-menu dropdown-menu-right"
@@ -43,13 +43,13 @@
            :data-image-mime-type="attachment.attributes.image_context.type"
            :data-image-start-edit-url="attachment.attributes.urls.start_edit_image"
         >
-          <span class="fas fa-pencil-alt"></span>
+          <span class="sn-icon sn-icon-edit"></span>
           {{ i18n.t('assets.file_preview.edit_in_scinote') }}
         </a>
       </li>
       <li>
         <a :href="attachment.attributes.urls.download" data-turbolinks="false">
-          <span class="fas fa-download"></span>
+          <span class="sn-icon sn-icon-export"></span>
           {{ i18n.t('Download') }}
         </a>
       </li>
@@ -71,7 +71,7 @@
         <li role="separator" class="divider"></li>
         <li>
           <a @click.prevent.stop="deleteModal = true">
-            <i class="fas fa-trash"></i>
+            <i class="sn-icon sn-icon-delete"></i>
             {{ i18n.t("assets.context_menu.delete") }}
           </a>
         </li>
diff --git a/app/javascript/vue/protocol/step_attachments/file_modal.vue b/app/javascript/vue/protocol/step_attachments/file_modal.vue
index 1cbd529df..6395e0c29 100644
--- a/app/javascript/vue/protocol/step_attachments/file_modal.vue
+++ b/app/javascript/vue/protocol/step_attachments/file_modal.vue
@@ -22,7 +22,7 @@
           >
             <input type="file" class="hidden" ref=fileSelector @change="uploadFiles" multiple />
             <div class="title btn btn-light" @click="$refs.fileSelector.click()" tabindex="0" @keyup.enter="$refs.fileSelector.click()">
-              <i class="fas fa-upload"></i>
+              <i class="sn-icon sn-icon-import"></i>
               {{ i18n.t("protocols.steps.attachments.file_modal.drag_zone_title") }}
             </div>
             <div class="description">
diff --git a/app/javascript/vue/protocol/step_attachments/uploading.vue b/app/javascript/vue/protocol/step_attachments/uploading.vue
index 6c8c40d06..b5e71e532 100644
--- a/app/javascript/vue/protocol/step_attachments/uploading.vue
+++ b/app/javascript/vue/protocol/step_attachments/uploading.vue
@@ -17,7 +17,7 @@
       {{ attachment.error }}
     </div>
     <div v-if="attachment.error" class="remove-button" @click="$emit('attachment:delete')">
-      <i class="fas fa-times"></i>
+      <i class="sn-icon sn-icon-close-remove"></i>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/protocol/step_elements/checklist.vue b/app/javascript/vue/protocol/step_elements/checklist.vue
index 03d07a818..375f8a39e 100644
--- a/app/javascript/vue/protocol/step_elements/checklist.vue
+++ b/app/javascript/vue/protocol/step_elements/checklist.vue
@@ -26,10 +26,10 @@
           <i class="fas fa-pen"></i>
         </button>
         <button v-if="element.attributes.orderable.urls.duplicate_url" class="btn icon-btn btn-light" tabindex="0" @click="duplicateElement">
-          <i class="fas fa-clone"></i>
+          <i class="sn-icon sn-icon-duplicate"></i>
         </button>
         <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="0">
-          <i class="fas fa-trash"></i>
+          <i class="sn-icon sn-icon-delete"></i>
         </button>
       </div>
     </div>
@@ -66,7 +66,7 @@
            tabindex="0"
            @keyup.enter="addItem"
            @click="addItem">
-        <i class="fas fa-plus"></i>
+        <i class="sn-icon sn-icon-new-task"></i>
         {{ i18n.t('protocols.steps.insert.checklist_item') }}
       </div>
     </div>
diff --git a/app/javascript/vue/protocol/step_elements/checklistItem.vue b/app/javascript/vue/protocol/step_elements/checklistItem.vue
index 122f7db59..61412cd64 100644
--- a/app/javascript/vue/protocol/step_elements/checklistItem.vue
+++ b/app/javascript/vue/protocol/step_elements/checklistItem.vue
@@ -2,7 +2,7 @@
   <div class="step-checklist-item" :class="{ 'step-element--locked': !checklistItem.attributes.isNew && !(updateUrl || toggleUrl) }">
     <div class="step-element-header" :class="{ 'locked': locked || editingText, 'editing-name': editingText }">
       <div v-if="reorderChecklistItemUrl" class="step-element-grip step-element-grip--draggable" :class="{ 'step-element-grip--disabled': !draggable }">
-        <i class="fas fa-grip-vertical"></i>
+        <i class="sn-icon sn-icon-drag"></i>
       </div>
       <div v-else class="step-element-grip-placeholder"></div>
       <div class="step-element-name" :class="{ 'done': checklistItem.attributes.checked }">
@@ -43,7 +43,7 @@
           <i class="fas fa-pen"></i>
         </button>
         <button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="0">
-          <i class="fas fa-trash"></i>
+          <i class="sn-icon sn-icon-delete"></i>
         </button>
       </div>
     </div>
diff --git a/app/javascript/vue/protocol/step_elements/table.vue b/app/javascript/vue/protocol/step_elements/table.vue
index 7cc7b3b4f..36dc3f13c 100644
--- a/app/javascript/vue/protocol/step_elements/table.vue
+++ b/app/javascript/vue/protocol/step_elements/table.vue
@@ -23,10 +23,10 @@
           <i class="fas fa-pen"></i>
         </button>
         <button v-if="element.attributes.orderable.urls.duplicate_url" class="btn icon-btn btn-light" tabindex="0" @click="duplicateElement">
-          <i class="fas fa-clone"></i>
+          <i class="sn-icon sn-icon-duplicate"></i>
         </button>
         <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="0">
-          <i class="fas fa-trash"></i>
+          <i class="sn-icon sn-icon-delete"></i>
         </button>
       </div>
     </div>
@@ -50,7 +50,7 @@
         <i class="fas fa-check"></i>
       </button>
       <button class="btn icon-btn btn-light" @click="disableTableEdit">
-        <i class="fas fa-times"></i>
+        <i class="sn-icon sn-icon-close-remove"></i>
       </button>
     </div>
     <deleteElementModal v-if="confirmingDelete" @confirm="deleteElement" @cancel="closeDeleteModal"/>
diff --git a/app/javascript/vue/protocol/step_elements/text.vue b/app/javascript/vue/protocol/step_elements/text.vue
index 396d11699..fbdd66fd3 100644
--- a/app/javascript/vue/protocol/step_elements/text.vue
+++ b/app/javascript/vue/protocol/step_elements/text.vue
@@ -9,10 +9,10 @@
         <i class="fas fa-pen"></i>
       </button>
       <button v-if="element.attributes.orderable.urls.duplicate_url" class="btn icon-btn btn-light" tabindex="0" @click="duplicateElement">
-        <i class="fas fa-clone"></i>
+        <i class="sn-icon sn-icon-duplicate"></i>
       </button>
       <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="0">
-        <i class="fas fa-trash"></i>
+        <i class="sn-icon sn-icon-delete"></i>
       </button>
     </div>
     <Tinymce
diff --git a/app/javascript/vue/repository_filter/container.vue b/app/javascript/vue/repository_filter/container.vue
index 0b3a3f080..313043b7d 100644
--- a/app/javascript/vue/repository_filter/container.vue
+++ b/app/javascript/vue/repository_filter/container.vue
@@ -6,7 +6,7 @@
           <span class="filter-name">
             {{ filterName || i18n.t('repositories.show.filters.title') }}
           </span>
-          <i v-if="savedFilters.length" class="fas fa-caret-down"></i>
+          <i v-if="savedFilters.length" class="sn-icon sn-icon-close-hide"></i>
         </div>
         <div v-if="savedFilters.length" class="dropdown-menu saved-filters-list">
           <SavedFilterElement
@@ -32,7 +32,7 @@
     <div class="footer">
       <div id="filtersColumnsDropdown" class="dropup filters-columns-dropdown" @click="toggleColumnsFilters">
         <button class="btn btn-secondary add-filter prevent-shrink" >
-          <i class="fas fa-plus"></i>
+          <i class="sn-icon sn-icon-new-task"></i>
           {{ i18n.t('repositories.show.filters.add_filter') }}
         </button>
         <div class="dropdown-menu filters-columns-list">
diff --git a/app/javascript/vue/repository_filter/filter.vue b/app/javascript/vue/repository_filter/filter.vue
index 78115c07b..bdb272ed2 100644
--- a/app/javascript/vue/repository_filter/filter.vue
+++ b/app/javascript/vue/repository_filter/filter.vue
@@ -11,7 +11,7 @@
       </div>
       <div class="filter-remove">
         <button class="btn btn-light icon-btn" @click="$emit('filter:delete')">
-          <i class="fas fa-trash"></i>
+          <i class="sn-icon sn-icon-delete"></i>
         </button>
       </div>
     </div>
diff --git a/app/javascript/vue/repository_filter/saved_filter.vue b/app/javascript/vue/repository_filter/saved_filter.vue
index 5c5e117a0..1d430cf36 100644
--- a/app/javascript/vue/repository_filter/saved_filter.vue
+++ b/app/javascript/vue/repository_filter/saved_filter.vue
@@ -2,7 +2,7 @@
   <div class="saved-filters-element">
     <span class="saved-filter-name" @click="loadFilters">{{ savedFilter.attributes.name }}</span>
     <button v-if="canManageFilters" class="btn btn-light icon-btn" @click="deleteFilter">
-      <i :title="i18n.t('repositories.show.filters.delete_saved_filter')" class="fas fa-trash"></i>
+      <i :title="i18n.t('repositories.show.filters.delete_saved_filter')" class="sn-icon sn-icon-delete"></i>
     </button>
   </div>
 </template>
diff --git a/app/javascript/vue/repository_search/container.vue b/app/javascript/vue/repository_search/container.vue
index ba5c8c692..bf9acd806 100644
--- a/app/javascript/vue/repository_search/container.vue
+++ b/app/javascript/vue/repository_search/container.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center mr-3 flex-nowrap">
     <button v-if="!searchOpened" class="btn btn-light icon-btn" @click="openSearch">
-      <i class="fas fa-search"></i>
+      <i class="sn-icon sn-icon-search"></i>
     </button>
     <div v-if="searchOpened || barcodeSearchOpened" class="w-52 flex">
       <div v-if="searchOpened" class="sci-input-container right-icon">
@@ -13,7 +13,7 @@
           @keyup="setValue"
           @blur="closeSearch"
         />
-        <i class="fas fa-search"></i>
+        <i class="sn-icon sn-icon-search"></i>
       </div>
       <div v-if="barcodeSearchOpened" class="sci-input-container right-icon ml-2">
         <input
@@ -24,11 +24,11 @@
           @change="setBarcodeValue"
           @blur="closeBarcodeSearch"
         />
-        <img class="barcode-scanner" src="/images/icon_small/barcode.png"/>
+        <i class='sn-icon sn-icon-barcode barcode-scanner'></i>
       </div>
     </div>
     <button v-if="!barcodeSearchOpened" class="btn btn-light icon-btn ml-2" @click="openBarcodeSearch">
-      <img class="barcode-scanner" src="/images/icon_small/barcode.png"/>
+      <i class='sn-icon sn-icon-barcode barcode-scanner'></i>
     </button>
   </div>
 </template>
diff --git a/app/javascript/vue/shared/date_picker.vue b/app/javascript/vue/shared/date_picker.vue
index e96d2c406..31338dda5 100644
--- a/app/javascript/vue/shared/date_picker.vue
+++ b/app/javascript/vue/shared/date_picker.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="datepicker sci-input-container right-icon">
       <input @change="update" type="datetime" class="form-control calendar-input sci-input-field" :id="this.selectorId" placeholder="" />
-      <i class="fas fa-calendar-alt"></i>
+      <i class="sn-icon sn-icon-calendar"></i>
   </div>
 </template>
 
diff --git a/app/javascript/vue/shared/inline_edit.vue b/app/javascript/vue/shared/inline_edit.vue
index d624f096c..1371be412 100644
--- a/app/javascript/vue/shared/inline_edit.vue
+++ b/app/javascript/vue/shared/inline_edit.vue
@@ -24,7 +24,7 @@
         <i class="fas fa-check"></i>
       </div>
       <div class="sci-inline-edit__control btn btn-light icon-btn" @mousedown="cancelEdit">
-        <i class="fas fa-times"></i>
+        <i class="sn-icon sn-icon-close-remove"></i>
       </div>
     </template>
   </div>
diff --git a/app/javascript/vue/shared/pdf_viewer.vue b/app/javascript/vue/shared/pdf_viewer.vue
index dbe96c175..5fef10b1f 100644
--- a/app/javascript/vue/shared/pdf_viewer.vue
+++ b/app/javascript/vue/shared/pdf_viewer.vue
@@ -19,7 +19,7 @@
         <span class="total-page">...</span>
       </div>
       <button class="btn btn-light icon-btn next-page">
-        <i class="fas fa-arrow-right"></i>
+        <i class="sn-icon sn-icon-move"></i>
       </button>
       <div class="divider"></div>
       <div class="zoom-page">
@@ -35,10 +35,10 @@
       </div>
       <div class="sci-btn-group">
         <button class="btn btn-light icon-btn zoom-out">
-          <i class="fas fa-search-minus"></i>
+          <i class="sn-icon sn-icon-search-minus"></i>
         </button>
         <button class="btn btn-light icon-btn zoom-in">
-          <i class="fas fa-search-plus"></i>
+          <i class="sn-icon sn-icon-search-plus"></i>
         </button>
       </div>
     </div>
diff --git a/app/javascript/vue/shared/time_picker.vue b/app/javascript/vue/shared/time_picker.vue
index ded2203a7..bf524dd1f 100644
--- a/app/javascript/vue/shared/time_picker.vue
+++ b/app/javascript/vue/shared/time_picker.vue
@@ -7,7 +7,7 @@
            data-mask-type="time"
            v-model="value"
            placeholder="HH:mm"/>
-    <i class="fas fa-clock"></i>
+    <i class="sn-icon sn-icon-created"></i>
   </div>
 </template>
 
diff --git a/app/javascript/vue/shared/tinymce.vue b/app/javascript/vue/shared/tinymce.vue
index 6d622b9ee..0e17961cf 100644
--- a/app/javascript/vue/shared/tinymce.vue
+++ b/app/javascript/vue/shared/tinymce.vue
@@ -5,7 +5,7 @@
         <input type="hidden" name="_method" value="patch">
         <div class="hidden tinymce-cancel-button tox-mbtn" tabindex="-1">
         <button type="button" tabindex="-1">
-          <span class="fas fa-times"></span>
+          <span class="sn-icon sn-icon-close-remove"></span>
           <span class="mce-txt">{{ i18n.t('general.cancel') }}</span>
         </button>
         </div>
diff --git a/app/services/toolbars/experiments_service.rb b/app/services/toolbars/experiments_service.rb
index bf820c8a9..710829d72 100644
--- a/app/services/toolbars/experiments_service.rb
+++ b/app/services/toolbars/experiments_service.rb
@@ -38,7 +38,7 @@ module Toolbars
       {
         name: 'restore',
         label: I18n.t('experiments.toolbar.restore_button'),
-        icon: 'fas fa-undo',
+        icon: 'sn-icon sn-icon-restore',
         button_class: 'restore-experiments-btn',
         path: restore_group_project_experiments_path(project_id: @experiments.first.project_id),
         type: :request,
@@ -56,7 +56,7 @@ module Toolbars
       {
         name: 'edit',
         label: I18n.t('experiments.index.edit_option'),
-        icon: 'fa fa-pencil-alt',
+        icon: 'sn-icon sn-icon-edit',
         button_class: 'edit-btn',
         path: edit_experiment_path(experiment),
         type: 'remote-modal'
@@ -96,7 +96,7 @@ module Toolbars
       {
         name: 'move',
         label: I18n.t('experiments.toolbar.move_button'),
-        icon: 'fas fa-arrow-right',
+        icon: 'sn-icon sn-icon-move',
         button_class: 'move-experiments-btn',
         path: move_modal_experiments_path(id: experiment.id),
         type: 'remote-modal'
@@ -113,7 +113,7 @@ module Toolbars
       {
         name: 'duplicate',
         label: I18n.t('experiments.toolbar.duplicate_button'),
-        icon: 'fas fa-copy',
+        icon: 'sn-icon sn-icon-duplicate',
         button_class: 'clone-experiment-btn',
         path: clone_modal_experiments_path(id: experiment.id),
         type: 'remote-modal',
@@ -127,7 +127,7 @@ module Toolbars
       {
         name: 'archive',
         label: I18n.t('experiments.toolbar.archive_button'),
-        icon: 'fas fa-archive',
+        icon: 'sn-icon sn-icon-archive',
         button_class: 'archive-experiments-btn',
         path: archive_group_project_experiments_path(project_id: @experiments.first.project_id),
         type: :request,
diff --git a/app/services/toolbars/label_templates_service.rb b/app/services/toolbars/label_templates_service.rb
index fe69c021f..1f1e0f61c 100644
--- a/app/services/toolbars/label_templates_service.rb
+++ b/app/services/toolbars/label_templates_service.rb
@@ -39,7 +39,7 @@ module Toolbars
       {
         name: 'edit',
         label: I18n.t('label_templates.index.toolbar.edit'),
-        icon: 'fas fa-pencil-alt',
+        icon: 'sn-icon sn-icon-edit',
         path: label_template_path(@label_templates.first),
         type: :link
       }
@@ -55,7 +55,7 @@ module Toolbars
       {
         name: 'set_as_default',
         label: I18n.t("label_templates.index.toolbar.set_#{@label_templates.first.type}_default"),
-        icon: 'fas fa-thumbtack',
+        icon: 'sn-icon sn-icon-dashboard',
         button_id: 'setZplDefaultLabelTemplate',
         type: :legacy
       }
@@ -69,7 +69,7 @@ module Toolbars
       {
         name: 'duplicate',
         label: I18n.t('label_templates.index.toolbar.duplicate'),
-        icon: 'fas fa-copy',
+        icon: 'sn-icon sn-icon-duplicate',
         button_id: 'duplicateLabelTemplate',
         path: duplicate_label_templates_path,
         type: :legacy
@@ -86,7 +86,7 @@ module Toolbars
       {
         name: 'delete',
         label: I18n.t('label_templates.index.toolbar.delete'),
-        icon: 'fas fa-trash',
+        icon: 'sn-icon sn-icon-delete',
         button_id: 'deleteLabelTemplate',
         type: :legacy
       }
diff --git a/app/services/toolbars/my_modules_service.rb b/app/services/toolbars/my_modules_service.rb
index 60fb7fee7..98555b0f2 100644
--- a/app/services/toolbars/my_modules_service.rb
+++ b/app/services/toolbars/my_modules_service.rb
@@ -40,7 +40,7 @@ module Toolbars
       {
         name: 'restore',
         label: I18n.t('experiments.table.toolbar.restore'),
-        icon: 'fas fa-undo',
+        icon: 'sn-icon sn-icon-restore',
         button_class: 'restore-my-modules-btn',
         button_id: 'restoreTask',
         path: restore_my_modules_experiment_path(experiment),
@@ -58,7 +58,7 @@ module Toolbars
       {
         name: 'edit',
         label: I18n.t('experiments.table.toolbar.edit'),
-        icon: 'fa fa-pencil-alt',
+        icon: 'sn-icon sn-icon-edit',
         button_id: 'editTask',
         type: :legacy
       }
@@ -97,7 +97,7 @@ module Toolbars
       {
         name: 'move',
         label: I18n.t('experiments.table.toolbar.move'),
-        icon: 'fas fa-arrow-right',
+        icon: 'sn-icon sn-icon-move',
         button_id: 'moveTask',
         button_class: 'move-my-modules-btn',
         type: :legacy
@@ -113,7 +113,7 @@ module Toolbars
       {
         name: 'duplicate',
         label: I18n.t('experiments.table.toolbar.duplicate'),
-        icon: 'fas fa-copy',
+        icon: 'sn-icon sn-icon-duplicate',
         button_id: 'duplicateTasks',
         button_class: 'duplicate-tasks-btn',
         path: batch_clone_my_modules_experiment_path(experiment),
@@ -129,7 +129,7 @@ module Toolbars
       {
         name: 'archive',
         label: I18n.t('experiments.table.toolbar.archive'),
-        icon: 'fas fa-archive',
+        icon: 'sn-icon sn-icon-archive',
         button_id: 'archiveTask',
         path: archive_my_modules_experiment_path(experiment),
         type: :legacy
diff --git a/app/services/toolbars/projects_service.rb b/app/services/toolbars/projects_service.rb
index 975da0148..98594b3c1 100644
--- a/app/services/toolbars/projects_service.rb
+++ b/app/services/toolbars/projects_service.rb
@@ -56,7 +56,7 @@ module Toolbars
         {
           name: 'edit',
           label: I18n.t('projects.index.edit_option'),
-          icon: 'fas fa-pencil-alt',
+          icon: 'sn-icon sn-icon-edit',
           button_class: 'edit-btn',
           path: edit_project_path(project),
           type: :legacy
@@ -69,7 +69,7 @@ module Toolbars
         {
           name: 'edit',
           label: I18n.t('projects.index.edit_option'),
-          icon: 'fas fa-pencil-alt',
+          icon: 'sn-icon sn-icon-edit',
           button_class: 'edit-btn',
           path: edit_project_folder_path(project_folder),
           type: :legacy
@@ -95,7 +95,7 @@ module Toolbars
       {
         name: 'access',
         label: I18n.t('general.access'),
-        icon: 'fas fa-door-open',
+        icon: 'sn-icon sn-icon-project-member-access',
         button_class: 'access-btn',
         path: path,
         type: 'remote-modal'
@@ -108,7 +108,7 @@ module Toolbars
       {
         name: 'move',
         label: I18n.t('projects.index.move_button'),
-        icon: 'fas fa-arrow-right',
+        icon: 'sn-icon sn-icon-move',
         button_class: 'move-projects-btn',
         path: move_to_modal_project_folders_path,
         type: :legacy
@@ -121,7 +121,7 @@ module Toolbars
       {
         name: 'export',
         label: I18n.t('projects.export_projects.export_button'),
-        icon: 'fas fa-file-export',
+        icon: 'sn-icon sn-icon-export',
         button_class: 'export-projects-btn',
         path: export_projects_modal_team_path(@items.first.team),
         type: :legacy
@@ -136,7 +136,7 @@ module Toolbars
       {
         name: 'archive',
         label: I18n.t('projects.index.archive_button'),
-        icon: 'fas fa-archive',
+        icon: 'sn-icon sn-icon-archive',
         button_class: 'archive-projects-btn',
         path: archive_group_projects_path,
         type: :request,
@@ -152,7 +152,7 @@ module Toolbars
       {
         name: 'restore',
         label: I18n.t('projects.index.restore_button'),
-        icon: 'fas fa-undo',
+        icon: 'sn-icon sn-icon-restore',
         button_class: 'restore-projects-btn',
         path: restore_group_projects_path,
         type: :request,
@@ -168,7 +168,7 @@ module Toolbars
       {
         name: 'delete_folders',
         label: I18n.t('general.delete'),
-        icon: 'fas fa-trash',
+        icon: 'sn-icon sn-icon-delete',
         button_class: 'delete-folders-btn',
         path: destroy_modal_project_folders_path(project_folder_ids: @items.map(&:id)),
         type: 'remote-modal'
@@ -187,7 +187,7 @@ module Toolbars
       {
         name: 'comments',
         label: I18n.t('Comments'),
-        icon: 'fas fa-comment',
+        icon: 'sn-icon sn-icon-comments',
         button_class: 'open-comments-sidebar',
         item_type: 'Project',
         item_id: project.id,
@@ -209,7 +209,7 @@ module Toolbars
       {
         name: 'activities',
         label: I18n.t('nav.label.activities'),
-        icon: 'fas fa-list',
+        icon: 'sn-icon sn-icon-activities',
         button_class: 'project-activities-btn',
         path: "/global_activities?#{activity_url_params}",
         type: :link
diff --git a/app/services/toolbars/protocols_service.rb b/app/services/toolbars/protocols_service.rb
index 3bffcb7c8..96ce339b8 100644
--- a/app/services/toolbars/protocols_service.rb
+++ b/app/services/toolbars/protocols_service.rb
@@ -53,7 +53,7 @@ module Toolbars
       {
         name: 'duplicate',
         label: I18n.t('protocols.index.toolbar.duplicate'),
-        icon: 'fas fa-copy',
+        icon: 'sn-icon sn-icon-duplicate',
         path: clone_protocols_path,
         type: :request,
         request_method: :post
@@ -74,7 +74,7 @@ module Toolbars
       {
         name: 'access',
         label: I18n.t('protocols.index.toolbar.access'),
-        icon: 'fas fa-door-open',
+        icon: 'sn-icon sn-icon-project-member-access',
         button_class: 'access-btn',
         path: path,
         type: 'remote-modal'
@@ -89,7 +89,7 @@ module Toolbars
       {
         name: 'export',
         label: I18n.t('protocols.index.toolbar.export'),
-        icon: 'fas fa-download',
+        icon: 'sn-icon sn-icon-export',
         path: export_protocols_path(protocol_ids: @protocols.pluck(:id)),
         type: :download
       }
@@ -101,7 +101,7 @@ module Toolbars
       {
         name: 'archive',
         label: I18n.t('protocols.index.toolbar.archive'),
-        icon: 'fas fa-archive',
+        icon: 'sn-icon sn-icon-archive',
         path: archive_protocols_path,
         type: :request,
         request_method: :post
@@ -114,7 +114,7 @@ module Toolbars
       {
         name: 'archive',
         label: I18n.t('protocols.index.toolbar.restore'),
-        icon: 'fas fa-undo',
+        icon: 'sn-icon sn-icon-restore',
         path: restore_protocols_path,
         type: :request,
         request_method: :post
diff --git a/app/services/toolbars/reports_service.rb b/app/services/toolbars/reports_service.rb
index d3b9e0809..5edb6c2ec 100644
--- a/app/services/toolbars/reports_service.rb
+++ b/app/services/toolbars/reports_service.rb
@@ -33,7 +33,7 @@ module Toolbars
       {
         name: 'edit',
         label: I18n.t('projects.reports.index.edit'),
-        icon: 'fas fa-pencil-alt',
+        icon: 'sn-icon sn-icon-edit',
         button_id: 'edit-report-btn',
         path: edit_project_report_path(@report.project_id, @report.id),
         type: :link
@@ -72,7 +72,7 @@ module Toolbars
       {
         name: 'generate_docx_action',
         label: label,
-        icon: 'fas fa-file-word',
+        icon: 'sn-icon sn-icon-file-word',
         button_id: button_id
       }
     end
@@ -83,7 +83,7 @@ module Toolbars
       {
         name: 'delete',
         label: I18n.t('projects.reports.index.delete'),
-        icon: 'fas fa-trash',
+        icon: 'sn-icon sn-icon-delete',
         button_id: 'delete-reports-btn',
         type: :link
       }
diff --git a/app/services/toolbars/repositories_service.rb b/app/services/toolbars/repositories_service.rb
index 3cf9c50a9..f9de4d8a3 100644
--- a/app/services/toolbars/repositories_service.rb
+++ b/app/services/toolbars/repositories_service.rb
@@ -36,7 +36,7 @@ module Toolbars
         name: 'rename',
         label: I18n.t('libraries.index.buttons.edit'),
         button_id: 'renameRepoBtn',
-        icon: 'fas fa-pencil-alt',
+        icon: 'sn-icon sn-icon-edit',
         path: team_repository_rename_modal_path(@current_team, repository_id: @repository),
         type: 'remote-modal'
       }
@@ -49,7 +49,7 @@ module Toolbars
         name: 'duplicate',
         label: I18n.t('libraries.index.buttons.duplicate'),
         button_id: 'copyRepoBtn',
-        icon: 'fas fa-copy',
+        icon: 'sn-icon sn-icon-duplicate',
         path: team_repository_copy_modal_path(@current_team, repository_id: @repository),
         type: 'remote-modal'
       }
@@ -62,7 +62,7 @@ module Toolbars
         name: 'archive',
         label: I18n.t('libraries.index.buttons.archive'),
         button_id: 'archiveRepoBtn',
-        icon: 'fas fa-archive',
+        icon: 'sn-icon sn-icon-archive',
         path: archive_team_repositories_path(@current_team),
         type: :request,
         request_method: :post
@@ -75,7 +75,7 @@ module Toolbars
       {
         name: 'share',
         label: I18n.t('repositories.index.share_inventory'),
-        icon: 'fas fa-user-plus',
+        icon: 'sn-icon sn-icon-user-menu-plus',
         button_class: 'share-repository-button',
         path: team_repository_share_modal_path(@current_team, repository_id: @repository),
         type: 'remote-modal'
@@ -88,7 +88,7 @@ module Toolbars
       {
         name: 'restore',
         label: I18n.t('libraries.index.buttons.restore'),
-        icon: 'fas fa-undo',
+        icon: 'sn-icon sn-icon-restore',
         button_id: 'restoreRepoBtn',
         path: restore_team_repositories_path(@current_team),
         type: :request,
@@ -102,7 +102,7 @@ module Toolbars
       {
         name: 'delete',
         label: I18n.t('libraries.index.buttons.delete'),
-        icon: 'fas fa-trash',
+        icon: 'sn-icon sn-icon-delete',
         button_id: 'deleteRepoBtn',
         path: team_repository_destroy_modal_path(@current_team, repository_id: @repository),
         type: 'remote-modal'
diff --git a/app/services/toolbars/repository_rows_service.rb b/app/services/toolbars/repository_rows_service.rb
index ee9e48a28..6a9afecf8 100644
--- a/app/services/toolbars/repository_rows_service.rb
+++ b/app/services/toolbars/repository_rows_service.rb
@@ -49,7 +49,7 @@ module Toolbars
       {
         name: 'restore',
         label: I18n.t('repositories.restore_record'),
-        icon: 'fas fa-undo',
+        icon: 'sn-icon sn-icon-restore',
         button_class: 'resotre-repository-row-btn',
         button_id: 'restoreRepositoryRecords',
         type: :legacy
@@ -64,7 +64,7 @@ module Toolbars
       {
         name: 'edit',
         label: I18n.t('repositories.edit_record'),
-        icon: 'fas fa-pencil-alt',
+        icon: 'sn-icon sn-icon-edit',
         button_class: 'edit-repository-row-btn',
         button_id: 'editRepositoryRecord',
         type: :legacy
@@ -79,7 +79,7 @@ module Toolbars
       {
         name: 'assign',
         label: I18n.t('repositories.assign_record'),
-        icon: 'fas fa-paperclip',
+        icon: 'sn-icon sn-icon-files',
         button_class: 'assign-repository-rows-btn',
         button_id: 'assignRepositoryRecords',
         type: :legacy
@@ -94,7 +94,7 @@ module Toolbars
       {
         name: 'duplicate',
         label: I18n.t('repositories.copy_record'),
-        icon: 'fas fa-copy',
+        icon: 'sn-icon sn-icon-duplicate',
         button_class: 'copy-repository-row-btn',
         button_id: 'copyRepositoryRecords',
         type: :legacy
@@ -107,7 +107,7 @@ module Toolbars
       {
         name: 'export',
         label: I18n.t('repositories.export_record'),
-        icon: 'fas fa-file-export',
+        icon: 'sn-icon sn-icon-export',
         button_class: 'export-repository-row-btn',
         button_id: 'exportRepositoriesButton',
         type: :legacy
@@ -120,7 +120,7 @@ module Toolbars
       {
         name: 'print_label',
         label: I18n.t('repositories.print_label'),
-        icon: 'fas fa-print',
+        icon: 'sn-icon sn-icon-printer',
         button_class: 'print-label-button',
         button_id: 'toolbarPrintLabel',
         type: :legacy
@@ -135,7 +135,7 @@ module Toolbars
       {
         name: 'archive',
         label: I18n.t('repositories.archive_record'),
-        icon: 'fas fa-archive',
+        icon: 'sn-icon sn-icon-archive',
         button_class: 'resotre-repository-row-btn',
         button_id: 'archiveRepositoryRecordsButton',
         type: :legacy
@@ -150,7 +150,7 @@ module Toolbars
       {
         name: 'delete',
         label: I18n.t('repositories.delete_record'),
-        icon: 'fas fa-trash',
+        icon: 'sn-icon sn-icon-delete',
         button_class: 'resotre-repository-row-btn',
         button_id: 'deleteRepositoryRecords',
         type: :legacy
diff --git a/app/views/access_permissions/modals/_edit_modal.html.erb b/app/views/access_permissions/modals/_edit_modal.html.erb
index b7b9ff22c..332b428f6 100644
--- a/app/views/access_permissions/modals/_edit_modal.html.erb
+++ b/app/views/access_permissions/modals/_edit_modal.html.erb
@@ -22,7 +22,7 @@
       <% if assignable.top_level_assignable? %>
         <div class="modal-footer">
           <%= link_to new_assignment_path, class: 'btn btn-default pull-right', data: { action: 'swap-remote-container', target: '#user_assignments_modal' } do %>
-            <i class="fas fa-plus"></i>
+            <i class="sn-icon sn-icon-new-task"></i>
             <%= t('access_permissions.grant_access') %>
           <% end %>
         </div>
diff --git a/app/views/access_permissions/partials/_new_assignments_form.html.erb b/app/views/access_permissions/partials/_new_assignments_form.html.erb
index 9cd8ff5d9..cb0f877bb 100644
--- a/app/views/access_permissions/partials/_new_assignments_form.html.erb
+++ b/app/views/access_permissions/partials/_new_assignments_form.html.erb
@@ -17,7 +17,7 @@
                            placeholder: t('.find_people_html'),
                            class: 'sci-input-field new-assignment-user-search',
                            data: { action: 'filter-list', target: 'new-user-assignment-form' } %>
-        <i class="fas fa-search"></i>
+        <i class="sn-icon sn-icon-search"></i>
       </div>
       <% if assignable.visibility && assignable.visibility == 'hidden' %>
         <%= f.fields_for :users, UserAssignment.new do |user_form| %>
diff --git a/app/views/assets/_asset_context_menu.html.erb b/app/views/assets/_asset_context_menu.html.erb
index f2e80bd23..a3d31b6f7 100644
--- a/app/views/assets/_asset_context_menu.html.erb
+++ b/app/views/assets/_asset_context_menu.html.erb
@@ -1,7 +1,7 @@
 <% if can_manage_asset?(asset) %>
   <div class="dropdown asset-context-menu">
     <button class="btn btn-light dropdown-toggle icon-btn" type="button" id="dropdownAssetContextMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-      <i class="fas fa-ellipsis-h"></i>
+      <i class="sn-icon sn-icon-more-hori"></i>
     </button>
     <ul class="dropdown-menu dropdown-menu-right"
         aria-labelledby="dropdownAssetContextMenu"
@@ -57,13 +57,13 @@
               data-image-mime-type="<%= asset.file.content_type %>"
               data-image-start-edit-url="<%= start_edit_image_path(asset) %>"
             >
-              <span class="fas fa-pencil-alt"></span>
+              <span class="sn-icon sn-icon-edit"></span>
               <%= t('assets.file_preview.edit_in_scinote') %>
             </a>
           </li>
           <li>
             <a class="btn btn-light file-download-link" href="<%= rails_blob_path(asset.file, disposition: 'attachment') %>" data-turbolinks="false">
-              <span class="fas fa-download"></span>
+              <span class="sn-icon sn-icon-export"></span>
               <%= t('Download') %>
             </a>
           </li>
@@ -82,7 +82,7 @@
         <li role="separator" class="divider"></li>
         <li>
           <a class="delete-asset" href="<%= asset_destroy_path(asset) %>" data-file-name="<%= asset.render_file_name %>">
-            <i class="fas fa-trash"></i>
+            <i class="sn-icon sn-icon-delete"></i>
             <%= t("assets.context_menu.delete") %>
           </a>
         </li>
diff --git a/app/views/assets/_new_asset.html.erb b/app/views/assets/_new_asset.html.erb
index 9425e6928..63398fdff 100644
--- a/app/views/assets/_new_asset.html.erb
+++ b/app/views/assets/_new_asset.html.erb
@@ -1,6 +1,6 @@
 <div class="attachment-container pull-left new">
   <div class="attachment-preview no-shadow">
-    <i class="fas fa-image"></i>
+    <i class="sn-icon sn-icon-result-image"></i>
   </div>
   <div class="attachment-label"><%= truncate(file_name || file_url, length: Constants::FILENAME_TRUNCATION_LENGTH) %>
   </div>
diff --git a/app/views/canvas/_edit.html.erb b/app/views/canvas/_edit.html.erb
index 62b9dc3ff..b6c7041cb 100644
--- a/app/views/canvas/_edit.html.erb
+++ b/app/views/canvas/_edit.html.erb
@@ -12,7 +12,7 @@
     <% if @experiment_managable %>
       <%=link_to "", type: "button", class: "btn btn-primary", id: "canvas-new-module" do %>
         <span class="hbtn-default">
-          <span class="fas fa-plus"></span>
+          <span class="sn-icon sn-icon-new-task"></span>
           <%= t("experiments.canvas.edit.new_module") %>
         </span>
         <span class="hbtn-hover">
@@ -24,7 +24,7 @@
     <div class="sci-btn-group pull-right" role="group">
       <%= link_to canvas_experiment_path(@experiment), type: "button", class: "btn btn-secondary cancel-edit-canvas" do %>
         <span class="hidden-xs"><%= t("experiments.canvas.edit.cancel") %></span>
-        <span class="fas fa-times visible-xs" style="height: 16px;margin-top: 4px;">&nbsp;</span>
+        <span class="sn-icon sn-icon-close-remove visible-xs" style="height: 16px;margin-top: 4px;">&nbsp;</span>
       <% end %>
       <%= f.submit class: "btn btn-primary", id: "canvas-save" do %>
         <span class="visibile-xs"><%= t("experiments.canvas.edit.save_short") %></span>
diff --git a/app/views/canvas/edit/_my_module.html.erb b/app/views/canvas/edit/_my_module.html.erb
index 9cac7f5dc..08aa4bf9a 100644
--- a/app/views/canvas/edit/_my_module.html.erb
+++ b/app/views/canvas/edit/_my_module.html.erb
@@ -12,7 +12,7 @@
 
     <div class="dropdown module-options-dropdown pull-right module-options" data-dropdown-menu-path="<%= canvas_dropdown_menu_my_module_path(my_module) %>">
       <a class="dropdown-toggle" id="<%= my_module.id %>_options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-        <span class="fas fa-caret-down" aria-hidden="true"></span>
+        <span class="sn-icon sn-icon-close-hide" aria-hidden="true"></span>
       </a>
       <ul class="dropdown-menu custom-dropdown-menu no-scale" aria-labelledby="<%= my_module.id %>_options">
       </ul>
diff --git a/app/views/canvas/full_zoom/_my_module.html.erb b/app/views/canvas/full_zoom/_my_module.html.erb
index 173cb426c..f3e789aa9 100644
--- a/app/views/canvas/full_zoom/_my_module.html.erb
+++ b/app/views/canvas/full_zoom/_my_module.html.erb
@@ -80,7 +80,7 @@
     <ul class="nav nav-tabs nav-tabs-less" role="tablist">
       <li role="presentation">
         <a class="btn btn-link task-card-view-users" href="<%= designated_users_my_module_user_my_modules_url(my_module_id: my_module.id, format: :json) %>" aria-controls="<%= my_module.id %>_users" role="tab" data-remote="true">
-          <span class="fas fa-users" aria-hidden="true"></span>
+          <span class="sn-icon sn-icon-users" aria-hidden="true"></span>
           <span class="badge badge-indicator users-badge-indicator <%= 'hidden' unless my_module.designated_users_count.positive? %>"
                 data-linked-id="<%= my_module.id %>">
             <%= my_module.designated_users_count %>
@@ -89,13 +89,13 @@
       </li>
       <li role="presentation">
         <a class="btn btn-link task-card-view-activities" href="<%= activities_my_module_url(id: my_module.id) %>" aria-controls="<%= my_module.id %>_activities" role="tab">
-          <span class="fas fa-list" aria-hidden="true"></span>
+          <span class="sn-icon sn-icon-activities" aria-hidden="true"></span>
         </a>
       </li>
       <li role="presentation">
         <a href="#" class="btn btn-link open-comments-sidebar" tabindex=0
            data-object-type="MyModule" data-object-id="<%= my_module.id %>">
-          <span class="fas fa-comment" aria-hidden="true"></span>
+          <span class="sn-icon sn-icon-comments" aria-hidden="true"></span>
           <span id="comment-count-<%= my_module.id %>" class="badge badge-indicator comments-badge-indicator <%= 'hidden' unless my_module.task_comments_count.positive? %>">
             <%= my_module.task_comments_count %>
           </span>
diff --git a/app/views/canvas/full_zoom/_my_module_hidden.html.erb b/app/views/canvas/full_zoom/_my_module_hidden.html.erb
index 5d56e6f22..62fd4e43a 100644
--- a/app/views/canvas/full_zoom/_my_module_hidden.html.erb
+++ b/app/views/canvas/full_zoom/_my_module_hidden.html.erb
@@ -9,7 +9,7 @@
   data-module-conns="<%= construct_module_connections(my_module) %>"
  >
   <div class="panel-body">
-    <i class="fas fa-eye-slash"></i>
+    <i class="sn-icon sn-icon-visibility-hide"></i>
     <span class="description">
       <%= t('experiments.canvas.full_zoom.no_access') %>
     </span>
diff --git a/app/views/canvas/medium_zoom/_my_module_hidden.html.erb b/app/views/canvas/medium_zoom/_my_module_hidden.html.erb
index 245de5fb2..e0759e10e 100644
--- a/app/views/canvas/medium_zoom/_my_module_hidden.html.erb
+++ b/app/views/canvas/medium_zoom/_my_module_hidden.html.erb
@@ -9,7 +9,7 @@
   data-module-conns="<%= construct_module_connections(my_module) %>"
  >
   <div class="panel-body">
-    <i class="fas fa-eye-slash"></i>
+    <i class="sn-icon sn-icon-visibility-hide"></i>
     <span class="description">
       <%= t('experiments.canvas.medium_zoom.no_access') %>
     </span>
diff --git a/app/views/canvas/small_zoom/_my_module_hidden.html.erb b/app/views/canvas/small_zoom/_my_module_hidden.html.erb
index 621c8f1ee..728b73130 100644
--- a/app/views/canvas/small_zoom/_my_module_hidden.html.erb
+++ b/app/views/canvas/small_zoom/_my_module_hidden.html.erb
@@ -8,5 +8,5 @@
   data-module-y="<%= my_module.y %>"
   data-module-conns="<%= construct_module_connections(my_module) %>"
  >
-  <i class="fas fa-eye-slash"></i>
+  <i class="sn-icon sn-icon-visibility-hide"></i>
 </div>
diff --git a/app/views/dashboards/_current_tasks.html.erb b/app/views/dashboards/_current_tasks.html.erb
index de52f76b8..2f2953729 100644
--- a/app/views/dashboards/_current_tasks.html.erb
+++ b/app/views/dashboards/_current_tasks.html.erb
@@ -3,7 +3,7 @@
     <div class="widget-title"><%= t("dashboard.current_tasks.title") %></div>
     <div class="actions-container">
       <div class="filter-container dropdown">
-        <div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></div>
+        <div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="sn-icon sn-icon-filter"></i></div>
         <div class="dropdown-menu current-tasks-filters" role="menu" data-team-id="<%= current_team.id %>">
           <div class="header">
             <div class="title"><%= t("dashboard.current_tasks.filter.title") %></div>
@@ -60,7 +60,7 @@
       <div class="search-container">
         <div class="sci-input-container left-icon ">
           <input type="text" class="sci-input-field task-search-field" placeholder="<%= t("dashboard.current_tasks.search") %>"></input>
-          <i class="fas fa-search"></i>
+          <i class="sn-icon sn-icon-search"></i>
         </div>
       </div>
     </div>
diff --git a/app/views/dashboards/_quick_start.html.erb b/app/views/dashboards/_quick_start.html.erb
index c1932779b..8b67f8e86 100644
--- a/app/views/dashboards/_quick_start.html.erb
+++ b/app/views/dashboards/_quick_start.html.erb
@@ -1,13 +1,13 @@
 <div class="quick-start-buttons">
-  <div class="new-task btn btn-secondary"><i class="fas fa-plus"></i><%= t("dashboard.quick_start.new_task") %></div>
+  <div class="new-task btn btn-secondary"><i class="sn-icon sn-icon-new-task"></i><%= t("dashboard.quick_start.new_task") %></div>
   <% if can_create_protocols_in_repository?(current_team) %>
     <button data-toggle="modal" data-target="#newProtocolModal" class="btn btn-secondary">
-      <i class="fas fa-edit"></i><%= t("dashboard.quick_start.new_protocol") %>
+      <i class="sn-icon sn-icon-protocols-templates"></i><%= t("dashboard.quick_start.new_protocol") %>
     </button>
   <% end %>
   <% if can_create_reports?(current_team) %>
     <%= link_to new_report_path, {class: "new-report btn btn-secondary"} do %>
-      <i class="fas fa-clipboard-check"></i><%= t("dashboard.quick_start.new_report") %>
+      <i class="sn-icon sn-icon-reports"></i><%= t("dashboard.quick_start.new_report") %>
     <% end %>
   <% end %>
 </div>
diff --git a/app/views/dashboards/current_tasks/_task.html.erb b/app/views/dashboards/current_tasks/_task.html.erb
index 29fb9a4fb..4d75589ce 100644
--- a/app/views/dashboards/current_tasks/_task.html.erb
+++ b/app/views/dashboards/current_tasks/_task.html.erb
@@ -11,7 +11,7 @@
   </div>
   <div class="task-due-date row-border <%= task_date[:span_class]%>">
     <% if task_date[:date] %>
-      <i class="fas fa-calendar-day"></i>
+      <i class="sn-icon sn-icon-calendar-small"></i>
       <%= t("dashboard.current_tasks.#{task_date[:translation_key]}", date: l(task_date[:date], format: :full_date)) %>
     <% end %>
   </div>
diff --git a/app/views/experiments/_assigned_users.html.erb b/app/views/experiments/_assigned_users.html.erb
index 6684a8087..7bd32e788 100644
--- a/app/views/experiments/_assigned_users.html.erb
+++ b/app/views/experiments/_assigned_users.html.erb
@@ -16,14 +16,14 @@
       <% end %>
       <% if can_manage_my_module_designated_users?(user, my_module) %>
         <span class="new-user avatar-container">
-          <i class="fas fa-plus"></i>
+          <i class="sn-icon sn-icon-new-task"></i>
         </span>
       <% end %>
     </div>
     <div class="dropdown-menu">
       <div class="sci-input-container left-icon">
         <input type="text" class="sci-input-field user-search" placeholder="<%= I18n.t('experiments.table.search') %>">
-        <i class="fas fa-search"></i>
+        <i class="sn-icon sn-icon-search"></i>
       </div>
       <div class="users-list"
           data-list-url="<%= search_my_module_user_my_module_path(my_module, my_module_id: my_module.id, skip_unassigned: skip_unassigned) %>">
diff --git a/app/views/experiments/_dropdown_actions.html.erb b/app/views/experiments/_dropdown_actions.html.erb
index da6a41df7..c3769d1dd 100644
--- a/app/views/experiments/_dropdown_actions.html.erb
+++ b/app/views/experiments/_dropdown_actions.html.erb
@@ -25,7 +25,7 @@
       <%= link_to clone_modal_experiment_url(experiment),
                   remote: true, type: 'button',
                   class: 'clone-experiment' do %>
-        <i class="fas fa-copy"></i>
+        <i class="sn-icon sn-icon-duplicate"></i>
         <span><%= t('experiments.clone.label_title') %></span>
       <% end %>
     </li>
@@ -35,7 +35,7 @@
       <%= link_to move_modal_experiment_url(experiment),
                   remote: true, type: 'button',
                   class: 'move-experiment' do %>
-        <i class="fas fa-arrow-right"></i>
+        <i class="sn-icon sn-icon-move"></i>
         <span><%= t('experiments.move.label_title') %></span>
       <% end %>
     </li>
@@ -44,14 +44,14 @@
   <% if can_manage_experiment_users?(experiment) %>
     <li>
       <%= link_to edit_access_permissions_experiment_path(experiment), data: { action: 'remote-modal'} do %>
-        <i class="fas fa-door-open"></i>
+        <i class="sn-icon sn-icon-project-member-access"></i>
         <span><%= t('experiments.index.experiment_access') %></span>
       <% end %>
     </li>
   <% else %>
     <li>
       <%= link_to access_permissions_experiment_path(experiment), data: { action: 'remote-modal'} do %>
-        <i class="fas fa-door-open"></i>
+        <i class="sn-icon sn-icon-project-member-access"></i>
         <span><%= t('experiments.index.experiment_access') %></span>
       <% end %>
     </li>
@@ -62,7 +62,7 @@
                   type: 'button',
                   method: :post,
                   data: { confirm: t('experiments.canvas.archive_confirm') } do %>
-        <i class="fas fa-archive"></i>
+        <i class="sn-icon sn-icon-archive"></i>
         <span><%= t('experiments.archive.label_title') %></span>
       <% end %>
     </li>
@@ -74,7 +74,7 @@
       <%= f.hidden_field :archived, value: false %>
     <% end %>
     <li><a href="#" class="form-submit-link" data-turbolinks="false" data-submit-form="<%= experiment_form.options[:html][:id] %>">
-          <i class="fas fa-undo"></i><%= t "projects.experiment_archive.restore_option" %></a></li>
+          <i class="sn-icon sn-icon-restore"></i><%= t "projects.experiment_archive.restore_option" %></a></li>
   <% end %>
 
   <div class="divider-label footer">
diff --git a/app/views/experiments/_show_header.html.erb b/app/views/experiments/_show_header.html.erb
index 0b57e700c..957c42c39 100644
--- a/app/views/experiments/_show_header.html.erb
+++ b/app/views/experiments/_show_header.html.erb
@@ -3,7 +3,7 @@
     <i class="sn-icon sn-icon-navigator sci--layout--navigator-open cursor-pointer p-1.5 border rounded border-sn-light-grey mr-4"></i>
     <h1 class="experimnet-name" data-toggle="tooltip" data-placement="bottom" title="<%= @experiment.name %>">
       <% if @experiment.archived_branch? %>
-        <i class="fas fa-archive" data-view-mode="archived"></i>
+        <i class="sn-icon sn-icon-archive" data-view-mode="archived"></i>
       <% end %>
       <% if @inline_editable_title_config.present? %>
               <%= render partial: "shared/inline_editing",
diff --git a/app/views/experiments/_table_display_modal.html.erb b/app/views/experiments/_table_display_modal.html.erb
index 1545ec6ee..53d95704d 100644
--- a/app/views/experiments/_table_display_modal.html.erb
+++ b/app/views/experiments/_table_display_modal.html.erb
@@ -12,9 +12,9 @@
         <% Experiments::TableViewService::COLUMNS.each do |col| %>
           <div class="column-container <%= col %> visible">
             <% if col == :archived && params[:view_mode] != 'archived' %>
-              <i class="fas fa-eye-slash disabled" data-column="<%= col %>"></i>
+              <i class="sn-icon sn-icon-visibility-hide disabled" data-column="<%= col %>"></i>
             <% elsif col != :task_name %>
-              <i class="fas fa-<%= col.to_s.in?(@my_module_visible_table_columns) ? 'eye' : 'eye-slash' %>" data-column="<%= col %>"></i>
+              <i class="sn-icon sn-icon-<%= col.to_s.in?(@my_module_visible_table_columns) ? 'visibility-show' : 'visibility-hide' %>" data-column="<%= col %>"></i>
             <% end %>
             <%= t("experiments.table.column_display_modal.#{col}") %>
           </div>
diff --git a/app/views/experiments/_table_due_date.html.erb b/app/views/experiments/_table_due_date.html.erb
index 6e502d038..10c92618d 100644
--- a/app/views/experiments/_table_due_date.html.erb
+++ b/app/views/experiments/_table_due_date.html.erb
@@ -24,7 +24,7 @@
                 data-positioning-vertical="bottom"
                 value="<%= my_module.due_date ? l(my_module.due_date, format: :full) : '' %>"/>
       </div>
-      <div class="fas fa-times-circle clear-date" 
+      <div class="sn-icon sn-icon-close-remove clear-date"
            data-toggle='clear-date-time-picker'
            data-target='calendarDueDate<%= my_module.id %>'>
       </div>
diff --git a/app/views/experiments/_table_row_actions.html.erb b/app/views/experiments/_table_row_actions.html.erb
index 8045eaaab..58b47541f 100644
--- a/app/views/experiments/_table_row_actions.html.erb
+++ b/app/views/experiments/_table_row_actions.html.erb
@@ -2,7 +2,7 @@
 <% if can_restore_my_module?(my_module) %>
   <li>
     <a href="<%= restore_my_modules_experiment_path(my_module.experiment) %>" class="restore-my-module" data-id="<%= my_module.id %>">
-      <i class="fas fa-undo"></i>
+      <i class="sn-icon sn-icon-restore"></i>
       <%= t("experiments.table.my_module_actions.restore") %>
     </a>
   </li>
@@ -22,14 +22,14 @@
 <% end %>
 <li>
   <a class="open-access-modal" data-action="remote-modal" href="<%= task_access_path %>">
-    <i class="fas fa-door-open"></i>
+    <i class="sn-icon sn-icon-project-member-access"></i>
     <%= t("experiments.table.my_module_actions.access") %>
   </a>
 </li>
 <% if can_move_my_module?(my_module) %>
   <li>
     <a href="" class="move-my-module" data-id="<%= my_module.id %>">
-      <i class="fas fa-arrow-right"></i>
+      <i class="sn-icon sn-icon-move"></i>
       <%= t("experiments.table.my_module_actions.move") %>
     </a>
   </li>
@@ -37,7 +37,7 @@
 <% if can_manage_experiment?(my_module.experiment) && my_module.active? %>
 <li>
   <a href="" class="duplicate-my-module" data-id="<%= my_module.id %>">
-    <i class="fas fa-copy"></i>
+    <i class="sn-icon sn-icon-duplicate"></i>
     <%= t("experiments.table.my_module_actions.duplicate") %>
   </a>
 </li>
@@ -45,7 +45,7 @@
 <% if can_archive_my_module?(my_module) %>
   <li>
     <a href="<%= archive_my_modules_experiment_path(my_module.experiment) %>" class="archive-my-module" data-id="<%= my_module.id %>">
-      <i class="fas fa-archive"></i>
+      <i class="sn-icon sn-icon-archive"></i>
       <%= t("experiments.table.my_module_actions.archive") %>
     </a>
   </li>
diff --git a/app/views/experiments/_table_toolbar.html.erb b/app/views/experiments/_table_toolbar.html.erb
index 2ecd49546..7c9a2905c 100644
--- a/app/views/experiments/_table_toolbar.html.erb
+++ b/app/views/experiments/_table_toolbar.html.erb
@@ -6,7 +6,7 @@
                     id: 'createTask',
                     data: { view_mode: 'active' },
                     remote: true do %>
-                <span class="fas fa-plus"></span>
+                <span class="sn-icon sn-icon-new-task"></span>
                 <span class="hidden-xs"><%= t('experiments.table.toolbar.new') %></span>
         <% end %>
     <% end %>
@@ -19,11 +19,11 @@
       <% if action_name == 'table' %>
         <%= render partial: 'table_filters.html.erb' %>
       <button id="taskDataDisplay" class="btn btn-light" data-toggle="modal" data-target="#tableDisplayModal">
-        <i class="fas fa-columns"></i>
+        <i class="sn-icon sn-icon sn-icon-reports"></i>
       </button>
         <div class="dropdown sort-menu">
           <button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-            <i class="fas fa-sort-amount-up"></i>
+            <i class="sn-icon sn-icon-sort-up"></i>
           </button>
           <ul id="sortMenuDropdown" class="dropdown-menu sort-task-menu <%= params[:view_mode] %> dropdown-menu-right" aria-labelledby="sortMenu">
               <% %w(atoz ztoa due_first due_last archived_old archived_new).each_with_index do |sort, i| %>
diff --git a/app/views/experiments/canvas.html.erb b/app/views/experiments/canvas.html.erb
index 4c6bff18b..5abc85682 100644
--- a/app/views/experiments/canvas.html.erb
+++ b/app/views/experiments/canvas.html.erb
@@ -16,7 +16,7 @@
                     class: 'btn btn-primary new-my-module-button',
                     data: { view_mode: 'active' },
                     remote: true do %>
-                <span class="fas fa-plus"></span>
+                <span class="sn-icon sn-icon-new-task"></span>
                 <span class="hidden-sm hidden-xs"><%= t('experiments.canvas.new_my_module') %></span>
         <% end %>
         <%=link_to canvas_edit_experiment_url(@experiment),
@@ -25,7 +25,7 @@
               id: 'edit-canvas-button',
               data: { action: 'edit' },
               class: 'ajax btn btn-light' do %>
-                <span class="fas fa-pencil-alt"></span>
+                <span class="sn-icon sn-icon-edit"></span>
                 <span class="hidden-sm hidden-xs"><%= t('experiments.canvas.canvas_edit') %></span>
               <% end %>
       <% end %>
diff --git a/app/views/experiments/module_archive.html.erb b/app/views/experiments/module_archive.html.erb
index d65da86dc..98e839859 100644
--- a/app/views/experiments/module_archive.html.erb
+++ b/app/views/experiments/module_archive.html.erb
@@ -14,13 +14,13 @@
         <span class="left">
           <div class="move-button-container collapse">
             <button class="btn btn-light">
-              <span class="fas fa-arrow-right"></span>
+              <span class="sn-icon sn-icon-move"></span>
               <%= t('experiments.module_archive.move_option') %>
             </button>
           </div>
           <div class="restore-button-container collapse">
             <%= button_to restore_my_modules_experiment_path(@experiment), class: 'btn btn-light', method: :post do %>
-              <span class="fas fa-undo"></span>
+              <span class="sn-icon sn-icon-restore"></span>
               <%= t('experiments.module_archive.restore_option') %>
             <% end %>
           </div>
diff --git a/app/views/global_activities/_date_picker.html.erb b/app/views/global_activities/_date_picker.html.erb
index b0cd19f04..88999d54a 100644
--- a/app/views/global_activities/_date_picker.html.erb
+++ b/app/views/global_activities/_date_picker.html.erb
@@ -5,7 +5,7 @@
   <% if label %>
     <label class="control-label required" for="calendar-<%= id %>"><%= label %></label>
   <% end %>
-  <span class="fas fa-calendar-alt"></span>
+  <span class="sn-icon sn-icon-calendar"></span>
   <input type="datetime" class="form-control calendar-input" name="calendar[<%= id %>]" id="calendar-<%= id %>" readonly="" data-ts="" placeholder="<%= placeholder %>" value="<%= defined?(setDate) ? setDate : '' %>"/>
 
   <%= javascript_include_tag 'global_activities/date_picker', nonce: true %>
diff --git a/app/views/global_activities/_top_pane.html.erb b/app/views/global_activities/_top_pane.html.erb
index e83abcd3c..99faf055a 100644
--- a/app/views/global_activities/_top_pane.html.erb
+++ b/app/views/global_activities/_top_pane.html.erb
@@ -4,15 +4,15 @@
 <div class="ga-actions">
   <div class="sci-btn-group">
     <a id="global-activities-expand-all" class="hide-actions btn btn-light" href="#" data-turbolinks="false">
-      <i class="fas fa-caret-down"></i><%= t('activities.index.expand_all') %>
+      <i class="sn-icon sn-icon-close-hide"></i><%= t('activities.index.expand_all') %>
     </a>
     <a id="global-activities-colapse-all" class="hide-actions btn btn-light" href="#" data-turbolinks="false">
-      <i class="fas fa-caret-up"></i><%= t('activities.index.collapse_all') %>
+      <i class="sn-icon sn-icon-open-show"></i><%= t('activities.index.collapse_all') %>
     </a>
   </div>
   <div class="ga-search-container">
     <input type="text" class="search-field" placeholder="Search..." aria-describedby="basic-addon1">
-    <i class="fas fa-search"></i>
+    <i class="sn-icon sn-icon-search"></i>
   </div>
 </div>
 <div class="ga-tags-container">
@@ -23,6 +23,6 @@
     </div>
   <% end %>
   <div class="btn btn-light clear-container">
-    <i class="fas fa-times-circle"></i><%= t('global_activities.index.clear_filters') %>
+    <i class="sn-icon sn-icon-close-remove"></i><%= t('global_activities.index.clear_filters') %>
   </div>
 </div>
diff --git a/app/views/global_activities/references/_project_folder.html.erb b/app/views/global_activities/references/_project_folder.html.erb
index fa7b9e973..e6f949a7c 100644
--- a/app/views/global_activities/references/_project_folder.html.erb
+++ b/app/views/global_activities/references/_project_folder.html.erb
@@ -1,7 +1,7 @@
 <%= render partial: "global_activities/references/team.html.erb",
            locals: { team: team, subject: team, breadcrumbs: breadcrumbs, values: values, type_of: type_of } %>
 <div class="ga-breadcrumb">
-  <span class="fas fa-folder"></span>
+  <span class="sn-icon sn-icon-projects"></span>
 
   <% if subject %>
     <% path = project_folder_path(subject, team: team) %>
diff --git a/app/views/global_activities/references/_protocol.html.erb b/app/views/global_activities/references/_protocol.html.erb
index b08acdf7e..af82804f0 100644
--- a/app/views/global_activities/references/_protocol.html.erb
+++ b/app/views/global_activities/references/_protocol.html.erb
@@ -8,7 +8,7 @@
 <% if subject %>
   <% if subject.in_repository? %>
     <div class="ga-breadcrumb">
-      <span class="fas fa-edit"></span>
+      <span class="sn-icon sn-icon-protocols-templates"></span>
         <%= route_to_other_team protocols_path(team: subject.team),
                                 team,
                                 subject.name&.truncate(Constants::NAME_TRUNCATION_LENGTH),
@@ -17,7 +17,7 @@
   <% end %>
 <% else %>
   <div class="ga-breadcrumb">
-    <span class="fas fa-edit"></span>
+    <span class="sn-icon sn-icon-protocols-templates"></span>
     <span title="<%= breadcrumbs['protocol'] %>">
       <%= breadcrumbs['protocol']&.truncate(Constants::NAME_TRUNCATION_LENGTH) %>
     </span>
diff --git a/app/views/global_activities/references/_report.html.erb b/app/views/global_activities/references/_report.html.erb
index e3fc38821..bf2826553 100644
--- a/app/views/global_activities/references/_report.html.erb
+++ b/app/views/global_activities/references/_report.html.erb
@@ -1,7 +1,7 @@
 <%= render partial: "global_activities/references/team.html.erb",
            locals: { team: team, subject: team, breadcrumbs: breadcrumbs, values: values, type_of: type_of } %>
 <div class="ga-breadcrumb">
-  <span class="fas fa-clipboard-check"></span>
+  <span class="sn-icon sn-icon-reports"></span>
   <% if subject %>
     <%= route_to_other_team(reports_path(subject, team: subject.team.id, preview_report_id: subject.id, preview_type: :pdf),
                             team,
diff --git a/app/views/global_activities/references/_repository_base.html.erb b/app/views/global_activities/references/_repository_base.html.erb
index ed1c9e144..d74849da6 100644
--- a/app/views/global_activities/references/_repository_base.html.erb
+++ b/app/views/global_activities/references/_repository_base.html.erb
@@ -1,7 +1,7 @@
 <%= render partial: "global_activities/references/team.html.erb",
            locals: { team: team, subject: team, breadcrumbs: breadcrumbs, values: values, type_of: type_of } %>
 <div class="ga-breadcrumb">
-  <span class="fas fa-list-alt"></span>
+  <span class="sn-icon sn-icon-inventory"></span>
   <% if subject %>
     <%= route_to_other_team(repository_path(subject.id, team: subject.team.id),
                             team,
diff --git a/app/views/global_activities/references/_repository_row.html.erb b/app/views/global_activities/references/_repository_row.html.erb
index 68bf39737..3bf99ba5d 100644
--- a/app/views/global_activities/references/_repository_row.html.erb
+++ b/app/views/global_activities/references/_repository_row.html.erb
@@ -1,7 +1,7 @@
 <%= render partial: "global_activities/references/team.html.erb",
            locals: { team: team, subject: team, breadcrumbs: breadcrumbs, values: values, type_of: type_of } %>
 <div class="ga-breadcrumb">
-  <span class="fas fa-list-alt"></span>
+  <span class="sn-icon sn-icon-inventory"></span>
   <% if subject %>
     <%= route_to_other_team(repository_path(subject.repository.id, team: subject.repository.team.id),
                             team,
diff --git a/app/views/global_activities/references/_team.html.erb b/app/views/global_activities/references/_team.html.erb
index 484e05137..ae61e32e8 100644
--- a/app/views/global_activities/references/_team.html.erb
+++ b/app/views/global_activities/references/_team.html.erb
@@ -1,5 +1,5 @@
 <div class="ga-breadcrumb">
-  <span class="fas fa-users"></span>
+  <span class="sn-icon sn-icon-users"></span>
   <% if team %>
     <%= route_to_other_team projects_path(team: team.id),
                             team,
diff --git a/app/views/label_printers/_fluics_settings.html.erb b/app/views/label_printers/_fluics_settings.html.erb
index 4fd20f391..2d89ff53b 100644
--- a/app/views/label_printers/_fluics_settings.html.erb
+++ b/app/views/label_printers/_fluics_settings.html.erb
@@ -1,7 +1,7 @@
 <ul>
   <li>
     <div class="collapse-row">
-      <i class="fas fa-caret-down" data-toggle="collapse" href="#fluicsInstructionsSection" aria-expanded="false"></i>
+      <i class="sn-icon sn-icon-close-hide" data-toggle="collapse" href="#fluicsInstructionsSection" aria-expanded="false"></i>
       <div class="row-title"><%= t("users.settings.account.label_printer.instructions") %></div>
     </div>
     <ul class="collapse in" id="fluicsInstructionsSection">
@@ -25,7 +25,7 @@
 <% if can_manage_label_printers? %>
   <li>
     <div class="collapse-row">
-      <i class="fas fa-caret-down" data-toggle="collapse" href="#SettingsSection" aria-expanded="false"></i>
+      <i class="sn-icon sn-icon-close-hide" data-toggle="collapse" href="#SettingsSection" aria-expanded="false"></i>
       <div class="row-title"><%= t("users.settings.account.label_printer.settings") %></div>
     </div>
     <ul class="collapse in" id="SettingsSection">
@@ -49,7 +49,7 @@
 <% end %>
   <li>
     <div class="collapse-row">
-      <i class="fas fa-caret-down" data-toggle="collapse" href="#PrintersSection" aria-expanded="false"></i>
+      <i class="sn-icon sn-icon-close-hide" data-toggle="collapse" href="#PrintersSection" aria-expanded="false"></i>
       <div class="row-title">Printers</div>
       <% if can_manage_label_printers? %>
         <div class="update-printers">
diff --git a/app/views/label_printers/_zebra_settings.html.erb b/app/views/label_printers/_zebra_settings.html.erb
index dae65494c..b27b14c0e 100644
--- a/app/views/label_printers/_zebra_settings.html.erb
+++ b/app/views/label_printers/_zebra_settings.html.erb
@@ -1,7 +1,7 @@
 <ul>
   <li class="zebra-settings-collapse">
     <div class="collapse-row">
-      <i class="fas fa-caret-down collapsed" data-toggle="collapse" href="#zebraInstructionsSection" aria-expanded="false"></i>
+      <i class="sn-icon sn-icon-close-hide collapsed" data-toggle="collapse" href="#zebraInstructionsSection" aria-expanded="false"></i>
       <div class="row-title"><%= t("users.settings.account.label_printer.instructions") %></div>
     </div>
     <ul class="collapse" id="zebraInstructionsSection">
@@ -64,7 +64,7 @@
 
   <li class="zebra-settings-collapse">
     <div class="collapse-row">
-      <i class="fas fa-caret-down" data-toggle="collapse" href="#PrintersSection" aria-expanded="false"></i>
+      <i class="sn-icon sn-icon-close-hide" data-toggle="collapse" href="#PrintersSection" aria-expanded="false"></i>
       <div class="row-title">Printers</div>
         <div class="update-printers">
           <%= button_tag type: 'submit', class: "btn btn-light zebra-printer-refresh" do %>
diff --git a/app/views/label_templates/_index_toolbar.html.erb b/app/views/label_templates/_index_toolbar.html.erb
index a68307292..7438eee95 100644
--- a/app/views/label_templates/_index_toolbar.html.erb
+++ b/app/views/label_templates/_index_toolbar.html.erb
@@ -2,7 +2,7 @@
   <% if can_manage_label_templates?(current_team) %>
     <button data-url="<%= label_templates_path %>" title="<%= t('label_templates.index.toolbar.new') %>"
       class="btn btn-primary  auto-shrink-button" id="newLabelTemplate">
-      <i class="fas fa-plus"></i>
+      <i class="sn-icon sn-icon-new-task"></i>
       <span class="button-text"><%= t('label_templates.index.toolbar.new') %></span>
     </button>
     <button title="<%= t('label_templates.index.toolbar.update_fluics_labels') %>"
diff --git a/app/views/label_templates/index.html.erb b/app/views/label_templates/index.html.erb
index aa0abf321..9d3a0782d 100644
--- a/app/views/label_templates/index.html.erb
+++ b/app/views/label_templates/index.html.erb
@@ -33,7 +33,7 @@
                 <span class="sci-checkbox-label"></span>
               </div>
             </th>
-            <th id="label-template-selected"><i class="fas fa-thumbtack"></i></th>
+            <th id="label-template-selected"><i class="sn-icon sn-icon-dashboard"></i></th>
             <th id="label-template-name"><%= t('label_templates.index.thead_name') %></th>
             <th id="label-template-format"><%= t('label_templates.index.format') %></th>
             <th id="label-template-description"><%= t('label_templates.index.description') %></th>
diff --git a/app/views/layouts/reports/template_values_editor.html.erb b/app/views/layouts/reports/template_values_editor.html.erb
index c72860353..a90f8908d 100644
--- a/app/views/layouts/reports/template_values_editor.html.erb
+++ b/app/views/layouts/reports/template_values_editor.html.erb
@@ -4,11 +4,11 @@
   </h1>
   <div class="collapse-buttons sci-btn-group pull-right">
      <button class="btn btn-light collapse-all">
-        <i class="fas fa-caret-up"></i>
+        <i class="sn-icon sn-icon-open-show"></i>
         <%= t("projects.reports.wizard.second_step.collapse_all") %>
      </button>
      <button class="btn btn-light expand-all">
-        <i class="fas fa-caret-down"></i>
+        <i class="sn-icon sn-icon-close-hide"></i>
         <%= t("projects.reports.wizard.second_step.expand_all") %>
      </button>
   </div>
@@ -19,7 +19,7 @@
 
 <div class="section">
   <h1>
-    <i class="fas fa-caret-down " data-toggle="collapse" href="#headerContainer" aria-expanded="false"></i>
+    <i class="sn-icon sn-icon-close-hide " data-toggle="collapse" href="#headerContainer" aria-expanded="false"></i>
     <%= t('projects.reports.wizard.first_step.values_editor.header') %>
   </h1>
   <div class="values-container collapse in" id="headerContainer">
@@ -29,7 +29,7 @@
 
 <div class="section">
   <h1>
-    <i class="fas fa-caret-down " data-toggle="collapse" href="#coverContainer" aria-expanded="false"></i>
+    <i class="sn-icon sn-icon-close-hide " data-toggle="collapse" href="#coverContainer" aria-expanded="false"></i>
     <%= t('projects.reports.wizard.first_step.values_editor.cover') %>
   </h1>
   <div class="values-container collapse in" id="coverContainer">
@@ -39,7 +39,7 @@
 
 <div class="section">
   <h1>
-    <i class="fas fa-caret-down " data-toggle="collapse" href="#footerContainer" aria-expanded="false"></i>
+    <i class="sn-icon sn-icon-close-hide " data-toggle="collapse" href="#footerContainer" aria-expanded="false"></i>
     <%= t('projects.reports.wizard.first_step.values_editor.footer') %>
   </h1>
   <div class="values-container collapse in" id="footerContainer">
diff --git a/app/views/my_module_tags/_index_edit.html.erb b/app/views/my_module_tags/_index_edit.html.erb
index e49e239c9..f7d590de3 100644
--- a/app/views/my_module_tags/_index_edit.html.erb
+++ b/app/views/my_module_tags/_index_edit.html.erb
@@ -14,15 +14,15 @@
           <div class="pull-right" data-view-mode="active">
             <% if can_manage_my_module?(@my_module) %>
               <%= link_to "", remote: true, class: 'btn btn-link edit-tag-link', title: t("experiments.canvas.modal_manage_tags.edit_tag") do %>
-                <span class="fas fa-pencil-alt"></span>
+                <span class="sn-icon sn-icon-edit"></span>
               <% end %>
               <%= link_to my_module_my_module_tag_path(@my_module, mmt, format: :json), method: :delete, remote: true, class: 'btn btn-link remove-tag-link', title: t("experiments.canvas.modal_manage_tags.remove_tag", module: @my_module.name), data: {tag_id: tag.id} do %>
-                <span class="fas fa-times"></span>
+                <span class="sn-icon sn-icon-close-remove"></span>
               <% end %>
               <%= bootstrap_form_for tag, remote: true, url: project_tag_path(@my_module.experiment.project, tag, format: :json), data: {tag_id: tag.id}, method: :delete, html: { class: "delete-tag-form"} do |f| %>
                 <%= hidden_field_tag :my_module_id, @my_module.id %>
                 <%= f.button class: 'btn btn-link delete-tag-link', title: t("experiments.canvas.modal_manage_tags.delete_tag"), data: { confirm: t("experiments.canvas.modal_manage_tags.delete_tag_confirmation") } do %>
-                  <span class="fas fa-trash-alt"></span>
+                  <span class="sn-icon sn-icon-delete-alt"></span>
                 <% end %>
               <% end %>
             <% end %>
@@ -44,7 +44,7 @@
                 <span class="fas fa-check"></span>
               <% end %>
               <%= link_to "", remote: true, class: 'btn btn-link cancel-tag-link', title: t("experiments.canvas.modal_manage_tags.cancel_tag") do %>
-                <span class="fas fa-times"></span>
+                <span class="sn-icon sn-icon-close-remove"></span>
               <% end %>
             </div>
           <% end %>
@@ -81,7 +81,7 @@
           <%= f.hidden_field :name, :value => t("tags.create.new_name") %>
           <%= f.hidden_field :color, :value => Constants::TAG_COLORS[0] %>
           <%= f.button class: "btn btn-primary" do %>
-            <span class="fas fa-plus"></span>
+            <span class="sn-icon sn-icon-new-task"></span>
             <span class="hidden-xs"><%=t "experiments.canvas.modal_manage_tags.create_new" %></span>
           <% end %>
         <% end %>
diff --git a/app/views/my_modules/_header.html.erb b/app/views/my_modules/_header.html.erb
index 32a22aca6..c62119884 100644
--- a/app/views/my_modules/_header.html.erb
+++ b/app/views/my_modules/_header.html.erb
@@ -3,7 +3,7 @@
     <i class="sn-icon sn-icon-navigator sci--layout--navigator-open cursor-pointer p-1.5 border rounded border-sn-light-grey mr-4"></i>
     <h1 class="my_module-name" data-toggle="tooltip" data-placement="bottom" title="<%= @my_module.name %>">
       <% if @my_module.archived_branch? %>
-        <i class="fas fa-archive" data-view-mode="archived"></i>
+        <i class="sn-icon sn-icon-archive" data-view-mode="archived"></i>
       <% end %>
       <% if @inline_editable_title_config.present? %>
               <%= render partial: "shared/inline_editing",
diff --git a/app/views/my_modules/_module_header_due_date.html.erb b/app/views/my_modules/_module_header_due_date.html.erb
index 996e93d04..2ad5a3114 100644
--- a/app/views/my_modules/_module_header_due_date.html.erb
+++ b/app/views/my_modules/_module_header_due_date.html.erb
@@ -6,7 +6,7 @@
   </span>
   <% if due_date_editable %>
     <div class="datetime-picker-container" id="due-date">
-      <span class="fas fa-calendar-alt"></span>
+      <span class="sn-icon sn-icon-calendar"></span>
       <input id="calendarDueDate"
              type="datetime"
              data-toggle='date-time-picker'
@@ -19,6 +19,6 @@
              data-date-orientation="left"
              value="<%= my_module.due_date ? l(my_module.due_date, format: :full) : '' %>"/>
     </div>
-    <span class="fas fa-times clear-date" data-toggle='clear-date-time-picker' data-target='calendarDueDate'></span>
+    <span class="sn-icon sn-icon-close-remove clear-date" data-toggle='clear-date-time-picker' data-target='calendarDueDate'></span>
   <% end %>
 </span>
diff --git a/app/views/my_modules/_module_header_start_date.html.erb b/app/views/my_modules/_module_header_start_date.html.erb
index be77b6ba9..b80559fd9 100644
--- a/app/views/my_modules/_module_header_start_date.html.erb
+++ b/app/views/my_modules/_module_header_start_date.html.erb
@@ -6,7 +6,7 @@
   </span>
   <% if start_date_editable %>
     <div class="datetime-picker-container" id="start-date">
-      <span class="fas fa-calendar-alt"></span>
+      <span class="sn-icon sn-icon-calendar"></span>
       <input id="calendarStartDate"
              type="datetime"
              data-toggle='date-time-picker'
@@ -18,6 +18,6 @@
              data-date-use-current="false"
              value="<%= my_module.started_on ? l(my_module.started_on, format: :full) : '' %>"/>
     </div>
-    <span class="fas fa-times clear-date" data-toggle='clear-date-time-picker' data-target='calendarStartDate'></span>
+    <span class="sn-icon sn-icon-close-remove clear-date" data-toggle='clear-date-time-picker' data-target='calendarStartDate'></span>
   <% end %>
 </span>
diff --git a/app/views/my_modules/_result.html.erb b/app/views/my_modules/_result.html.erb
index 7c4676c85..a9e583849 100644
--- a/app/views/my_modules/_result.html.erb
+++ b/app/views/my_modules/_result.html.erb
@@ -3,9 +3,9 @@
     <% if result.is_text %>
     <span class="fas fa-font"></span>
     <% elsif result.is_table %>
-    <span class="fas fa-table"></span>
+    <span class="sn-icon sn-icon-tables"></span>
     <% elsif result.is_asset %>
-    <span class="fas fa-paperclip"></span>
+    <span class="sn-icon sn-icon-files"></span>
     <% end %>
   </div>
   <div class="panel panel-default">
@@ -13,7 +13,7 @@
       <div class="panel-options pull-right">
         <% if result.editable? && can_manage_my_module?(result.my_module) %>
           <a class="btn btn-light icon-btn edit-result-button <%= edit_result_button_class(result) %>" id="<%= result.id %>_edit" href="<%= edit_result_link(result) %>" data-remote="true" title="<%= t'my_modules.results.options.edit_title' %>">
-            <span class="fas fa-pencil-alt"></span>
+            <span class="sn-icon sn-icon-edit"></span>
           </a>
         <% end %>
         <% if can_manage_result?(result) %>
diff --git a/app/views/my_modules/_tags.html.erb b/app/views/my_modules/_tags.html.erb
index 4a850de64..2cc3bc244 100644
--- a/app/views/my_modules/_tags.html.erb
+++ b/app/views/my_modules/_tags.html.erb
@@ -1,7 +1,7 @@
 <div class="select-container">
   <div class="edit-button-container hidden">
     <a class="edit-tags-link" data-remote="true" href="<%= my_module_tags_edit_path(@my_module, format: :json) %>">
-        <i class="fas fa-cog"></i>
+        <i class="sn-icon sn-icon-settings"></i>
         <span class="hidden-xs"><%= t("my_modules.details.manage_tags") %></span>
     </a>
   </div>
diff --git a/app/views/my_modules/activities/_top_pane.html.erb b/app/views/my_modules/activities/_top_pane.html.erb
index 8d7c9535b..6e6045ae0 100644
--- a/app/views/my_modules/activities/_top_pane.html.erb
+++ b/app/views/my_modules/activities/_top_pane.html.erb
@@ -1,20 +1,20 @@
 <div class="ga-actions">
   <div class="sci-btn-group">
     <a id="global-activities-expand-all" class="hide-actions btn btn-light" href="#" data-turbolinks="false">
-      <i class="fas fa-caret-down"></i><%= t('activities.index.expand_all') %>
+      <i class="sn-icon sn-icon-close-hide"></i><%= t('activities.index.expand_all') %>
     </a>
     <a id="global-activities-colapse-all" class="hide-actions btn btn-light" href="#" data-turbolinks="false">
-      <i class="fas fa-caret-up"></i><%= t('activities.index.collapse_all') %>
+      <i class="sn-icon sn-icon-open-show"></i><%= t('activities.index.collapse_all') %>
     </a>
   </div>
   <div class="ga-search-container">
     <input type="text" class="search-field" placeholder="Search..." aria-describedby="basic-addon1">
-    <i class="fas fa-search"></i>
+    <i class="sn-icon sn-icon-search"></i>
   </div>
 </div>
 <div class="ga-tags-container">
   <div class="ga-tags perfect-scrollbar"></div>
   <div class="btn btn-light clear-container">
-    <i class="fas fa-times-circle"></i><%= t('global_activities.index.clear_filters') %>
+    <i class="sn-icon sn-icon-close-remove"></i><%= t('global_activities.index.clear_filters') %>
   </div>
 </div>
diff --git a/app/views/my_modules/archive/_result.html.erb b/app/views/my_modules/archive/_result.html.erb
index dc8b1c021..0c8c89f0c 100644
--- a/app/views/my_modules/archive/_result.html.erb
+++ b/app/views/my_modules/archive/_result.html.erb
@@ -36,14 +36,14 @@
     <h3 class="panel-title">
       <% if result.is_asset %>
         <% if result.asset.image? %>
-          <span class="fas fa-paperclip"></span>
+          <span class="sn-icon sn-icon-files"></span>
         <% else %>
-          <span class="fas fa-paperclip"></span>
+          <span class="sn-icon sn-icon-files"></span>
         <% end %>
       <% elsif result.is_text %>
         <span class="fas fa-asterisk"></span>
       <% elsif result.is_table %>
-        <span class="fas fa-table"></span>
+        <span class="sn-icon sn-icon-tables"></span>
       <% end %>
       <%= result.name %>
     </h3>
diff --git a/app/views/my_modules/modals/_assign_repository_records_modal_content.html.erb b/app/views/my_modules/modals/_assign_repository_records_modal_content.html.erb
index 091d824f4..ff4cc468f 100644
--- a/app/views/my_modules/modals/_assign_repository_records_modal_content.html.erb
+++ b/app/views/my_modules/modals/_assign_repository_records_modal_content.html.erb
@@ -47,7 +47,7 @@
 </div>
 <div class="modal-footer">
   <a class="btn btn-light" data-dismiss="modal">
-    <i class="fas fa-times"></i>
+    <i class="sn-icon sn-icon-close-remove"></i>
     <%= t('general.cancel') %>
   </a>
   <% if downstream %>
diff --git a/app/views/my_modules/modals/_new_modal.html.erb b/app/views/my_modules/modals/_new_modal.html.erb
index ace16fecd..cdc1c8bbe 100644
--- a/app/views/my_modules/modals/_new_modal.html.erb
+++ b/app/views/my_modules/modals/_new_modal.html.erb
@@ -22,7 +22,7 @@
               <div class="form-group">
                 <div class="sci-input-container right-icon my-module-due-date-container">
                   <label for="my_module_due_date"><%= t('experiments.canvas.new_my_module_modal.due_date') %></label>
-                  <i class="fas fa-calendar-alt"></i>
+                  <i class="sn-icon sn-icon-calendar"></i>
                   <input id="my_module_due_date"
                          type="datetime"
                          name="my_module[due_date]"
diff --git a/app/views/my_modules/modals/_update_repository_records_modal_content.html.erb b/app/views/my_modules/modals/_update_repository_records_modal_content.html.erb
index fe17af485..5279b5c7a 100644
--- a/app/views/my_modules/modals/_update_repository_records_modal_content.html.erb
+++ b/app/views/my_modules/modals/_update_repository_records_modal_content.html.erb
@@ -28,7 +28,7 @@
     <% if rows_to_assign.values.any? %>
       <div class="rows-to-assign">
         <p class="header">
-          <i class="fas fa-plus"></i>
+          <i class="sn-icon sn-icon-new-task"></i>
           <%= t('my_modules.modals.update_repository_record.newly_assigned_items') %>
         </p>
         <ul class="rows-list">
@@ -41,7 +41,7 @@
     <% if rows_to_unassign.values.any? %>
       <div class="rows-to-unassign">
         <p class="header">
-          <i class="fas fa-minus"></i>
+          <i class="sn-icon sn-icon-minus"></i>
           <%= t('my_modules.modals.update_repository_record.items_will_be_removed') %>
         </p>
         <ul class="rows-list">
@@ -78,7 +78,7 @@
 </div>
 <div class="modal-footer">
   <a class="btn btn-light" data-dismiss="modal">
-    <i class="fas fa-times"></i>
+    <i class="sn-icon sn-icon-close-remove"></i>
     <%= t('general.cancel') %>
   </a>
   <% if downstream %>
diff --git a/app/views/my_modules/repositories/_consume_stock_modal_content.html.erb b/app/views/my_modules/repositories/_consume_stock_modal_content.html.erb
index 392ffa075..f24900460 100644
--- a/app/views/my_modules/repositories/_consume_stock_modal_content.html.erb
+++ b/app/views/my_modules/repositories/_consume_stock_modal_content.html.erb
@@ -40,7 +40,7 @@
             <span class="units"><%= @stock_value.repository_stock_unit_item&.data %></span>
           </div>
           <div class="stock-arrow">
-            <i class="fas fa-arrow-right"></i>
+            <i class="sn-icon sn-icon-move"></i>
           </div>
           <div class="stock-final-container ">
             <span class="subtitle"><%= t('repository_stock_values.manage_modal.new_stock') %></span>
diff --git a/app/views/my_modules/repositories/_full_view_modal.html.erb b/app/views/my_modules/repositories/_full_view_modal.html.erb
index ecf1d5192..87f5338a4 100644
--- a/app/views/my_modules/repositories/_full_view_modal.html.erb
+++ b/app/views/my_modules/repositories/_full_view_modal.html.erb
@@ -22,11 +22,11 @@
           <div class="">
             <div class="pull-left sci-btn-group">
               <button id="showVersionsSidebar" type="button" class="btn btn-secondary">
-                <span class="fas fa-eye"></span>
+                <span class="sn-icon sn-icon-visibility-show"></span>
                 <%= t('my_modules.repository.snapshots.full_view.versions_sidebar_button') %>
               </button>
               <button id="exportAssignedItems" type="button" class="btn btn-secondary">
-                <span class="fas fa-upload"></span>
+                <span class="sn-icon sn-icon-import"></span>
                 <%= t('my_modules.repository.snapshots.full_view.export_button') %>
               </button>
             </div>
diff --git a/app/views/my_modules/repositories/_full_view_sidebar.html.erb b/app/views/my_modules/repositories/_full_view_sidebar.html.erb
index 632f09ea4..da91bb695 100644
--- a/app/views/my_modules/repositories/_full_view_sidebar.html.erb
+++ b/app/views/my_modules/repositories/_full_view_sidebar.html.erb
@@ -1,7 +1,7 @@
 <div class="repository-versions-header">
   <h4><%= t('my_modules.repository.snapshots.full_view.header') %>
     <a id="collapseVersionsSidebar" class="pull-right sidebar-collapse-button" href="#">
-      <i class="fas fa-angle-double-right"></i>
+      <i class="sn-icon sn-icon sn-icon-double-navigate-after"></i>
     </a>
   </h4>
 </div>
@@ -22,7 +22,7 @@
   <% else %>
     <div class="list-group-item disabled">
       <h2 class="list-group-item-heading">
-        <i class="fas fa-minus-circle"></i>
+        <i class="sn-icon sn-icon-minus-circle"></i>
         <%= t('my_modules.repository.snapshots.full_view.live') %>
       </h2>
       <% if @repository %>
diff --git a/app/views/my_modules/repositories/_full_view_version.html.erb b/app/views/my_modules/repositories/_full_view_version.html.erb
index 1ddb2340f..f5e7da95c 100644
--- a/app/views/my_modules/repositories/_full_view_version.html.erb
+++ b/app/views/my_modules/repositories/_full_view_version.html.erb
@@ -30,7 +30,7 @@
     <div class="col-xs-4">
       <% if can_delete_snapshot %>
       <a class="pull-right btn btn-light icon-btn version-button delete-snapshot-button" href="#" data-action-path="<%= my_module_repository_snapshot_path(@my_module, repository_snapshot) %>">
-        <i class="fas fa-trash"></i>
+        <i class="sn-icon sn-icon-delete"></i>
       </a>
       <% end %>
     </div>
diff --git a/app/views/my_modules/repositories/_repositories_dropdown_list.html.erb b/app/views/my_modules/repositories/_repositories_dropdown_list.html.erb
index 1f022dffc..e33e411db 100644
--- a/app/views/my_modules/repositories/_repositories_dropdown_list.html.erb
+++ b/app/views/my_modules/repositories/_repositories_dropdown_list.html.erb
@@ -6,7 +6,7 @@
       data-rows-count="<%= repository.rows_count %>" >
     <% if repository.shared_with?(current_team) %>
       <span class="shared-icon">
-        <i class="fas fa-users"></i>
+        <i class="sn-icon sn-icon sn-icon-users"></i>
       </span>
     <% end %>
     <span class="name" data-rows-count="<%= repository.rows_count %>"><%= repository.name %></span>
diff --git a/app/views/my_modules/repositories/_repositories_list.html.erb b/app/views/my_modules/repositories/_repositories_list.html.erb
index 621677a87..f301f069d 100644
--- a/app/views/my_modules/repositories/_repositories_list.html.erb
+++ b/app/views/my_modules/repositories/_repositories_list.html.erb
@@ -17,7 +17,7 @@
       <% end %>
       <div class="action-buttons">
         <button class="btn btn-light icon-btn full-screen" data-table-url="<%= assigned_repository_full_view_table_path(@my_module, repository) %>?include_stock_consumption=true">
-          <i class="fas fa-expand"></i>
+          <i class="sn-icon sn-icon-expand"></i>
         </button>
       </div>
     </a>
diff --git a/app/views/my_modules/results.html.erb b/app/views/my_modules/results.html.erb
index e57299afc..058352e11 100644
--- a/app/views/my_modules/results.html.erb
+++ b/app/views/my_modules/results.html.erb
@@ -20,7 +20,7 @@
     <% if can_manage_my_module?(@my_module) %>
       <div class="add-result-dropdown dropdown sci-dropdown">
         <a href="#" id="add-result-button" class="btn btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-          <span class="fas fa-plus"></span>
+          <span class="sn-icon sn-icon-new-task"></span>
           <span><%= t("my_modules.results.add_label") %></span>
           <span class="caret pull-right"></span>
         </a>
@@ -29,10 +29,10 @@
             <i class="fas fa-font"></i><%= t("my_modules.results.new_text_result") %>
           </li>
           <li id="new-result-table" data-href="<%= new_my_module_result_table_path(my_module_id: @my_module.id, page: params[:page], order: params[:order]) %>">
-            <i class="fas fa-table"></i><%= t("my_modules.results.new_table_result") %>
+            <i class="sn-icon sn-icon-tables"></i><%= t("my_modules.results.new_table_result") %>
           </li>
           <li id="new-result-asset" data-href="<%= new_my_module_result_asset_path(my_module_id: @my_module.id, page: params[:page], order: params[:order]) %>">
-            <i class="fas fa-paperclip"></i><%= t("my_modules.results.new_asset_result") %>
+            <i class="sn-icon sn-icon-files"></i><%= t("my_modules.results.new_asset_result") %>
           </li>
           <%= render partial: '/assets/marvinjs/create_marvin_sketch_li',
                        locals: {  element_id: @my_module.id, element_type: 'Result',  sketch_container: "#results[data-module-id=#{@my_module.id}]" } %>
@@ -45,17 +45,17 @@
     <% end %>
     <div class="sci-btn-group collapse-expand-result">
       <button class="btn btn-light" id="results-collapse-btn">
-        <span class="fas fa-caret-up"></span>
+        <span class="sn-icon sn-icon-open-show"></span>
         <span class="hidden-xs-custom"><%= t'my_modules.results.collapse_label' %></span>
       </button>
       <button class="btn btn-light" id="results-expand-btn">
-        <span class="fas fa-caret-down"></span>
+        <span class="sn-icon sn-icon-close-hide"></span>
         <span class="hidden-xs-custom"><%= t'my_modules.results.expand_label' %></span>
       </button>
     </div>
     <div class="sort-result-dropdown dropdown">
         <button id="sort-result-button" class="btn btn-light icon-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-          <i class="fas fa-sort-amount-up"></i>
+          <i class="sn-icon sn-icon-sort-up"></i>
         </button>
         <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="sort-result-button">
           <li><%= link_to t('general.sort_new.atoz'), results_my_module_path(@my_module, page: params[:page], order: 'atoz'), class: (@results_order == 'atoz' ? 'selected' : '') %></li>
diff --git a/app/views/projects/experiment_archive/_experiment.html.erb b/app/views/projects/experiment_archive/_experiment.html.erb
index b5e633a5f..d2bc1aba5 100644
--- a/app/views/projects/experiment_archive/_experiment.html.erb
+++ b/app/views/projects/experiment_archive/_experiment.html.erb
@@ -18,7 +18,7 @@
       </div>
       <div class="col-xs-8">
         <span title="<%=t "projects.experiment_archive.archived_on_title", date: l(experiment.archived_on, format: :full_date), time: l(experiment.archived_on, format: :time) %>">
-          <span class="fas fa-calendar-alt" aria-hidden="true"></span>
+          <span class="sn-icon sn-icon-calendar" aria-hidden="true"></span>
           <%=l experiment.archived_on, format: :full_date %>
         </span>
       </div>
@@ -29,7 +29,7 @@
       </div>
       <div class="col-xs-8">
         <span title="<%=t "projects.experiment_archive.created_on_title", date: l(experiment.created_at, format: :full_date), time: l(experiment.created_at, format: :time) %>">
-          <span class="fas fa-calendar-alt" aria-hidden="true"></span>
+          <span class="sn-icon sn-icon-calendar" aria-hidden="true"></span>
           <%=l experiment.created_at, format: :full_date %>
         </span>
       </div>
@@ -40,7 +40,7 @@
       </div>
       <div class="col-xs-8">
         <span title="<%=t "projects.experiment_archive.created_on_title", date: l(experiment.updated_at, format: :full_date), time: l(experiment.updated_at, format: :time) %>">
-          <span class="fas fa-calendar-alt" aria-hidden="true"></span>
+          <span class="sn-icon sn-icon-calendar" aria-hidden="true"></span>
           <%=l experiment.updated_at, format: :full_date %>
         </span>
       </div>
diff --git a/app/views/projects/index/_folder_card.html.erb b/app/views/projects/index/_folder_card.html.erb
index 892b30ae0..26db6d759 100644
--- a/app/views/projects/index/_folder_card.html.erb
+++ b/app/views/projects/index/_folder_card.html.erb
@@ -19,7 +19,7 @@
                 sidebar_url: sidebar_team_path(current_team, project_folder_id: folder.id)
               } do %>
     <div class="icon-folder">
-      <i class="fas fa-folder"></i>
+      <i class="sn-icon sn-icon-projects"></i>
     </div>
     <div class="name table-cell" title="<%= folder.name %>">
       <%= folder.name %>
diff --git a/app/views/projects/index/_header.html.erb b/app/views/projects/index/_header.html.erb
index 43949f47a..df6d9f7e1 100644
--- a/app/views/projects/index/_header.html.erb
+++ b/app/views/projects/index/_header.html.erb
@@ -15,7 +15,7 @@
         </h1>
       <% end %>
     <h1 data-view-mode="archived">
-      <i class="fas fa-archive"></i>&nbsp;
+      <i class="sn-icon sn-icon-archive"></i>&nbsp;
       <span class="projects-title name-readonly-placeholder"><%= current_folder&.name || t('projects.index.head_title_archived') %></span>
     </h1>
   </div>
diff --git a/app/views/projects/index/_project_actions_dropdown.html.erb b/app/views/projects/index/_project_actions_dropdown.html.erb
index 4d209affd..2c88b534c 100644
--- a/app/views/projects/index/_project_actions_dropdown.html.erb
+++ b/app/views/projects/index/_project_actions_dropdown.html.erb
@@ -11,7 +11,7 @@
                     method: :put,
                     remote: true,
                     class: 'project-archive-restore-form') do %>
-        <i class="fas fa-undo"></i>
+        <i class="sn-icon sn-icon-restore"></i>
         <span><%= t('projects.index.restore_option') %></span>
       <% end %>
     </li>
@@ -24,7 +24,7 @@
           class="edit-project-btn"
           data-action="edit"
           data-remote="true">
-        <i class="fas fa-pencil-alt"></i>
+        <i class="sn-icon sn-icon-edit"></i>
         <span><%= t('projects.index.edit_option') %></span>
       </a>
     </li>
@@ -34,7 +34,7 @@
   <li class="form-dropdown-item">
     <%= link_to can_manage_project_users?(project) ? edit_access_permissions_project_path(project) : access_permissions_project_path(project),
                 data: { action: 'remote-modal'} do %>
-      <i class="fas fa-door-open"></i>
+      <i class="sn-icon sn-icon-project-member-access"></i>
       <%= I18n.t('projects.index.project_members_access') %>
     <% end  %>
   </li>
@@ -43,7 +43,7 @@
   <% if can_manage_team?(project.team) %>
     <li class="form-dropdown-item">
       <a href="#" data-project-id="<%= project.id %>" data-url="/project_folders/move_to_modal" class="move-projects-btn">
-        <i class="fas fa-arrow-right"></i>
+        <i class="sn-icon sn-icon-move"></i>
         <%= I18n.t('projects.index.move_button') %>
       </a>
     </li>
@@ -53,7 +53,7 @@
   <% if can_export_project?(project) %>
     <li class="form-dropdown-item">
       <a href="#" data-project-id="<%= project.id %>" data-url="<%= export_projects_modal_team_path(project.team) %>" class="export-projects-btn">
-        <i class="fas fa-file-export"></i>
+        <i class="sn-icon sn-icon-export"></i>
         <%= I18n.t('projects.export_projects.export_button') %>
       </a>
     </li>
@@ -67,7 +67,7 @@
                     remote: true,
                     class: 'project-archive-restore-form',
                     data: { confirm: t('projects.index.archive_confirm') }) do %>
-        <i class="fas fa-archive"></i>
+        <i class="sn-icon sn-icon-archive"></i>
         <span><%= t('projects.index.archive_option') %></span>
       <% end %>
     </li>
@@ -79,7 +79,7 @@
         data-turbolinks="false"
         data-object-type="Project"
         data-object-id="<%= project.id %>">
-      <i class="fas fa-comment"></i>
+      <i class="sn-icon sn-icon-comments"></i>
       <span id="comment-count-<%= project.id %>">
         <% unseen_comment_count = project.comments.unseen_by(current_user).count %>
         <% if unseen_comment_count.positive? %>
@@ -93,7 +93,7 @@
   <!-- Open activities -->
   <li>
     <a href="/global_activities?<%= Activity.url_search_query({ subjects: { Project: [project] } }) %>">
-      <i class="fas fa-list"></i>
+      <i class="sn-icon sn-icon-activities"></i>
       <span><%= t('projects.index.activities_option') %></span>
     </a>
   </li>
diff --git a/app/views/projects/index/_project_card.html.erb b/app/views/projects/index/_project_card.html.erb
index cc3a90727..3ff946f92 100644
--- a/app/views/projects/index/_project_card.html.erb
+++ b/app/views/projects/index/_project_card.html.erb
@@ -32,7 +32,7 @@
       class="dropdown dropdown-async project-actions-menu  <%= 'new-comments' if has_unseen_comments?(project) %>"
       data-dropdown-url="<%= actions_dropdown_project_path(project) %>">
       <button class="btn btn-light dropdown-toggle icon-btn" type="button" id="projectActionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-        <i class="fas fa-ellipsis-h"></i>
+        <i class="sn-icon sn-icon-more-hori"></i>
       </button>
       <ul></ul>
     </div>
@@ -70,7 +70,7 @@
         <%= link_to edit_access_permissions_project_path(project), class: 'project-users-link', data: { action: 'remote-modal' } do %>
           <%= render partial: 'projects/index/users_list.html.erb', locals: { project: project } %>
           <span class="new-user global-avatar-container">
-            <i class="fas fa-plus"></i>
+            <i class="sn-icon sn-icon-new-task"></i>
           </span>
         <% end %>
       <% else %>
diff --git a/app/views/projects/index/_toolbar.html.erb b/app/views/projects/index/_toolbar.html.erb
index 42e6e7b4a..ca980d2b6 100644
--- a/app/views/projects/index/_toolbar.html.erb
+++ b/app/views/projects/index/_toolbar.html.erb
@@ -8,7 +8,7 @@
                       class: 'btn btn-primary new-project-btn',
                       data: { view_mode: 'active' },
                       remote: true do %>
-            <span class="fas fa-plus" aria-hidden="true"></span>
+            <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
             <span class="hidden-xs"><%= t('projects.index.new') %></span>
           <% end %>
         <% end %>
@@ -17,7 +17,7 @@
           <%= link_to new_project_folder_path(project_folder_id: current_folder, view_mode: projects_view_mode),
                       class: 'btn btn-light new-project-folder-btn',
                       remote: true do %>
-            <span class="fas fa-folder" aria-hidden="true"></span>
+            <span class="sn-icon sn-icon-projects" aria-hidden="true"></span>
             <span class="hidden-xs"><%= t('projects.index.new_folder') %></span>
           <% end %>
         <% end %>
@@ -86,7 +86,7 @@
           <% end %>
           <div class="dropdown sort-menu">
             <button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-              <span><i class="fas fa-sort-amount-down"></i></span>
+              <span><i class="sn-icon sn-icon-sort-down"></i></span>
             </button>
             <ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu dropdown-menu-right" aria-labelledby="sortMenu">
               <% %w(archived_new archived_old new old atoz ztoa id_asc id_desc).each_with_index do |sort, i| %>
diff --git a/app/views/projects/index/modals/_move_to_folders_tree.html.erb b/app/views/projects/index/modals/_move_to_folders_tree.html.erb
index f254e1227..4134b9d22 100644
--- a/app/views/projects/index/modals/_move_to_folders_tree.html.erb
+++ b/app/views/projects/index/modals/_move_to_folders_tree.html.erb
@@ -1,6 +1,6 @@
 <ul>
   <% records.each do |record| %>
-    <li id="<%= "folder_#{record[:folder].id}" %>" data-jstree='{"icon":"fas fa-folder icon-folder"}'>
+    <li id="<%= "folder_#{record[:folder].id}" %>" data-jstree='{"icon":"sn-icon sn-icon-folder icon-folder"}'>
       <%= record[:folder].name %>
       <%= render partial: 'projects/index/modals/move_to_folders_tree.html.erb', locals: { records: record[:children] } %>
     </li>
diff --git a/app/views/projects/index/modals/_move_to_modal_contents.html.erb b/app/views/projects/index/modals/_move_to_modal_contents.html.erb
index e82532ba5..750f1fe11 100644
--- a/app/views/projects/index/modals/_move_to_modal_contents.html.erb
+++ b/app/views/projects/index/modals/_move_to_modal_contents.html.erb
@@ -10,14 +10,14 @@
 
   <div class="sci-input-container left-icon">
     <input type="search" class="form-control sci-input-field" id="searchFolderTree" placeholder="Find a folder"/>
-    <i class="fas fa-search"></i>
+    <i class="sn-icon sn-icon-search"></i>
   </div>
 
 
   <div class="folders-tree-container">
     <div id="moveToFolders">
       <ul>
-        <li class="jstree-open" id="root_folder" data-jstree='{"icon":"fas fa-folder root-folder"}'>
+        <li class="jstree-open" id="root_folder" data-jstree='{"icon":"sn-icon sn-icon-projects root-folder"}'>
           <a class="jstree-clicked" href="#">Projects</a>
           <%= render partial: 'projects/index/modals/move_to_folders_tree.html.erb',
                      locals: { records: sidebar_folders_tree(current_team, current_user, @current_sort, folders_only: true) } %>
diff --git a/app/views/projects/show/_experiment.html.erb b/app/views/projects/show/_experiment.html.erb
index 1449635c8..69bf76d48 100644
--- a/app/views/projects/show/_experiment.html.erb
+++ b/app/views/projects/show/_experiment.html.erb
@@ -13,13 +13,13 @@
 
       <% if experiment.archived_branch? %>
         <div class="panel-date">
-          <span class="fas fa-archive" aria-hidden="true"></span>
+          <span class="sn-icon sn-icon-archive" aria-hidden="true"></span>
           <%= l(experiment_archived_on(experiment), format: :full_date) %>
         </div>
       <% end %>
 
       <div class="panel-date">
-        <span class="fas fa-calendar-alt" aria-hidden="true"></span>
+        <span class="sn-icon sn-icon-calendar" aria-hidden="true"></span>
         <%= l(experiment.created_at, format: :full_date) %> - <%= l(experiment.updated_at, format: :full_date) %>
       </div>
 
diff --git a/app/views/projects/show/_experiment_actions_dropdown.html.erb b/app/views/projects/show/_experiment_actions_dropdown.html.erb
index 814e33059..143eb0a93 100644
--- a/app/views/projects/show/_experiment_actions_dropdown.html.erb
+++ b/app/views/projects/show/_experiment_actions_dropdown.html.erb
@@ -7,7 +7,7 @@
                     class: 'btn btn-light',
                     form_class: 'experiment-action-form',
                     params: { experiment: { archived: false } }) do %>
-        <i class="fas fa-undo"></i>
+        <i class="sn-icon sn-icon-restore"></i>
         <span><%= t('experiments.index.restore_option') %></span>
       <% end %>
     </li>
@@ -27,14 +27,14 @@
   <% if can_manage_experiment_users?(experiment) %>
     <li class="form-dropdown-item">
       <%= link_to edit_access_permissions_experiment_path(experiment), data: { action: 'remote-modal'} do %>
-        <i class="fas fa-door-open"></i>
+        <i class="sn-icon sn-icon-project-member-access"></i>
         <span><%= t('experiments.index.experiment_access') %></span>
       <% end %>
     </li>
   <% else %>
     <li class="form-dropdown-item">
       <%= link_to access_permissions_experiment_path(experiment), data: { action: 'remote-modal'} do %>
-        <i class="fas fa-door-open"></i>
+        <i class="sn-icon sn-icon-project-member-access"></i>
         <span><%= t('experiments.index.experiment_access') %></span>
       <% end %>
     </li>
@@ -45,7 +45,7 @@
       <%= link_to move_modal_experiment_url(experiment),
                   remote: true,
                   class: 'move-experiment experiment-action-link' do %>
-        <i class="fas fa-arrow-right"></i>
+        <i class="sn-icon sn-icon-move"></i>
         <span><%= t('experiments.index.move_option') %></span>
       <% end %>
     </li>
@@ -56,7 +56,7 @@
       <%= link_to clone_modal_experiment_url(experiment),
                   remote: true, type: 'button',
                   class: 'clone-experiment experiment-action-link' do %>
-        <i class="fas fa-copy"></i>
+        <i class="sn-icon sn-icon-duplicate"></i>
         <span><%= t('experiments.index.clone_option') %></span>
       <% end %>
     </li>
@@ -70,7 +70,7 @@
                     class: 'btn btn-light',
                     form_class: 'experiment-action-form',
                     data: { confirm: t('experiments.index.archive_confirm') } ) do %>
-        <i class="fas fa-archive"></i>
+        <i class="sn-icon sn-icon-archive"></i>
         <span><%= t('experiments.index.archive_option') %></span>
     <% end %>
     </li>
diff --git a/app/views/projects/show/_experiment_card.html.erb b/app/views/projects/show/_experiment_card.html.erb
index e19561e6e..109cdfdb4 100644
--- a/app/views/projects/show/_experiment_card.html.erb
+++ b/app/views/projects/show/_experiment_card.html.erb
@@ -15,7 +15,7 @@
   <div class="actions actions-cell table-cell">
     <div class="dropdown dropdown-async experiment-actions-menu" data-dropdown-url="<%= actions_dropdown_experiment_path(experiment) %>">
       <button class="btn btn-light dropdown-toggle icon-btn" type="button" id="experimentActionsDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-        <i class="fas fa-ellipsis-h"></i>
+        <i class="sn-icon sn-icon-more-hori"></i>
       </button>
       <ul></ul>
     </div>
diff --git a/app/views/projects/show/_header.html.erb b/app/views/projects/show/_header.html.erb
index a6f00e4dd..f156f7b62 100644
--- a/app/views/projects/show/_header.html.erb
+++ b/app/views/projects/show/_header.html.erb
@@ -3,7 +3,7 @@
     <i class="sn-icon sn-icon-navigator sci--layout--navigator-open cursor-pointer p-1.5 border rounded border-sn-light-grey mr-4"></i>
     <h1 class="project-name">
       <% if @project.archived? %>
-        <i class="fas fa-archive" data-view-mode="archived"></i>
+        <i class="sn-icon sn-icon-archive" data-view-mode="archived"></i>
       <% end %>
       <% if @inline_editable_title_config.present? %>
               <%= render partial: "shared/inline_editing",
diff --git a/app/views/projects/show/_new_experiment.html.erb b/app/views/projects/show/_new_experiment.html.erb
index 302249779..5bd8d9431 100644
--- a/app/views/projects/show/_new_experiment.html.erb
+++ b/app/views/projects/show/_new_experiment.html.erb
@@ -10,7 +10,7 @@
       <%= link_to new_project_experiment_url(@project),
                   remote: true,
                   class: 'big-plus' do %>
-        <i class="fas fa-plus"></i>
+        <i class="sn-icon sn-icon-new-task"></i>
       <% end %>
     </div>
   </div>
diff --git a/app/views/projects/show/_toolbar.html.erb b/app/views/projects/show/_toolbar.html.erb
index 9b00a1af5..9ac15a779 100644
--- a/app/views/projects/show/_toolbar.html.erb
+++ b/app/views/projects/show/_toolbar.html.erb
@@ -9,7 +9,7 @@
                     id: 'new-experiment',
                     method: :get,
                     class: 'btn btn-primary' do %>
-        <span class="fas fa-plus" aria-hidden="true"></span>
+        <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
         <span class="hidden-xs"><%= t('experiments.toolbar.new_button') %></span>
       <% end %>
     <% end %>
@@ -63,7 +63,7 @@
     <!-- Sort menu dropdown -->
     <div class="dropdown sort-menu">
       <button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-        <i class="fas fa-sort-amount-up"></i>
+        <i class="sn-icon sn-icon-sort-up"></i>
       </button>
       <ul id="sortMenuDropdown" class="dropdown-menu sort-experiments-menu dropdown-menu-right" aria-labelledby="sortMenu">
         <% %w(archived_new archived_old new old atoz ztoa id_asc id_desc).each_with_index do |sort, i| %>
diff --git a/app/views/protocols/import_export/_import_modal.html.erb b/app/views/protocols/import_export/_import_modal.html.erb
index 6f5247856..8f0001ef5 100644
--- a/app/views/protocols/import_export/_import_modal.html.erb
+++ b/app/views/protocols/import_export/_import_modal.html.erb
@@ -20,7 +20,7 @@
         </div>
         <div class="form-group sci-input-container">
           <label for="protocol_authors">
-            <span class="fas fa-user"></span>&nbsp;<%= t("protocols.import_export.import_modal.authors_label") %>
+            <span class="sn-icon sn-icon-user-menu"></span>&nbsp;<%= t("protocols.import_export.import_modal.authors_label") %>
           </label>
           <input type="text" class="form-control sci-input-field" id="protocol_authors">
         </div>
diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb
index 34d1bd373..6fe3b527f 100644
--- a/app/views/protocols/index.html.erb
+++ b/app/views/protocols/index.html.erb
@@ -16,7 +16,7 @@
       <div class="title-row">
         <% if templates_view_mode_archived?(type: @type) %>
           <h1>
-            <i class="fas fa-archive"></i>
+            <i class="sn-icon sn-icon-archive"></i>
             <%= t('protocols.index.head_title_archived') %>
           </h1>
         <% else %>
diff --git a/app/views/protocols/index/_general_toolbar.html.erb b/app/views/protocols/index/_general_toolbar.html.erb
index 50082eb6e..f0705af77 100644
--- a/app/views/protocols/index/_general_toolbar.html.erb
+++ b/app/views/protocols/index/_general_toolbar.html.erb
@@ -5,7 +5,7 @@
               data-target="#newProtocolModal"
               class="btn btn-primary only-active"
       >
-        <span class="fas fa-plus"></span>
+        <span class="sn-icon sn-icon-new-task"></span>
         <span class="hidden-xs"><%= t("protocols.index.create_new") %></span>
       </button>
 
@@ -14,7 +14,7 @@
           data-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false">
-          <span class="fas fa-upload"></span><span class="hidden-xs"><%= t("protocols.index.import") %></span>
+          <span class="sn-icon sn-icon-import"></span><span class="hidden-xs"><%= t("protocols.index.import") %></span>
         </button>
 
         <ul class="dropdown-menu">
diff --git a/app/views/protocols/index/_protocol_access.html.erb b/app/views/protocols/index/_protocol_access.html.erb
index 1121a4c27..18d77c9e9 100644
--- a/app/views/protocols/index/_protocol_access.html.erb
+++ b/app/views/protocols/index/_protocol_access.html.erb
@@ -3,7 +3,7 @@
         <%= link_to edit_access_permissions_protocol_path(protocol), class: 'protocol-users-link', data: { action: 'remote-modal' } do %>
             <%= render partial: 'protocols/index/users_list.html.erb', locals: { protocol: protocol } %>
             <span class="new-user global-avatar-container">
-                <i class="fas fa-plus"></i>
+                <i class="sn-icon sn-icon-new-task"></i>
             </span>
         <% end %>
     <% else %>
diff --git a/app/views/protocols/index/_protocol_versions_modal.html.erb b/app/views/protocols/index/_protocol_versions_modal.html.erb
index 521ccb007..28d438c58 100644
--- a/app/views/protocols/index/_protocol_versions_modal.html.erb
+++ b/app/views/protocols/index/_protocol_versions_modal.html.erb
@@ -40,7 +40,7 @@
                 <% end %>
                 <% if can_delete_protocol_draft_in_repository?(draft) %>
                   <div data-url="<%= destroy_draft_protocol_path(draft) %>" class="btn btn-light delete-draft">
-                    <i class="fas fa-trash"></i>
+                    <i class="sn-icon sn-icon-delete"></i>
                   </div>
                 <% end %>
               </div>
@@ -94,7 +94,7 @@
                                   placement: :left,
                                   toggle: :tooltip
                                 } do %>
-                    <i class="fas fa-clone"></i>
+                    <i class="sn-icon sn-icon-duplicate"></i>
                   <% end %>
                 <% end %>
               </div>
diff --git a/app/views/protocols/index/_protocolsio_modal_body.html.erb b/app/views/protocols/index/_protocolsio_modal_body.html.erb
index c7826ca90..ea69c890b 100644
--- a/app/views/protocols/index/_protocolsio_modal_body.html.erb
+++ b/app/views/protocols/index/_protocolsio_modal_body.html.erb
@@ -21,14 +21,14 @@
                       type='text'
                       name='key'
                       placeholder="<%= t('protocols.index.protocolsio.search_bar_placeholder') %>" />
-                <i class='fas fa-search'></i>
+                <i class='sn-icon sn-icon-search'></i>
               </div>
             </div>
 
             <div class='protocol-sort'>
               <div class="dropdown sort-menu">
                 <button class="btn btn-light icon-btn" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                  <span><i class="fas fa-sort-amount-down"></i></span>
+                  <span><i class="sn-icon sn-icon-sort-down"></i></span>
                 </button>
                 <ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu dropdown-menu-right" aria-labelledby="sortMenu">
                   <% {atoz: :alpha_asc, ztoa: :alpha_desc, new: :newest, old: :oldest}.each do |name, value| %>
diff --git a/app/views/protocols/show.html.erb b/app/views/protocols/show.html.erb
index af9d84416..fe668796a 100644
--- a/app/views/protocols/show.html.erb
+++ b/app/views/protocols/show.html.erb
@@ -15,7 +15,7 @@
                       } %>
         <% else %>
           <% if @protocol.archived %>
-            <i class="fas fa-archive"></i>&nbsp;
+            <i class="sn-icon sn-icon-archive"></i>&nbsp;
           <% end %>
           <div class="name-readonly-placeholder">
             <% if @protocol.in_repository_draft? %>
diff --git a/app/views/reports/_content_document_preview.html.erb b/app/views/reports/_content_document_preview.html.erb
index ad9bf9283..890127010 100644
--- a/app/views/reports/_content_document_preview.html.erb
+++ b/app/views/reports/_content_document_preview.html.erb
@@ -2,9 +2,9 @@
   <span class="file-name"><%= report.name %></span>
   <div class="sci-btn-group">
      <a class="btn btn-light file-download-link" href="<%= rails_blob_path(report_type == 'docx' ? report.docx_file : report.pdf_file, disposition: 'attachment') %>" data-turbolinks="false">
-      <span class="fas fa-download"></span> <%= t('Download')%>
+      <span class="sn-icon sn-icon-export"></span> <%= t('Download')%>
     </a>
-    <button type="button" class="btn icon-btn btn-light" data-dismiss="modal"><span class="fas fa-times"></span></button>
+    <button type="button" class="btn icon-btn btn-light" data-dismiss="modal"><span class="sn-icon sn-icon-close-remove"></span></button>
   </div>
 </div>
 <div class="modal-body">
diff --git a/app/views/reports/_index_toolbar.html.erb b/app/views/reports/_index_toolbar.html.erb
index d94b449b7..8ee2e3cb0 100644
--- a/app/views/reports/_index_toolbar.html.erb
+++ b/app/views/reports/_index_toolbar.html.erb
@@ -1,7 +1,7 @@
 <% if can_create_reports?(current_team) %>
   <div class="sci-btn-group">
     <%= link_to new_report_path, class: 'btn btn-primary', id: 'new-report-btn' do %>
-      <span class="fas fa-plus" aria-hidden="true"></span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span class="hidden-xs"><%= t("projects.reports.index.new") %></span>
     <% end %>
   </div>
diff --git a/app/views/reports/elements/_my_module_result_asset_element.html.erb b/app/views/reports/elements/_my_module_result_asset_element.html.erb
index d4b2ba53c..698fc0c60 100644
--- a/app/views/reports/elements/_my_module_result_asset_element.html.erb
+++ b/app/views/reports/elements/_my_module_result_asset_element.html.erb
@@ -27,7 +27,7 @@
           <% if asset.file.metadata[:asset_type] == 'bio_eddie' %>
             <%= truncate("#{asset.file.metadata[:name]}.helm", length: Constants::FILENAME_TRUNCATION_LENGTH) %>
             <a class="btn btn-light file-download-link" href="data:text/plain;charset=utf-8,<%= asset.file.metadata[:description] %>" download="<%= asset.file.metadata[:name] %>.helm" data-turbolinks="false">
-              <span class="fas fa-download"></span> <%= t('Download')%>
+              <span class="sn-icon sn-icon-export"></span> <%= t('Download')%>
             </a>
           <% else %>
             <%= truncate(asset.file_name, length: Constants::FILENAME_TRUNCATION_LENGTH) %>
diff --git a/app/views/reports/elements/_step_asset_element.html.erb b/app/views/reports/elements/_step_asset_element.html.erb
index 2e26eaf53..043cffcb1 100644
--- a/app/views/reports/elements/_step_asset_element.html.erb
+++ b/app/views/reports/elements/_step_asset_element.html.erb
@@ -20,7 +20,7 @@
           <% if asset.file.metadata && asset.file.metadata[:asset_type] == 'bio_eddie' %>
             <%= truncate("#{asset.file.metadata[:name]}.helm", length: Constants::FILENAME_TRUNCATION_LENGTH) %>
             <a class="btn btn-light file-download-link" href="data:text/plain;charset=utf-8,<%= asset.file.metadata[:description] %>" download="<%= asset.file.metadata[:name] %>.helm" data-turbolinks="false">
-              <span class="fas fa-download"></span> <%= t('Download')%>
+              <span class="sn-icon sn-icon-export"></span> <%= t('Download')%>
             </a>
           <% else %>
             <%= truncate(asset.file_name, length: Constants::FILENAME_TRUNCATION_LENGTH) %>
diff --git a/app/views/reports/new.html.erb b/app/views/reports/new.html.erb
index b7c3c24e1..97cb01eeb 100644
--- a/app/views/reports/new.html.erb
+++ b/app/views/reports/new.html.erb
@@ -66,7 +66,7 @@
           <ul id="reportGenerateMenuDropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="reportGenerateMenu">
             <li>
               <%= link_to reports_path, remote: true, id: 'saveAsNewReport', class: "disabled", data: { create_url: reports_path } do %>
-                <i class="fas fa-plus-circle"></i>
+                <i class="sn-icon sn-icon-new-task-circle"></i>
                 <%= t("projects.reports.new.save_as_new_report") %>
               <% end %>
             </li>
diff --git a/app/views/reports/wizard/_project_contents.html.erb b/app/views/reports/wizard/_project_contents.html.erb
index b7860ddde..9eb711570 100644
--- a/app/views/reports/wizard/_project_contents.html.erb
+++ b/app/views/reports/wizard/_project_contents.html.erb
@@ -8,16 +8,16 @@
           %>/>
           <span class="sci-checkbox-label"></span>
         </span>
-        <i class="fas fa-caret-down " data-toggle="collapse" href="#experimentContentContainer<%= experiment.id %>" aria-expanded="false"></i>
+        <i class="sn-icon sn-icon-close-hide " data-toggle="collapse" href="#experimentContentContainer<%= experiment.id %>" aria-expanded="false"></i>
         <span class="experiment-name" title="<%= experiment.name %>">
           <%= experiment.name %>
         </span>
         <div class="move-buttons sci-btn-group">
            <button class="btn btn-light icon-btn move-up">
-              <i class="fas fa-arrow-up"></i>
+              <i class="sn-icon sn-icon-sort-up"></i>
            </button>
            <button class="btn btn-light icon-btn move-down">
-              <i class="fas fa-arrow-down"></i>
+              <i class="sn-icon sn-icon-sort-down"></i>
            </button>
         </div>
       </div>
@@ -33,7 +33,7 @@
             <span class="my-module-name" title="<%= my_module.name %>">
               <%= my_module.name %>
             </span>
-            <i class="fas fa-grip-vertical"></i>
+            <i class="sn-icon sn-icon-drag"></i>
           </li>
         <% end %>
       </ul>
diff --git a/app/views/reports/wizard/_second_step.html.erb b/app/views/reports/wizard/_second_step.html.erb
index 6bed8efb1..68cd46da4 100644
--- a/app/views/reports/wizard/_second_step.html.erb
+++ b/app/views/reports/wizard/_second_step.html.erb
@@ -5,11 +5,11 @@
     </div>
     <div class="collapse-buttons sci-btn-group">
        <button class="btn btn-light collapse-all">
-          <i class="fas fa-caret-up"></i>
+          <i class="sn-icon sn-icon-open-show"></i>
           <%= t("projects.reports.wizard.second_step.collapse_all") %>
        </button>
        <button class="btn btn-light expand-all">
-          <i class="fas fa-caret-down"></i>
+          <i class="sn-icon sn-icon-close-hide"></i>
           <%= t("projects.reports.wizard.second_step.expand_all") %>
        </button>
     </div>
diff --git a/app/views/reports/wizard/_third_step.html.erb b/app/views/reports/wizard/_third_step.html.erb
index 73de6b741..1ec86678f 100644
--- a/app/views/reports/wizard/_third_step.html.erb
+++ b/app/views/reports/wizard/_third_step.html.erb
@@ -12,7 +12,7 @@
   <div class="divider"></div>
   <ul class="report-task-settings">
     <li class="content-element">
-      <i class="fas fa-caret-down " data-toggle="collapse" href="#protocolContents" aria-expanded="false"></i>
+      <i class="sn-icon sn-icon-close-hide " data-toggle="collapse" href="#protocolContents" aria-expanded="false"></i>
       <span class="content-element-title">
         <%= t("projects.reports.wizard.third_step.task_protocol") %>
       </span>
@@ -49,7 +49,7 @@
     </li>
     <div class="divider"></div>
     <li class="content-element">
-      <i class="fas fa-caret-down " data-toggle="collapse" href="#repositoriesContents" aria-expanded="false"></i>
+      <i class="sn-icon sn-icon-close-hide " data-toggle="collapse" href="#repositoriesContents" aria-expanded="false"></i>
       <span class="content-element-title">
         <%= t("projects.reports.wizard.third_step.assigned_items") %>
       </span><br>
@@ -96,7 +96,7 @@
     </li>
     <div class="divider"></div>
     <li class="content-element">
-      <i class="fas fa-caret-down " data-toggle="collapse" href="#resultContents" aria-expanded="false"></i>
+      <i class="sn-icon sn-icon-close-hide " data-toggle="collapse" href="#resultContents" aria-expanded="false"></i>
       <span class="content-element-title">
         <%= t("projects.reports.wizard.third_step.results") %>
       </span>
@@ -179,7 +179,7 @@
       <div class="divider"></div>
     </li>
     <li class="content-element">
-      <i class="fas fa-caret-down " data-toggle="collapse" href="#additionalContents" aria-expanded="false"></i>
+      <i class="sn-icon sn-icon-close-hide " data-toggle="collapse" href="#additionalContents" aria-expanded="false"></i>
       <span class="content-element-title">
         <%= t("projects.reports.wizard.third_step.additional_content") %>
       </span>
diff --git a/app/views/repositories/_repository_filters.html.erb b/app/views/repositories/_repository_filters.html.erb
index e13d40dc4..bc41f0937 100644
--- a/app/views/repositories/_repository_filters.html.erb
+++ b/app/views/repositories/_repository_filters.html.erb
@@ -8,7 +8,7 @@
                 data-toggle="dropdown"
                 aria-haspopup="true"
       >
-        <span class="fas fa-filter"></span>
+        <span class="sn-icon sn-icon-filter"></span>
       </button>
       <div
         class="dropdown-menu dropdown-menu-right"
diff --git a/app/views/repositories/_repository_row_info_modal.html.erb b/app/views/repositories/_repository_row_info_modal.html.erb
index c75372188..d47ee2753 100644
--- a/app/views/repositories/_repository_row_info_modal.html.erb
+++ b/app/views/repositories/_repository_row_info_modal.html.erb
@@ -11,7 +11,7 @@
 
       <div class="modal-body">
         <ol class="breadcrumb breadcrumb-repository">
-          <span class="fas fa-list-alt" aria-hidden="true"></span>
+          <span class="sn-icon sn-icon-inventory" aria-hidden="true"></span>
           <%= t('repositories.repository', name: @repository_row.repository.name) %>
           <%= @repository_row.repository.archived? ? I18n.t('atwho.res.archived') : '' %>
         </ol>
@@ -72,7 +72,7 @@
                       <td class="sorting_1">
                         <ol class='breadcrumb'>
                           <li>
-                            <span class='fas fa-users'></span>&nbsp;
+                            <span class='sn-icon sn-icon sn-icon-users'></span>&nbsp;
                             <%= render partial: 'search/results/partials/team_text.html.erb',
                                        locals: { team: my_module.experiment.project.team } %>
                           </li>
diff --git a/app/views/repositories/_sidebar.html.erb b/app/views/repositories/_sidebar.html.erb
index 27f2f2d08..4248f14e6 100644
--- a/app/views/repositories/_sidebar.html.erb
+++ b/app/views/repositories/_sidebar.html.erb
@@ -5,7 +5,7 @@
           class: "sidebar-link repository-link #{ 'selected' if current_page?(repository_path(repository)) }",
           data: {type: 'repository', id: repository.id } do %>
         <% if repository.archived? %>
-          <i class="fas fa-archive"></i>&nbsp;
+          <i class="sn-icon sn-icon-archive"></i>&nbsp;
         <% end %>
         <%= repository.name  %>
         <%= inventory_shared_status_icon(repository, current_team) %>
diff --git a/app/views/repositories/_toolbar_buttons.html.erb b/app/views/repositories/_toolbar_buttons.html.erb
index 784320f72..3d3e8bce8 100644
--- a/app/views/repositories/_toolbar_buttons.html.erb
+++ b/app/views/repositories/_toolbar_buttons.html.erb
@@ -15,13 +15,13 @@
         <button type="button" data-toggle="tooltip" data-placement="bottom" title="<%= t('repositories.show.button_tooltip.new') %>"
                 class="btn btn-primary editAdd auto-shrink-button"
                 id="addRepositoryRecord" data-view-mode="active">
-          <span class="fas fa-plus"></span>
+          <span class="sn-icon sn-icon-new-task"></span>
           <span class="button-text"><%= t("repositories.add_new_record") %></span>
         </button>
         <button type="button" data-toggle="tooltip" data-placement="bottom" title="<%= t('repositories.show.button_tooltip.import') %>"
                 class="btn btn-light editImport auto-shrink-button"
                 id="importRecordsButton" data-view-mode="active">
-          <span class="fas fa-upload"></span>
+          <span class="sn-icon sn-icon-import"></span>
           <span class="button-text"><%= t('repositories.index.options_dropdown.import_items') %></span>
         </button>
       <% end %>
@@ -32,7 +32,7 @@
           <%= t("repositories.save_record") %>
         </button>
         <button type="button" class="btn btn-light prevent-shrink" id="cancelSave" data-view-mode="active">
-          <span class="fas fa-times-circle"></span>
+          <span class="sn-icon sn-icon-close-remove"></span>
           <%= t("repositories.cancel_save") %>
         </button>
       </span>
@@ -80,7 +80,7 @@
       <button class="btn btn-light manage-repo-column-index"
               data-modal-url="<%= repository_repository_columns_path(@repository) %>"
               data-action="new">
-        <span class="fas fa-columns">
+        <span class="sn-icon sn-icon sn-icon-reports">
       </button>
     </div>
   </div>
diff --git a/app/views/repositories/_view_archived_btn.html.erb b/app/views/repositories/_view_archived_btn.html.erb
index a285d4af6..fa1e391ed 100644
--- a/app/views/repositories/_view_archived_btn.html.erb
+++ b/app/views/repositories/_view_archived_btn.html.erb
@@ -3,7 +3,7 @@
   <div class="content-header">
     <div class="title-row">
       <h1 data-view-mode="active"><%= t('libraries.index.head_title') %></h1>
-      <h1 data-view-mode="archived"><i class="fas fa-archive"></i>&nbsp;<%= t('libraries.index.head_title_archived') %></h1>
+      <h1 data-view-mode="archived"><i class="sn-icon sn-icon-archive"></i>&nbsp;<%= t('libraries.index.head_title_archived') %></h1>
     </div>
   </div>
   <div class="content-body">
diff --git a/app/views/repositories/index.html.erb b/app/views/repositories/index.html.erb
index 13d6ec182..6a1573348 100644
--- a/app/views/repositories/index.html.erb
+++ b/app/views/repositories/index.html.erb
@@ -42,7 +42,7 @@
       data-remote="true"
       data-view-mode="active"
       href="<%= create_modal_team_repositories_path(current_team) %>">
-      <span class="fas fa-plus"></span>
+      <span class="sn-icon sn-icon-new-task"></span>
       <span class="hidden-xs"><%= t('libraries.index.no_libraries.create_new_button') %></span>
     </a>
   <% end %>
diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb
index 0f07b260d..c2eafc7a5 100644
--- a/app/views/repositories/show.html.erb
+++ b/app/views/repositories/show.html.erb
@@ -37,7 +37,7 @@
       <% end %>
       <div class="repository-archived-title-name" data-view-mode="archived">
         <% if @repository.archived? %>
-          <i class="fas fa-archive"></i>&nbsp;
+          <i class="sn-icon sn-icon-archive"></i>&nbsp;
           <%= t('repositories.show.archived_inventory', repository_name: @repository.name) %>
         <% else %>
           <%= t('repositories.show.archived_inventory_items', repository_name: @repository.name) %>
diff --git a/app/views/repositories/toolbar/_print_label_button.html.erb b/app/views/repositories/toolbar/_print_label_button.html.erb
index 5a9ab96ca..b9a8d82f8 100644
--- a/app/views/repositories/toolbar/_print_label_button.html.erb
+++ b/app/views/repositories/toolbar/_print_label_button.html.erb
@@ -4,6 +4,6 @@
         title="<%= t('repositories.show.button_tooltip.print_label') %>"
         class="btn btn-light print-label-button auto-shrink-button"
         data-rows="[]" style="display: none">
-  <span class="fas fa-print"></span>
+  <span class="sn-icon sn-icon-printer"></span>
   <span class="button-text"><%= t('repository_row.modal_print_label.print_label') %></span>
 </button>
diff --git a/app/views/repositories/toolbar/_row_actions.html.erb b/app/views/repositories/toolbar/_row_actions.html.erb
index 42f277c6d..585f34f9f 100644
--- a/app/views/repositories/toolbar/_row_actions.html.erb
+++ b/app/views/repositories/toolbar/_row_actions.html.erb
@@ -4,7 +4,7 @@
       <button type="button" title="<%= t('repositories.show.button_tooltip.edit') %>"
               class="btn btn-light editAdd auto-shrink-button"
               id="editRepositoryRecord" data-view-mode="active">
-        <span class="fas fa-pencil-alt"></span>
+        <span class="sn-icon sn-icon-edit"></span>
         <span class="button-text"><%= t("repositories.edit_record") %></span>
       </button>
     <% end %>
@@ -17,7 +17,7 @@
               title="<%= t('repositories.show.button_tooltip.duplicate') %>"
               class="btn btn-light copyRow auto-shrink-button"
               id="copyRepositoryRecords" disabled data-view-mode="active">
-        <span class="fas fa-copy"></span>
+        <span class="sn-icon sn-icon-duplicate"></span>
         <span class="button-text"><%= t("repositories.copy_record") %></span>
       </button>
     <% end %>
@@ -26,7 +26,7 @@
             data-placement="bottom"
             title="<%= t('repositories.show.button_tooltip.export') %>"
             id="exportRepositoriesButton">
-      <span class="fas fa-download"></span>
+      <span class="sn-icon sn-icon-export"></span>
       <span class="button-text"><%= t("repositories.index.options_dropdown.export_items") %></span>
     </button>
     <%= render partial: 'repositories/toolbar/print_label_button' %>
@@ -37,17 +37,17 @@
               title="<%= t('repositories.show.button_tooltip.archive') %>"
               class="btn btn-light auto-shrink-button"
               id="archiveRepositoryRecordsButton"  disabled data-view-mode="active">
-        <span class="fas fa-archive"></span>
+        <span class="sn-icon sn-icon-archive"></span>
         <span class="button-text"><%= t'repositories.archive_record' %></span>
       </button>
     <% end %>
       <button type="button" class="btn btn-light auto-shrink-button" id="restoreRepositoryRecords" disabled  data-view-mode="archived">
-        <span class="fas fa-undo"></span>
+        <span class="sn-icon sn-icon-restore"></span>
         <span class="button-text"><%= t("repositories.restore_record") %></span>
       </button>
     <% if can_delete_repository_rows?(@repository) %>
       <button type="button" class="btn btn-light auto-shrink-buttons" id="deleteRepositoryRecords" disabled  data-view-mode="archived">
-        <span class="fas fa-trash"></span>
+        <span class="sn-icon sn-icon-delete"></span>
         <span class="button-text"><%= t("repositories.delete_record") %></span>
       </button>
     <% end %>
@@ -59,7 +59,7 @@
       <%= t("repositories.save_record") %>
     </button>
     <button type="button" class="btn btn-light prevent-shrink" id="cancelSave" data-view-mode="active">
-      <span class="fas fa-times-circle"></span>
+      <span class="sn-icon sn-icon-close-remove"></span>
       <%= t("repositories.cancel_save") %>
     </button>
   </span>
diff --git a/app/views/repositories/toolbar/_save_filters.html.erb b/app/views/repositories/toolbar/_save_filters.html.erb
index 186df4cd0..4effd5627 100644
--- a/app/views/repositories/toolbar/_save_filters.html.erb
+++ b/app/views/repositories/toolbar/_save_filters.html.erb
@@ -11,7 +11,7 @@
   <ul class="dropdown-menu">
     <li id="newFilterLink">
       <a href="#" data-toggle="modal" data-target="#modalSaveRepositoryTableFilter">
-        <span class="fas fa-plus"></span>
+        <span class="sn-icon sn-icon-new-task"></span>
         <%= t('repositories.show.filters.new_filter') %>
       </a>
     </li>
diff --git a/app/views/repository_columns/_manage_column_modal_index.html.erb b/app/views/repository_columns/_manage_column_modal_index.html.erb
index 9c8f1fe37..89f615514 100644
--- a/app/views/repository_columns/_manage_column_modal_index.html.erb
+++ b/app/views/repository_columns/_manage_column_modal_index.html.erb
@@ -18,7 +18,7 @@
             class="btn btn-secondary manage-repo-column"
             data-modal-url="<%= new_repository_repository_column_path(@repository) %>"
             data-action="new">
-      <span class="fas fa-plus"></span>&nbsp;<%=t 'libraries.manange_modal_column_index.add_column' %>
+      <span class="sn-icon sn-icon-new-task"></span>&nbsp;<%=t 'libraries.manange_modal_column_index.add_column' %>
     </button>
   <% end %>
 </div>
diff --git a/app/views/repository_columns/manage_column_partials/_status.html.erb b/app/views/repository_columns/manage_column_partials/_status.html.erb
index 1f9d027cb..127a8ae11 100644
--- a/app/views/repository_columns/manage_column_partials/_status.html.erb
+++ b/app/views/repository_columns/manage_column_partials/_status.html.erb
@@ -10,11 +10,11 @@
                class="status-item-field"
                type="text"
                value="<%= item.status %>"/>
-        <span class="status-item-icon-trash fas fa-trash"></span>
+        <span class="status-item-icon-trash sn-icon sn-icon-delete"></span>
       </div>
     <% end %>
     <div class="add-status">
-      <span class="fas fa-plus"></span>
+      <span class="sn-icon sn-icon-new-task"></span>
       <span class="add-status-label"><%= t('libraries.manange_modal_column.status_type.add_status_label') %></span>
     </div>
   </div>
diff --git a/app/views/repository_stock_values/_manage_modal_content.html.erb b/app/views/repository_stock_values/_manage_modal_content.html.erb
index ea9357d92..70fc17b4a 100644
--- a/app/views/repository_stock_values/_manage_modal_content.html.erb
+++ b/app/views/repository_stock_values/_manage_modal_content.html.erb
@@ -120,7 +120,7 @@
               <span class="units"><%= repository_stock_value.repository_stock_unit_item&.data %></span>
             </div>
             <div class="stock-arrow">
-              <i class="fas fa-arrow-right"></i>
+              <i class="sn-icon sn-icon-move"></i>
             </div>
             <div class="stock-final-container <%= 'negative' if repository_stock_value.amount.negative? %> ">
               <span class="subtitle"><%= t('repository_stock_values.manage_modal.new_stock') %></span>
diff --git a/app/views/search/index.html.erb b/app/views/search/index.html.erb
index f51c09559..b407a69a2 100644
--- a/app/views/search/index.html.erb
+++ b/app/views/search/index.html.erb
@@ -19,7 +19,7 @@
                      value="<%= @display_query %>">
                <span class="input-group-btn">
                 <button class="btn btn-default" type="submit">
-                  <span class="fas fa-search"></span>
+                  <span class="sn-icon sn-icon-search"></span>
                 </button>
               </span>
             </div>
@@ -55,7 +55,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @project_search_count %></span>
-              <span class="fas fa-folder"></span>
+              <span class="sn-icon sn-icon-projects"></span>
               <%= t'Projects' %>
             </a>
           </li>
@@ -69,7 +69,7 @@
                             match_case: @search_case, utf8: '✓',
                             search_id: @search_id }.to_query %>">
               <span class="badge pull-right"><%= @project_folder_search_count %></span>
-              <span class="fas fa-folder"></span>
+              <span class="sn-icon sn-icon-projects"></span>
               <%= t('ProjectFolders') %>
             </a>
           </li>
@@ -83,7 +83,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @experiment_search_count %></span>
-              <i class="fas fa-flask"></i>
+              <i class="sn-icon sn-icon-experiment"></i>
               <%= t'Experiments' %>
             </a>
           </li>
@@ -97,7 +97,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @module_search_count %></span>
-              <span class="fas fa-credit-card"></span>
+              <span class="sn-icon sn-icon-task"></span>
               <%= t'Modules' %>
             </a>
           </li>
@@ -111,7 +111,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @result_search_count %></span>
-              <span class="fas fa-columns"></span>
+              <span class="sn-icon sn-icon sn-icon-reports"></span>
               <%= t'Results' %>
             </a>
           </li>
@@ -125,7 +125,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @tag_search_count %></span>
-              <span class="fas fa-tags"></span>
+              <span class="sn-icon sn-icon-tag"></span>
               <%= t'Tags' %>
             </a>
           </li>
@@ -139,7 +139,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @report_search_count %></span>
-              <span class="fas fa-clipboard-check"></span>
+              <span class="sn-icon sn-icon-reports"></span>
               <%= t'Reports' %>
             </a>
           </li>
@@ -153,7 +153,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @protocol_search_count %></span>
-              <span class="fas fa-edit"></span>
+              <span class="sn-icon sn-icon-protocols-templates"></span>
               <%= t'Protocols' %>
             </a>
           </li>
@@ -167,7 +167,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @step_search_count %></span>
-              <span class="fas fa-arrow-circle-right"></span>
+              <span class="sn-icon sn-icon-steps"></span>
               <%= t'Steps' %>
             </a>
           </li>
@@ -181,7 +181,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @checklist_search_count %></span>
-              <span class="fas fa-tasks"></span>
+              <span class="sn-icon sn-icon-checkllist"></span>
               <%= t'Checklists' %>
             </a>
           </li>
@@ -196,7 +196,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @asset_search_count %></span>
-              <span class="fas fa-paperclip"></span>
+              <span class="sn-icon sn-icon-files"></span>
               <%= t'Assets' %>
             </a>
           </li>
@@ -210,7 +210,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @table_search_count %></span>
-              <span class="fas fa-table"></span>
+              <span class="sn-icon sn-icon-tables"></span>
               <%= t'Tables' %>
             </a>
           </li>
@@ -224,14 +224,14 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @comment_search_count %></span>
-              <span class="fas fa-comment"></span>
+              <span class="sn-icon sn-icon-comments"></span>
               <%= t'Comments' %>
             </a>
           </li>
 
           <% @repository_search_count.each do |team, results| %>
             <li class="repositories-team <%= 'active' if results[:count].positive? %>">
-              <i class="fas fa-list-alt"></i>
+              <i class="sn-icon sn-icon-inventory"></i>
               <%= t('Repositories_team', team: team) %>
             </li>
             <% results[:repositories].each do |repository, values| %>
diff --git a/app/views/search/new.html.erb b/app/views/search/new.html.erb
index 0e539412e..76a681f14 100644
--- a/app/views/search/new.html.erb
+++ b/app/views/search/new.html.erb
@@ -9,7 +9,7 @@
       <input class="form-control" type="text" name="q" placeholder="<%= t('nav.search') %>">
       <span class="input-group-btn">
         <button id="search-button" class="btn btn-default" type="submit">
-          <span class="fas fa-search"></span>
+          <span class="sn-icon sn-icon-search"></span>
         </button>
       </span>
     </div>
diff --git a/app/views/search/results/_assets.html.erb b/app/views/search/results/_assets.html.erb
index f28198177..2f149a3df 100644
--- a/app/views/search/results/_assets.html.erb
+++ b/app/views/search/results/_assets.html.erb
@@ -6,7 +6,7 @@
       <% if wopi_file?(asset) %>
         <%= file_extension_icon(asset) %>
       <% else %>
-        <span class="fas fa-paperclip"></span>
+        <span class="sn-icon sn-icon-files"></span>
       <% end %>
     <% end %>
     <%= render partial: "search/results/partials/asset_text.html.erb", locals: { asset: asset, query: search_query } %>
diff --git a/app/views/search/results/_comments.html.erb b/app/views/search/results/_comments.html.erb
index c7ab728f6..8e3287748 100644
--- a/app/views/search/results/_comments.html.erb
+++ b/app/views/search/results/_comments.html.erb
@@ -1,7 +1,7 @@
 <% results.each do |comment| %>
 
   <p>
-    <span class="fas fa-comment"></span>
+    <span class="sn-icon sn-icon-comments"></span>
     <% if comment.is_a?(ProjectComment) && comment.project.present? %>
       <%=t "search.index.comments.project" %>
     <% elsif comment.is_a?(TaskComment) && comment.my_module.present? %>
diff --git a/app/views/search/results/_experiments.html.erb b/app/views/search/results/_experiments.html.erb
index 031d3e393..735633cdf 100644
--- a/app/views/search/results/_experiments.html.erb
+++ b/app/views/search/results/_experiments.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |experiment| %>
   <h5>
-    <i class="fas fa-flask"></i>
+    <i class="sn-icon sn-icon-experiment"></i>
     <%= render partial: "search/results/partials/experiment_text.html.erb",
                locals: { experiment: experiment, query: search_query } %>
   </h5>
diff --git a/app/views/search/results/_modules.html.erb b/app/views/search/results/_modules.html.erb
index 311327333..72e81fc0a 100644
--- a/app/views/search/results/_modules.html.erb
+++ b/app/views/search/results/_modules.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |mod| %>
   <h5>
-    <span class="fas fa-credit-card"></span>
+    <span class="sn-icon sn-icon-task"></span>
     <%= render partial: "search/results/partials/my_module_text.html.erb", locals: { my_module: mod, query: search_query } %>
   </h5>
 
diff --git a/app/views/search/results/_project_folders.html.erb b/app/views/search/results/_project_folders.html.erb
index fff7b5ee8..727f46abe 100644
--- a/app/views/search/results/_project_folders.html.erb
+++ b/app/views/search/results/_project_folders.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |project_folder| %>
   <h5>
-    <span class="fas fa-folder"></span>
+    <span class="sn-icon sn-icon-projects"></span>
     <%= render partial: 'search/results/partials/project_folder_text.html.erb',
                locals: { project_folder: project_folder, query: search_query, link_to_page: :show } %>
   </h5>
diff --git a/app/views/search/results/_projects.html.erb b/app/views/search/results/_projects.html.erb
index 5cd2ddd64..cf8558087 100644
--- a/app/views/search/results/_projects.html.erb
+++ b/app/views/search/results/_projects.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |project| %>
   <h5>
-    <span class="fas fa-folder"></span>
+    <span class="sn-icon sn-icon-projects"></span>
     <%= render partial: 'search/results/partials/project_text.html.erb',
                locals: { project: project, query: search_query, link_to_page: :show } %>
   </h5>
diff --git a/app/views/search/results/_protocols.html.erb b/app/views/search/results/_protocols.html.erb
index c72c24884..06b230419 100644
--- a/app/views/search/results/_protocols.html.erb
+++ b/app/views/search/results/_protocols.html.erb
@@ -4,7 +4,7 @@
   <% has_keywords = protocol.in_repository? && protocol.protocol_keywords.count > 0 %>
 
   <h5>
-    <span class="fas fa-edit"></span>
+    <span class="sn-icon sn-icon-protocols-templates"></span>
     <%= render partial: "search/results/partials/protocol_text.html.erb", locals: { protocol: protocol, query: search_query } %>
   </h5>
 
diff --git a/app/views/search/results/_reports.html.erb b/app/views/search/results/_reports.html.erb
index 0fe4be38e..c0090d879 100644
--- a/app/views/search/results/_reports.html.erb
+++ b/app/views/search/results/_reports.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |report| %>
   <h5>
-    <span class="fas fa-clipboard-check"></span>
+    <span class="sn-icon sn-icon-reports"></span>
     <%= render partial: "search/results/partials/report_text.html.erb", locals: { report: report, query: search_query } %>
   </h5>
 
diff --git a/app/views/search/results/_repositories.html.erb b/app/views/search/results/_repositories.html.erb
index 640677b10..af91d74df 100644
--- a/app/views/search/results/_repositories.html.erb
+++ b/app/views/search/results/_repositories.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |repository_row| %>
   <h5>
-    <i class="fas fa-list-alt"></i>
+    <i class="sn-icon sn-icon-inventory"></i>
     <%=t "search.index.repositories.repository_row" %>
     <%= highlight repository_row.name, search_query.strip.split(/\s+/) %>
   </h5>
diff --git a/app/views/search/results/_results.html.erb b/app/views/search/results/_results.html.erb
index 9e72e113f..7c6e55e5b 100644
--- a/app/views/search/results/_results.html.erb
+++ b/app/views/search/results/_results.html.erb
@@ -3,12 +3,12 @@
     <% if result.is_text %>
       <span class="fas fa-asterisk"></span>
     <% elsif result.is_table %>
-      <span class="fas fa-table"></span>
+      <span class="sn-icon sn-icon-tables"></span>
     <% else %>
       <% if result.asset.image? %>
-        <span class="fas fa-paperclip"></span>
+        <span class="sn-icon sn-icon-files"></span>
       <% else %>
-        <span class="fas fa-paperclip"></span>
+        <span class="sn-icon sn-icon-files"></span>
       <% end %>
     <% end %>
     <%= render partial: "search/results/partials/result_text.html.erb", locals: { result: result, query: search_query, target: nil } %>
diff --git a/app/views/search/results/_steps.html.erb b/app/views/search/results/_steps.html.erb
index c3e6a5b8a..e342431bf 100644
--- a/app/views/search/results/_steps.html.erb
+++ b/app/views/search/results/_steps.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |step| %>
   <h5>
-    <span class="fas fa-arrow-circle-right"></span>
+    <span class="sn-icon sn-icon-steps"></span>
     <%= render partial: "search/results/partials/step_text.html.erb", locals: { step: step, query: search_query, target: nil } %>
   </h5>
 
diff --git a/app/views/search/results/_tables.html.erb b/app/views/search/results/_tables.html.erb
index 0d01040a2..ba54c3d32 100644
--- a/app/views/search/results/_tables.html.erb
+++ b/app/views/search/results/_tables.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |table| %>
   <h5>
-    <span class="fas fa-table"></span>
+    <span class="sn-icon sn-icon-tables"></span>
     <%= highlight table.name, search_query.strip.split(/\s+/) %>
   </h5>
 
diff --git a/app/views/shared/_bio_eddie_modal.html.erb b/app/views/shared/_bio_eddie_modal.html.erb
index 41a59ddc8..e0319c071 100644
--- a/app/views/shared/_bio_eddie_modal.html.erb
+++ b/app/views/shared/_bio_eddie_modal.html.erb
@@ -24,7 +24,7 @@
             <%= t('bio_eddie.save_and_register')%>
           </button>
           <button class="preview-close btn btn-light icon-btn" data-dismiss="modal">
-            <i class="fas fa-times"></i>
+            <i class="sn-icon sn-icon-close-remove"></i>
           </button>
         </div>
         <div class="modal-body">
diff --git a/app/views/shared/_file_edit_modal.html.erb b/app/views/shared/_file_edit_modal.html.erb
index a57db6bfd..db9125503 100644
--- a/app/views/shared/_file_edit_modal.html.erb
+++ b/app/views/shared/_file_edit_modal.html.erb
@@ -14,7 +14,7 @@
             <span class="fas fa-save"></span> <%= t('SaveClose')%>
           </a>
           <button type="button" class="preview-close btn btn-light icon-btn" data-dismiss="modal">
-            <span class="fas fa-times"></span>
+            <span class="sn-icon sn-icon-close-remove"></span>
           </button>
         </div>
       </div>
diff --git a/app/views/shared/_filter_dropdown.html.erb b/app/views/shared/_filter_dropdown.html.erb
index 7b84501f1..116170c64 100644
--- a/app/views/shared/_filter_dropdown.html.erb
+++ b/app/views/shared/_filter_dropdown.html.erb
@@ -1,5 +1,5 @@
 <div class="filter-container dropdown <%= container_class + '-dropdown' %>">
-      <button class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></button>
+      <button class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="sn-icon sn-icon-filter"></i></button>
       <div class="dropdown-menu dropdown-menu-right filter-dropdown <%= container_class %>" role="menu" data-team-id="<%= current_team.id %>" data-search-field-history-key="<%= search_field_history_key %>">
         <div class="header">
           <div class="title"><%= dropdown_title %></div>
diff --git a/app/views/shared/_inline_editing.html.erb b/app/views/shared/_inline_editing.html.erb
index 004759798..0ad19add6 100644
--- a/app/views/shared/_inline_editing.html.erb
+++ b/app/views/shared/_inline_editing.html.erb
@@ -12,7 +12,7 @@
   <input placeholder="<%= config[:placeholder] %>" class="hidden input-field" type="text" value="<%= initial_value %>" disabled/>
   <div class="button-container">
     <span class="save-button"><i class="fas fa-check"></i></span>
-    <span class="cancel-button"><i class="fas fa-times"></i></span>
+    <span class="cancel-button"><i class="sn-icon sn-icon-close-remove"></i></span>
   </div>
   <span class="error-block"></span>
 </div>
diff --git a/app/views/shared/_marvinjs_modal.html.erb b/app/views/shared/_marvinjs_modal.html.erb
index 42bdc06e1..880553432 100644
--- a/app/views/shared/_marvinjs_modal.html.erb
+++ b/app/views/shared/_marvinjs_modal.html.erb
@@ -19,7 +19,7 @@
             <%= t('SaveClose')%>
           </button>
           <button class="preview-close btn btn-light icon-btn" data-dismiss="modal">
-            <i class="fas fa-times"></i>
+            <i class="sn-icon sn-icon-close-remove"></i>
           </button>
         </div>
         <div class="modal-body">
diff --git a/app/views/shared/_my_modules_list_partial.html.erb b/app/views/shared/_my_modules_list_partial.html.erb
index 43eed252b..9163f8d8c 100644
--- a/app/views/shared/_my_modules_list_partial.html.erb
+++ b/app/views/shared/_my_modules_list_partial.html.erb
@@ -34,7 +34,7 @@
   <% unless grouped_my_modules.present? || (defined?(private_modules_number) && private_modules_number.positive?) %>
     <div class="no-results-placeholder">
       <span class="fa-stack">
-        <i class="fas fa-search fa-stack-1x"></i>
+        <i class="sn-icon sn-icon-search fa-stack-1x"></i>
         <i class="fas fa-slash fa-stack-1x fa-flip-vertical"></i>
       </span>
       <h2 class="title"><%= t('my_modules.modules_list_partial.no_results.title') %></h2>
diff --git a/app/views/shared/_pdf_viewer.html.erb b/app/views/shared/_pdf_viewer.html.erb
index dc1b78357..11fbd95a7 100644
--- a/app/views/shared/_pdf_viewer.html.erb
+++ b/app/views/shared/_pdf_viewer.html.erb
@@ -28,7 +28,7 @@
       <span class="total-page">...</span>
     </div>
     <button class="btn btn-light icon-btn next-page">
-      <i class="fas fa-arrow-right"></i>
+      <i class="sn-icon sn-icon-move"></i>
     </button>
     <div class="divider"></div>
     <div class="zoom-page">
@@ -41,10 +41,10 @@
     </div>
     <div class="sci-btn-group">
       <button class="btn btn-light icon-btn zoom-out">
-        <i class="fas fa-search-minus"></i>
+        <i class="sn-icon sn-icon-search-minus"></i>
       </button>
       <button class="btn btn-light icon-btn zoom-in">
-        <i class="fas fa-search-plus"></i>
+        <i class="sn-icon sn-icon-search-plus"></i>
       </button>
     </div>
   </div>
diff --git a/app/views/shared/_repository_row_reminder.html.erb b/app/views/shared/_repository_row_reminder.html.erb
index 739cd75df..4cdea9886 100644
--- a/app/views/shared/_repository_row_reminder.html.erb
+++ b/app/views/shared/_repository_row_reminder.html.erb
@@ -9,7 +9,7 @@
       <%= repository_repository_row_repository_cell_hide_reminder_url(reminder.repository_row.repository,
                                                                       reminder.repository_row,
                                                                       reminder) %> " tabindex="<%= index + 1 %>">
-      <i class="fas fa-times"></i>
+      <i class="sn-icon sn-icon-close-remove"></i>
       <%= t('repository_row.reminder.clear') %>
     </button>
     <%if index + 1 < reminders.length %>
diff --git a/app/views/shared/_tiny_mce_extra_buttons.html.erb b/app/views/shared/_tiny_mce_extra_buttons.html.erb
index 24e8edcff..720d2bc1d 100644
--- a/app/views/shared/_tiny_mce_extra_buttons.html.erb
+++ b/app/views/shared/_tiny_mce_extra_buttons.html.erb
@@ -1,6 +1,6 @@
 <div class="hidden tinymce-cancel-button tox-mbtn" tabindex="-1">
   <button type="button" tabindex="-1">
-    <span class="fas fa-times"></span>
+    <span class="sn-icon sn-icon-close-remove"></span>
     <span class="mce-txt"><%= t('general.cancel') %></span>
   </button>
 </div>
diff --git a/app/views/shared/comments/_comment.html.erb b/app/views/shared/comments/_comment.html.erb
index bbeae23d8..612255193 100644
--- a/app/views/shared/comments/_comment.html.erb
+++ b/app/views/shared/comments/_comment.html.erb
@@ -18,7 +18,7 @@
       </div>
       <% if comment_editable?(comment) %>
         <div class="dropdown comment-menu-container">
-          <div id="comment-dropdown-menu-<%= comment.id %>" class="fas fa-ellipsis-h open-dropdown-btn"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"></div>
+          <div id="comment-dropdown-menu-<%= comment.id %>" class="sn-icon sn-icon-more-hori open-dropdown-btn"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"></div>
           <ul class="dropdown-menu comment-dropdown-menu dropdown-menu-right" aria-labelledby="comment-dropdown-menu-<%= comment.id %>">
             <li>
               <a href="#" class="edit-comment" data-comment-raw="<%= comment.message %>" data-update-url="<%= comment_path(comment) %>" data-comment-id="<%= comment.id %>">
@@ -28,7 +28,7 @@
             </li>
             <li>
               <a href="#" data-delete-url="<%= comment_path(comment) %>" class="delete-comment">
-                <i class="fas fa-trash"></i>
+                <i class="sn-icon sn-icon-delete"></i>
                 <%= t('general.delete') %>
               </a>
             </li>
diff --git a/app/views/shared/comments/_comments.html.erb b/app/views/shared/comments/_comments.html.erb
index 8c7214c12..75ef4720b 100644
--- a/app/views/shared/comments/_comments.html.erb
+++ b/app/views/shared/comments/_comments.html.erb
@@ -20,7 +20,7 @@
     <%= text_area_tag 'message', '',  placeholder: t('general.comment_placeholder_new'),
                                       class: 'form-control  smart-text-area textarea-sm',
                                       data: { 'atwho-edit' => '' } %>
-    <i class="fas fa-paper-plane new-comment-button"></i>
+    <i class="sn-icon sn-icon-send new-comment-button"></i>
     <span class="new-message-error"></span>
   </div>
   <% end %>
diff --git a/app/views/shared/comments/_comments_sidebar.html.erb b/app/views/shared/comments/_comments_sidebar.html.erb
index d77f53575..e8ad54bbd 100644
--- a/app/views/shared/comments/_comments_sidebar.html.erb
+++ b/app/views/shared/comments/_comments_sidebar.html.erb
@@ -3,7 +3,7 @@
     <div class="sidebar-header">
       <div class="comments-subject-title"></div>
       <div class="btn btn-light icon-btn close-btn">
-        <i class="fas fa-times"></i>
+        <i class="sn-icon sn-icon-close-remove"></i>
       </div>
       <div class="comments-subject-url">
       </div>
@@ -29,7 +29,7 @@
       <div class="comment-input-container">
         <textarea class="comment-input-field smart-text-area textarea-sm" 
                   placeholder="<%= t('comments.placeholder') %>"></textarea>
-        <i class="fas fa-paper-plane send-comment"></i>
+        <i class="sn-icon sn-icon-send send-comment"></i>
       </div>
       <div class="error-container"></div>
       <div class="update-buttons sci-btn-group">
diff --git a/app/views/shared/comments/_item.html.erb b/app/views/shared/comments/_item.html.erb
index 5fcbc5af0..52e1806ff 100644
--- a/app/views/shared/comments/_item.html.erb
+++ b/app/views/shared/comments/_item.html.erb
@@ -29,7 +29,7 @@
           <div class="comment-actions">
             <div class="edit-buttons">
               <span class="save-button"><i class="fas fa-save"></i><%= t('general.save') %></span>
-              <span class="cancel-button"><i class="fas fa-times"></i></span>
+              <span class="cancel-button"><i class="sn-icon sn-icon-close-remove"></i></span>
             </div>
             <div class="view-buttons">
               <span class="edit-button"><i class="fas fa-pen"></i><%= t('general.edit') %></span>
@@ -38,7 +38,7 @@
                 data-url="<%= comment_action_url(comment) %>"
                 data-confirm-message="<%= t('comments.delete_confirm') %>"
                 data-turbolinks="false">
-                <span class="fas fa-trash action-icon-delete"></span>
+                <span class="sn-icon sn-icon-delete action-icon-delete"></span>
               </a>
             </div>
           </div>
diff --git a/app/views/shared/file_preview/_content.html.erb b/app/views/shared/file_preview/_content.html.erb
index 6216888c0..a44bd0353 100644
--- a/app/views/shared/file_preview/_content.html.erb
+++ b/app/views/shared/file_preview/_content.html.erb
@@ -18,7 +18,7 @@
           data-sketch-name="<%= asset.file.metadata[:name] %>"
           data-sketch-description="<%= asset.file.metadata[:description] %>"
         >
-          <span class="fas fa-pencil-alt"></span>
+          <span class="sn-icon sn-icon-edit"></span>
           <%= t('assets.file_preview.edit_in_marvinjs') %>
         </button>
 
@@ -30,7 +30,7 @@
           data-molecule-name="<%= asset.file.metadata[:name] || asset.file_name %>"
           data-molecule-description="<%= asset.file.metadata[:description] || asset.file.download %>"
         >
-          <span class="fas fa-pencil-alt"></span>
+          <span class="sn-icon sn-icon-edit"></span>
           <%= t('assets.file_preview.edit_in_bio_eddie') %>
         </button>
       <% elsif asset.editable_image? %>
@@ -42,24 +42,24 @@
           data-image-mime-type="<%= asset.file.content_type %>"
           data-image-start-edit-url="<%= start_edit_image_path(asset) %>"
         >
-          <span class="fas fa-pencil-alt"></span>
+          <span class="sn-icon sn-icon-edit"></span>
           <%= t('assets.file_preview.edit_in_scinote') %>
         </button>
       <% end %>
     <% end %>
     <% if asset.file.metadata[:asset_type] == 'bio_eddie' %>
       <a class="btn btn-light file-download-link" href="data:text/plain;charset=utf-8,<%= asset.file.metadata[:description] %>" download="<%= asset.file.metadata[:name] %>.helm" data-turbolinks="false">
-        <span class="fas fa-download"></span> <%= t('Download')%>
+        <span class="sn-icon sn-icon-export"></span> <%= t('Download')%>
       </a>
     <% else %>
       <a class="btn btn-light file-download-link" href="<%= rails_blob_path(asset.file, disposition: 'attachment') %>" data-turbolinks="false">
-        <span class="fas fa-download"></span> <%= t('Download')%>
+        <span class="sn-icon sn-icon-export"></span> <%= t('Download')%>
       </a>
     <% end %>
     <% if (asset.step || asset.result) && !preview %>
       <%= render partial: 'assets/asset_context_menu.html.erb', locals: { asset: asset, deletable: false, editable: false } %>
     <% end %>
-    <button type="button" class="btn icon-btn btn-light" data-dismiss="modal"><span class="fas fa-times"></span></button>
+    <button type="button" class="btn icon-btn btn-light" data-dismiss="modal"><span class="sn-icon sn-icon-close-remove"></span></button>
   </div>
 </div>
 <div class="modal-body">
@@ -95,7 +95,7 @@
           <% else %>
             <i class="fas <%= file_fa_icon_class(previous_asset) if previous_asset.file_name %>"></i>
           <% end %>
-          <i class="fas fa-angle-left"></i>
+          <i class="sn-icon sn-icon-navigate-before"></i>
           <span class="file-name"><%= previous_asset.file_name %></span>
         <% end %>
       <% end %>
@@ -107,7 +107,7 @@
           class: "next-asset gallery-switcher",
           data: {id: next_asset.id, gallery_elements: gallery} do %>
           <span class="file-name"><%= next_asset.file_name %></span>
-          <i class="fas fa-angle-right"></i>
+          <i class="sn-icon sn-icon-navigate-next"></i>
           <% if next_asset.previewable? %>
             <%= image_tag next_asset.medium_preview,
                 class: 'asset-image',
diff --git a/app/views/shared/filter_dropdown/_datetime_search.html.erb b/app/views/shared/filter_dropdown/_datetime_search.html.erb
index b3ffc2ebc..54dc3914a 100644
--- a/app/views/shared/filter_dropdown/_datetime_search.html.erb
+++ b/app/views/shared/filter_dropdown/_datetime_search.html.erb
@@ -3,7 +3,7 @@
       <label><%= label %></label>
     </div>
     <div class="datetime-picker-container">
-      <span class="fas fa-calendar-alt"></span>
+      <span class="sn-icon sn-icon-calendar"></span>
       <input type="datetime"
              data-toggle='date-time-picker'
              class="form-control calendar-input from-date"
@@ -18,7 +18,7 @@
     <div class="connect-line"></div>
 
     <div class="datetime-picker-container">
-      <span class="fas fa-calendar-alt"></span>
+      <span class="sn-icon sn-icon-calendar"></span>
       <input type="datetime"
              data-toggle='date-time-picker'
              class="form-control calendar-input to-date"
diff --git a/app/views/shared/sidebar/_experiments.html.erb b/app/views/shared/sidebar/_experiments.html.erb
index 520d2d1ce..d24712a80 100644
--- a/app/views/shared/sidebar/_experiments.html.erb
+++ b/app/views/shared/sidebar/_experiments.html.erb
@@ -20,7 +20,7 @@
   <% if view_mode == 'active' %>
     <li class="sidebar-leaf">
       <%= link_to project_path(@project, view_mode: 'archived'), class: 'sidebar-link' do %>
-        <i class="fas fa-archive"></i>
+        <i class="sn-icon sn-icon-archive"></i>
         <%= t('sidebar.experiments.archived_experiments') %>
       <% end %>
     </li>
diff --git a/app/views/shared/sidebar/_my_module.html.erb b/app/views/shared/sidebar/_my_module.html.erb
index dd9cad53c..68fabbded 100644
--- a/app/views/shared/sidebar/_my_module.html.erb
+++ b/app/views/shared/sidebar/_my_module.html.erb
@@ -13,7 +13,7 @@
   <% end %>
   <li class="sidebar-leaf">
     <%= link_to my_modules_experiment_path(experiment, view_mode: :archived), class: 'sidebar-link' do %>
-      <i class="fas fa-archive"></i>&nbsp;
+      <i class="sn-icon sn-icon-archive"></i>&nbsp;
       <%= t('sidebar.my_modules.archived_button') %>
     <% end%>
   </li>
diff --git a/app/views/shared/sidebar/_my_modules.html.erb b/app/views/shared/sidebar/_my_modules.html.erb
index 7b1834581..fee2a63d1 100644
--- a/app/views/shared/sidebar/_my_modules.html.erb
+++ b/app/views/shared/sidebar/_my_modules.html.erb
@@ -10,13 +10,13 @@
                   class: 'sidebar-link',
                   data: { module_id: my_module.id } %>
       <% if action_name == 'canvas' %>
-        <i class="fas fa-map-marker-alt canvas-center-on" data-module-id="<%= my_module.id %>"></i>
+        <i class="sn-icon sn-icon-location canvas-center-on" data-module-id="<%= my_module.id %>"></i>
       <% end %>
     </li>
   <% end %>
   <li class="sidebar-leaf">
     <%= link_to my_modules_experiment_path(experiment, view_mode: :archived), class: 'sidebar-link' do %>
-      <i class="fas fa-archive"></i>&nbsp;
+      <i class="sn-icon sn-icon-archive"></i>&nbsp;
       <%= t('sidebar.my_modules.archived_button') %>
     <% end%>
   </li>
diff --git a/app/views/shared/sidebar/_projects.html.erb b/app/views/shared/sidebar/_projects.html.erb
index 1c1cca7fa..98cd823ad 100644
--- a/app/views/shared/sidebar/_projects.html.erb
+++ b/app/views/shared/sidebar/_projects.html.erb
@@ -10,7 +10,7 @@
   <% if !projects_view_mode_archived? %>
     <li class="sidebar-leaf">
       <%= link_to projects_path(view_mode: :archived), class: "sidebar-link" do %>
-        <span class="fas fa-archive"></span>
+        <span class="sn-icon sn-icon-archive"></span>
         <%= t('projects.index.navigation_archived_projects') %>
       <% end %>
     </li>
diff --git a/app/views/shared/sidebar/_projects_tree_branch.html.erb b/app/views/shared/sidebar/_projects_tree_branch.html.erb
index a57f7add8..d26f2d42c 100644
--- a/app/views/shared/sidebar/_projects_tree_branch.html.erb
+++ b/app/views/shared/sidebar/_projects_tree_branch.html.erb
@@ -19,7 +19,7 @@
             sidebar_url: sidebar_team_path(current_team, project_folder_id: record[:folder].id),
             projects_cards_url: project_folder_cards_url(record[:folder])
           } do %>
-        <i class="fas fa-folder"></i>
+        <i class="sn-icon sn-icon-projects"></i>
         <%= record[:folder].name %>
       <% end%>
       <ul class="sidebar-branch">
diff --git a/app/views/shared/sidebar/_templates_sidebar.html.erb b/app/views/shared/sidebar/_templates_sidebar.html.erb
index c20222e33..0a270b17c 100644
--- a/app/views/shared/sidebar/_templates_sidebar.html.erb
+++ b/app/views/shared/sidebar/_templates_sidebar.html.erb
@@ -14,7 +14,7 @@
       <ul class="sidebar-branch">
         <li class="sidebar-leaf">
         <%= link_to protocols_path(type: :archived), class: "sidebar-link #{'selected' if active == :protocol && params[:type] == 'archived'}" do %>
-          <i class="fas fa-archive"></i>
+          <i class="sn-icon sn-icon-archive"></i>
           <%= t("protocols.index.navigation.archive") %>
         <% end %>
       </ul>
diff --git a/app/views/shared/smart_annotation/_menu.html.erb b/app/views/shared/smart_annotation/_menu.html.erb
index 0410cdd04..4af9c13fa 100644
--- a/app/views/shared/smart_annotation/_menu.html.erb
+++ b/app/views/shared/smart_annotation/_menu.html.erb
@@ -5,7 +5,7 @@
     <a class="tab-button sa-experiments" href="#exp-tab-<%= at_who_key %>" data-toggle="tab"><%= t('atwho.experiments') %></a>
     <a class="tab-button sa-tasks" href="#tsk-tab-<%= at_who_key %>" data-toggle="tab"><%= t('atwho.tasks') %></a>
     <a class="tab-button sa-repositories" href="#rep-tab-<%= at_who_key %>" data-toggle="tab"><%= t('atwho.inventories') %></a>
-    <div class="dismiss"><span class="fas fa-times"></span></div>
+    <div class="dismiss"><span class="sn-icon sn-icon-close-remove"></span></div>
   </div>
   <div class="tab-content">
     <div class="tab-pane" role="tabpanel" id="prj-tab-<%= at_who_key %>" data-object-type="PROJECT"></div>
@@ -16,7 +16,7 @@
       <% repositories.each do |repository| %>
         <button class="btn btn-light repository-object" data-object-id="<%= repository.id %>">
           <% if repository.shared_with?(current_team) %>
-            <i class="fas fa-user-friends"></i>
+            <i class="sn-icon sn-icon-user-menu-friends"></i>
           <% end %>
           <%= repository.name %>
         </button>
diff --git a/app/views/shared/smart_annotation/_users.html.erb b/app/views/shared/smart_annotation/_users.html.erb
index 5034de624..68a8a62e7 100644
--- a/app/views/shared/smart_annotation/_users.html.erb
+++ b/app/views/shared/smart_annotation/_users.html.erb
@@ -1,7 +1,7 @@
 <% limit_reached = users.length == Constants::ATWHO_SEARCH_LIMIT + 1 %>
 <div class="atwho-header">
   <span><%= t("atwho.users.header") %></span>
-  <div class="dismiss"><span class="fas fa-times"></span></div>
+  <div class="dismiss"><span class="sn-icon sn-icon-close-remove"></span></div>
 </div>
 <div class="atwho-scroll-container">
   <% users.limit(Constants::ATWHO_SEARCH_LIMIT).each do |user| %>
diff --git a/app/views/user_my_modules/_index_edit.html.erb b/app/views/user_my_modules/_index_edit.html.erb
index 88cf13c0e..e93a15d31 100644
--- a/app/views/user_my_modules/_index_edit.html.erb
+++ b/app/views/user_my_modules/_index_edit.html.erb
@@ -24,7 +24,7 @@
       <% if can_manage_my_module?(@my_module) %>
         <div class="col-xs-2">
           <%= link_to my_module_user_my_module_path(@my_module, umm, format: :json), method: :delete, remote: true, class: 'btn btn-link remove-user-link' do %>
-          <span class="fas fa-times"></span>
+          <span class="sn-icon sn-icon-close-remove"></span>
           <% end %>
         </div>
       <% end %>
@@ -44,7 +44,7 @@
       </div>
       <div class="col-xs-2">
         <%= f.button class: 'btn btn-primary' do %>
-          <span class="fas fa-plus"></span>
+          <span class="sn-icon sn-icon-new-task"></span>
           <span class="hidden-xs"><%= t("experiments.canvas.full_zoom.modal_manage_users.create") %></span>
         <% end %>
       </div>
diff --git a/app/views/users/registrations/_manage_devices.html.erb b/app/views/users/registrations/_manage_devices.html.erb
index acf9a3e34..059dada34 100644
--- a/app/views/users/registrations/_manage_devices.html.erb
+++ b/app/views/users/registrations/_manage_devices.html.erb
@@ -26,7 +26,7 @@
                       <%= l(device.last_seen_at, format: :full_date) %>
                   </div>
                   <div class="table-body-cell">
-                    <button class="x-button" id="revokeDeviceBtn" data-toggle="modal" data-url=<%=  connected_device_path(device.id) %> data-target="#deviceRevocationModal"><i class="fas fa-times"></i></button>
+                    <button class="x-button" id="revokeDeviceBtn" data-toggle="modal" data-url=<%=  connected_device_path(device.id) %> data-target="#deviceRevocationModal"><i class="sn-icon sn-icon-close-remove"></i></button>
                   </div>
                 </div>
               <% end %>
diff --git a/app/views/users/registrations/edit_partials/_avatar.html.erb b/app/views/users/registrations/edit_partials/_avatar.html.erb
index 3f521adf3..2fbb45510 100644
--- a/app/views/users/registrations/edit_partials/_avatar.html.erb
+++ b/app/views/users/registrations/edit_partials/_avatar.html.erb
@@ -7,7 +7,7 @@
       </div>
       <div class="avatar-edit"></div>
       <div class="avatar-edit-text">
-        <span class="fas fa-pencil-alt"></span>
+        <span class="sn-icon sn-icon-edit"></span>
         <span><%=t "users.registrations.edit.avatar_btn" %></span>
       </div>
     </div>
diff --git a/app/views/users/settings/account/preferences/index.html.erb b/app/views/users/settings/account/preferences/index.html.erb
index d59c8ac09..e193244a9 100644
--- a/app/views/users/settings/account/preferences/index.html.erb
+++ b/app/views/users/settings/account/preferences/index.html.erb
@@ -104,7 +104,7 @@
             </div>
             <div class="row">
               <div class="col-sm-2">
-                <span class="system-message hidden-sm"><i class="fas fa-gift" aria-hidden="true"></i></span>
+                <span class="system-message hidden-sm"><i class="sn-icon sn-icon-updates-and-goodies" aria-hidden="true"></i></span>
               </div>
               <div class="col-sm-10">
                 <strong><%=t 'notifications.form.system_message' %></strong>
diff --git a/app/views/users/settings/teams/_user_dropdown.html.erb b/app/views/users/settings/teams/_user_dropdown.html.erb
index ac27f9016..555552971 100644
--- a/app/views/users/settings/teams/_user_dropdown.html.erb
+++ b/app/views/users/settings/teams/_user_dropdown.html.erb
@@ -1,6 +1,6 @@
 <% if user_assignment.user == user %>
   <div class="btn btn-default btn-xs" type="button" disabled="disabled">
-    <span class="fas fa-user-cog"></span>
+    <span class="sn-icon sn-icon-user-menu-cog"></span>
     <span class="caret"></span>
   </div>
 <% else %>
@@ -12,7 +12,7 @@
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="true">
-      <span class="fas fa-user-cog"></span>
+      <span class="sn-icon sn-icon-user-menu-cog"></span>
       <span class="caret"></span>
     </div>
     <ul class="dropdown-menu custom-dropdown-menu dropdown-menu-right" aria-labelledby="<%= id %>">
diff --git a/app/views/users/settings/teams/index.html.erb b/app/views/users/settings/teams/index.html.erb
index 9056646a5..4bd7f786f 100644
--- a/app/views/users/settings/teams/index.html.erb
+++ b/app/views/users/settings/teams/index.html.erb
@@ -25,7 +25,7 @@
       <% if can_create_teams? %>
         <span id="new-team-button">
           <%= link_to new_team_path, class: "btn btn-primary", style: "margin-left: 30px;" do %>
-            <span class="fas fa-plus"></span>
+            <span class="sn-icon sn-icon-new-task"></span>
             <span class="hidden-xs">
               <%= t("users.settings.teams.index.new_team") %>
             </span>
diff --git a/app/views/users/settings/teams/show.html.erb b/app/views/users/settings/teams/show.html.erb
index 8ec22cfbe..53cac62ea 100644
--- a/app/views/users/settings/teams/show.html.erb
+++ b/app/views/users/settings/teams/show.html.erb
@@ -36,13 +36,13 @@
     <div class="team-metadata">
 
       <div class="created-at grid-block">
-       <span class="fas fa-calendar-alt"></span>
+       <span class="sn-icon sn-icon-calendar"></span>
        <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_created_at") %></span>
        <b><%= l(@team.created_at, format: :full_date) %></b>
       </div>
 
       <div class="created-by grid-block">
-        <span class="fas fa-user fa-lg"></span>
+        <span class="sn-icon sn-icon-user-menu fa-lg"></span>
         <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_created_by") %></span>
         <b>
           <%= t('users.settings.teams.edit.header_created_by_name_email', name: @team.created_by.full_name, email: @team.created_by.email) if @team.created_by %>
@@ -83,7 +83,7 @@
       <% if can_invite_team_users?(@team) %>
         <div id="add-new-team-members-button" class="hidden">
           <a href="#" class="btn btn-primary" data-trigger="invite-users" data-turbolinks="false" data-modal-id="team-invite-users-modal">
-            <span class="fas fa-plus"></span>
+            <span class="sn-icon sn-icon-new-task"></span>
             <%= I18n.t('users.settings.teams.edit.add_user') %>
           </a>
         </div>
diff --git a/app/views/users/settings/webhooks/_webhook_form.html.erb b/app/views/users/settings/webhooks/_webhook_form.html.erb
index cae0a21fe..be05f98c7 100644
--- a/app/views/users/settings/webhooks/_webhook_form.html.erb
+++ b/app/views/users/settings/webhooks/_webhook_form.html.erb
@@ -8,7 +8,7 @@
     <%= f.text_field :url, class: "sci-input-field url-input", placeholder: t("webhooks.index.url_placeholder"), data: {original_value: f.object.url } %>
   </div>
   <button class="btn btn-light cancel-action">
-    <i class="fas fa-times"></i>
+    <i class="sn-icon sn-icon-close-remove"></i>
     <%= t('general.cancel') %>
   </button>
   <%= f.button class: "btn btn-primary save-webhook" do %>
diff --git a/app/views/users/settings/webhooks/index.html.erb b/app/views/users/settings/webhooks/index.html.erb
index 1455c9d5d..9b9f56fe4 100644
--- a/app/views/users/settings/webhooks/index.html.erb
+++ b/app/views/users/settings/webhooks/index.html.erb
@@ -12,7 +12,7 @@
       <div class="header-actions">
         <div class="dropdown sort-menu">
           <button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-            <span><i class="fas fa-sort-amount-down"></i></span>
+            <span><i class="sn-icon sn-icon-sort-down"></i></span>
           </button>
           <ul id="sortMenuDropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="sortMenu">
             <% %w(atoz ztoa).each do |sort| %>
@@ -32,7 +32,7 @@
     <% @activity_filters.each do |filter| %>
       <li class="filter-element">
         <div class="filter-block">
-          <i class="fas fa-caret-down collapsed" data-toggle="collapse" href="#activityFilter<%= filter.id %>" aria-expanded="false"></i>
+          <i class="sn-icon sn-icon-close-hide collapsed" data-toggle="collapse" href="#activityFilter<%= filter.id %>" aria-expanded="false"></i>
           <span class="filter-name" title="<%= filter.name %>">
             <%= filter.name %>
           </span>
@@ -46,11 +46,11 @@
             </div>
           </div>
           <div class="btn btn-light create-webhook">
-            <i class="fas fa-plus"></i>
+            <i class="sn-icon sn-icon-new-task"></i>
             <%= t('webhooks.index.new_webhook') %>
           </div>
           <div class="btn btn-light delete-filter icon-btn" data-id="<%= filter.id %>" data-name="<%= filter.name %>">
-            <i class="fas fa-trash"></i>
+            <i class="sn-icon sn-icon-delete"></i>
           </div>
         </div>
         <ul class="webhooks-list collapse" id="activityFilter<%= filter.id %>">
@@ -78,7 +78,7 @@
                 <% end %>
                 <div class="dropdown webhook-menu">
                   <button class="btn btn-light icon-btn dropdown-toggle" type="button" id="webhookMenuButton<%= webhook.id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                    <span><i class="fas fa-ellipsis-h"></i></span>
+                    <span><i class="sn-icon sn-icon-more-hori"></i></span>
                   </button>
                   <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="webhookMenuButton<%= webhook.id %>">
                     <li class="divider-label"><%= t("webhooks.index.webhook_options").upcase %></li>
@@ -103,7 +103,7 @@
                     </li>
                     <li>
                       <%= link_to users_settings_webhook_path(webhook, filter_id: filter.id, sort: @current_sort), method: :delete, data: { confirm: t('webhooks.index.delete_webhook_confimration') } do %>
-                        <i class="fas fa-trash"></i>
+                        <i class="sn-icon sn-icon-delete"></i>
                         <%= t('general.delete') %>
                       <% end %>
                     </li>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index fd4ec1ff3..6a6662c50 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -3051,8 +3051,8 @@ en:
           ztoa_html: "Name &#8593;"
         view_mode:
           inline_html: "<i class=\"fas fa-desktop\"></i> Extra large"
-          thumbnail_html: "<i class=\"fas fa-th-large\"></i> Medium"
-          list_html: "<i class=\"fas fa-list\"></i> List"
+          thumbnail_html: "<i class=\"sn-icon sn-icon-grid-view\"></i> Medium"
+          list_html: "<i class=\"sn-icon sn-icon-activities\"></i> List"
       new:
         add_step_title: "Add new step"
         tab_checklists: "Checklists"
@@ -3238,8 +3238,8 @@ en:
       set_view_size: "SET VIEW SIZE"
       delete: "Delete file"
       inline_html: "<i class=\"fas fa-desktop\"></i> Extra large"
-      thumbnail_html: "<i class=\"fas fa-th-large\"></i> Medium"
-      list_html: "<i class=\"fas fa-list\"></i> List"
+      thumbnail_html: "<i class=\"sn-icon sn-icon-grid-view\"></i> Medium"
+      list_html: "<i class=\"sn-icon sn-icon-activities\"></i> List"
     delete_file_modal:
       title: "Delete attachment"
       description_1_html: "You are about to delete <b>%{file_name}</b></p>"