diff --git a/apps/comments/src/components/CommentEntry.vue b/apps/comments/src/components/CommentEntry.vue
index 1a43f76186842..4ac1e03ea15cd 100644
--- a/apps/comments/src/components/CommentEntry.vue
+++ b/apps/comments/src/components/CommentEntry.vue
@@ -53,7 +53,7 @@
 				</NcActions>
 
 				<!-- Show loading if we're editing or deleting, not on new ones -->
-				<div v-if="id && loading" class="comment_loading icon-loading-small" />
+				<NcLoadingIcon v-if="id && loading" class="comment_loading" :size="16" />
 
 				<!-- Relative time to the comment creation -->
 				<NcDateTime
diff --git a/apps/comments/src/views/CommentsApp.vue b/apps/comments/src/views/CommentsApp.vue
index 94beff710b398..570290c27d5fc 100644
--- a/apps/comments/src/views/CommentsApp.vue
+++ b/apps/comments/src/views/CommentsApp.vue
@@ -4,10 +4,7 @@
 -->
 
 <template>
-	<div
-		v-element-visibility="onVisibilityChange"
-		class="comments"
-		:class="{ 'icon-loading': isFirstLoading }">
+	<div v-element-visibility="onVisibilityChange" class="comments">
 		<!-- Editor -->
 		<CommentEntry
 			v-bind="editorData"
@@ -45,7 +42,7 @@
 			</ul>
 
 			<!-- Loading more message -->
-			<div v-if="loading && !isFirstLoading" class="comments__info icon-loading" />
+			<NcLoadingIcon v-if="loading && !isFirstLoading" class="comments__info" :size="28" />
 
 			<div v-else-if="hasComments && done" class="comments__info">
 				{{ t('comments', 'No more messages') }}
@@ -66,6 +63,7 @@
 				</NcButton>
 			</template>
 		</template>
+		<NcLoadingIcon v-else class="comments__loading" :size="28" />
 	</div>
 </template>
 
@@ -75,6 +73,7 @@ import { translate as t } from '@nextcloud/l10n'
 import { vElementVisibility as elementVisibility } from '@vueuse/components'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import IconMessageReplyTextOutline from 'vue-material-design-icons/MessageReplyTextOutline.vue'
 import IconRefresh from 'vue-material-design-icons/Refresh.vue'
