diff --git a/frontend_tests/casper_tests/10-admin.js b/frontend_tests/casper_tests/10-admin.js
index 706e0efb81..a5de9c0b9b 100644
--- a/frontend_tests/casper_tests/10-admin.js
+++ b/frontend_tests/casper_tests/10-admin.js
@@ -344,7 +344,7 @@ casper.then(function () {
             realm_icon_file_input: 'static/images/logo/zulip-icon-128x128.png',
         }, false);
         casper.click("#realm_icon_upload_button");
-        casper.waitWhileVisible("#upload_icon_spinner .loading_indicator_spinner", function () {
+        casper.waitWhileVisible("#upload_icon_spinner", function () {
             casper.test.assertExists('img#realm-icon-block[src^="/user_avatars/2/realm/icon.png?version=2"]');
             casper.test.assertEqual(casper.visible('#realm_icon_delete_button'), true);
         });
diff --git a/static/js/settings_org.js b/static/js/settings_org.js
index 76e93664d5..5a693bb707 100644
--- a/static/js/settings_org.js
+++ b/static/js/settings_org.js
@@ -955,6 +955,19 @@ exports.build_page = function () {
         });
     });
 
+    function realm_icon_upload_complete() {
+        $('#upload_icon_spinner').css({visibility: 'hidden'});
+        $('#realm_icon_upload').show();
+        $('#realm_icon_delete_button').show();
+
+    }
+
+    function realm_icon_upload_start() {
+        $('#upload_icon_spinner').css({visibility: "visible"});
+        $('#realm_icon_upload').hide();
+        $('#realm_icon_delete_button').hide();
+    }
+
     function upload_realm_icon(file_input) {
         const form_data = new FormData();
 
@@ -965,9 +978,7 @@ exports.build_page = function () {
 
         const error_field = $("#realm_icon_file_input_error");
         error_field.hide();
-        const spinner = $("#upload_icon_spinner").expectOne();
-        loading.make_indicator(spinner, {text: i18n.t("Uploading profile picture.")});
-        $("#upload_icon_button_text").expectOne().hide();
+        realm_icon_upload_start();
 
         channel.post({
             url: '/json/realm/icon',
@@ -976,12 +987,10 @@ exports.build_page = function () {
             processData: false,
             contentType: false,
             success: function () {
-                loading.destroy_indicator($("#upload_icon_spinner"));
-                $("#upload_icon_button_text").expectOne().show();
+                realm_icon_upload_complete();
             },
             error: function (xhr) {
-                loading.destroy_indicator($("#upload_icon_spinner"));
-                $("#upload_icon_button_text").expectOne().show();
+                realm_icon_upload_complete();
                 ui_report.error("", xhr, error_field);
             },
         });
diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index 1c3e12a1e5..9c45296fff 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -1085,7 +1085,6 @@ input[type=checkbox] {
 }
 
 #upload_avatar_spinner,
-#upload_icon_spinner,
 .upload-logo-spinner {
     font-size: 14px;
     margin: auto;
@@ -1208,6 +1207,7 @@ input[type=checkbox] {
         z-index: 99;
         position: absolute;
         display: none;
+        cursor: pointer;
     }
 
     #realm_icon_delete_button,
@@ -1234,10 +1234,12 @@ input[type=checkbox] {
         color: hsl(0, 0%, 100%);
     }
 
+    #realm_icon_delete_button:hover ~ #realm_icon_upload,
     #user_avatar_delete_button:hover ~ #user_avatar_upload_button {
         visibility: hidden;
     }
 
+
     #realm_icon_delete_button:hover ~ #realm_icon_delete,
     #user_avatar_delete_button:hover ~ #user_avatar_delete {
         visibility: visible;
@@ -1262,27 +1264,62 @@ input[type=checkbox] {
         right: 18px;
     }
 
+    #realm_icon_upload,
     #user_avatar_upload_button {
         cursor: pointer;
-        color: hsl(0, 0%, 85%);
-        opacity: 0;
         font-size: 0.85rem;
+        color: hsl(0, 0%, 85%);
         position: absolute;
-        top: 90px;
-        right: 20px;
         z-index: 99;
     }
 
+    #user_avatar_upload_button {
+        top: 90px;
+        right: 20px;
+        opacity: 0;
+    }
+
+    #realm_icon_upload {
+        top: 40px;
+        right: 18px;
+        visibility: hidden;
+    }
+
+    #realm_icon_upload:hover,
     #user_avatar_upload_button:hover {
         color: hsl(0, 0%, 100%);
     }
 
