diff --git a/src/components/AppNavigationCounter/AppNavigationCounter.vue b/src/components/AppNavigationCounter/AppNavigationCounter.vue
index c7e5ef0499..29b091a549 100644
--- a/src/components/AppNavigationCounter/AppNavigationCounter.vue
+++ b/src/components/AppNavigationCounter/AppNavigationCounter.vue
@@ -20,63 +20,14 @@
  -
  -->
 
- <docs>
+<docs>
 
-### Normal Counter
-
-```
-<AppNavigationCounter>314+</AppNavigationCounter>
-```
-
-### Highlighted Counter (i.e. mentions)
-
-```
-<AppNavigationCounter :highlighted="true">@admin</AppNavigationCounter>
-<AppNavigationCounter :highlighted="true">314+</AppNavigationCounter>
-```
+ Deprecated. See CounterBubble.
 
 </docs>
 
-<template>
-	<div :class="{ 'app-navigation-entry__counter--highlighted': highlighted }"
-		class="app-navigation-entry__counter">
-		<slot />
-	</div>
-</template>
-
 <script>
+import CounterBubble from '../CounterBubble/CounterBubble'
 
-export default {
-	name: 'AppNavigationCounter',
-
-	props: {
-		highlighted: {
-			type: Boolean,
-			default: false,
-		},
-	},
-}
-
+export default CounterBubble
 </script>
-
-<style lang="scss" scoped>
-.app-navigation-entry__counter {
-	font-size: calc(var(--default-font-size) * .8);
-	overflow: hidden;
-	width: fit-content;
-	max-width: $clickable-area;
-	text-align: center;
-	text-overflow: ellipsis;
-	line-height: 1em;
-	padding: 4px 8px;
-	border-radius: var(--border-radius-pill);
-	background-color: var(--color-background-darker);
-
-	&--highlighted {
-		padding: 4px 6px;
-		color: var(--color-primary-text);
-		background-color: var(--color-primary);
-	}
-}
-
-</style>
diff --git a/src/components/CounterBubble/CounterBubble.vue b/src/components/CounterBubble/CounterBubble.vue
new file mode 100644
index 0000000000..e7580207eb
--- /dev/null
+++ b/src/components/CounterBubble/CounterBubble.vue
@@ -0,0 +1,82 @@
+<!--
+ - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
+ -
+ - @author Marco Ambrosini <marcoambrosini@pm.me>
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+
+ <docs>
+
+### Normal Counter
+
+```
+<CounterBubble>314+</CounterBubble>
+```
+
+### Highlighted Counter (i.e. mentions)
+
+```
+<CounterBubble :highlighted="true">@admin</CounterBubble>
+<CounterBubble :highlighted="true">314+</CounterBubble>
+```
+
+</docs>
+
+<template>
+	<div :class="{ 'counter-bubble__counter--highlighted': highlighted }"
+		class="counter-bubble__counter">
+		<slot />
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'CounterBubble',
+
+	props: {
+		highlighted: {
+			type: Boolean,
+			default: false,
+		},
+	},
+}
+
+</script>
+
+<style lang="scss" scoped>
+.counter-bubble__counter {
+	font-size: calc(var(--default-font-size) * .8);
+	overflow: hidden;
+	width: fit-content;
+	max-width: $clickable-area;
+	text-align: center;
+	text-overflow: ellipsis;
+	line-height: 1em;
+	padding: 4px 8px;
+	border-radius: var(--border-radius-pill);
+	background-color: var(--color-background-darker);
+
+	&--highlighted {
+		padding: 4px 6px;
+		color: var(--color-primary-text);
+		background-color: var(--color-primary);
+	}
+}
+
+</style>
diff --git a/src/components/CounterBubble/index.js b/src/components/CounterBubble/index.js
new file mode 100644
index 0000000000..94dac19298
--- /dev/null
+++ b/src/components/CounterBubble/index.js
@@ -0,0 +1,25 @@
+/**
+ * @copyright Copyright (c) 2021 Vincent Petry <vincent@nextcloud.com>
+ *
+ * @author Vincent Petry <vincent@nextcloud.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import CounterBubble from './CounterBubble'
+
+export default CounterBubble
diff --git a/src/components/index.js b/src/components/index.js
index 0334e587c4..eaeed45100 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -54,6 +54,7 @@ import Breadcrumbs from './Breadcrumbs'
 import CheckboxRadio from './CheckboxRadio'
 import ColorPicker from './ColorPicker'
 import Content from './Content'
+import CounterBubble from './CounterBubble'
 import DatetimePicker from './DatetimePicker'
 import EmptyContent from './EmptyContent'
 import ListItem from './ListItem'
@@ -100,6 +101,7 @@ export {
 	CheckboxRadio,
 	ColorPicker,
 	Content,
+	CounterBubble,
 	DatetimePicker,
 	EmptyContent,
 	ListItem,