diff --git a/src/components/SidebarItem/SidebarItem.jsx b/src/components/SidebarItem/SidebarItem.jsx
index 12b950111fba..802b8814038b 100644
--- a/src/components/SidebarItem/SidebarItem.jsx
+++ b/src/components/SidebarItem/SidebarItem.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { Component } from "react";
 import "./SidebarItem.scss";
 import { NavLink } from "react-router-dom";
-import ChevronRightIcon from "../../styles/icons/chevron-right.svg";
+import GraphIcon from "../../styles/icons/graph.svg";
 import BarIcon from "../../styles/icons/vertical-bar.svg";
 import list2Tree from "../../utilities/list2Tree/index.js";
 
@@ -57,6 +57,7 @@ export default class SidebarItem extends Component {
     const { title, anchors = [] } = this.props;
     const openMod = this.state.open ? `${block}--open` : "";
     const disabledMod = anchors.length === 0 ? `${block}--disabled` : "";
+    const isDependencyGraph = title === "Dependency Graph";
 
     const filteredAnchors = anchors.filter((anchor) => anchor.level > 1);
     const tree = list2Tree(title, filteredAnchors);
@@ -64,19 +65,20 @@ export default class SidebarItem extends Component {
     return (
       <div className={`${block} ${openMod} ${disabledMod}`}>
         {anchors.length > 0 ? (
-          <button
-            className={`${block}__toggle-button`}
+          <GraphIcon
+            width={15}
+            height={17}
+            fill="#175d96"
+            className={`${block}__toggle ${block}__toggle--graph`}
             onClick={this._toggle.bind(this)}
-            aria-label={`Toggle ${title} section`}
-            aria-expanded={this.state.open}
-          >
-            <ChevronRightIcon
-              width={15}
-              height={17}
-              fill="#175d96"
-              className={`${block}__toggle`}
-            />
-          </button>
+          />
+        ) : isDependencyGraph ? (
+          <GraphIcon
+            className={`${block}__toggle ${block}__toggle--static`}
+            width={15}
+            height={17}
+            fill="#175d96"
+          />
         ) : (
           <BarIcon
             className={`${block}__toggle`}
diff --git a/src/components/SidebarItem/SidebarItem.scss b/src/components/SidebarItem/SidebarItem.scss
index 1da467a1d6e2..d32476de8ae0 100644
--- a/src/components/SidebarItem/SidebarItem.scss
+++ b/src/components/SidebarItem/SidebarItem.scss
@@ -19,6 +19,14 @@
     &:hover {
       color: getColor(mine-shaft);
     }
+
+    &--static {
+      cursor: default;
+
+      &:hover {
+        color: getColor(denim);
+      }
+    }
   }
 
   &__toggle-button {
@@ -97,7 +105,7 @@
       display: flex;
     }
 
-    .sidebar-item__toggle {
+    .sidebar-item__toggle--graph {
       transform-origin: center center;
       transform: rotate(90deg);
     }
diff --git a/src/styles/icons/graph.svg b/src/styles/icons/graph.svg
new file mode 100644
index 000000000000..63a0c4fd9a2e
--- /dev/null
+++ b/src/styles/icons/graph.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <!-- Three nodes representing graph connections -->
+  <circle cx="6" cy="12" r="2"/>
+  <circle cx="18" cy="12" r="2"/>
+  <circle cx="12" cy="4" r="2"/>
+  <!-- Lines connecting nodes -->
+  <line x1="7" y1="11" x2="11" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="8" y1="12" x2="16" y2="12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="13" y1="5" x2="17" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>