diff --git a/packages/hoppscotch-common/assets/icons/graphql.svg b/packages/hoppscotch-common/assets/icons/graphql.svg
index c2d4d47a0..f04d6a53d 100644
--- a/packages/hoppscotch-common/assets/icons/graphql.svg
+++ b/packages/hoppscotch-common/assets/icons/graphql.svg
@@ -1 +1 @@
-
+
diff --git a/packages/hoppscotch-common/assets/icons/mqtt.svg b/packages/hoppscotch-common/assets/icons/mqtt.svg
new file mode 100644
index 000000000..40a33f9e6
--- /dev/null
+++ b/packages/hoppscotch-common/assets/icons/mqtt.svg
@@ -0,0 +1 @@
+
diff --git a/packages/hoppscotch-common/assets/icons/socketio.svg b/packages/hoppscotch-common/assets/icons/socketio.svg
new file mode 100644
index 000000000..b97daeb16
--- /dev/null
+++ b/packages/hoppscotch-common/assets/icons/socketio.svg
@@ -0,0 +1 @@
+
diff --git a/packages/hoppscotch-common/assets/icons/websocket.svg b/packages/hoppscotch-common/assets/icons/websocket.svg
new file mode 100644
index 000000000..a55697ff1
--- /dev/null
+++ b/packages/hoppscotch-common/assets/icons/websocket.svg
@@ -0,0 +1 @@
+
diff --git a/packages/hoppscotch-common/src/pages/realtime.vue b/packages/hoppscotch-common/src/pages/realtime.vue
index 190557ef9..cff9a2029 100644
--- a/packages/hoppscotch-common/src/pages/realtime.vue
+++ b/packages/hoppscotch-common/src/pages/realtime.vue
@@ -5,10 +5,11 @@
content-styles="!h-[calc(100%-var(--sidebar-primary-sticky-fold)-1px)] !flex"
>
@@ -20,6 +21,10 @@ import { watch, ref, computed } from "vue"
import { RouterView, useRouter, useRoute } from "vue-router"
import { usePageHead } from "~/composables/head"
import { useI18n } from "~/composables/i18n"
+import IconWebsocket from "~icons/hopp/websocket"
+import IconSocketio from "~icons/hopp/socketio"
+import IconMqtt from "~icons/hopp/mqtt"
+import IconSse from "~icons/lucide/satellite-dish"
const t = useI18n()
const router = useRouter()
@@ -29,18 +34,22 @@ const REALTIME_NAVIGATION = [
{
target: "websocket",
title: t("tab.websocket"),
+ icon: IconWebsocket,
},
{
target: "sse",
title: t("tab.sse"),
+ icon: IconSse,
},
{
target: "socketio",
title: t("tab.socketio"),
+ icon: IconSocketio,
},
{
target: "mqtt",
title: t("tab.mqtt"),
+ icon: IconMqtt,
},
] as const
diff --git a/packages/hoppscotch-ui/src/components/smart/Tabs.vue b/packages/hoppscotch-ui/src/components/smart/Tabs.vue
index 637f8cfcd..3f198f9a6 100644
--- a/packages/hoppscotch-ui/src/components/smart/Tabs.vue
+++ b/packages/hoppscotch-ui/src/components/smart/Tabs.vue
@@ -37,8 +37,9 @@
:is="tabMeta.icon"
v-if="tabMeta.icon"
class="svg-icons"
+ :class="{ 'mr-2': tabMeta.label && !vertical }"
/>
- {{ tabMeta.label }}
+ {{ tabMeta.label }}