diff --git a/src/modules/modals/CreateContext.vue b/src/modules/modals/CreateContext.vue
index 63fb291ed..fa5960675 100644
--- a/src/modules/modals/CreateContext.vue
+++ b/src/modules/modals/CreateContext.vue
@@ -67,6 +67,7 @@ export default {
 		NcIconSvgWrapper,
 		NcContextResource,
 	},
+	mixins: [svgHelper],
 	props: {
 		showModal: {
 			type: Boolean,
@@ -87,10 +88,6 @@ export default {
 			resources: [],
 		}
 	},
-	async mounted() {
-		await this.setIcon('equalizer')
-	},
-	mixins: [svgHelper],
 	watch: {
 		title() {
 			if (this.title.length >= 200) {
@@ -99,6 +96,9 @@ export default {
 			}
 		},
 	},
+	async mounted() {
+		await this.setIcon('equalizer')
+	},
 	methods: {
 		titleChangedManually() {
 			this.customTitleChosen = true
diff --git a/src/modules/modals/EditContext.vue b/src/modules/modals/EditContext.vue
index 3a5a3b72d..a87cca82d 100644
--- a/src/modules/modals/EditContext.vue
+++ b/src/modules/modals/EditContext.vue
@@ -69,6 +69,7 @@ export default {
 		NcIconSvgWrapper,
 		NcContextResource,
 	},
+	mixins: [svgHelper],
 	props: {
 		showModal: {
 			type: Boolean,
@@ -91,10 +92,6 @@ export default {
 			resources: [],
 		}
 	},
-	async mounted() {
-		await this.setIcon('equalizer')
-	},
-	mixins: [svgHelper],
 	computed: {
 		...mapGetters(['getContext']),
 		...mapState(['tables', 'views']),
@@ -119,6 +116,9 @@ export default {
 			}
 		},
 	},
+	async mounted() {
+		await this.setIcon('equalizer')
+	},
 	methods: {
 		async setIcon(iconName) {
 			this.icon.name = iconName
diff --git a/src/modules/navigation/partials/NavigationContextItem.vue b/src/modules/navigation/partials/NavigationContextItem.vue
index 08f13ceef..96e2ddb91 100644
--- a/src/modules/navigation/partials/NavigationContextItem.vue
+++ b/src/modules/navigation/partials/NavigationContextItem.vue
@@ -55,14 +55,14 @@ export default {
 			icon: null,
 		}
 	},
+	computed: {
+		...mapGetters(['activeContext']),
+	},
 
 	async mounted() {
 		this.icon = await this.getContextIcon(this.context.iconName)
 	},
 
-	computed: {
-		...mapGetters(['activeContext']),
-	},
 	methods: {
 		emit,
 		async editContext() {
diff --git a/src/modules/navigation/sections/Navigation.vue b/src/modules/navigation/sections/Navigation.vue
index 9b32da94d..da5618c41 100644
--- a/src/modules/navigation/sections/Navigation.vue
+++ b/src/modules/navigation/sections/Navigation.vue
@@ -108,8 +108,6 @@ import Magnify from 'vue-material-design-icons/Magnify.vue'
 import Archive from 'vue-material-design-icons/Archive.vue'
 import { getCurrentUser } from '@nextcloud/auth'
 
-import NcIconPicker from '../../../shared/components/ncIconPicker/NcIconPicker.vue'
-
 export default {
 	name: 'Navigation',
 	components: {
@@ -126,8 +124,6 @@ export default {
 		NcButton,
 		NcCounterBubble,
 		NcEmptyContent,
-
-		NcIconPicker,
 	},
 	data() {
 		return {
diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index 94aadb068..155eba095 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -5,7 +5,7 @@
 			<div class="content first-row">
 				<div class="row">
 					<h1 style="display: flex; align-items: center;">
-						<NcIconSvgWrapper :svg="icon" :size="40" style="display: inline-block;"/>&nbsp; {{ activeContext.name }}
+						<NcIconSvgWrapper :svg="icon" :size="40" style="display: inline-block;" />&nbsp; {{ activeContext.name }}
 					</h1>
 				</div>
 				<div class="row">
diff --git a/src/shared/components/ncIconPicker/NcIconPicker.vue b/src/shared/components/ncIconPicker/NcIconPicker.vue
index abcd517c9..eb2c03a8a 100644
--- a/src/shared/components/ncIconPicker/NcIconPicker.vue
+++ b/src/shared/components/ncIconPicker/NcIconPicker.vue
@@ -1,52 +1,51 @@
 <template>
-  <NcPopover container="body" popup-role="dialog" :shown.sync="showIconPicker">
-    <template #trigger="slotProps">
-      <slot v-bind="slotProps" />
-    </template>
+	<NcPopover container="body" popup-role="dialog" :shown.sync="showIconPicker">
+		<template #trigger="slotProps">
+			<slot v-bind="slotProps" />
+		</template>
 
-    <IconPicker :icons="icons" @select="select"/>
-  </NcPopover>
+		<IconPicker :icons="icons" @select="select" />
+	</NcPopover>
 </template>
 
 <script>
 import iconData from '../../../../img/material/meta.json'
 
-import { NcPopover, NcButton } from '@nextcloud/vue'
+import { NcPopover } from '@nextcloud/vue'
 import IconPicker from './partials/IconPicker.vue'
 
 export default {
-  name: 'NcIconPicker',
-
-  components: {
-    NcPopover,
-    NcButton,
-    IconPicker,
-  },
-
-  props: {
-    closeOnSelect: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  data() {
-    return {
-      icons: iconData,
-      showIconPicker: false,
-    }
-  },
-
-  emits: ['select'],
-
-  methods: {
-    select(icon) {
-      this.$emit('select', icon)
-
-      if (this.closeOnSelect) {
-        this.showIconPicker = false
-      }
-    },
-  }
+	name: 'NcIconPicker',
+
+	components: {
+		NcPopover,
+		IconPicker,
+	},
+
+	props: {
+		closeOnSelect: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	emits: ['select'],
+
+	data() {
+		return {
+			icons: iconData,
+			showIconPicker: false,
+		}
+	},
+
+	methods: {
+		select(icon) {
+			this.$emit('select', icon)
+
+			if (this.closeOnSelect) {
+				this.showIconPicker = false
+			}
+		},
+	},
 }
 </script>
diff --git a/src/shared/components/ncIconPicker/mixins/svgHelper.js b/src/shared/components/ncIconPicker/mixins/svgHelper.js
index 34cdb416e..c6c7e3e46 100644
--- a/src/shared/components/ncIconPicker/mixins/svgHelper.js
+++ b/src/shared/components/ncIconPicker/mixins/svgHelper.js
@@ -1,15 +1,15 @@
 export default {
-  methods: {
-    uriToSvg(dataUri) {
-      const pattern = /data:image\/svg\+xml;base64,/
-      const strippedUri = dataUri.replace(pattern, '')
+	methods: {
+		uriToSvg(dataUri) {
+			const pattern = /data:image\/svg\+xml;base64,/
+			const strippedUri = dataUri.replace(pattern, '')
 
-      return atob(strippedUri)
-    },
-    async getContextIcon(iconName) {
-      const { default: icon } = await import(`@mdi/svg/svg/${iconName}.svg`)
+			return atob(strippedUri)
+		},
+		async getContextIcon(iconName) {
+			const { default: icon } = await import(`@mdi/svg/svg/${iconName}.svg`)
 
-      return this.uriToSvg(icon)
-    }
-  }
+			return this.uriToSvg(icon)
+		},
+	},
 }
diff --git a/src/shared/components/ncIconPicker/partials/Icon.vue b/src/shared/components/ncIconPicker/partials/Icon.vue
index fe18ecc8f..2cb1ed717 100644
--- a/src/shared/components/ncIconPicker/partials/Icon.vue
+++ b/src/shared/components/ncIconPicker/partials/Icon.vue
@@ -1,13 +1,16 @@
 <template>
-  <NcButton
-    class="icon-picker__icon"
-    type="tertiary"
-    :aria-label="t('tables', 'Select icon for the application')"
-    @click.prevent="select">
-    <template #icon>
-      <NcIconSvgWrapper :svg="icon" :size="30" />
-    </template>
-  </NcButton>
+	<NcLoadingIcon v-if="loading"
+		:name="t('tables', 'Icon {iconName} loading', { iconName: name})"
+		:size="30" />
+	<NcButton v-else
+		class="icon-picker__icon"
+		type="tertiary"
+		:aria-label="t('tables', 'Select icon for the application')"
+		@click.prevent="select">
+		<template #icon>
+			<NcIconSvgWrapper :svg="icon" :size="30" />
+		</template>
+	</NcButton>
 </template>
 
 <script>
@@ -15,57 +18,53 @@ import { NcLoadingIcon, NcIconSvgWrapper, NcButton } from '@nextcloud/vue'
 import svgHelper from '../mixins/svgHelper.js'
 
 export default {
-  name: 'Icon',
+	name: 'Icon',
 
-  components: {
-    NcLoadingIcon,
-    NcIconSvgWrapper,
-    NcButton,
-  },
+	components: {
+		NcLoadingIcon,
+		NcIconSvgWrapper,
+		NcButton,
+	},
+	mixins: [svgHelper],
 
-  props: {
-    name: {
-      type: String,
-      default: null,
-    }
-  },
+	props: {
+		name: {
+			type: String,
+			default: null,
+		},
+	},
 
-  data() {
-    return {
-      loading: false,
-      icon: null,
-    }
-  },
+	emits: ['select'],
 
-  emits: ['select'],
-  mixins: [svgHelper],
+	data() {
+		return {
+			loading: true,
+			icon: null,
+		}
+	},
 
-  async mounted() {
-    this.icon = await this.getContextIcon(this.name)
-  },
+	async mounted() {
+		this.icon = await this.getContextIcon(this.name)
+		this.loading = false
+	},
 
-  methods: {
-    load() {
-      if (this.icon) {
-        this.loading = false
-      }
-    },
-    select() {
-      this.$emit('select', this.name)
-    }
-  }
+	methods: {
+		select() {
+			this.$emit('select', this.name)
+		},
+	},
 }
 </script>
 
 <style>
 .icon-picker__icon {
-  border-radius: 15px !important;
-  padding: 8px !important;
-  margin: 2px !important;
-  border: 2px solid transparent !important;
+	border-radius: 15px !important;
+	padding: 8px !important;
+	margin: 2px !important;
+	border: 2px solid transparent !important;
 
-  &:hover {
-    border: 2px solid var(--color-primary-element) !important;
-  }
+	&:hover {
+		border: 2px solid var(--color-primary-element) !important;
+	}
 }
 </style>
diff --git a/src/shared/components/ncIconPicker/partials/IconPicker.vue b/src/shared/components/ncIconPicker/partials/IconPicker.vue
index 8f3a2da54..1f94e2ac7 100644
--- a/src/shared/components/ncIconPicker/partials/IconPicker.vue
+++ b/src/shared/components/ncIconPicker/partials/IconPicker.vue
@@ -1,51 +1,49 @@
 <template>
-  <div class="icon-picker__icons">
-    <template v-for="icon in icons">
-      <Icon :name="icon.name" @select="select" />
-    </template>
-  </div>
+	<div class="icon-picker__icons">
+		<template v-for="icon in icons">
+			<Icon :key="icon.name" :name="icon.name" @select="select" />
+		</template>
+	</div>
 </template>
 
 <script>
-import { NcButton } from '@nextcloud/vue'
 import Icon from './Icon.vue'
 
 export default {
-  name: 'IconPicker',
+	name: 'IconPicker',
 
-  components: {
-    NcButton,
-    Icon,
-  },
+	components: {
+		Icon,
+	},
 
-  props: {
-    icons: {
-      type: Array,
-      default: null,
-    },
-    filterString: {
-      type: String,
-      default: '',
-    }
-  },
+	props: {
+		icons: {
+			type: Array,
+			default: null,
+		},
+		filterString: {
+			type: String,
+			default: '',
+		},
+	},
 
-  emits: ['select'],
+	emits: ['select'],
 
-  methods: {
-    select(icon) {
-      this.$emit('select', icon)
-    }
-  }
+	methods: {
+		select(icon) {
+			this.$emit('select', icon)
+		},
+	},
 }
 </script>
 
 <style>
 .icon-picker__icons {
-  max-width: 300px;
-  height: 500px;
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  overflow-y: scroll;
-  padding: 10px;
+	max-width: 300px;
+	height: 500px;
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	overflow-y: scroll;
+	padding: 10px;
 }
 </style>