diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index 332cd3ecd..835ab7373 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -749,3 +749,23 @@ export const QrCodeIcon = (props?: any) => {
         </Icon>
     );
 };
+
+export const ComponentsIcon = (props?: any) => {
+    return (
+        <Icon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill={props.fill || "currentColor"}
+                d="M3 15.5V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v.5a.5.5 0 0 1-.5.5H17a4 4 0 0 0-4 4v4.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5ZM12.5 18H2a1 1 0 1 0 0 2h10.48c.33 0 .57-.3.54-.63A4.08 4.08 0 0 1 13 19v-.5a.5.5 0 0 0-.5-.5Z"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                fill={props.fill || "currentColor"}
+                d="M15 11c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-8Zm2 1a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z"
+            />
+        </Icon>
+    );
+};
diff --git a/src/equicordplugins/clickableRoles/index.tsx b/src/equicordplugins/clickableRoles/index.tsx
index 06854c57b..367e2ac82 100644
--- a/src/equicordplugins/clickableRoles/index.tsx
+++ b/src/equicordplugins/clickableRoles/index.tsx
@@ -172,7 +172,7 @@ export default definePlugin({
         {
             find: 'tutorialId:"whos-online"',
             replacement: {
-                match: /\((function\(\i\)\{let\{id:.*?"\\xa0— ".{0,15})\}\);/,
+                match: /\((function\(\i\)\{let\{id:.*?#{intl::CHANNEL_MEMBERS_A11Y_LABEL}.*?\}\))\}\);/,
                 replace: "($self.wrapRoleGroup($1}));",
             },
         },
diff --git a/src/equicordplugins/components.dev/index.tsx b/src/equicordplugins/components.dev/index.tsx
index c5c0bbc58..261c2428a 100644
--- a/src/equicordplugins/components.dev/index.tsx
+++ b/src/equicordplugins/components.dev/index.tsx
@@ -6,6 +6,7 @@
 
 import "./styles.css";
 
+import { ComponentsIcon } from "@components/Icons";
 import SettingsPlugin from "@plugins/_core/settings";
 import { Devs } from "@utils/constants";
 import { removeFromArray } from "@utils/misc";
@@ -15,30 +16,6 @@ import { SettingsRouter } from "@webpack/common";
 
 import ComponentsTab from "./components/ComponentsTab";
 
-function ComponentsIcon(props: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            {...props}
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            fill="none"
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                d="M3 15.5V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v.5a.5.5 0 0 1-.5.5H17a4 4 0 0 0-4 4v4.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5ZM12.5 18H2a1 1 0 1 0 0 2h10.48c.33 0 .57-.3.54-.63A4.08 4.08 0 0 1 13 19v-.5a.5.5 0 0 0-.5-.5Z"
-            />
-            <path
-                fill="currentColor"
-                fillRule="evenodd"
-                d="M15 11c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-8Zm2 1a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z"
-                clipRule="evenodd"
-            />
-        </svg>
-    );
-}
-
 export default definePlugin({
     name: "Components",
     description: t("components.description"),