diff --git a/src/components/common/user/UserIcon.tsx b/src/components/common/user/UserIcon.tsx
index 85064c545c4c3902b5dbd93542456fdd28203e72..9d7bb8017b35a240c007f022b223813eae35ad36 100644
--- a/src/components/common/user/UserIcon.tsx
+++ b/src/components/common/user/UserIcon.tsx
@@ -62,7 +62,7 @@ export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGEle
             height={size}
             aria-hidden="true"
             viewBox="0 0 32 32">
-            <foreignObject x="0" y="0" width="32" height="32">
+            <foreignObject x="0" y="0" width="32" height="32" mask={props.status ? "url(#user)" : undefined}>
                 {
                     <img src={iconURL}
                         draggable={false} />
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 7607b2077a58004408a1db8c4ad1856a8eafa965..d64292757cea475b7d17ea8208000e5d374f67cd 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -1,12 +1,13 @@
+import Tooltip from "../../common/Tooltip";
 import IconButton from "../../ui/IconButton";
 import LineDivider from "../../ui/LineDivider";
 import { mapChannelWithUnread } from "./common";
 import styled, { css } from "styled-components";
 import ServerIcon from "../../common/ServerIcon";
 import { Children } from "../../../types/Preact";
-import { Plus } from "@styled-icons/boxicons-regular";
+import UserIcon from "../../common/user/UserIcon";
 import PaintCounter from "../../../lib/PaintCounter";
-import { attachContextMenu, openContextMenu } from 'preact-context-menu';
+import { Plus } from "@styled-icons/boxicons-regular";
 import { connectState } from "../../../redux/connector";
 import { useLocation, useParams } from "react-router-dom";
 import { Unreads } from "../../../redux/reducers/unreads";
@@ -14,13 +15,10 @@ import ConditionalLink from "../../../lib/ConditionalLink";
 import { Channel, Servers } from "revolt.js/dist/api/objects";
 import { LastOpened } from "../../../redux/reducers/last_opened";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { attachContextMenu, openContextMenu } from 'preact-context-menu';
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useChannels, useForceUpdate, useSelf, useServers } from "../../../context/revoltjs/hooks";
 
-import logoSVG from '../../../assets/logo.svg';
-import Tooltip from "../../common/Tooltip";
-import UserIcon from "../../common/user/UserIcon";
-
 function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
     return (
         <svg
@@ -29,13 +27,14 @@ function Icon({ children, unread, size }: { children: Children, unread?: 'mentio
             aria-hidden="true"
             viewBox="0 0 32 32"
         >
-            <foreignObject x="0" y="0" width="32" height="32">
+            <use href="#serverIndicator" />
+            <foreignObject x="0" y="0" width="32" height="32" mask={ unread ? "url(#server)" : undefined }>
                 { children }
             </foreignObject>
             {unread === 'unread' && (
                 <circle
                     cx="27"
-                    cy="27"
+                    cy="5"
                     r="5"
                     fill={"white"}
                 />
@@ -43,7 +42,7 @@ function Icon({ children, unread, size }: { children: Children, unread?: 'mentio
             {unread === 'mention' && (
                 <circle
                     cx="27"
-                    cy="27"
+                    cy="5"
                     r="5"
                     fill={"red"}
                 />
diff --git a/src/components/ui/Masks.tsx b/src/components/ui/Masks.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3a1513f13abab8b58dc11769ae965be8b629d6be
--- /dev/null
+++ b/src/components/ui/Masks.tsx
@@ -0,0 +1,18 @@
+// This file must be imported and used at least once for SVG masks.
+
+export default function Masks() {
+    return (
+        <svg width={0} height={0} style={{ position: 'fixed' }}>
+            <defs>
+                <mask id="server">
+                    <rect x="0" y="0" width="32" height="32" fill="white" />
+                    <circle cx="27" cy="5" r="7" fill={"black"} />
+                </mask>
+                <mask id="user">
+                    <rect x="0" y="0" width="32" height="32" fill="white" />
+                    <circle cx="27" cy="27" r="7" fill={"black"} />
+                </mask>
+            </defs>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/app.tsx b/src/pages/app.tsx
index d77f32e3cec4b68bc0cf738ecd4fc6bf8b70a921..9e1d0482a63e61713db16fca28711b234b21575d 100644
--- a/src/pages/app.tsx
+++ b/src/pages/app.tsx
@@ -1,6 +1,7 @@
 import { CheckAuth } from "../context/revoltjs/CheckAuth";
 import Preloader from "../components/ui/Preloader";
 import { Route, Switch } from "react-router-dom";
+import Masks from "../components/ui/Masks";
 import Context from "../context";
 
 import { lazy, Suspense } from "preact/compat";
@@ -10,6 +11,7 @@ const RevoltApp = lazy(() => import('./RevoltApp'));
 export function App() {
     return (
         <Context>
+            <Masks />
             {/* 
             // @ts-expect-error */}
             <Suspense fallback={<Preloader type="spinner" />}>