diff --git a/analysis/templates/analysis/trio_wizard.html b/analysis/templates/analysis/trio_wizard.html
index 6d0c49ce3..89a8326c5 100644
--- a/analysis/templates/analysis/trio_wizard.html
+++ b/analysis/templates/analysis/trio_wizard.html
@@ -178,7 +178,7 @@ <h3 id='trio-title'>Create Trio Wizard</h3>
             <button id='create-trio-button' class="btn btn-primary"><i class="fas fa-plus-circle"></i> Create Trio</button>
         </form>
         <div id='form-submitted-dialog'>
-            <div><img src="{% static 'images/spinner.gif' %}" /> Creating Trio...</div>
+            <div><i class="fa fa-spinner"></i> Creating Trio...</div>
             <div class="TrioNode"></div>
             <div id='proband-description'>
                 <div id='proband-text'></div>
diff --git a/annotation/templates/annotation/annotation_detail.html b/annotation/templates/annotation/annotation_detail.html
index 055677fd0..9958b6b6a 100644
--- a/annotation/templates/annotation/annotation_detail.html
+++ b/annotation/templates/annotation/annotation_detail.html
@@ -163,7 +163,7 @@
             {% labelled label=cwr.name %}
                 <div class='cached-web-resource-container'>
                 {% if cwr.import_status == 'I' %}
-                    <img src="{% static 'images/spinner.gif' %}" /> <b>Import started: </b>{{ cwr.import_date }}
+                    <i class="fa fa-spinner"></i> <b>Import started: </b>{{ cwr.import_date }}
                 {% else %}
                     {% if user.is_superuser %}
                         {% if cwr.import_status != 'S' %}
@@ -194,9 +194,8 @@
             type: "POST",
             url: Urls.load_cached_web_resource(cwr_name),
             success: function(data) {
-                const img = $("<img />").attr("src", "{% static 'images/spinner.gif' %}");
                 const container = loadButton.parent(".cached-web-resource-container");
-                container.empty().append(img);
+                container.html('<i class="fa fa-spinner"></i>');
             }
         });
     });
diff --git a/genes/templates/genes/coverage/qc_coverage.html b/genes/templates/genes/coverage/qc_coverage.html
index 9ff91fefe..8cd8d505e 100644
--- a/genes/templates/genes/coverage/qc_coverage.html
+++ b/genes/templates/genes/coverage/qc_coverage.html
@@ -32,8 +32,7 @@
         const GENOME_BUILD = "{{ genome_build.name }}";
 
         function load_graph(url) {
-            const loading_icon = $('<label>').attr({class : 'loading icon32', style: 'margin-right:10px;'});
-            gcContainer.html(loading_icon);
+            gcContainer.html('<i class="fa fa-spinner"></i>');
             gcContainer.load(url);
         }
 
diff --git a/genes/templates/genes/view_gene_symbol.html b/genes/templates/genes/view_gene_symbol.html
index cef225d4c..8e5400bf9 100644
--- a/genes/templates/genes/view_gene_symbol.html
+++ b/genes/templates/genes/view_gene_symbol.html
@@ -141,8 +141,7 @@
 
             {% if has_gene_coverage and url_name_visible.gene_symbol_coverage_collection_graphs %}
                 let gcContainer = $("#qc-gene-coverage-graph-container");
-                let loading_icon = $('<div>').attr({class : 'loading', style: 'margin-right:10px;'});
-                gcContainer.html(loading_icon);
+                gcContainer.html('<i class="fa fa-spinner"></i>');
                 gcContainer.load("{% url 'gene_symbol_coverage_collection_graphs' genome_build.name gene_symbol.pk %}");
             {% endif %}
 
diff --git a/pedigree/templates/pedigree/view_pedigree.html b/pedigree/templates/pedigree/view_pedigree.html
index 0a10076c6..0ce41259d 100644
--- a/pedigree/templates/pedigree/view_pedigree.html
+++ b/pedigree/templates/pedigree/view_pedigree.html
@@ -35,8 +35,7 @@
 	function poll_pedigree_task(celery_task) {
 		$('#launch-task').hide();
 		var task_info = $('#task-info');
-		var loading_icon = $('<div>').attr({class : 'loading', style: 'margin-right:10px;'});
-		task_info.html(loading_icon);
+		task_info.html('<i class="fa fa-spinner"></i>');
 		task_info.append("Pedigree Inheritance task is running...");
 		
 		$('#task-info').show();
diff --git a/snpdb/templates/snpdb/patients/cohort_gene_counts.html b/snpdb/templates/snpdb/patients/cohort_gene_counts.html
index a8b5ea4e0..2b287599c 100644
--- a/snpdb/templates/snpdb/patients/cohort_gene_counts.html
+++ b/snpdb/templates/snpdb/patients/cohort_gene_counts.html
@@ -9,8 +9,7 @@
     const gcContainer = $("#cohort-gene-counts-graph-container");
 
     function load_graph(url) {
-        const loading_icon = $('<div>').attr({class: 'loading icon16', style: 'margin-right:10px;'});
-        gcContainer.html(loading_icon);
+        gcContainer.html('<i class="fa fa-spinner"></i>');
         gcContainer.load(url);
     }
 
diff --git a/snpdb/templates/snpdb/tags/wiki_tag.html b/snpdb/templates/snpdb/tags/wiki_tag.html
index 935d93300..98bb0346f 100644
--- a/snpdb/templates/snpdb/tags/wiki_tag.html
+++ b/snpdb/templates/snpdb/tags/wiki_tag.html
@@ -81,7 +81,7 @@
 
 <div id='wiki-{{ uuid }}'>
     <div class="hidden editSection"></div>
-    <span class='hidden saving-message'><img src="{% static 'images/spinner.gif' %}" /> Saving...</span>
+    <span class='hidden saving-message'><i class="fa fa-spinner"></i> Saving...</span>
     <span class="hidden saved-message"></span>
     <button class='btn btn-outline-primary hidden wiki-save'>save wiki</button>
     {% if has_write_permission %}
diff --git a/snpdb/templates/snpdb/wait_for_task.html b/snpdb/templates/snpdb/wait_for_task.html
index 747a92844..0b93050eb 100644
--- a/snpdb/templates/snpdb/wait_for_task.html
+++ b/snpdb/templates/snpdb/wait_for_task.html
@@ -18,7 +18,7 @@
 {% if async_result.result and not async_result.successful %}
     The Job {{ async_result.id }} exited with status {{ async_result.status }}.
 {% else %}
-<img src="{% static 'images/spinner.gif' %}" />
+<i class="fa fa-spinner"></i>
 {% endif %}
 
 </div>
\ No newline at end of file
diff --git a/variantgrid/static_files/default_static/images/spinner.gif b/variantgrid/static_files/default_static/images/spinner.gif
deleted file mode 100644
index 085ccaeca..000000000
Binary files a/variantgrid/static_files/default_static/images/spinner.gif and /dev/null differ
diff --git a/variantgrid/static_files/default_static/js/grid.js b/variantgrid/static_files/default_static/js/grid.js
index 741fd92a4..a497f44ba 100644
--- a/variantgrid/static_files/default_static/js/grid.js
+++ b/variantgrid/static_files/default_static/js/grid.js
@@ -30,7 +30,7 @@ function load_variant_details(variant_id) {
         }
     }
     let editorContainer = $("#node-editor-container");
