diff --git a/src/components/cards/CardMenuEntries.vue b/src/components/cards/CardMenuEntries.vue
index 74d704cc9d..a76d00997f 100644
--- a/src/components/cards/CardMenuEntries.vue
+++ b/src/components/cards/CardMenuEntries.vue
@@ -16,27 +16,35 @@
 			{{ t('deck', 'Edit title') }}
 		</NcActionButton>
 		<NcActionButton v-if="canEdit && !isCurrentUserAssigned"
-			icon="icon-user"
 			:close-after-click="true"
 			@click="assignCardToMe()">
+			<template #icon>
+				<AccountPlusIcon :size="20" decorative />
+			</template>
 			{{ t('deck', 'Assign to me') }}
 		</NcActionButton>
 		<NcActionButton v-if="canEdit && isCurrentUserAssigned"
-			icon="icon-user"
 			:close-after-click="true"
 			@click="unassignCardFromMe()">
+			<template #icon>
+				<AccountMinusIcon :size="20" decorative />
+			</template>
 			{{ t('deck', 'Unassign myself') }}
 		</NcActionButton>
 		<NcActionButton v-if="canEdit"
-			icon="icon-checkmark"
 			:close-after-click="true"
 			@click="changeCardDoneStatus()">
+			<template #icon>
+				<CheckIcon :size="20" decorative />
+			</template>
 			{{ card.done ? t('deck', 'Mark as not done') : t('deck', 'Mark as done') }}
 		</NcActionButton>
 		<NcActionButton v-if="canEdit"
-			icon="icon-external"
 			:close-after-click="true"
 			@click="openCardMoveDialog">
+			<template #icon>
+				<OpenInNewIcon :size="20" decorative />
+			</template>
 			{{ t('deck', 'Move/copy card') }}
 		</NcActionButton>
 		<NcActionButton v-for="action in cardActions"
@@ -53,9 +61,11 @@
 			{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
 		</NcActionButton>
 		<NcActionButton v-if="canEdit"
-			icon="icon-delete"
 			:close-after-click="true"
 			@click="deleteCard()">
+			<template #icon>
+				<DeleteIcon :size="20" decorative />
+			</template>
 			{{ t('deck', 'Delete card') }}
 		</NcActionButton>
 	</div>
@@ -66,6 +76,11 @@ import { mapGetters, mapState } from 'vuex'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CardBulletedIcon from 'vue-material-design-icons/CardBulletedOutline.vue'
 import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
+import AccountPlusIcon from 'vue-material-design-icons/AccountPlus.vue'
+import AccountMinusIcon from 'vue-material-design-icons/AccountMinus.vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
+import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
+import DeleteIcon from 'vue-material-design-icons/DeleteOutline.vue'
 import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { showUndo } from '@nextcloud/dialogs'
@@ -75,7 +90,7 @@ import { emit } from '@nextcloud/event-bus'
 
 export default {
 	name: 'CardMenuEntries',
-	components: { NcActionButton, ArchiveIcon, CardBulletedIcon, PencilIcon },
+	components: { NcActionButton, ArchiveIcon, CardBulletedIcon, PencilIcon, AccountPlusIcon, AccountMinusIcon, CheckIcon, OpenInNewIcon, DeleteIcon },
 	props: {
 		card: {
 			type: Object,
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 4c02e3cf62..3294308f4a 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -28,15 +28,19 @@
 
 			<template v-if="!deleted" slot="actions">
 				<template v-if="!isDueSubmenuActive">
-					<NcActionButton icon="icon-info"
-						:close-after-click="true"
+					<NcActionButton :close-after-click="true"
 						@click="actionDetails">
+						<template #icon>
+							<InformationOutlineIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'Board details') }}
 					</NcActionButton>
 					<NcActionButton v-if="canManage && !board.archived"
-						icon="icon-rename"
 						:close-after-click="true"
 						@click="actionEdit">
+						<template #icon>
+							<PencilIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'Edit board') }}
 					</NcActionButton>
 					<NcActionButton v-if="canCreate && !board.archived"
@@ -64,9 +68,11 @@
 						{{ t('deck', 'Archive board') }}
 					</NcActionButton>
 					<NcActionButton v-if="canManage && !board.archived"
-						icon="icon-download"
 						:close-after-click="true"
 						@click="actionExport">
+						<template #icon>
+							<DownloadIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'Export board') }}
 					</NcActionButton>
 					<NcActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
@@ -76,50 +82,62 @@
 
 				<!-- Due date reminder settings -->
 				<template v-if="isDueSubmenuActive">
-					<NcActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
-						:disabled="updateDueSetting"
+					<NcActionButton :disabled="updateDueSetting"
 						@click="isDueSubmenuActive=false">
