diff --git a/app/components/modal-members-modal-settings.hbs b/app/components/modal-members-modal-settings.hbs
index 07ad5d8c9..8cca6f79a 100644
--- a/app/components/modal-members-modal-settings.hbs
+++ b/app/components/modal-members-modal-settings.hbs
@@ -174,15 +174,17 @@
                                     <h4 class="gh-portal-setting-title">Icon</h4>
                                     <GhUploader
                                         @extensions={{this.iconExtensions}}
-                                        @paramsHash={{hash purpose="icon"}}
-                                        @onComplete={{action "imageUploaded" "icon"}}
+                                        @paramsHash={{hash purpose="image"}}
+                                        @onComplete={{action "imageUploaded" "buttonIcon"}}
                                         as
                                         |uploader|
                                     >
                                         <div class="flex items-center justify-between mt2 br3 ba b--whitegrey bg-white">
                                             <div class="gh-portal-settings-icons">
                                                 {{#each this.defaultButtonIcons as |imgIcon| }}
-                                                    <span class="gh-portal-button-icon {{if (eq this.buttonIcon imgIcon) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon}}>{{svg-jar imgIcon}}</span>
+                                                    <span class="gh-portal-button-icon {{if (eq this.buttonIcon imgIcon.value) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon.value}}>
+                                                        {{svg-jar imgIcon.icon}}
+                                                    </span>
                                                 {{/each}}
                                                 {{#if uploader.isUploading}}
                                                     {{uploader.progressBar}}
diff --git a/app/components/modal-members-modal-settings.js b/app/components/modal-members-modal-settings.js
index bb600b936..4cc07f376 100644
--- a/app/components/modal-members-modal-settings.js
+++ b/app/components/modal-members-modal-settings.js
@@ -8,7 +8,30 @@ import {htmlSafe} from '@ember/string';
 import {run} from '@ember/runloop';
 import {inject as service} from '@ember/service';
 import {task, timeout} from 'ember-concurrency';
-const ICON_EXTENSIONS = ['ico', 'png', 'svg', 'jpg', 'jpeg'];
+const ICON_EXTENSIONS = ['gif', 'jpg', 'jpeg', 'png', 'svg'];
+
+const ICON_MAPPING = [
+    {
+        icon: 'user-circle',
+        value: 'icon-1'
+    },
+    {
+        icon: 'ambulance',
+        value: 'icon-2'
+    },
+    {
+        icon: 'book-open',
+        value: 'icon-3'
+    },
+    {
+        icon: 'store',
+        value: 'icon-4'
+    },
+    {
+        icon: 'gift',
+        value: 'icon-5'
+    }
+];
 
 export default ModalComponent.extend({
     settings: service(),
@@ -108,17 +131,12 @@ export default ModalComponent.extend({
             {name: 'icon-only', label: 'Icon only'},
             {name: 'text-only', label: 'Text only'}
         ];
-        this.defaultButtonIcons = [
-            'user-circle',
-            'ambulance',
-            'book-open',
-            'store',
-            'gift'
-        ];
+        this.defaultButtonIcons = ICON_MAPPING;
         this.iconExtensions = ICON_EXTENSIONS;
         const portalButtonIcon = this.settings.get('portalButtonIcon') || '';
-        if (portalButtonIcon && !portalButtonIcon.includes('githubusercontent')) {
-            return this.set('customIcon', this.settings.get('portalButtonIcon'));
+        const defaultIconKeys = this.defaultButtonIcons.map(buttonIcon => buttonIcon.value);
+        if (portalButtonIcon && !defaultIconKeys.includes(portalButtonIcon)) {
+            this.set('customIcon', this.settings.get('portalButtonIcon'));
         }
     },