diff --git a/public/app/features/canvas/elements/server/server.tsx b/public/app/features/canvas/elements/server/server.tsx
index 3bb6c648450..a0205733946 100644
--- a/public/app/features/canvas/elements/server/server.tsx
+++ b/public/app/features/canvas/elements/server/server.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import config from 'app/core/config';
 import { ColorDimensionConfig, DimensionContext, ScalarDimensionConfig } from 'app/features/dimensions';
 import { ColorDimensionEditor, ScalarDimensionEditor } from 'app/features/dimensions/editors';
 
@@ -34,10 +35,11 @@ enum ServerType {
 }
 
 type Props = CanvasElementProps<ServerConfig, ServerData>;
+const outlineColor = config.theme2.colors.text.primary;
 
 const ServerDisplay = ({ data }: Props) => {
   return data ? (
-    <svg viewBox="0 0 207.95 197.78">
+    <svg viewBox="0 0 75 75">
       {data.type === ServerType.Single ? (
         <ServerSingle {...data} />
       ) : data.type === ServerType.Stack ? (
@@ -85,7 +87,7 @@ export const serverItem: CanvasElementItem<ServerConfig, ServerData> = {
   prepareData: (ctx: DimensionContext, cfg: ServerConfig) => {
     const data: ServerData = {
       blinkRate: cfg?.blinkRate ? ctx.getScalar(cfg.blinkRate).value() : 0,
-      statusColor: cfg?.statusColor ? ctx.getColor(cfg.statusColor).value() : '#8a8a8a',
+      statusColor: cfg?.statusColor ? ctx.getColor(cfg.statusColor).value() : 'transparent',
       bulbColor: cfg?.bulbColor ? ctx.getColor(cfg.bulbColor).value() : 'green',
       type: cfg.type,
     };
@@ -118,7 +120,7 @@ export const serverItem: CanvasElementItem<ServerConfig, ServerData> = {
         editor: ColorDimensionEditor,
         settings: {},
         defaultValue: {
-          fixed: '#8a8a8a',
+          fixed: 'transparent',
         },
       })
       .addCustomEditor({
@@ -158,54 +160,22 @@ export const getServerStyles = (data: ServerData | undefined) => (theme: Grafana
     }
   `,
   server: css`
-    fill: #dadada;
-    stroke-linecap: round;
-    stroke-miterlimit: 10;
-    stroke-width: 10;
-    stroke: ${data?.statusColor ?? '#8a8a8a'};
+    fill: ${data?.statusColor ?? 'transparent'};
   `,
   circle: css`
     animation: blink ${data?.blinkRate ? 1 / data.blinkRate : 0}s infinite step-end;
     fill: ${data?.bulbColor};
-    stroke-linecap: round;
-    stroke-miterlimit: 10;
-    stroke-width: 3;
-    stroke: #000;
+    stroke: none;
+  `,
+  circleBack: css`
+    fill: ${outlineColor};
+    stroke: none;
+    opacity: 1;
   `,
   outline: css`
-    fill: none;
+    stroke: ${outlineColor};
     stroke-linecap: round;
-    stroke-miterlimit: 10;
-    stroke-width: 10;
-    stroke: #303030;
-  `,
-  pathA: css`
-    display: none;
-    fill: #fff;
-  `,
-  pathB: css`
-    fill: #fff;
-  `,
-  thinLine: css`
-    stroke-width: 0.7;
-  `,
-  monitor: css`
-    stroke: ${data?.statusColor ?? '#8a8a8a'};
-    fill: #fff;
-    stroke-linecap: square;
-    stroke-miterlimit: 0;
-    stroke-width: 14;
-  `,
-  monitorOutline: css`
-    stroke: #8a8a8a;
-    stroke-linecap: square;
-    stroke-miterlimit: 0;
-  `,
-  keyboard: css`
-    fill: #dadada;
-    stroke-linecap: round;
-    stroke-miterlimit: 10;
-    stroke-width: 10;
-    stroke: ${data?.statusColor ?? '#8a8a8a'};
+    stroke-linejoin: round;
+    stroke-width: 4px;
   `,
 });
diff --git a/public/app/features/canvas/elements/server/types/database.tsx b/public/app/features/canvas/elements/server/types/database.tsx
index b4fb6afe0ba..f2a48c723cd 100644
--- a/public/app/features/canvas/elements/server/types/database.tsx
+++ b/public/app/features/canvas/elements/server/types/database.tsx
@@ -7,35 +7,39 @@ import { getServerStyles, ServerData } from '../server';
 export const ServerDatabase = (data: ServerData) => {
   const styles = useStyles2(getServerStyles(data));
   return (
-    <g transform="translate(-31.804 -24.62)">
-      <g className={styles.server} transform="translate(0 -3.0868)">
-        <ellipse cx="134.44" cy="68.233" rx="78.553" ry="22.49" />
+    <g className={styles.outline}>
+      <g className={styles.server}>
+        <path d="m2.6953 37.5v20.883c0 7.6725 15.592 13.922 34.805 13.922s34.805-6.2493 34.805-13.922v-20.883" />
+        <path d="m2.6953 16.617v20.883c0 7.7035 15.592 13.922 34.805 13.922s34.805-6.2184 34.805-13.922v-20.883" />
+        <path d="m37.5 30.539c19.212 0 34.805-6.2185 34.805-13.922 0-7.7034-15.592-13.922-34.805-13.922s-34.805 6.2184-34.805 13.922c0 7.7035 15.592 13.922 34.805 13.922z" />
+      </g>
+      <g className={styles.circleBack}>
         <path
-          x="54.86203"
-          y="48.088943"
-          width="159.1676"
-          height="39.961231"
-          d="m56.97 90.429c52.35 16.952 102.23 16.952 154.93 0 1.1129-.35795 2.1167.94768 2.1167 2.1167v22.23c0 1.169-1.0017 1.7655-2.1167 2.1167-52.703 16.599-102.58 16.952-154.93 0-1.1122-.36014-2.1167-.94768-2.1167-2.1167v-22.23c0-1.169 1.0045-2.4768 2.1167-2.1167z"
+          transform="matrix(2.7868 0 0 2.7868 -132.86 -110.58)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
         />
         <path
-          x="54.86203"
-          y="48.088943"
-          width="159.1676"
-          height="39.961231"
-          d="m56.983 128.77c52.35 16.952 102.23 16.952 154.93 0 1.1129-.35795 2.1167.94768 2.1167 2.1167v22.23c0 1.169-1.0017 1.7655-2.1167 2.1167-52.703 16.599-102.58 16.952-154.93 0-1.1122-.36014-2.1167-.94768-2.1167-2.1167v-22.23c0-1.169 1.0045-2.4768 2.1167-2.1167z"
+          transform="matrix(2.7868 0 0 2.7868 -122.04 -111.7)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
         />
         <path
-          x="54.86203"
-          y="48.088943"
-          width="159.1676"
-          height="39.961231"
-          d="m57.004 167.17c52.35 16.952 102.23 16.952 154.93 0 1.1129-.35795 2.1167.94768 2.1167 2.1167v22.23c0 1.169-1.0017 1.7655-2.1167 2.1167-52.703 16.599-102.58 16.952-154.93 0-1.1122-.36014-2.1167-.94768-2.1167-2.1167v-22.23c0-1.169 1.0045-2.4768 2.1167-2.1167z"
+          transform="matrix(2.7868 0 0 2.7868 -111.21 -114.77)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
         />
       </g>
-      <g className={styles.circle} transform="translate(-4.9944 -3.9978)">
-        <circle cx="161.69" cy="193.26" r="5.0317" />
-        <circle cx="180.31" cy="190.08" r="5.0317" />
-        <circle cx="198.14" cy="185.84" r="5.0317" />
+      <g className={styles.circle}>
+        <path
+          transform="matrix(1.4922 0 0 1.4922 -52.337 -30.65)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
+        />
+        <path
+          transform="matrix(1.4922 0 0 1.4922 -41.518 -31.769)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
+        />
+        <path
+          transform="matrix(1.4922 0 0 1.4922 -30.688 -34.842)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
+        />
       </g>
     </g>
   );
diff --git a/public/app/features/canvas/elements/server/types/single.tsx b/public/app/features/canvas/elements/server/types/single.tsx
index 57e7c53b28b..a779a1a71fe 100644
--- a/public/app/features/canvas/elements/server/types/single.tsx
+++ b/public/app/features/canvas/elements/server/types/single.tsx
@@ -7,25 +7,24 @@ import { getServerStyles, ServerData } from '../server';
 export const ServerSingle = (data: ServerData) => {
   const styles = useStyles2(getServerStyles(data));
   return (
-    <g transform="translate(-31.804 -24.362)">
-      <g>
-        <path
-          className={styles.server}
-          x="54.86203"
-          y="48.088943"
-          width="159.1676"
-          height="39.961231"
-          d="m56.979 48.089h154.93c1.169 0 2.1167.94768 2.1167 2.1167v145.73c0 1.169-.94768 2.1167-2.1167 2.1167h-154.93c-1.169 0-2.1167-.94768-2.1167-2.1167v-145.73c0-1.169.94768-2.1167 2.1167-2.1167z"
-        />
-        <circle className={styles.circle} cx="189.99" cy="68.07" r="9.0052" />
-        <rect x="55.556" y="57.472" width="107.76" height="5.7472" />
-        <rect x="55.558" y="86.141" width="107.76" height="5.7472" />
-        <rect transform="translate(31.804,24.362)" x="23.779" y="90.421" width="107.76" height="5.7472" />
-        <g className={styles.thinLine}>
-          <rect x="63.549" y="73.261" width="107.76" height="2.8736" />
-          <rect x="63.574" y="101.9" width="107.76" height="2.8736" />
-          <rect x="63.598" y="130.54" width="107.76" height="2.8736" />
+    <g>
+      <g className={styles.outline} transform="matrix(1.01 0 0 1.01 -.375 -.375)">
+        <g className={styles.server}>
+          <path d="m3.2812 55.659 9.125-52.377h50.188l9.125 52.377" />
+          <path d="m3.2812 56.328c0-2.5246 2.0379-4.5625 4.5625-4.5625h59.313c2.5245 0 4.5625 2.0379 4.5625 4.5625v10.828c0 2.5245-2.038 4.5625-4.5625 4.5625h-59.313c-2.5246 0-4.5625-2.038-4.5625-4.5625z" />
         </g>
+        <path d="m12.406 61.742h30.69" />
+        <path d="m52.8 51.765v19.953" />
+        <path
+          className={styles.circleBack}
+          transform="matrix(2.7592 0 0 2.7592 -109.42 -108.61)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
+        />
+        <path
+          className={styles.circle}
+          transform="matrix(1.4775 0 0 1.4775 -29.697 -29.479)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
+        />
       </g>
     </g>
   );
diff --git a/public/app/features/canvas/elements/server/types/stack.tsx b/public/app/features/canvas/elements/server/types/stack.tsx
index 01e8c35e569..1eb71cbdf2d 100644
--- a/public/app/features/canvas/elements/server/types/stack.tsx
+++ b/public/app/features/canvas/elements/server/types/stack.tsx
@@ -7,45 +7,46 @@ import { getServerStyles, ServerData } from '../server';
 export const ServerStack = (data: ServerData) => {
   const styles = useStyles2(getServerStyles(data));
   return (
-    <g transform="translate(-31.804 -24.362)">
-      <g>
-        <path
-          className={styles.server}
-          x="54.86203"
-          y="48.088943"
-          width="159.1676"
-          height="39.961231"
-          d="m56.979 48.089h154.93a2.1167 2.1167 45 012.1167 2.1167v35.728a2.1167 2.1167 135 01-2.1167 2.1167h-154.93a2.1167 2.1167 45 01-2.1167-2.1167v-35.728a2.1167 2.1167 135 012.1167-2.1167z"
-        />
-        <rect x="55.556" y="57.472" width="107.76" height="5.7472" />
-        <rect x="55.549" y="71.824" width="107.76" height="5.7472" />
-        <circle className={styles.circle} cx="189.99" cy="68.07" r="9.0052" />
+    <g className={styles.outline} transform="translate(.5 .49865)">
+      <g className={styles.server}>
+        <path d="m3.4834 21.768 8.0783-19.456h50.875l8.0784 19.456" />
+        <path d="m2.3125 24.852c0-2.5592 2.0658-4.625 4.625-4.625h60.125c2.5592 0 4.625 2.0658 4.625 4.625v7.8933c0 2.5592-2.0658 4.625-4.625 4.625h-60.125c-2.5592 0-4.625-2.0658-4.625-4.625z" />
+        <path d="m2.3125 42.031c0-2.5592 2.0658-4.6251 4.625-4.6251h60.125c2.5592 0 4.625 2.0659 4.625 4.6251v7.8933c0 2.5592-2.0658 4.625-4.625 4.625h-60.125c-2.5592 0-4.625-2.0658-4.625-4.625z" />
+        <path d="m2.3125 59.172c0-2.5592 2.0658-4.625 4.625-4.625h60.125c2.5592 0 4.625 2.0658 4.625 4.625v7.8933c0 2.5592-2.0658 4.625-4.625 4.625h-60.125c-2.5592 0-4.625-2.0658-4.625-4.625z" />
       </g>
-      <g transform="translate(0 55.18)">
+      <path d="m11.562 28.797h31.111" />
+      <path d="m52.508 20.227v17.143" />
+      <path d="m11.562 63.117h31.111" />
+      <path d="m52.508 54.547v17.143" />
+      <path d="m11.562 45.977h31.111" />
+      <path d="m52.508 37.406v17.143" />
+      <g className={styles.circleBack}>
         <path
-          className={styles.server}
-          x="54.86203"
-          y="48.088943"
-          width="159.1676"
-          height="39.961231"
-          d="m56.979 48.089h154.93a2.1167 2.1167 45 012.1167 2.1167v35.728a2.1167 2.1167 135 01-2.1167 2.1167h-154.93a2.1167 2.1167 45 01-2.1167-2.1167v-35.728a2.1167 2.1167 135 012.1167-2.1167z"
+          transform="matrix(2.7868 0 0 2.7868 -111.31 -143.2)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
+        />
+        <path
+          transform="matrix(2.7868 0 0 2.7868 -111.31 -126.14)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
+        />
+        <path
+          transform="matrix(2.7868 0 0 2.7868 -111.31 -108.86)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
         />
-        <rect x="55.556" y="57.472" width="107.76" height="5.7472" />
-        <rect x="55.549" y="71.824" width="107.76" height="5.7472" />
-        <circle className={styles.circle} cx="189.99" cy="68.07" r="9.0052" />
       </g>
-      <g transform="translate(0 110)">
+      <g className={styles.circle}>
         <path
-          className={styles.server}
-          x="54.86203"
-          y="48.088943"
-          width="159.1676"
-          height="39.961231"
-          d="m56.979 48.089h154.93a2.1167 2.1167 45 012.1167 2.1167v35.728a2.1167 2.1167 135 01-2.1167 2.1167h-154.93a2.1167 2.1167 45 01-2.1167-2.1167v-35.728a2.1167 2.1167 135 012.1167-2.1167z"
+          transform="matrix(1.4922 0 0 1.4922 -30.794 -63.277)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
+        />
+        <path
+          transform="matrix(1.4922 0 0 1.4922 -30.794 -46.209)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
+        />
+        <path
+          transform="matrix(1.4922 0 0 1.4922 -30.794 -28.93)"
+          d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
         />
-        <rect x="55.556" y="57.472" width="107.76" height="5.7472" />
-        <rect x="55.549" y="71.824" width="107.76" height="5.7472" />
-        <circle className={styles.circle} cx="189.99" cy="68.07" r="9.0052" />
       </g>
     </g>
   );
diff --git a/public/app/features/canvas/elements/server/types/terminal.tsx b/public/app/features/canvas/elements/server/types/terminal.tsx
index b29af7baf99..f13241f5c64 100644
--- a/public/app/features/canvas/elements/server/types/terminal.tsx
+++ b/public/app/features/canvas/elements/server/types/terminal.tsx
@@ -7,35 +7,25 @@ import { getServerStyles, ServerData } from '../server';
 export const ServerTerminal = (data: ServerData) => {
   const styles = useStyles2(getServerStyles(data));
   return (
-    <g transform="translate(-31.804 -24.362)">
-      <g>
-        <path
-          className={styles.server}
-          x="54.86203"
-          y="48.088943"
-          width="159.1676"
-          height="39.961231"
-          d="m56.979 48.089h54.93c1.169 0 2.1167.94768 2.1167 2.1167v145.73c0 1.169-.94768 2.1167-2.1167 2.1167h-54.93c-1.169 0-2.1167-.94768-2.1167-2.1167v-145.73c0-1.169.94768-2.1167 2.1167-2.1167z"
-        />
-        <g transform="matrix(.50833 0 0 1 27.315 0)">
-          <rect x="55.556" y="57.472" width="107.76" height="5.7472" />
-          <rect x="55.558" y="86.141" width="107.76" height="5.7472" />
-          <g className={styles.thinLine}>
-            <rect x="74.357" y="73.261" width="96.957" height="2.8736" />
-            <rect x="74.379" y="101.9" width="96.957" height="2.8736" />
-          </g>
-        </g>
-        <circle className={styles.circle} cx="83.858" cy="178.2" r="5.9401" />
+    <g className={styles.outline}>
+      <g className={styles.server}>
+        <path d="m5.3125 9.6562c0-3.5621 2.8754-6.4375 6.4375-6.4375h51.5c3.5621 0 6.4375 2.8754 6.4375 6.4375v28.625c0 3.5621-2.8754 6.4375-6.4375 6.4375h-51.5c-3.5621 0-6.4375-2.8754-6.4375-6.4375z" />
+        <path d="m2.8125 59.859c0-2.5592 2.0658-4.625 4.625-4.625h60.125c2.5592 0 4.625 2.0658 4.625 4.625v7.8933c0 2.5592-2.0658 4.625-4.625 4.625h-60.125c-2.5592 0-4.625-2.0658-4.625-4.625z" />
       </g>
-      <g transform="translate(-1.9978 -7.5028)">
-        <path className={styles.monitor} d="m103.22 75.305h118.87v76.914h-118.87z" />
-        <path
-          className={styles.monitorOutline}
-          d="m103.22 70.305-5 5v76.916l5 5h118.87l5-5v-76.916l-5-5zm5 10h108.87v58.916h-108.87z"
-        />
-      </g>
-      <path d="m135.6 148.14h50.113l4 15.156h-58.113z" />
-      <path className={styles.keyboard} d="m118.23 183.19h88.848l24 19.476h-136.85z" />
+      <path d="m37.5 46.719v2.875" />
+      <path d="m24.625 51.343h25.75" />
+      <path d="m12.062 63.804h31.111" />
+      <path d="m53.008 55.234v17.143" />
+      <path
+        className={styles.circleBack}
+        transform="matrix(2.7868 0 0 2.7868 -110.81 -108.2)"
+        d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
+      />
+      <path
+        className={styles.circle}
+        transform="matrix(1.4922 0 0 1.4922 -30.294 -28.27)"
+        d="m62.198 60.586c.6388 0 1.1558.5171 1.1558 1.1559 0 .6387-.517 1.1558-1.1558 1.1558-.6387 0-1.1558-.5171-1.1558-1.1558 0-.6388.5171-1.1559 1.1558-1.1559z"
+      />
     </g>
   );
 };