+						<template #icon>
+							<NcLoadingIcon v-if="updateDueSetting" :size="20" />
+							<ChevronLeftIcon v-else :size="20" decorative />
+						</template>
 						{{ t('deck', 'Due date reminders') }}
 					</NcActionButton>
 
 					<NcActionButton name="notification"
-						icon="icon-sound"
 						:disabled="updateDueSetting"
 						:class="{ 'forced-active': board.settings['notify-due'] === 'all' }"
 						@click="updateSetting('notify-due', 'all')">
+						<template #icon>
+							<BellOutlineIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'All cards') }}
 					</NcActionButton>
 					<NcActionButton name="notification"
-						icon="icon-user"
 						:disabled="updateDueSetting"
 						:class="{ 'forced-active': board.settings['notify-due'] === 'assigned' }"
 						@click="updateSetting('notify-due', 'assigned')">
+						<template #icon>
+							<AccountIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'Assigned cards') }}
 					</NcActionButton>
 					<NcActionButton name="notification"
-						icon="icon-sound-off"
 						:disabled="updateDueSetting"
 						:class="{ 'forced-active': board.settings['notify-due'] === 'off' }"
 						@click="updateSetting('notify-due', 'off')">
+						<template #icon>
+							<BellOffOutlineIcon :size="20" decorative />
+						</template>
 						{{ t('deck', 'No notifications') }}
 					</NcActionButton>
 				</template>
 				<NcActionButton v-else-if="!board.archived && board.acl.length > 0"
 					:name="t('deck', 'Due date reminders')"
-					:icon="dueDateReminderIcon"
 					@click="isDueSubmenuActive=true">
+					<template #icon>
+						<component :is="dueDateReminderIcon" :size="20" decorative />
+					</template>
 					{{ dueDateReminderText }}
 				</NcActionButton>
 
 				<NcActionButton v-if="canManage && !isDueSubmenuActive"
-					icon="icon-delete"
 					:close-after-click="true"
 					@click="actionDelete">
+					<template #icon>
+						<DeleteIcon :size="20" decorative />
+					</template>
 					{{ t('deck', 'Delete board') }}
 				</NcActionButton>
 
 				<NcActionButton v-if="canLeave && !isDueSubmenuActive"
-					icon="icon-delete"
 					:close-after-click="true"
 					@click="actionLeave">
 					<template #icon>
@@ -164,7 +182,7 @@
 </template>
 
 <script>
-import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton } from '@nextcloud/vue'
+import { NcAppNavigationIconBullet, NcAppNavigationItem, NcColorPicker, NcButton, NcTextField, NcActionButton, NcLoadingIcon } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CloneIcon from 'vue-material-design-icons/ContentDuplicate.vue'
@@ -172,6 +190,13 @@ import LeaveIcon from 'vue-material-design-icons/ExitRun.vue'
 import AccountIcon from 'vue-material-design-icons/AccountOutline.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
+import InformationOutlineIcon from 'vue-material-design-icons/InformationOutline.vue'
+import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
+import DownloadIcon from 'vue-material-design-icons/DownloadOutline.vue'
+import DeleteIcon from 'vue-material-design-icons/DeleteOutline.vue'
+import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
+import BellOutlineIcon from 'vue-material-design-icons/BellOutline.vue'
+import BellOffOutlineIcon from 'vue-material-design-icons/BellOffOutline.vue'
 
 import { loadState } from '@nextcloud/initial-state'
 import { emit } from '@nextcloud/event-bus'
@@ -193,12 +218,20 @@ export default {
 		NcButton,
 		NcTextField,
 		NcActionButton,
+		NcLoadingIcon,
 		AccountIcon,
 		ArchiveIcon,
 		CloneIcon,
 		CloseIcon,
 		CheckIcon,
 		LeaveIcon,
+		InformationOutlineIcon,
+		PencilIcon,
+		DownloadIcon,
+		DeleteIcon,
+		ChevronLeftIcon,
+		BellOutlineIcon,
+		BellOffOutlineIcon,
 		BoardCloneModal,
 		BoardExportModal,
 	},
@@ -257,13 +290,13 @@ export default {
 		},
 		dueDateReminderIcon() {
 			if (this.board.settings['notify-due'] === 'all') {
-				return 'icon-sound'
+				return 'BellOutlineIcon'
 			} else if (this.board.settings['notify-due'] === 'assigned') {
-				return 'icon-user'
+				return 'AccountIcon'
 			} else if (this.board.settings['notify-due'] === 'off') {
-				return 'icon-sound-off'
+				return 'BellOffOutlineIcon'
 			}
-			return ''
+			return 'BellOutlineIcon'
 		},
 		dueDateReminderText() {
 			if (this.board.settings['notify-due'] === 'all') {