diff --git a/src/components/LeftSidebar.vue b/src/components/LeftSidebar.vue
index 17d7526..faf3881 100644
--- a/src/components/LeftSidebar.vue
+++ b/src/components/LeftSidebar.vue
@@ -18,8 +18,9 @@
 			</NcAppNavigationItem>
 			<NcAppNavigationItem :to="{name: 'notifications'}"
 				:title="t('my_company', 'Notifications')"
-				icon="icon-notifications"
-				:exact="true" />
+				:exact="true">
+				<NcIconSvgWrapper slot="icon" :svg="iconNotifications" />
+			</NcAppNavigationItem>
 		</template>
 	</NcAppNavigation>
 </template>
@@ -27,19 +28,21 @@
 <script>
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+
+import iconNotifications from 'apps/announcementcenter/img/announcementcenter.svg?raw'
 
 export default {
 	name: 'LeftSidebar',
 	components: {
 		NcAppNavigation,
 		NcAppNavigationItem,
+		NcIconSvgWrapper,
 	},
+	data() {
+		return {
+			iconNotifications,
+		}
+	}
 }
 </script>
-
-<style lang="scss" scoped>
-.icon-notifications {
-	background-image: inline-image('apps/announcementcenter/img/announcementcenter.svg');
-	filter: var(--background-invert-if-dark);
-}
-</style>