diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index 6ce0613ee..d907bb2b0 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -27,31 +27,39 @@
 		@close="closeSidebar">
 		<NcAppSidebarTab id="sharing"
 			:order="0"
-			:name="t('deck', 'Sharing')"
-			icon="icon-shared">
+			:name="t('deck', 'Sharing')">
+			<template #icon>
+				<SharingIcon :size="20" />
+			</template>
 			<SharingTabSidebar :board="board" />
 		</NcAppSidebarTab>
 
 		<NcAppSidebarTab id="tags"
 			:order="1"
-			:name="t('deck', 'Tags')"
-			icon="icon-tag">
+			:name="t('deck', 'Tags')">
+			<template #icon>
+				<TagsIcon :size="20" />
+			</template>
 			<TagsTabSidebar :board="board" />
 		</NcAppSidebarTab>
 
 		<NcAppSidebarTab v-if="canEdit"
 			id="deleted"
 			:order="2"
-			:name="t('deck', 'Deleted items')"
-			icon="icon-delete">
+			:name="t('deck', 'Deleted items')">
+			<template #icon>
+				<TrashIcon :size="20" />
+			</template>
 			<DeletedTabSidebar :board="board" />
 		</NcAppSidebarTab>
 
 		<NcAppSidebarTab v-if="hasActivity"
 			id="activity"
 			:order="3"
-			:name="t('deck', 'Timeline')"
-			icon="icon-activity">
+			:name="t('deck', 'Timeline')">
+			<template #icon>
+				<ActivityIcon :size="20" />
+			</template>
 			<TimelineTabSidebar :board="board" />
 		</NcAppSidebarTab>
 	</NcAppSidebar>
@@ -64,7 +72,10 @@ import TagsTabSidebar from './TagsTabSidebar.vue'
 import DeletedTabSidebar from './DeletedTabSidebar.vue'
 import TimelineTabSidebar from './TimelineTabSidebar.vue'
 import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
-
+import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
+import SharingIcon from 'vue-material-design-icons/ShareVariant.vue'
+import TagsIcon from 'vue-material-design-icons/TagMultiple.vue'
+import TrashIcon from 'vue-material-design-icons/Delete.vue'
 const capabilities = window.OC.getCapabilities()
 
 export default {
@@ -76,6 +87,10 @@ export default {
 		TagsTabSidebar,
 		DeletedTabSidebar,
 		TimelineTabSidebar,
+		ActivityIcon,
+		SharingIcon,
+		TagsIcon,
+		TrashIcon,
 	},
 	props: {
 		id: {
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 460d99aba..603cc4af8 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -50,32 +50,38 @@
 
 		<NcAppSidebarTab id="details"
 			:order="0"
-			:name="t('deck', 'Details')"
-			icon="icon-home">
+			:name="t('deck', 'Details')">
 			<CardSidebarTabDetails :card="currentCard" />
+			<template #icon>
+				<HomeIcon :size="20" />
+			</template>
 		</NcAppSidebarTab>
 
 		<NcAppSidebarTab id="attachments"
 			:order="1"
 			:name="t('deck', 'Attachments')">
 			<template #icon>
-				<AttachmentIcon :size="20" decorative />
+				<AttachmentIcon :size="20" />
 			</template>
 			<CardSidebarTabAttachments :card="currentCard" />
 		</NcAppSidebarTab>
 
 		<NcAppSidebarTab id="comments"
 			:order="2"
-			:name="t('deck', 'Comments')"
-			icon="icon-comment">
+			:name="t('deck', 'Comments')">
+			<template #icon>
+				<CommentIcon :size="20" />
+			</template>
 			<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
 		</NcAppSidebarTab>
 
 		<NcAppSidebarTab v-if="hasActivity"
 			id="timeline"
 			:order="3"
-			:name="t('deck', 'Timeline')"
-			icon="icon-activity">
+			:name="t('deck', 'Timeline')">
+			<template #icon>
+				<ActivityIcon :size="20" />
+			</template>
 			<CardSidebarTabActivity :card="currentCard" />
 		</NcAppSidebarTab>
 	</NcAppSidebar>
@@ -92,6 +98,9 @@ import CardSidebarTabActivity from './CardSidebarTabActivity.vue'
 import relativeDate from '../../mixins/relativeDate.js'
 import moment from '@nextcloud/moment'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
+import HomeIcon from 'vue-material-design-icons/Home.vue'
+import CommentIcon from 'vue-material-design-icons/Comment.vue'
+import ActivityIcon from 'vue-material-design-icons/LightningBolt.vue'
 
 import { showError } from '@nextcloud/dialogs'
 import { getLocale } from '@nextcloud/l10n'
@@ -108,7 +117,10 @@ export default {
 		CardSidebarTabComments,
 		CardSidebarTabActivity,
 		CardSidebarTabDetails,
+		ActivityIcon,
 		AttachmentIcon,
+		CommentIcon,
+		HomeIcon,
 	},
 	mixins: [relativeDate],
 	props: {