+    #upload_icon_spinner {
+        background-color: hsl(0, 0%, 10%);
+        font-size: 0.80rem;
+        width: 100%;
+        opacity: 0.8;
+        height: 100%;
+        position: absolute;
+        visibility: hidden;
+        z-index: 99;
+        cursor: pointer;
+    }
+
+    #realm-icon-spinner,
     #user-avatar-spinner {
         position: absolute;
+        z-index: 99;
+    }
+
+    #user-avatar-spinner {
+        display: none;
         top: 40%;
         right: 40%;
-        z-index: 99;
-        display: none;
+    }
+
+    #realm-icon-spinner {
+        width: 40px;
+        height: 40px;
+        top: 30%;
+        right: 30%;
+        display: block;
     }
 
     .guest-avatar::after {
@@ -1313,6 +1350,10 @@ input[type=checkbox] {
         #realm-icon-background {
             display: block;
         }
+
+        #realm_icon_upload {
+            visibility: visible;
+        }
     }
 }
 
diff --git a/static/templates/settings/organization_profile_admin.hbs b/static/templates/settings/organization_profile_admin.hbs
index e4c7272c6a..506cda08d1 100644
--- a/static/templates/settings/organization_profile_admin.hbs
+++ b/static/templates/settings/organization_profile_admin.hbs
@@ -30,29 +30,28 @@
             <div class="inline-block">
                 <div class="avatar-icon-settings">
                     {{#if is_admin}}
-                    <div id="realm-icon-background"></div>
-                    <span id="realm_icon_delete_button" aria-label="{{t 'Delete organization icon'}}" role="button" tabindex="0">
-                        &times;
-                    </span>
-                    <span id="realm_icon_delete" aria-label="{{t 'Delete organization icon'}}" tabindex="0">
-                        {{t 'Delete icon' }}
-                    </span>
+                    <div id="realm_icon_upload_button">
+                        <div id="realm-icon-background"></div>
+                        <span id="realm_icon_delete_button" aria-label="{{t 'Delete organization icon'}}" role="button" tabindex="0">
+                            &times;
+                        </span>
+                        <span id="realm_icon_delete" aria-label="{{t 'Delete organization icon'}}" tabindex="0">
+                            {{t 'Delete icon' }}
+                        </span>
+                        <span id="realm_icon_upload" aria-label="{{t 'Upload organization icon'}}" role="button" tabindex="0">
+                            {{t 'Upload icon' }}
+                        </span>
+                        <span id="upload_icon_spinner">
+                            <object id="realm-icon-spinner" type="image/svg+xml" data="/static/images/tail-spin.svg"></object>
+                        </span>
+                    </div>
                     {{/if}}
                     <img id="realm-icon-block" src="{{ realm_icon_url }}"/>
                     <input type="file" name="realm_icon_file_input" class="notvisible"
                       id="realm_icon_file_input" value="{{t 'Upload profile picture' }}"/>
                 </div>
+                <div id="realm_icon_file_input_error" class="text-error m-t-10"></div>
             </div>
-            {{#if is_admin}}
-            <div class="inline-block avatar-controls">
-                <div id="realm_icon_file_input_error" class="alert text-error"></div>
-                <button class="button rounded sea-green w-200 block input-size"
-                  id="realm_icon_upload_button">
-                    <span id="upload_icon_button_text">{{t 'Upload new profile picture' }}</span>
-                    <span id="upload_icon_spinner"></span>
-                </button>
-            </div>
-            {{/if}}
         </div>
         <a href="/login/?preview=true" target="_blank" class="button rounded sea-green w-200 block" id="id_org_profile_preview">
             {{t 'Preview organization profile' }}