@@ -92,6 +91,7 @@ export default {
 		CommentEntry,
 		NcEmptyContent,
 		NcButton,
+		NcLoadingIcon,
 		IconRefresh,
 		IconMessageReplyTextOutline,
 		IconAlertCircleOutline,
@@ -271,7 +271,8 @@ export default {
 	flex-direction: column;
 
 	&__empty,
-	&__error {
+	&__error,
+	&__loading {
 		flex: 1 0;
 	}
 
diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
index c02616c01f1d6..15bee5439234d 100644
--- a/apps/files/src/views/TemplatePicker.vue
+++ b/apps/files/src/views/TemplatePicker.vue
@@ -45,8 +45,10 @@
 			</div>
 		</form>
 
-		<NcEmptyContent v-if="loading" class="templates-picker__loading" icon="icon-loading">
-			{{ t('files', 'Creating file') }}
+		<NcEmptyContent v-if="loading" class="templates-picker__loading" :name="t('files', 'Creating file')">
+			<template #icon>
+				<NcLoadingIcon />
+			</template>
 		</NcEmptyContent>
 	</NcModal>
 </template>
@@ -67,6 +69,7 @@ import { spawnDialog } from '@nextcloud/vue/functions/dialog'
 import { extname, join, normalize } from 'path'
 import { defineComponent } from 'vue'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcModal from '@nextcloud/vue/components/NcModal'
 import TemplateFiller from '../components/TemplateFiller.vue'
 import TemplatePreview from '../components/TemplatePreview.vue'
@@ -81,6 +84,7 @@ export default defineComponent({
 
 	components: {
 		NcEmptyContent,
+		NcLoadingIcon,
 		NcModal,
 		TemplatePreview,
 	},
diff --git a/apps/settings/src/authtokens/components/AuthToken.vue b/apps/settings/src/authtokens/components/AuthToken.vue
index 7cc7a06b8c7f7..b12c398c6d44a 100644
--- a/apps/settings/src/authtokens/components/AuthToken.vue
+++ b/apps/settings/src/authtokens/components/AuthToken.vue
@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import type { IToken } from '../store/authtoken.ts'
 
-import { mdiAndroid, mdiAppleIos, mdiAppleSafari, mdiCellphone, mdiCheck, mdiFirefox, mdiGoogleChrome, mdiKeyOutline, mdiMicrosoftEdge, mdiMonitor, mdiTablet, mdiWeb } from '@mdi/js'
+import { mdiAndroid, mdiAppleIos, mdiAppleSafari, mdiCellphone, mdiCheck, mdiFirefox, mdiGoogleChrome, mdiKeyOutline, mdiMicrosoftEdge, mdiMonitor, mdiPencilOutline, mdiTablet, mdiTrashCanOutline, mdiWeb } from '@mdi/js'
 import { showConfirmation } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { computed, nextTick, ref, useTemplateRef } from 'vue'
@@ -279,8 +279,10 @@ async function wipe() {
 				<!-- TODO: add text/longtext with some description -->
 				<NcActionButton
 					v-if="token.canRename"
-					icon="icon-rename"
 					@click.stop.prevent="startRename">
+					<template #icon>
+						<NcIconSvgWrapper :path="mdiPencilOutline" />
+					</template>
 					{{ t('settings', 'Rename') }}
 				</NcActionButton>
 
@@ -289,21 +291,27 @@ async function wipe() {
 					<template v-if="token.type !== TokenType.WIPING_TOKEN">
 						<!-- TODO: add text/longtext with some description -->
 						<NcActionButton
-							icon="icon-delete"
 							@click.stop.prevent="revoke">
+							<template #icon>
+								<NcIconSvgWrapper :path="mdiTrashCanOutline" />
+							</template>
 							{{ t('settings', 'Revoke') }}
 						</NcActionButton>
 						<NcActionButton
-							icon="icon-delete"
 							@click.stop.prevent="wipe">
+							<template #icon>
+								<NcIconSvgWrapper :path="mdiTrashCanOutline" />
+							</template>
 							{{ t('settings', 'Wipe device') }}
 						</NcActionButton>
 					</template>
 					<NcActionButton
 						v-else
-						icon="icon-delete"
 						:name="t('settings', 'Revoke')"
 						@click.stop.prevent="revoke">
+						<template #icon>
+							<NcIconSvgWrapper :path="mdiTrashCanOutline" />
+						</template>
 						{{ t('settings', 'Revoking this token might prevent the wiping of your device if it has not started the wipe yet.') }}
 					</NcActionButton>
 				</template>
diff --git a/apps/updatenotification/src/views/AdminSettingsSection.vue b/apps/updatenotification/src/views/AdminSettingsSection.vue
index 504963287b140..11929ff599eca 100644
--- a/apps/updatenotification/src/views/AdminSettingsSection.vue
+++ b/apps/updatenotification/src/views/AdminSettingsSection.vue
@@ -13,7 +13,7 @@
 				<p>
 					<!-- eslint-disable-next-line vue/no-v-html -->
 					<span v-html="newVersionAvailableString" /><br>
-					<span v-if="!isListFetched" class="icon icon-loading-small" />
+					<NcLoadingIcon v-if="!isListFetched" class="icon" :size="16" />
 					<!-- eslint-disable-next-line vue/no-v-html -->
 					<span v-html="statusText" />
 				</p>
@@ -21,8 +21,8 @@
 				<template v-if="missingAppUpdates.length">
 					<h3 class="clickable" @click="toggleHideMissingUpdates">
 						{{ t('updatenotification', 'Apps missing compatible version') }}
-						<span v-if="!hideMissingUpdates" class="icon icon-triangle-n" />
-						<span v-if="hideMissingUpdates" class="icon icon-triangle-s" />
+						<IconMenuDown v-if="hideMissingUpdates" class="icon icon--toggle" :size="16" />
+						<IconMenuUp v-else class="icon icon--toggle" :size="16" />
 					</h3>
 					<ul v-if="!hideMissingUpdates" class="applist">
 						<li v-for="(app, index) in missingAppUpdates" :key="index">
@@ -34,8 +34,8 @@
 				<template v-if="availableAppUpdates.length">
 					<h3 class="clickable" @click="toggleHideAvailableUpdates">
 						{{ t('updatenotification', 'Apps with compatible version') }}
-						<span v-if="!hideAvailableUpdates" class="icon icon-triangle-n" />
-						<span v-if="hideAvailableUpdates" class="icon icon-triangle-s" />
+						<IconMenuDown v-if="hideAvailableUpdates" class="icon icon--toggle" :size="16" />
+						<IconMenuUp v-else class="icon icon--toggle" :size="16" />
 					</h3>
 					<ul v-if="!hideAvailableUpdates" class="applist">
 						<li v-for="(app, index) in availableAppUpdates" :key="index">
@@ -97,8 +97,10 @@
 					:title="lastCheckedOnString"
 					:aria-label="lastCheckedOnString"
 					href="https://nextcloud.com/changelog/"
-					class="icon-info details"
-					target="_blank" />
+					class="details"
+					target="_blank">
+					<IconInformationOutline class="icon" :size="16" />
+				</a>
 			</template>
 
 			<template v-if="!isDefaultUpdateServerURL">
@@ -182,12 +184,16 @@ import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCaption from '@nextcloud/vue/components/NcActionCaption'
 import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcActions from '@nextcloud/vue/components/NcActions'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
 import IconChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import IconCloudCheckVariant from 'vue-material-design-icons/CloudCheckVariant.vue'
+import IconInformationOutline from 'vue-material-design-icons/InformationOutline.vue'
 import IconLink from 'vue-material-design-icons/Link.vue'
+import IconMenuDown from 'vue-material-design-icons/MenuDown.vue'
+import IconMenuUp from 'vue-material-design-icons/MenuUp.vue'
 import IconNewBox from 'vue-material-design-icons/NewBox.vue'
 import IconPencil from 'vue-material-design-icons/PencilOutline.vue'
 import IconSourceBranch from 'vue-material-design-icons/SourceBranch.vue'
@@ -202,12 +208,16 @@ export default defineComponent({
 	name: 'UpdateNotification',
 	components: {
 		IconChevronDown,
+		IconInformationOutline,
 		IconLink,
+		IconMenuDown,
+		IconMenuUp,
 		IconNewBox,
 		NcActions,
 		NcActionButton,
 		NcActionCaption,
 		NcActionLink,
+		NcLoadingIcon,
 		NcNoteCard,
 		NcSelect,
 		NcSettingsSection,
@@ -535,7 +545,7 @@ export default defineComponent({
 			display: inline-block;
 			margin-bottom: -3px;
 		}
-		.icon-triangle-s, .icon-triangle-n {
+		.icon--toggle {
 			opacity: 0.5;
 		}
 		.applist {
diff --git a/apps/user_status/src/components/PredefinedStatusesList.vue b/apps/user_status/src/components/PredefinedStatusesList.vue
index 457a5e583f023..068656c21ba25 100644
--- a/apps/user_status/src/components/PredefinedStatusesList.vue
+++ b/apps/user_status/src/components/PredefinedStatusesList.vue
@@ -21,18 +21,20 @@
 	<div
 		v-else
 		class="predefined-statuses-list">
-		<div class="icon icon-loading-small" />
+		<NcLoadingIcon :size="16" />
 	</div>
 </template>
 
 <script>
 import { t } from '@nextcloud/l10n'
 import { mapGetters, mapState } from 'vuex'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import PredefinedStatus from './PredefinedStatus.vue'
 
 export default {
 	name: 'PredefinedStatusesList',
 	components: {
+		NcLoadingIcon,
 		PredefinedStatus,
 	},
 
diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
index c783e62160fa4..e0e260a667b4e 100644
--- a/apps/weather_status/src/App.vue
+++ b/apps/weather_status/src/App.vue
@@ -71,10 +71,16 @@
 				ref="addressInput"
 				:label="t('weather_status', 'Set custom address')"
 				:disabled="false"
-				icon="icon-rename"
 				type="text"
 				modelValue=""
-				@submit="onAddressSubmit" />
+				@submit="onAddressSubmit">
+				<template #icon>
+					<NcIconSvgWrapper
+						name="Pencil"
+						:svg="pencilOutlineSvg"
+						:size="20" />
+				</template>
+			</NcActionInput>
 			<template v-if="favorites.length > 0">
 				<NcActionCaption :name="t('weather_status', 'Favorites')" />
 				<NcActionButton
@@ -98,6 +104,7 @@
 <script>
 import crosshairsSvg from '@mdi/svg/svg/crosshairs.svg?raw'
 import mapMarkerSvg from '@mdi/svg/svg/map-marker.svg?raw'
+import pencilOutlineSvg from '@mdi/svg/svg/pencil-outline.svg?raw'
 import starOutlineSvg from '@mdi/svg/svg/star-outline.svg?raw'
 import starSvg from '@mdi/svg/svg/star.svg?raw'
 import { showError } from '@nextcloud/dialogs'
@@ -553,6 +560,7 @@ export default {
 		return {
 			crosshairsSvg,
 			mapMarkerSvg,
+			pencilOutlineSvg,
 			starSvg,
 			starOutlineSvg,
 			locale: getLocale(),
diff --git a/core/src/components/UnifiedSearch/LegacySearchResult.vue b/core/src/components/UnifiedSearch/LegacySearchResult.vue
index b1f2c2a9932c1..062cb24c80bc4 100644
--- a/core/src/components/UnifiedSearch/LegacySearchResult.vue
+++ b/core/src/components/UnifiedSearch/LegacySearchResult.vue
@@ -5,6 +5,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import NcHighlight from '@nextcloud/vue/components/NcHighlight'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 
 const props = withDefaults(defineProps<{
 	title: string
@@ -12,6 +13,8 @@ const props = withDefaults(defineProps<{
 	subline?: string | null
 	resourceUrl?: string | null
 	icon?: string
+	/** Show a spinner instead of the icon */
+	loading?: boolean
 	rounded?: boolean
 	query?: string
 	/**
@@ -25,6 +28,7 @@ const props = withDefaults(defineProps<{
 	subline: null,
 	resourceUrl: null,
 	icon: '',
+	loading: false,
 	rounded: false,
 	query: '',
 	focused: false,
@@ -96,6 +100,7 @@ function onLoad() {
 			:style="{
 				backgroundImage: isIconUrl ? `url(${icon})` : '',
 			}">
+			<NcLoadingIcon v-if="loading" :size="16" />
 
 			<img
 				v-if="hasValidThumbnail"
@@ -146,6 +151,9 @@ $margin: 10px;
 	}
 
 	&-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		overflow: hidden;
 		width: $clickable-area;
 		height: $clickable-area;
diff --git a/core/src/tests/views/LegacyUnifiedSearch.spec.ts b/core/src/tests/views/LegacyUnifiedSearch.spec.ts
index 795ede4f90f3b..7b3ac8bb1e19e 100644
--- a/core/src/tests/views/LegacyUnifiedSearch.spec.ts
+++ b/core/src/tests/views/LegacyUnifiedSearch.spec.ts
@@ -99,6 +99,20 @@ describe('LegacyUnifiedSearch results', () => {
 		expect(wrapper.vm.reached.files).toBe(true)
 	})
 
+	it('flags a provider as loading while its next page is fetched', async () => {
+		respondWith({
+			files: [{ entries: entries(2), cursor: 2, isPaginated: true }, { entries: entries(2, 'more'), cursor: 4, isPaginated: true }],
+			mail: [{ entries: [] }],
+		})
+		const wrapper = await searchFor('file')
+
+		const loaded = wrapper.vm.loadMore('files')
+		expect(wrapper.vm.loading.files).toBe(true)
+
+		await loaded
+		expect(wrapper.vm.loading.files).toBe(false)
+	})
+
 	it('reveals the results of a provider without pagination in steps of the limit', async () => {
 		respondWith({ files: [{ entries: entries(5) }], mail: [{ entries: [] }] })
 		const wrapper = await searchFor('file')
diff --git a/core/src/views/LegacyUnifiedSearch.vue b/core/src/views/LegacyUnifiedSearch.vue
index bbe15f0314842..51098ba4dad62 100644
--- a/core/src/views/LegacyUnifiedSearch.vue
+++ b/core/src/views/LegacyUnifiedSearch.vue
@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import type { SearchResultEntry, SearchType } from '../services/LegacyUnifiedSearchService.ts'
 
-import { mdiMagnify } from '@mdi/js'
+import { mdiFilterOutline, mdiMagnify } from '@mdi/js'
 import { showError } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { n, t } from '@nextcloud/l10n'
@@ -328,20 +328,25 @@ async function loadMore(type: string) {
 		const { request, cancel } = search({ type, query: query.value, cursor: cursors.value[type] })
 		requests.push(cancel)
 
-		const { data } = await request()
-		const page = data.ocs.data
+		loading.value[type] = true
+		try {
+			const { data } = await request()
+			const page = data.ocs.data
 
-		if (page.cursor) {
-			cursors.value[type] = page.cursor
-		}
+			if (page.cursor) {
+				cursors.value[type] = page.cursor
+			}
 
-		if (page.entries.length > 0) {
-			results.value[type]!.push(...page.entries)
-		}
+			if (page.entries.length > 0) {
+				results.value[type]!.push(...page.entries)
+			}
 
-		// Check if we reached end of pagination
-		if (page.entries.length < defaultLimit) {
-			reached.value[type] = true
+			// Check if we reached end of pagination
+			if (page.entries.length < defaultLimit) {
+				reached.value[type] = true
+			}
+		} finally {
+			loading.value[type] = false
 		}
 	} else if (limits.value[type] && limits.value[type] >= 0) {
 		// Without a cursor all results are loaded already, so the next ones are only revealed
@@ -511,8 +516,10 @@ function onClickFilter(filter: string) {
 					<NcActionButton
 						v-for="filter in availableFilters"
 						:key="filter"
-						icon="icon-filter"
 						@click.stop="onClickFilter(`in:${filter}`)">
+						<template #icon>
+							<NcIconSvgWrapper :path="mdiFilterOutline" />
+						</template>
 						{{ t('core', 'Search for {name} only', { name: typesMap[filter] }) }}
 					</NcActionButton>
 				</NcActions>
@@ -568,7 +575,7 @@ function onClickFilter(filter: string) {
 							:title="loading[type]
 								? t('core', 'Loading more results …')
 								: t('core', 'Load more results')"
-							:iconClass="loading[type] ? 'icon-loading-small' : ''"
+							:loading="loading[type]"
 							@click.prevent.stop="loadMore(type)"
 							@focus="setFocusedIndex" />
 					</li>