-    editorContainer.html('<div class="editor-loading"><img src="/static/images/spinner.gif" /> Loading variant details...</div>');
+    editorContainer.html('<div class="editor-loading"><i class="fa fa-spinner"></i> Loading variant details...</div>');
     editorContainer.load(variant_details_url);
 }
 
diff --git a/variantopedia/templates/variantopedia/dashboard.html b/variantopedia/templates/variantopedia/dashboard.html
index 4f548b0fa..027b94f70 100644
--- a/variantopedia/templates/variantopedia/dashboard.html
+++ b/variantopedia/templates/variantopedia/dashboard.html
@@ -32,7 +32,7 @@
             <script>
             $(document).ready(function() {
                 var myCases = $("#my-cases");
-                myCases.html('<div class="cases-loading"><img src="{% static 'images/spinner.gif' %}" /> Loading cases...</div>');
+                myCases.html('<i class="fa fa-spinner"></i> Loading cases...');
                 myCases.load("{% url 'my_cases_tab' %}");
             });
             </script>
diff --git a/variantopedia/templates/variantopedia/variant_details.html b/variantopedia/templates/variantopedia/variant_details.html
index 08aee4bc0..7fa53b90e 100644
--- a/variantopedia/templates/variantopedia/variant_details.html
+++ b/variantopedia/templates/variantopedia/variant_details.html
@@ -323,7 +323,7 @@
     $("#variant-canonical-c-hgvs").text(data.link_data.canonical_c_hgvs);
 
     let clinGenId = $("#clingen-allele-id");
-    clinGenId.removeClass("loading");
+    clinGenId.empty(); // clear loading
     let clinGenDetails;
     if (data.error) {
         let error_message = `ClinGeneAllele API Error: ${data.error.errorType} (${data.error.description}) for input '${data.error.inputLine}'`;
@@ -867,8 +867,9 @@ <h4>Tags</h4>
                 <div class="card">
                     <div class="card-header">External IDs</div>
                     <div class="card-body">
-                        <!-- note this used to have css class of "loading" -->
-                        {% labelled id="clingen-allele-id" label="ClinGen" help=annotation_description.clingen_allele hint="tiny" %}{% endlabelled %}
+                        {% labelled id="clingen-allele-id" label="ClinGen" help=annotation_description.clingen_allele hint="tiny" %}
+                            <i class="fa fa-spinner"></i>
+                        {% endlabelled %}
                     {% if variant_annotation.has_cosmic %}
                         {% labelled id='cosmic_id' label='COSMIC Genomic Mutation ID' help=annotation_description.cosmic_id hint="tiny" %}{{ variant_annotation.cosmic_id }}{% endlabelled %}
                         {% labelled id='cosmic_legacy_id' label='COSMIC Legacy ID' help=annotation_description.cosmic_legacy_id hint="tiny" %}{{ variant_annotation.cosmic_legacy_id }}{% endlabelled %}
@@ -913,7 +914,7 @@ <h4>Tags</h4>
 
                         <div id='pubmed-citations' class="citations mb-4">
                             <div id='pubmed-loading'>
-                                <img src="{% static 'images/spinner.gif' %}" /> Loading citations...
+                                <i class="fa fa-spinner"></i> Loading citations...
                             </div>
                         </div>
 
@@ -961,7 +962,7 @@ <h4>Canonical Transcripts</h4>
         {% if seqauto_enabled and show_gene_coverage %}
         <div id="gene_coverage">
             <!-- todo convert to bootstrap spinner -->
-            <img src="{% static 'images/spinner.gif' %}" /> Checking for gene coverage...
+            <i class="fa fa-spinner"></i> Checking for gene coverage...
         </div>
         {% endif %}
     
@@ -969,7 +970,7 @@ <h4>Canonical Transcripts</h4>
 {% endif %}
 {% if show_samples %}
 <div id="variant_sample_information" class="container-table">
-	<img src="{% static 'images/spinner.gif' %}" /> Checking for sample information about this variant...
+    <i class="fa fa-spinner"></i> Checking for sample information about this variant...
 </div>
 {% endif %}