diff --git a/docs/views.py b/docs/views.py
index 2ab15a7..4d3d528 100644
--- a/docs/views.py
+++ b/docs/views.py
@@ -43,9 +43,9 @@ def page(request, package, version, file='index.html'):
     # Find the latest version of the docs if requested
     canonical = False
     latest = Version.objects.filter(active=True,
-                                     released__isnull=False,
-                                     package__slug=package,
-                                     page__isnull=False).first()
+                                    released__isnull=False,
+                                    package__slug=package,
+                                    page__isnull=False).first()
 
     if latest is None:
         raise Http404("The requested page could not be found.")
diff --git a/new_1.png b/new_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf649a9bb13f19ed4d728b0d27fe1cafd8666a76
GIT binary patch
diff --git a/new_2.png b/new_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..4dedb5c1bab16cb2e1584b8dc505c4d72af71b0d
GIT binary patch
diff --git a/new_3.png b/new_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..6673da626a69e6f1715d385f78f90e9ef6802849
GIT binary patch
diff --git a/new_4.png b/new_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..30dd5d5902fdc26bf42da676bea76a241167caf9
GIT binary patch
diff --git a/new_5.png b/new_5.png
new file mode 100644
index 0000000000000000000000000000000000000000..22bbd1d025da88bf5e6903f1c89aefde967dc11d
GIT binary patch
diff --git a/new_6.png b/new_6.png
new file mode 100644
index 0000000000000000000000000000000000000000..d7ea2ea7cf7f313cd2e75d4fe7dfbf69d62316d6
GIT binary patch
diff --git a/package.json b/package.json
index 6b83c5a..1b8df33 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@babel/polyfill": "^7.8.7",
     "@babel/preset-env": "^7.9.0",
     "@babel/runtime": "^7.9.2",
-    "@fortawesome/fontawesome-free": "^5.13.0",
+    "@fortawesome/fontawesome-free": "^5.14.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-brands-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
diff --git a/pgaweb/static/css/styleguide.scss b/pgaweb/static/css/styleguide.scss
index 3bf0652..268c238 100644
--- a/pgaweb/static/css/styleguide.scss
+++ b/pgaweb/static/css/styleguide.scss
@@ -7,6 +7,10 @@
 @import "styleguide/pgadmin.resources.scss";
 @import "styleguide/_pgadmin.style.scss";
 @import "styleguide/alert";
+@import "styleguide/sd_theme";
+@import "styleguide/dark_theme";
+@import "styleguide/hc_theme";
+@import "styleguide/iconography";
 
 .chip-gray {
   background-color: $color-gray;
diff --git a/pgaweb/static/css/styleguide/_default.style.scss b/pgaweb/static/css/styleguide/_default.style.scss
index f90fe47..dfd29b6 100644
--- a/pgaweb/static/css/styleguide/_default.style.scss
+++ b/pgaweb/static/css/styleguide/_default.style.scss
@@ -45,6 +45,14 @@
   }
 }
 
+.bg-info {
+    background-color: $color-primary;
+
+    &-light {
+        background-color: $color-primary-light;
+    }
+}
+
 
 .bg-gray {
   background-color:  $color-gray;
@@ -99,6 +107,14 @@
   }
 }
 
+.border-info {
+    border-color: $color-primary;
+
+    &-light {
+    border-color: $color-primary-light;
+  }
+}
+
 .border-gray {
   border: 2px solid $color-gray;
 
@@ -140,6 +156,10 @@
   color: $color-success;
 }
 
+.text-info {
+    color: $color-primary !important;
+}
+
 .text-bold {
   font-weight: bold;
 }
diff --git a/pgaweb/static/css/styleguide/_pgadmin.style.scss b/pgaweb/static/css/styleguide/_pgadmin.style.scss
index d9d7697..2f24eec 100644
--- a/pgaweb/static/css/styleguide/_pgadmin.style.scss
+++ b/pgaweb/static/css/styleguide/_pgadmin.style.scss
@@ -953,3 +953,411 @@ table.table-empty-rows{
     bottom: 0;
   }
 }
+
+.style-action {
+    display: inline-block;
+}
+
+.style-guide {
+    display: inline-block;
+    position: absolute;
+    padding-left: 2em;
+}
+
+.style-action-menu {
+    text-align: left;
+}
+
+.style-header{
+    text-align: left;
+    margin-top: 0!important;
+    margin-bottom: 2.5em!important;
+    padding-top: 0.1em;
+    padding-right: 1em;
+    padding-bottom: 1em;
+    min-width: 190px;
+}
+
+.style-header h2 {
+    padding-left: 1em;
+}
+
+.style-action-menu ul {
+    padding-left:1.2em;
+}
+
+.typography-font-sect {
+    background-color: #f3f5f9;
+
+    .typg-style-section {
+        width: 49%;
+        display: inline-block;
+        font-size: 36px;
+        font-weight: normal;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 1.11;
+        letter-spacing: 1px;
+        color: #222222;
+        padding-top: 1em;
+        padding-left: 1em;
+    }
+
+    .typg-font-normal {
+        color: #222222;
+    }
+
+    .typg-font-normal-sample {
+        width: 49%;
+        display: inline-block;
+        font-size: 12px;
+        font-weight: normal;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 1.33;
+        letter-spacing: 0.25px;
+        color: #222222;
+        padding-left: 3em;
+    }
+
+    .typg-font-bold {
+        color: #222222;
+    }
+
+    .typg-font-bold-sample {
+        width: 49%;
+        display: inline-block;
+        font-size: 12px;
+        font-weight: bold;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 1.33;
+        letter-spacing: 0.25px;
+        color: #222222;
+        padding-left: 3em;
+    }
+}
+
+.font-family-desc {
+    margin-top: 2em;
+    padding-top: 1em;
+    padding-left: 3em;
+    padding-right: 3em;
+    font-size: 12px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.83;
+    letter-spacing: 0.35px;
+    color: #222222;
+
+    .font-family-color {
+        color: #b82519;
+    }
+}
+
+.tab-16px {
+    margin-left: 2em;
+}
+.tab-14px {
+    margin-left: 2.65em;
+}
+.tab-13px {
+    margin-left: 3.1em;
+}
+
+.font-size-sect {
+    padding-top: 1em;
+
+    .font-size-style {
+        padding-top: 2em;
+        padding-bottom: 1em;
+        padding-left: 32%;
+    }
+    .font-size-16-style {
+      font-size: 16px;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: #222222;
+    }
+
+    .font-size-14-style {
+      font-size: 14px;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: #222222;
+    }
+
+    .font-size-13-style {
+      font-size: 13px;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: #222222;
+    }
+}
+
+.theme-content {
+    padding-left: 2em;
+    padding-top: 2em;
+
+    .color-row {
+        display: inline-block;
+    }
+
+    .color-container {
+        height: 9em;
+        text-align: center;
+        margin-right: 2em;
+        display: inherit;
+    }
+    .color-block {
+        width: 82px;
+        height: 82px;
+        border-radius: 6px;
+    }
+
+    .color-name {
+        font-size: 14px;
+    }
+
+    .color-code {
+        font-size: 16px;
+        font-weight: 500;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: normal;
+        letter-spacing: 0.45px;
+        color: #222222;
+    }
+
+    .color-header {
+        font-size: 16px;
+        font-weight: 500;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: normal;
+        letter-spacing: 0.17px;
+        color: #326690;
+    }
+
+}
+
+.theme-content-default {
+    padding-left:0em !important;
+}
+
+.component-container {
+    width: auto;
+    min-width: 45em;
+    border: solid 1px #bac1cd;
+    margin-bottom: 3em;
+
+    .container-body {
+        height: auto;
+        padding-left: 1em;
+    }
+
+    .container-body-active {
+        height: 56px;
+        padding-left: 1em;
+    }
+
+    .container-body-disabled {
+        height: 151px;
+        padding-left: 1em;
+    }
+
+    .container-body-error {
+        height: 90px;
+        padding-left: 1em;
+    }
+
+    .dd-container-body {
+        height: 130px;
+    }
+
+    .dd-container-filled {
+        height: 62px;
+    }
+
+    .alrt-container-body {
+        padding-left: 2em;
+    }
+
+    .tbl-container-body {
+        height: auto;
+        padding-left: 2em;
+    }
+}
+
+.input-svg-style {
+    height: 36px;
+    width: 500px;
+}
+
+.input-label {
+    margin-left: 2.5em;
+}
+
+.input-label-error {
+    margin-left: 2.5em;
+    color: #e53935;
+}
+
+.code {
+    background-color: transparent;
+    padding-top: 2em;
+    padding-right: 3em;
+    font-size: 12px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.83;
+    letter-spacing: 0.35px;
+    color: #1921a0;
+    padding-left: 2em;
+    width: 100%;
+    padding-bottom: 2em;
+
+    .code-tag {
+        color: #222222;
+    }
+
+    .code-attribute {
+        color: #b82519;
+    }
+
+    .code-value {
+        color: #222222;
+    }
+
+    .code-text {
+        padding-left: 2.5em;
+    }
+}
+
+.dd_default {
+  width: 252px;
+  height: 32px;
+  padding-left: 2em;
+}
+
+
+.dd_expand {
+    width: 252px;
+    height: 269px;
+    padding-left: 2em;
+}
+
+.display-inline {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.btn-container {
+    margin-bottom: 2em;
+}
+
+.radio-btn-code {
+    margin-left: 0em;
+
+    background-color: #FFF;
+}
+
+.radio-container-header {
+    padding-left: 1.5em;
+}
+
+// Toggle button
+.toggle_default {
+    width: 54px;
+    height: 27px;
+}
+
+// Alert
+.alert-style-cont {
+    width:480px;
+    margin-left:5em;
+}
+
+// Table
+.table-hover-label{
+    display: inline-block;
+    padding-top: 10em;
+}
+
+//Iconography style
+.icongrp-header {
+    font-size: 15px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.73;
+    letter-spacing: 0.25px;
+    color: #222222;
+}
+
+.icongrp-points {
+    font-size: 15px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.73;
+    letter-spacing: 0.25px;
+    color: #222222;
+}
+
+.iconography-header {
+    height: auto;
+    border-bottom: solid 1px #bac1cd;
+    padding: 1.3em 0em 1.3em 2em;
+}
+
+.iconography-icon {
+    width: 3.2em;
+    height: 3em;
+    display: inline-block;
+    align-items: center;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.iconography-custom-icon {
+    width: 6.2em;
+    height: 5em;
+    display: inline-block;
+    align-items: center;
+    text-align: center;
+    vertical-align: middle;
+    padding: 0.5em;
+}
+
+.iconography-query-icon {
+    width: 5em;
+    height: 5em;
+    display: inline-block;
+    align-items: center;
+    text-align: center;
+    vertical-align: middle;
+    margin-right: 1em;
+    margin-bottom: 1em;
+}
+
+.iconography-fa-icon {
+    width: 7.2em;
+    height: 7em;
+    display: inline-block;
+    align-items: center;
+    text-align: center;
+    vertical-align: middle;
+    padding: 0.5em;
+}
\ No newline at end of file
diff --git a/pgaweb/static/css/styleguide/dark_theme.scss b/pgaweb/static/css/styleguide/dark_theme.scss
new file mode 100644
index 0000000..7e398ea
--- /dev/null
+++ b/pgaweb/static/css/styleguide/dark_theme.scss
@@ -0,0 +1,658 @@
+// Color code classes
+// Primary colors
+.d-primary {
+    background-color: #234D6E;
+}
+
+.d-primary-dark {
+    background-color: #15354F;
+}
+
+.d-primary-light {
+    background-color: #536270;
+}
+
+// Secondary colors
+.d-success {
+    background-color: #1A522B;
+}
+
+.d-success-light {
+    background-color: #5A7863;
+}
+// warning is pre existing class in css so instead of using warning using warning-clr
+.d-warning-clr {
+    background-color: #EEA236;
+}
+
+.d-warning-light {
+    background-color: #B18D5A;
+}
+
+.d-danger {
+    background-color: #DA6758;
+}
+
+.d-danger-light {
+    background-color: #914649;
+}
+
+
+// Severity status colors
+.d-explain-sev-2 {
+    background-color: #DED17E;
+}
+
+.d-explain-sev-3 {
+    background-color: #C2812B;
+}
+
+.d-explain-sev-4 {
+    background-color: #880000;
+}
+
+// schema diff colors
+.d-diff-row {
+    background-color: #807A48;
+}
+
+.d-source-row {
+    background-color: #402025;
+}
+
+.d-target-row {
+    background-color: #6B5438;
+}
+
+// Query editor colors
+.d-number {
+    background-color: #7FCC5C;
+}
+
+.d-string {
+    background-color: #E4E487;
+}
+
+.d-activeline {
+    background-color: #50B0F0;
+}
+
+.d-keyword{
+    background-color: #DB7C74;
+}
+
+.d-editor-fg {
+    background-color: #7DC9F1;
+}
+
+.d-editor-operator {
+    background-color: #D6AAAA;
+}
+
+.d-foldmarker {
+    background-color: #0000FF;
+}
+
+// Ternary colors
+.d-fg {
+    background-color: #D4D4D4;
+}
+
+.d-gray-dark {
+    background-color: #212121;
+}
+
+.d-gray {
+    background-color: #2E2E2E;
+}
+
+.d-border-color {
+    background-color: #4A4A4A;
+}
+
+.d-gray-light {
+    background-color: #303030;
+}
+
+.d-gra-lighter {
+    background-color: #424242;
+}
+
+.d-base-color {
+    background-color: #616161;
+}
+
+.d-text-muted {
+    background-color: #6B6B6B;
+}
+
+
+// Input style
+.d-container-header {
+    height: 72px;
+    background-color: #212121;
+    padding-top:1.3em;
+}
+
+.d-input-label {
+    color: #d4d4d4;
+}
+
+.d-default-input {
+    stroke: #6b6b6b;
+    fill: #212121;
+}
+
+.d-active-input {
+    stroke: #5c8fc2;
+    fill: #212121;
+}
+
+.d-disabled-input {
+    stroke: #6b6b6b;
+    fill: #212121;
+}
+
+.d-error-input {
+    stroke: #914649;
+    fill: #212121;
+}
+
+.d-input-svg-text-style {
+    font-size:14px;
+    fill: #d4d4d4;
+}
+
+.d-input-svg-text-disabled {
+    fill: #999999;
+}
+
+.d-input-svg-text-error {
+    color: #da6758 !important;
+    position: absolute;
+    margin-left: 1.5em;
+    margin-top: .5em;
+}
+
+.d-input-label {
+    margin-left: 2.5em;
+}
+
+.d-input-label-error {
+    margin-left: 2.5em;
+    color: #da6758;
+}
+
+// dropdown style
+.d-container-header-expand {
+    width: auto;
+    height: auto;
+    border-bottom: solid 1px #bac1cd;
+    padding-top:1.3em;
+    background-color: #212121;
+    padding-bottom: 1em;
+}
+
+//Button style
+.d-btn-style {
+    padding-left: 2em;
+    height: 94px;
+    background-color: #181818;
+}
+
+.d-btn-label {
+    font-size: 12px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: 0.35px;
+    color: #d4d4d4;
+    width: 162px;
+}
+
+.d-btn-block {
+    border-right: solid 1px #bac1cd;
+    width: 163.25px;
+}
+
+.d-btn-code-block {
+    max-width: 326.5px;
+    min-width: 326.5px;
+    height: 94px;
+}
+
+.d-btn {
+    color: #ffffff;
+}
+
+
+
+// Primary
+.d-btn:hover {
+    color: #ffffff;
+}
+
+.d-btn-primary {
+    background-color: #234d6e;
+    color: #FFFFFF;
+}
+
+.d-icon-color {
+    color: #FFFFFF;
+}
+
+.d-icon-color:hover {
+    color: #FFFFFF;
+}
+
+.d-btn-primary-hover {
+    background-color: #285274;
+    color: #FFFFFF;
+}
+
+.d-btn-primary-pressed {
+    background-color: #254b6a;
+    color: #FFFFFF;
+}
+
+.d-btn-primary-disabled {
+    background-color: #234d6e;
+    color: #FFFFFF;
+    opacity: 0.5;
+}
+
+// Secondary
+.d-secondary-btn {
+    color: #212529;
+}
+
+.d-secondary-btn:hover {
+    color: #FFFFFF;
+}
+
+.d-btn-secondary {
+    background-color: #6b6b6b;
+    border: solid 1px #2e2e2e;
+    color: #ffffff;
+}
+
+.d-icon-secondary-color {
+    color: #ffffff;
+}
+
+.d-icon-secondary-color-hover {
+    color: #212529;
+}
+
+.d-icon-secondary-color:hover {
+    color: #ffffff;
+}
+
+.d-btn-secondary-hover {
+    background-color: #303030;
+    border: solid 1px #151515;
+    color: #FFFFFF;
+}
+
+.d-btn-secondary-pressed {
+    background-color: #e6e6e6;
+    border: solid 1px #95a0b2;
+    color: #212529;
+}
+
+.d-btn-secondary-pressed:hover {
+    color: #212529;
+}
+
+.d-btn-secondary-disabled {
+    background-color: #6b6b6b;
+    border: solid 2px #2e2e2e;
+    color: #FFFFFF;
+    opacity: 0.5;
+}
+
+// icon btn
+.d-btn-icon {
+    width: 27px;
+    height: 25px;
+    border: 1px solid #2e2e2e;
+    border-radius: 3px;
+    text-align: center;
+    background-color: #6b6b6b;
+}
+
+.d-btn-icon-style{
+    color: #ffffff;
+    width: 14px;
+    height: 14px;
+    vertical-align: baseline;
+    padding-top: 1px;
+    filter: invert(1);
+}
+
+.d-btn-icon-hover {
+    width: 27px;
+    height: 25px;
+    border-radius: 3px;
+    text-align: center;
+    border: solid 1px #151515;
+    background-color: #303030;
+    padding-top: 1px;
+}
+
+
+.d-btn-icon-pressed {
+    width: 27px;
+    height: 25px;
+    border-radius: 3px;
+    text-align: center;
+    border: solid 1px #95a0b2;
+    background-color: #e6e6e6;
+    padding-top: 1px;
+
+    img {
+        filter: invert(0);
+    }
+}
+
+.d-btn-icon-disabled {
+    width: 27px;
+    height: 25px;
+    border-radius: 3px;
+    text-align: center;
+    border: solid 1px #2e2e2e;
+    background-color: #6b6b6b;
+    opacity: 0.5;
+    padding-top: 1px;
+}
+
+// Checkbox
+
+.d-checkbox-block {
+    border-right: solid 1px #bac1cd;
+    padding-left: 1em;
+    width: 163.25px;
+}
+
+.d-checkbox-cont {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    border: solid 1px #6b6b6b;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+    background-color: #6b6b6b;
+
+    .custom-control-label::after {
+        background-color: #212121;
+        color: #ffffff;
+        border: solid 1px #212121;
+    }
+}
+
+.d-checkbox-default {
+    width: 12px;
+    height: 12px;
+    border: solid 1px #6b6b6b;
+}
+
+.d-checkbox-hover-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    border: solid 1px #151515;
+    background-color: #303030;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+
+    .custom-control-label::after {
+        background-color: #212121;
+        border: none;
+    }
+}
+
+.d-checkbox-pressed-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    border: solid 1px #0e0e0e;
+    background-color: #525252;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+
+    .custom-control-label::after {
+        background-color: #212121;
+        border: none;
+    }
+}
+
+.d-checkbox-selected-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    background-color: #6b6b6b;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+
+    .custom-control-label::after {
+        background-color: #2e4d6b;
+        border: none;
+    }
+}
+
+.d-checkbox-disabled-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    background-color: #6b6b6b;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+    opacity: 0.5;
+
+    .custom-control-label::after {
+        background-color: #212121;
+        border: none;
+    }
+}
+
+.d-chk-style {
+    color: #FFFFFF;
+}
+
+// Radio button
+.radio-container-body {
+    width: 653px;
+    height: 348px;
+}
+
+.d-btn-radio-primary {
+    color: #fff;
+    background-color: #234d6e;
+    border-color: #234d6e;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.d-btn-radio-secondary {
+    color: #fff;
+    background-color: #6b6b6b;
+    border-color: #2e2e2e;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.d-btn-radio-secondary:hover {
+    color: #fff !important;
+}
+
+.d-radio-check {
+    color: #fff;
+}
+
+.d-btn-radio-primary-hover {
+    color: #fff;
+    border-color: #1a3951;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: #1a3951;
+}
+
+.d-btn-radiomodern:hover {
+    color: #fff;
+}
+
+
+// alert
+.d-alert-text-body {
+    color: #d4d4d4;
+}
+.d-bg-success {
+  background-color: #212121;
+
+  &-light {
+    background-color: #212121;
+  }
+}
+
+.d-text-success {
+  color: #26852B;
+}
+
+.d-border-success {
+   border-color: #26852B !important;
+}
+//
+.d-bg-danger {
+  background-color: #212121;
+
+  &-light {
+    background-color: #212121;
+  }
+}
+
+.d-text-danger {
+  color: #EE7A55;
+}
+
+.d-border-danger {
+   border-color: #EE7A55 !important;
+}
+//
+.d-bg-info {
+  background-color: #212121;
+
+  &-light {
+    background-color: #212121;
+  }
+}
+
+.d-text-info {
+  color: #50B0F0;
+}
+
+.d-border-info {
+   border-color: #50B0F0 !important;
+}
+
+// Table
+.d-table-hover-tr-style {
+    border: 0px;
+    margin: 0px;
+    padding: 0px;
+    border-spacing: 0px;
+    background-color: #536270;
+    color: #ffffff;
+}
+
+.d-table-hover-td-style {
+    border: 1px solid #4a4a4a !important;
+    border-bottom: 2px solid #234d6e !important;
+    border-top: 3px solid #234d6e !important;
+}
+
+.d-table-container-header {
+    height: auto;
+    border-bottom: solid 1px #bac1cd;
+    padding-top: 1.3em;
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-bottom: 1em;
+    display: inline-flex;
+    background-color: #212121;
+    width: 100%;
+}
+
+
+.d-table-hover-label {
+    color: #fff;
+    padding-top:8em;
+}
+
+.d-table-hover {
+    color: #d4d4d4 !important;
+}
+
+.d-table-cont-style {
+    pointer-events:none;
+    margin-left: 1em;
+    width: 34em;
+    background-color: #424242;
+    border-color: #2d3a48 !important;
+}
+
+.d-table-border{
+    border: 2px solid #4a4a4a !important;
+}
+
+.d-table-header-style {
+    color: #FFF;
+}
+
+
+// Accordion
+.d-accordion-style {
+    width: 590px;
+    height: auto;
+    padding-left: 2em;
+}
+
+.d-acc-container-header-expand {
+    height: auto;
+    padding-bottom: 1em;
+    padding-top:1.3em;
+    border-bottom: solid 1px #bac1cd;
+    padding-top:1.3em;
+    background-color: #212121;
+    padding-right: 2em;
+}
+
+// iconography
+.d-iconography-component-container {
+    width: auto;
+    border: solid 1px #bac1cd;
+    margin-bottom: 3em;
+    background-color: #212121;
+}
+
+.d-icon-label {
+    font-size: 12px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.17;
+    letter-spacing: 0.25px;
+    color: #FFF;
+}
+
+.dark-thm {
+    filter: invert(1);
+}
+
+
+
diff --git a/pgaweb/static/css/styleguide/hc_theme.scss b/pgaweb/static/css/styleguide/hc_theme.scss
new file mode 100644
index 0000000..345027c
--- /dev/null
+++ b/pgaweb/static/css/styleguide/hc_theme.scss
@@ -0,0 +1,646 @@
+// Color code classes
+// Primary colors
+.hc-primary {
+    background-color: #062F57;
+}
+
+.hc-primary-light {
+    background-color: #84D6FF;
+}
+
+// Secondary colors
+.hc-success {
+    background-color: #45D48A;
+}
+
+// warning is pre existing class in css so instead of using warning using warning-clr
+.hc-warning-clr {
+    background-color: #F4D35E;
+}
+
+.hc-danger {
+    background-color: #EE7A55;
+}
+
+// Severity status colors
+.hc-explain-sev-2 {
+    background-color: #EAEA43;
+}
+
+.hc-explain-sev-3 {
+    background-color: #FFAD65;
+}
+
+.hc-explain-sev-4 {
+    background-color: #EE7A55;
+}
+
+// schema diff colors
+.hc-diff-row {
+    background-color: #CFC56E;
+}
+
+.hc-source-row {
+    background-color: #EE97A5;
+}
+
+.hc-target-row {
+    background-color: #FFAD65;
+}
+
+// Query editor colors
+.hc-number {
+    background-color: #45D48A;
+}
+
+.hc-string {
+    background-color: #EAEA43;
+}
+
+.hc-variabe {
+    background-color: #7DC9F1;
+}
+
+.hc-builtin {
+    background-color: #B394FC;
+}
+
+.hc-comment {
+    background-color: #FFAD65;
+}
+
+.hc-bracket {
+    background-color: #D6AAAA;
+}
+
+.hc-activeline {
+    background-color: #50B0F0;
+}
+
+.hc-keyword{
+    background-color: #F8845F;
+}
+
+.hc-foldmarker {
+    background-color: #FFFFFF;
+    border: solid 1px #a6b7c8;
+}
+
+// Ternary colors
+.hc-gray-dark {
+    background-color: #010B15;
+}
+
+.hc-gray {
+    background-color: #1F2932;
+}
+
+.hc-gray-light {
+    background-color: #2D3A48;
+}
+
+.hc-gra-lighter {
+    background-color: #8B9CAD;
+}
+
+.hc-border-color {
+    background-color: #A6B7C8;
+}
+
+.hc-base-color {
+    background-color: #C9D0D7;
+}
+
+.hc-white {
+    background-color: #FFFFFF;
+    border: solid 1px #a6b7c8;
+}
+
+
+// Input style
+.hc-container-header {
+    height: 72px;
+    background-color: #010b15;
+    padding-top:1.3em;
+}
+
+.hc-input-label {
+    color: #d4d4d4;
+}
+
+.hc-default-input {
+    stroke: #6b6b6b;
+    fill: #010b15;
+}
+
+.hc-active-input {
+    stroke: #84d6ff;
+    fill: #010b15;
+}
+
+.hc-disabled-input {
+    stroke: #8b9cad;
+    fill: #010b15;
+}
+
+.hc-error-input {
+    stroke: #ee7a55;
+    fill: #010b15;
+}
+
+.hc-input-svg-text-style {
+    font-size:14px;
+    fill: #ffffff;
+}
+
+.hc-input-svg-text-disabled {
+    fill: #a6b7c8;
+}
+
+.hc-input-svg-text-error {
+    color: #ee7a55 !important;
+    position: absolute;
+    margin-left: 1.5em;
+    margin-top: .5em;
+}
+
+.hc-input-label {
+    margin-left: 2.5em;
+}
+
+.hc-input-label-error {
+    margin-left: 2.5em;
+    color: #ee7a55;
+}
+
+// dropdown style
+.hc-container-header-expand {
+    width: auto;
+    height: auto;
+    border-bottom: solid 1px #bac1cd;
+    padding-top:1.3em;
+    background-color: #010b15;
+    padding-bottom: 1em;
+}
+
+// Button style
+.hc-btn-style {
+    padding-left: 2em;
+    height: 94px;
+    background-color: #010b15;
+}
+
+.hc-btn-label {
+    font-size: 12px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: 0.35px;
+    color: #d4d4d4;
+    width: 162px;
+}
+
+.hc-btn-block {
+    border-right: solid 1px #bac1cd;
+    width: 163.25px;
+}
+
+.hc-btn-code-block {
+    max-width: 326.5px;
+    min-width: 326.5px;
+    height: 94px;
+}
+
+.hc-btn {
+    color: #ffffff;
+}
+
+
+
+// Primary
+.hc-btn:hover {
+    color: #ffffff;
+}
+
+.hc-btn-primary {
+    background-color: #84d6ff;
+    color: #010b15;
+}
+
+.hc-icon-color {
+    color: #010b15;
+}
+
+.hc-icon-color:hover {
+    color: #010b15;
+}
+
+.hc-btn-primary-hover {
+    background-color: #ffffff;
+    color: #010b15;
+}
+
+.hc-btn-primary-pressed {
+    background-color: #84d6ff;
+    color: #010b15;
+}
+
+.hc-btn-primary-disabled {
+    background-color: #8b9cad;
+    color: #010b15;
+    opacity: 0.5;
+}
+
+// Secondary
+.hc-secondary-btn {
+    color: #84d6ff;
+}
+
+.hc-secondary-btn:hover {
+    color: #84d6ff;
+}
+
+.hc-btn-secondary {
+    background-color: #010b15;
+    border: solid 1px #84d6ff;
+    color: #84d6ff;
+}
+
+.hc-icon-secondary-color {
+    color: #84d6ff;
+}
+
+.hc-icon-hover-color {
+    color: #FFFFFF;
+}
+
+.hc-icon-hover-color:hover {
+    color: #FFFFFF;
+}
+
+.hc-icon-secondary-color-hover {
+    color: #84d6ff;
+}
+
+.hc-icon-disabled-color {
+    color: #8b9cad;
+}
+
+.hc-icon-disabled-color:hover {
+    color: #84d6ff;
+}
+
+
+.hc-icon-secondary-color:hover {
+    color: #84d6ff;
+}
+
+.hc-btn-secondary-hover {
+    background-color: #010b15;
+    border: solid 1px #ffffff;
+    color: #FFFFFF;
+}
+
+.hc-btn-secondary-pressed {
+    background-color: #010b15;
+    border: solid 1px #84d6ff;
+    color: #84d6ff;
+}
+
+.hc-btn-secondary-pressed:hover {
+    color: #84d6ff;
+}
+
+.hc-btn-secondary-disabled {
+    background-color: #010b15;
+    border: solid 2px #8b9cad;
+    color: #8b9cad;
+    opacity: 0.5;
+}
+
+.hc-btn-secondary-disabled:hover {
+    color: #8b9cad;
+}
+
+// icon btn
+.hc-btn-icon {
+    width: 27px;
+    height: 25px;
+    border: 1px solid #ffffff;
+    border-radius: 3px;
+    text-align: center;
+    background-color: #010b15;
+}
+
+.hc-btn-icon-style{
+    color: #ffffff;
+    width: 14px;
+    height: 14px;
+    vertical-align: baseline;
+    padding-top: 1px;
+    filter: invert(1);
+}
+
+.hc-btn-icon-hover {
+    width: 27px;
+    height: 25px;
+    border-radius: 3px;
+    text-align: center;
+    border: solid 1px #FFFFFF;
+    background-color: #FFFFFF;
+    padding-top: 1px;
+
+    img {
+        filter: invert(0);
+    }
+}
+
+.hc-btn-icon-pressed {
+    width: 27px;
+    height: 25px;
+    border-radius: 3px;
+    text-align: center;
+    border: solid 1px #FFFFFF;
+    background-color: #010b15;
+    padding-top: 1px;
+
+    img {
+        filter: invert(1);
+    }
+}
+
+.hc-btn-icon-disabled {
+    width: 27px;
+    height: 25px;
+    border-radius: 3px;
+    text-align: center;
+    border: solid 1px #8b9cad;
+    background-color: #1f2932;
+    opacity: 0.5;
+    padding-top: 1px;
+}
+
+// Checkbox
+
+.hc-checkbox-block {
+    border-right: solid 1px #bac1cd;
+    padding-left: 1em;
+    width: 163.25px;
+}
+
+.hc-checkbox-cont {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+    background-color: #010b15;
+
+    .custom-control-label::after {
+        background-color: #010b15;
+        color: #ffffff;
+        border: solid 1px #8b9cad;
+    }
+}
+
+.hc-checkbox-default {
+    width: 12px;
+    height: 12px;
+    border: solid 1px #6b6b6b;
+}
+
+.hc-checkbox-hover-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    background-color: #010b15;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+
+    .custom-control-label::after {
+        background-color: #212121;
+        border: solid 1px #ffffff;
+    }
+}
+
+.hc-checkbox-pressed-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    background-color: #010b15;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+
+    .custom-control-label::after {
+        background-color: #212121;
+        border: none;
+    }
+}
+
+.hc-checkbox-selected-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    background-color: #010b15;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+
+    .custom-control-label::after {
+        background-color: #48a7ea;
+        border: none;
+    }
+}
+
+.hc-checkbox-disabled-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    background-color: #010b15;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+    opacity: 0.5;
+
+    .custom-control-label::after {
+        background-color: #48a7ea;
+        border: none;
+    }
+}
+
+.hc-chk-style {
+    color: #FFFFFF;
+}
+
+// Radio button
+.radio-container-body {
+    width: 653px;
+    height: 348px;
+}
+
+.hc-btn-radio-primary {
+    color: #010b15;
+    background-color: #84d6ff;
+    border-color: #84d6ff;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.hc-btn-radio-secondary {
+    color: #fff;
+    background-color: #010b15;
+    border-color: #7f90a1;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.hc-btn-radio-secondary:hover {
+    color: #fff !important;
+}
+
+.hc-radio-check {
+    color: #010b15;
+}
+
+.hc-btn-radio-primary-hover {
+    color: #010b15;
+    border-color: #ffffff;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: #ffffff;
+}
+
+.hc-btn-radiomodern:hover {
+    color: #010b15;
+}
+
+// alert
+.hc-alert-text-body {
+    color: #010B15;
+}
+.hc-bg-success {
+  background-color: #45D48A;
+
+  &-light {
+    background-color: #45D48A;
+  }
+}
+
+.hc-text-success {
+  color: #010B15;
+}
+
+.hc-border-success {
+   border-color: #45D48A !important;
+}
+//
+.hc-bg-danger {
+  background-color: #EE7A55;
+
+  &-light {
+    background-color: #EE7A55;
+  }
+}
+
+.hc-text-danger {
+  color: #010B15;
+}
+
+.hc-border-danger {
+   border-color: #EE7A55 !important;
+}
+//
+.hc-bg-info {
+  background-color: #84D6FF;
+
+  &-light {
+    background-color: #84D6FF;
+  }
+}
+
+.hc-text-info {
+  color: #010B15;
+}
+
+.hc-border-info {
+   border-color: #84D6FF !important;
+}
+
+// Table
+.hc-table-hover-tr-style {
+    border: 0px;
+    margin: 0px;
+    padding: 0px;
+    border-spacing: 0px;
+    background-color: #FFFFFF;
+    color: #010b15;
+}
+
+.hc-table-hover-td-style {
+    border: 1px solid #FFFFF !important;
+    border-bottom: 2px solid #FFFFFF !important;
+    border-top: 2px solid #FFFFFF !important;
+}
+
+.hc-table-container-header {
+    height: auto;
+    border-bottom: solid 1px #bac1cd;
+    padding-top: 1.3em;
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-bottom: 1em;
+    display: inline-flex;
+    background-color: #010b15;
+    width: 100%;
+}
+
+
+.hc-table-hover-label {
+    color: #fff;
+    padding-top:8em;
+}
+
+.hc-table-hover {
+    color: #d4d4d4 !important;
+}
+
+.hc-table-cont-style {
+    pointer-events:none;
+    margin-left: 1em;
+    width: 34em;
+    background-color: #010b15;
+    border-color: #4a4a4a !important;
+}
+
+.hc-table-border{
+    border: 2px solid #2d3a48 !important;
+}
+
+.hc-table-header-style {
+    color: #FFF;
+}
+
+
+// Accordion
+.hc-accordion-style {
+    width: 590px;
+    height: auto;
+    padding-left: 2em;
+}
+
+.hc-acc-container-header-expand {
+    height: auto;
+    padding-bottom: 1em;
+    padding-top:1.3em;
+    border-bottom: solid 1px #bac1cd;
+    padding-top:1.3em;
+    background-color: #010b15;
+    padding-right: 2em;
+}
+
+
+
diff --git a/pgaweb/static/css/styleguide/iconography.scss b/pgaweb/static/css/styleguide/iconography.scss
new file mode 100644
index 0000000..04639c6
--- /dev/null
+++ b/pgaweb/static/css/styleguide/iconography.scss
@@ -0,0 +1,720 @@
+.pg-icon {
+    background-repeat: no-repeat;
+    background-size: 24px !important;
+    align-content: center;
+    vertical-align: middle;
+    height: 2.3em;
+    width: 2.3em;
+    display: inline-block;
+
+}
+
+.cast {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/cast.svg) !important;
+}
+
+.coll-cast {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-cast.svg) !important;
+}
+
+.catalog_object_column {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/catalog_object_column.svg) !important;
+}
+
+.coll-column {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-column.svg) !important;
+}
+
+.catalog_object {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/catalog_object.svg) !important;
+}
+
+.coll-catalog_object {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-catalog_object.svg) !important;
+}
+
+.catalog {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/catalog.svg) !important;
+}
+
+.coll-catalog {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-catalog.svg) !important;
+}
+
+.domain_constraints {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/domain_constraints.svg) !important;
+}
+
+.coll-domain_constraints  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-domain_constraints.svg) !important;
+}
+
+.primary_key  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/primary_key.svg) !important;
+}
+
+.compound_trigger  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/compound_trigger.svg) !important;
+}
+
+.coll-compound_trigger  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-compound_trigger.svg) !important;
+}
+
+.coll-database  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-database.svg) !important;
+}
+
+.database  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/database.svg) !important;
+}
+
+.edbfunc  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/edbfunc.svg) !important;
+}
+
+.coll-edbfunc  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbfunc.svg) !important;
+}
+
+.fts_template  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/fts_template.svg) !important;
+}
+
+.coll-fts_template  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_template.svg) !important;
+}
+
+.trigger  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/trigger.svg) !important;
+}
+
+.coll-trigger  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-trigger.svg) !important;
+}
+
+.coll-sequence  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-sequence.svg) !important;
+}
+
+.event_trigger  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/event_trigger.svg) !important;
+}
+
+.coll-event_trigger  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-event_trigger.svg) !important;
+}
+
+.trigger_function  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/trigger_function.svg) !important;
+}
+
+.coll-trigger_function  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-trigger_function.svg) !important;
+}
+
+.procedure  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/procedure.svg) !important;
+}
+
+.coll-function  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-function.svg) !important;
+}
+
+.edbproc  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/edbproc.svg) !important;
+}
+
+.coll-edbproc  {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbproc.svg) !important;
+}
+
+.domain {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/domain.svg) !important;
+}
+
+.coll-domain {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-domain.svg) !important;
+}
+
+.collation {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/collation.svg) !important;
+}
+
+.language {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/language.svg) !important;
+}
+
+.coll-language {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-language.svg) !important;
+}
+
+.mview {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/mview.svg) !important;
+}
+
+.coll-mview {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-mview.svg) !important;
+}
+
+.function {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/function.svg) !important;
+}
+
+.coll-procedure {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-procedure.svg) !important;
+}
+
+.schema {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/schema.svg) !important;
+}
+
+.coll-schema {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-schema.svg) !important;
+}
+
+.synonym {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/synonym.svg) !important;
+}
+
+.coll-synonym {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-synonym.svg) !important;
+}
+
+.coll-fts_parser {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_parser.svg) !important;
+}
+
+.type {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/type.svg) !important;
+}
+
+.coll-type {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-type.svg) !important;
+}
+
+.view {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/view.svg) !important;
+}
+
+.coll-view {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-view.svg) !important;
+}
+
+.resource_group {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/resource_group.svg) !important;
+}
+
+.coll-resource_group {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-resource_group.svg) !important;
+}
+
+.tablespace {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/tablespace.svg) !important;
+}
+
+.coll-tablespace {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-tablespace.svg) !important;
+}
+
+.rule-1 {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/rule-1.svg) !important;
+}
+
+.coll-rule {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-rule.svg) !important;
+}
+
+.exclusion_constraint {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/exclusion_constraint.svg) !important;
+}
+
+.package {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/package.svg) !important;
+}
+
+.coll-package {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-package.svg) !important;
+}
+
+.index {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/index.svg) !important;
+}
+
+.coll-index {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-index.svg) !important;
+}
+
+.role {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/role.svg) !important;
+}
+
+.coll-role {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-role.svg) !important;
+}
+
+.group {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/group.svg) !important;
+}
+
+.partition {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/partition.svg) !important;
+}
+
+.coll-partition {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-partition.svg) !important;
+}
+
+.coll-foreign_data_wrapper-1 {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_data_wrapper-1.svg) !important;
+}
+
+.foreign_data_wrapper-1 {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/foreign_data_wrapper-1.svg) !important;
+}
+
+.pga_job {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/pga_job.svg) !important;
+}
+
+.coll-pga_job {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_job.svg) !important;
+}
+
+.pga_jobstep {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/pga_jobstep.svg) !important;
+}
+
+.coll-pga_jobstep {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_jobstep.svg) !important;
+}
+
+.user_mapping {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/user_mapping.svg) !important;
+}
+
+.coll-user_mapping {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-user_mapping.svg) !important;
+}
+
+.pga_schedule {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/pga_schedule.svg) !important;
+}
+
+.coll-pga_schedule {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_schedule.svg) !important;
+}
+
+.server_group {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/server_group.svg) !important;
+}
+
+.server {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/server.svg) !important;
+}
+
+.coll-foreign_server {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_server.svg) !important;
+}
+
+.trigger-bad {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/trigger-bad.svg) !important;
+}
+
+.triggerbad {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/triggerbad.svg) !important;
+}
+
+.pga_schedule-disabled {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/pga_schedule-disabled.svg) !important;
+}
+
+.pga_job-disabled {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/pga_job-disabled.svg) !important;
+}
+
+.pga_jobstep-disabled {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/pga_jobstep-disabled.svg) !important;
+}
+
+.serverbad {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/serverbad.svg) !important;
+}
+
+.domain_constraints-bad {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/domain_constraints-bad.svg) !important;
+}
+
+.compound_trigger-bad {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/compound_trigger-bad.svg) !important;
+}
+
+.databasebad {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/databasebad.svg) !important;
+}
+
+.check-constraint-bad {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/check-constraint-bad.svg) !important;
+}
+
+.check-constraint {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/check-constraint.svg) !important;
+}
+
+.sub_partition_table {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/sub_partition_table.svg) !important;
+}
+
+.table-inherited {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/table-inherited.svg) !important;
+}
+
+.table-inherits {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/table-inherits.svg) !important;
+}
+
+.table-multi-inherit {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/table-multi-inherit.svg) !important;
+}
+
+.partition_table {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/partition_table.svg) !important;
+}
+
+.unique_constraint {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/unique_constraint.svg) !important;
+}
+
+.table-repl {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/table-repl.svg) !important;
+}
+
+.coll-foreign_table {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_table.svg) !important;
+}
+
+.coll-fts_dictionary {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_dictionary.svg) !important;
+}
+
+.ppas {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/ppas.svg) !important;
+}
+
+.pg {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/pg.svg) !important;
+}
+
+.coll-edbvar {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbvar.svg) !important;
+}
+
+.edbvar {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/edbvar.svg) !important;
+}
+
+.extension {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/extension.svg) !important;
+}
+
+.coll-extension {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-extension.svg) !important;
+}
+
+.coll-fts_configuration {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_configuration.svg) !important;
+}
+
+.fts_configuration-1 {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/fts_configuration-1.svg) !important;
+}
+
+.fts_dictionary {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/fts_dictionary.svg) !important;
+}
+
+.ex_unknown {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/ex_unknown.svg) !important;
+}
+
+.fts_parser {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/fts_parser.svg) !important;
+}
+
+.coll-constraints {
+    background-image: url(/static/img/style_guide/iconography_assets/tree_view_icons/coll-constraints.svg) !important;
+}
+
+
+
+.pg-icon-query {
+    background-repeat: no-repeat;
+    background-size: 64px !important;
+    align-content: center;
+    vertical-align: middle;
+    height: 5em;
+    width: 5em;
+    display: inline-block;
+}
+
+.ex_aggregate {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_aggregate.svg) !important;
+}
+
+.ex_append {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_append.svg) !important;
+}
+
+.ex_bmp_and {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_and.svg) !important;
+}
+
+.ex_bmp_heap {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_heap.svg) !important;
+}
+
+.ex_bmp_index {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_index.svg) !important;
+}
+
+.ex_bmp_or {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_or.svg) !important;
+}
+
+.ex_cte_scan {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_cte_scan.svg) !important;
+}
+
+.ex_delete {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_delete.svg) !important;
+}
+
+.ex_foreign_scan {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_foreign_scan.svg) !important;
+}
+
+.ex_gather_merge {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_gather_merge.svg) !important;
+}
+
+.ex_gather_motion {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_gather_motion.svg) !important;
+}
+
+.ex_group {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_group.svg) !important;
+}
+
+.ex_hash_setop_intersect_all {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_intersect_all.svg) !important;
+}
+
+.ex_hash_setop_intersect {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_intersect.svg) !important;
+}
+
+.ex_hash_setop_unknown {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_unknown.svg) !important;
+}
+
+.ex_hash {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash.svg) !important;
+}
+
+.ex_index_only_scan {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_index_only_scan.svg) !important;
+}
+
+.ex_index_scan {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_index_scan.svg) !important;
+}
+
+.ex_materialize {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_materialize.svg) !important;
+}
+
+.ex_merge_anti_join {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_anti_join.svg) !important;
+}
+
+.ex_merge_append {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_append.svg) !important;
+}
+
+.ex_merge_semi_join {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_semi_join.svg) !important;
+}
+
+.ex_merge {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge.svg) !important;
+}
+
+.ex_named_tuplestore_scan {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_named_tuplestore_scan.svg) !important;
+}
+
+.ex_recursive_union {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_recursive_union.svg) !important;
+}
+
+.ex_redistribute_motion {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_redistribute_motion.svg) !important;
+}
+
+.ex_result {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_result.svg) !important;
+}
+
+.ex_scan {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_scan.svg) !important;
+}
+
+.ex_seek {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_seek.svg) !important;
+}
+
+.ex_setop {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_setop.svg) !important;
+}
+
+.ex_values_scan {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_values_scan.svg) !important;
+}
+
+.ex_lock_rows {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_lock_rows.svg) !important;
+}
+
+.ex_projectset {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_projectset.svg) !important;
+}
+
+.ex_update {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_update.svg) !important;
+}
+
+.ex_tid_scan {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_tid_scan.svg) !important;
+}
+
+.ex_window_aggregate {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_window_aggregate.svg) !important;
+}
+
+.ex_hash_setop_except_all {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_except_all.svg) !important;
+}
+
+.ex_limit {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_limit.svg) !important;
+}
+
+.ex_table_func_scan {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_table_func_scan.svg) !important;
+}
+
+.ex_hash_semi_join {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_semi_join.svg) !important;
+}
+
+.ex_subplan {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_subplan.svg) !important;
+}
+
+.ex_nested_loop_semi_join {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_nested_loop_semi_join.svg) !important;
+}
+
+.ex_unique {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_unique.svg) !important;
+}
+
+.ex_hash_setop_except {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_except.svg) !important;
+}
+
+.ex_broadcast_motion {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_broadcast_motion.svg) !important;
+}
+
+.ex_hash_anti_join {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_anti_join.svg) !important;
+}
+
+.ex_insert {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_insert.svg) !important;
+}
+
+.ex_nested_loop_anti_join {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_nested_loop_anti_join.svg) !important;
+}
+
+.ex_worktable_scan {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_worktable_scan.svg) !important;
+}
+
+.ex_sort {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_sort.svg) !important;
+}
+
+.ex_join {
+    background-image: url(/static/img/style_guide/iconography_assets/query_explain_icons/ex_join.svg) !important;
+}
+
+
+// Custom Solid icons
+.pg-icon-custom {
+    background-repeat: no-repeat;
+    background-size: 24px !important;
+    align-content: center;
+    vertical-align: middle;
+    height: 1.7em;
+    width: 2.3em;
+    display: inline-block;
+}
+
+.commit {
+   background-image: url(/static/img/style_guide/iconography_assets/custom_solid_icons/commit.svg) !important;
+}
+
+.compare {
+   background-image: url(/static/img/style_guide/iconography_assets/custom_solid_icons/compare.svg) !important;
+}
+
+.connect {
+   background-image: url(/static/img/style_guide/iconography_assets/custom_solid_icons/connect.svg) !important;
+}
+
+.disconnect {
+   background-image: url(/static/img/style_guide/iconography_assets/custom_solid_icons/disconnect.svg) !important;
+}
+
+.drop_cascade {
+   background-image: url(/static/img/style_guide/iconography_assets/custom_solid_icons/drop_cascade.svg) !important;
+}
+
+.query_tool {
+   background-image: url(/static/img/style_guide/iconography_assets/custom_solid_icons/query_tool.svg) !important;
+}
+
+.rollback {
+   background-image: url(/static/img/style_guide/iconography_assets/custom_solid_icons/rollback.svg) !important;
+}
+
+.row_filter {
+   background-image: url(/static/img/style_guide/iconography_assets/custom_solid_icons/row_filter.svg) !important;
+}
+
+.save_data_changes {
+   background-image: url(/static/img/style_guide/iconography_assets/custom_solid_icons/save_data_changes.svg) !important;
+}
+
+.script {
+   background-image: url(/static/img/style_guide/iconography_assets/custom_solid_icons/script.svg) !important;
+}
+
+// Font-Awesome icons.
+.pg-fa-icon {
+    width: 20.6px !important;
+    height: 20.6px;
+}
diff --git a/pgaweb/static/css/styleguide/sd_theme.scss b/pgaweb/static/css/styleguide/sd_theme.scss
new file mode 100644
index 0000000..5837c3d
--- /dev/null
+++ b/pgaweb/static/css/styleguide/sd_theme.scss
@@ -0,0 +1,576 @@
+.nav-tabs .nav-link.active {
+    border: none;
+    border-bottom: 3px solid #295c85!important;
+    color: #295c85 !important;
+}
+
+.nav-tabs .nav-link:hover {
+    border: none;
+}
+
+.nav-tabs .nav-link {
+    border: none;
+    color: #6d7789;
+    padding-left: 0em;
+    font-weight: 500;
+}
+
+// Color code classes
+// Primary colors
+.primary {
+    background-color: #326690;
+}
+
+.primary-dark {
+    background-color: #295c85;
+}
+
+.primary-light {
+    background-color: #d6effc;
+}
+
+// Secondary colors
+.success {
+    background-color: #43a047;
+}
+
+.success-light {
+    background-color: #ddf1de;
+}
+// warning is pre existing class in css so instead of using warning using warning-clr
+.warning-clr {
+    background-color: #EEA236;
+}
+
+.warning-light {
+    background-color: #FCE5C5;
+}
+
+.danger {
+    background-color: #e53935;
+}
+
+.danger-light {
+    background-color: #F39999;
+}
+
+.danger-lighter {
+    background-color: #faecec;
+}
+
+// Severity status colors
+.explain-sev-2 {
+    background-color: #FFEE88;
+}
+
+.explain-sev-3 {
+    background-color: #EE8800;
+}
+
+.explain-sev-4 {
+    background-color: #880000;
+}
+
+// schema diff colors
+.diff-row {
+    background-color: #FFF9C4;
+}
+
+.source-row {
+    background-color: #FFEBEE;
+}
+
+.target-row {
+    background-color: #FBE3BF;
+}
+
+// Query editor colors
+.number {
+    background-color: #996644;
+}
+
+.string {
+    background-color: #AA1111;
+}
+
+.variabe {
+    background-color: #0055AA;
+}
+
+.builtin {
+    background-color: #3300AA;
+}
+
+.comment {
+    background-color: #AA5500;
+}
+
+.bracket {
+    background-color: #999977;
+}
+
+.activeline {
+    background-color: #50B0F0;
+}
+
+.keyword{
+    background-color: #990088;
+}
+
+.foldmarker {
+    background-color: #0000FF;
+}
+
+// Ternary colors
+.fg {
+    background-color: #222222;
+}
+
+.ternary {
+    background-color: #5B6D7C;
+}
+
+.gray-dark {
+    background-color: #848EA0;
+}
+
+.gray {
+    background-color: #848EA0;
+}
+
+.border-color {
+    background-color: #DDE0E6;
+}
+
+.gray-light {
+    background-color: #EBEEF3;
+}
+
+.gra-lighter {
+    background-color: #F3F5F9;
+}
+
+
+// Input style
+.container-header {
+    height: 72px;
+    border-bottom: solid 1px #bac1cd;
+    padding-top:1.3em;
+}
+
+.sd-container-header {
+    background-color: #FFFFFF;
+}
+
+.sd-default-input {
+    stroke: #dde0e6;
+    fill: #FFF;
+}
+
+.sd-active-input {
+    stroke: #73a6ce;
+    fill: #FFF;
+}
+
+.sd-disabled-input {
+    stroke: #dde0e6;
+    fill: #f3f5f9;
+}
+
+.sd-error-input {
+    stroke: #f39999;
+    fill: #FFF;
+}
+
+.input-svg-text-style {
+    font-size:14px;
+    fill: #222222;
+}
+
+.input-svg-text-disabled {
+    fill: #848ea0;
+}
+
+.input-svg-text-error {
+    color: #e53935 !important;
+    position: absolute;
+    margin-left: 1.5em;
+    margin-top: .5em;
+}
+
+// dropdown style
+.container-header-expand {
+    width: auto;
+    height: auto;
+    border-bottom: solid 1px #bac1cd;
+    padding-top:1.3em;
+    padding-bottom: 1em;
+}
+
+//Button style
+.sd-btn-row {
+    border: solid 1px #bac1cd;
+}
+.sd-btn-style {
+    padding-left: 2em;
+    height: 94px;
+    background-color: #ffffff;
+}
+
+.sd-btn-label {
+    font-size: 12px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: 0.35px;
+    color: #222222;
+    width: 162px;
+}
+
+.sd-btn-block {
+    border-right: solid 1px #bac1cd;
+    width: 163.25px;
+}
+
+.sd-btn-code-block {
+    max-width: 326.5px;
+    min-width: 326.5px;
+    height: 94px;
+}
+
+.sd-btn {
+    color: #ffffff;
+}
+
+
+
+// Primary
+.sd-btn:hover {
+    color: #ffffff;
+}
+
+.sd-btn-primary {
+    background-color: #326690;
+    color: #FFFFFF;
+}
+
+.sd-icon-color {
+    color: #FFFFFF;
+}
+
+.sd-icon-color:hover {
+    color: #FFFFFF;
+}
+
+.sd-btn-primary-hover {
+    background-color: #285274;
+    color: #FFFFFF;
+}
+
+.sd-btn-primary-pressed {
+    background-color: #254b6a;
+    color: #FFFFFF;
+}
+
+.sd-btn-primary-disabled {
+    background-color: #326690;
+    color: #FFFFFF;
+    opacity: 0.5;
+}
+
+// Secondary
+.sd-secondary-btn {
+    color: #212529;
+}
+
+.sd-secondary-btn:hover {
+    color: #212529;
+}
+
+.sd-btn-secondary {
+    background-color: #FFFFFF;
+    border: solid 1px #bac1cd;
+    color: #212529;
+}
+
+.sd-icon-secondary-color {
+    color: #212529;
+}
+
+.sd-icon-secondary-color:hover {
+    color: #212529;
+}
+
+.sd-btn-secondary-hover {
+    background-color: #ebeef3;
+    border: solid 1px #9ca6b8;
+    color: #212529;
+}
+
+.sd-btn-secondary-pressed {
+    background-color: #e6e6e6;
+    border: solid 1px #95a0b2;
+    color: #212529;
+}
+
+.sd-btn-secondary-disabled {
+    background-color: #FFFFFF;
+    border: solid 2px #bac1cd;
+    color: #212529;
+    opacity: 0.5;
+}
+
+// icon btn
+.sd-btn-icon {
+    width: 27px;
+    height: 25px;
+    border: 1px solid #bac1cd;
+    border-radius: 3px;
+    text-align: center;
+}
+
+.sd-btn-icon-style{
+    color: #212529;
+    width: 14px;
+    height: 14px;
+    vertical-align: baseline;
+    padding-top: 1px;
+}
+
+.sd-btn-icon-hover {
+    width: 27px;
+    height: 25px;
+    border-radius: 3px;
+    text-align: center;
+    border: solid 1px #9ca6b8;
+    background-color: #ebeef3;
+    padding-top: 1px;
+}
+
+.sd-btn-icon-pressed {
+    width: 27px;
+    height: 25px;
+    border-radius: 3px;
+    text-align: center;
+    border: solid 1px #95a0b2;
+    background-color: #e6e6e6;
+    padding-top: 1px;
+}
+
+.sd-btn-icon-disabled {
+    width: 27px;
+    height: 25px;
+    border-radius: 3px;
+    text-align: center;
+    border: solid 1px #bac1cd;
+    background-color: #ffffff;
+    opacity: 0.5;
+    padding-top: 1px;
+}
+
+
+// Checkbox
+.sd-checkbox-block {
+    border-right: solid 1px #bac1cd;
+    padding-left: 1em;
+    width: 163.25px;
+}
+
+.sd-checkbox-cont {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    border: solid 1px #bac1cd;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+}
+
+.sd-checkbox-default {
+    width: 12px;
+    height: 12px;
+    border: solid 1px #dde0e6;
+}
+
+.sd-checkbox-hover-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    border: solid 1px #bac1cd;
+    background-color: #ebeef3;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+
+    .custom-control-label::after {
+        background-color: #ebeef3;
+    }
+}
+
+.sd-checkbox-pressed-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    border: solid 1px #95a0b2;
+    background-color: #e6e6e6;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+
+    .custom-control-label::after {
+        background-color: #e6e6e6;
+    }
+}
+
+.sd-checkbox-selected-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    border: solid 1px #bac1cd;
+    background-color: #FFFFFF;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+
+    .custom-control-label::after {
+        background-color: #326690;
+    }
+}
+
+.sd-checkbox-disabled-bg {
+    width: 115px;
+    height: 34px;
+    border-radius: 3px;
+    border: solid 1px #bac1cd;
+    background-color: #FFFFFF;
+    padding-top: 0.25em;
+    padding-left: 0.6em;
+    font-size: 15px;
+    opacity: 0.5;
+
+
+    .custom-control-label::after {
+        background-color: #326690;
+    }
+}
+
+.custom-control-label::after {
+    border: solid 1px #dde0e6;
+    border-radius: .25rem;
+}
+
+// Radio button
+.radio-container-body {
+    width: 653px;
+    height: 348px;
+}
+
+.btn-radio-primary {
+    color: #fff;
+    background-color: #326690;
+    border-color: #326690;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.btn-radio-secondary {
+    color: #222222;
+    background-color: #fff;
+    border-color: #bac1cd;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.btn-radio-secondary:hover {
+    color: #222222 !important;
+}
+
+.radio-check {
+    color: #fff;
+}
+
+.btn-radio-primary-hover {
+    color: #fff;
+    border-color: #326690;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: #285274;
+}
+
+.btn-radiomodern:hover {
+    color: #fff;
+}
+
+// Table
+.table-container-header {
+    height: auto;
+    border-bottom: solid 1px #bac1cd;
+    padding-top: 1.3em;
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-bottom: 1em;
+    display: inline-flex;
+    width: 100%;
+}
+
+.table-hover-tr-style {
+    border: 0px;
+    margin: 0px;
+    padding: 0px;
+    border-spacing: 0px;
+    background-color: #d6effc;
+    color: #222222;
+}
+
+.table-hover-td-style {
+    border-bottom: 2px solid #326690 !important;
+    border-top: 2px solid #326690 !important;
+}
+
+.table-cont-style {
+    pointer-events:none;
+    margin-left: 1em;
+    width: 34em;
+}
+
+.table-hover-label {
+    padding-top:8em;
+}
+
+// Accordion
+.accordion-style {
+    width: 590px;
+    height: auto;
+    padding-left: 2em;
+}
+
+.acc-container-header-expand {
+    height: auto;
+    padding-bottom: 1em;
+    border-bottom: solid 1px #bac1cd;
+    padding-top:1.3em;
+    padding-right: 2em;
+}
+
+// iconography
+.iconography-component-container {
+    width: auto;
+    border: solid 1px #bac1cd;
+    margin-bottom: 3em;
+    background-color: #f3f5f9;
+}
+
+.icon-label {
+    font-size: 12px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.17;
+    letter-spacing: 0.25px;
+    color: #222222;
+}
+
+
+
+
diff --git a/pgaweb/templates/pgaweb/base.html b/pgaweb/templates/pgaweb/base.html
index f974e18..95b8639 100755
--- a/pgaweb/templates/pgaweb/base.html
+++ b/pgaweb/templates/pgaweb/base.html
@@ -105,7 +105,7 @@
                         <div class="dropdown-menu" aria-labelledby="category-dropdown">
                             <a class="dropdown-item" href="{% url 'development_index' %}">Introduction</a>
                             <a class="dropdown-item" href="{% url 'development_resources' %}">Resources</a>
-                            <a class="dropdown-item" href="{% url 'styleguide_index' %}">Style Guide</a>
+                            <a class="dropdown-item" href="{% url 'styleguide_index' page='typography' %}">Style Guide</a>
                             <div class="dropdown-divider"></div>
                             <a class="dropdown-item" href="{% url 'development_team' %}">Team</a>
                         </div>
diff --git a/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html b/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html
new file mode 100644
index 0000000..9cb54d4
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/accordion/accordion.html
@@ -0,0 +1,21 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Accordion</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/accordion/sd_accordion.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/accordion/dark_accordion.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/accordion/hc_accordion.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/accordion/dark_accordion.html b/pgaweb/templates/pgaweb/styleguide/accordion/dark_accordion.html
new file mode 100644
index 0000000..81e5708
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/accordion/dark_accordion.html
@@ -0,0 +1,55 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="d-container-header">
+        {% load static %}
+        <img class="d-accordion-style"
+             src="{% static "img/style_guide/accordion_dark_default.png" %}"
+             alt="Default Accordion."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>“accordian-group
+            pg-el-12”<span class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>“badge”
+            <span class="code-attribute">data-toggle=</span>“collapse” <span
+                class="code-attribute">
+                data-target=</span>“#pgC_1035" <span class="code-attribute">aria-controls=</span>“pgC_1035”
+            <span class="code-attribute">aria-level=</span>“3" <span
+                class="code-attribute">role=</span>“heading”<span
+                class="code-tag">&gt;...&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">id=</span>“pgC_1035”
+            <span class="code-attribute">class=</span>“accordian-content
+            pg-el-12 collapse show”<span class="code-tag">&gt;
+                ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Expand</p>
+<div class="component-container">
+    <div class="d-acc-container-header-expand">
+        {% load static %}
+        <img class="d-accordion-style"
+             src="{% static "img/style_guide/accordion_dark_expand.png" %}"
+             alt="Expand Accordion."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>“accordian-group
+            pg-el-12”<span class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>“badge”
+            <span class="code-attribute">data-toggle=</span>“collapse” <span
+                class="code-attribute">data-target=</span>“#pgC_1035"
+            <span class="code-attribute">aria-controls=</span>“pgC_1035”
+            <span class="code-attribute">aria-level=</span>“3" <span
+                class="code-attribute">role=</span>“heading”<span
+                class="code-tag">&gt;...&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">id=</span>“pgC_1035”
+            <span class="code-attribute">class=</span>“accordian-content
+            pg-el-12 collapse show”<span class="code-tag">&gt;
+                ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/accordion/hc_accordion.html b/pgaweb/templates/pgaweb/styleguide/accordion/hc_accordion.html
new file mode 100644
index 0000000..aa481e2
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/accordion/hc_accordion.html
@@ -0,0 +1,55 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="hc-container-header">
+        {% load static %}
+        <img class="hc-accordion-style"
+             src="{% static "img/style_guide/accordion_hc_default.png" %}"
+             alt="Default Accordion."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>“accordian-group
+            pg-el-12”<span class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>“badge”
+            <span class="code-attribute">data-toggle=</span>“collapse” <span
+                class="code-attribute">
+                data-target=</span>“#pgC_1035" <span class="code-attribute">aria-controls=</span>“pgC_1035”
+            <span class="code-attribute">aria-level=</span>“3" <span
+                class="code-attribute">role=</span>“heading”<span
+                class="code-tag">&gt;...&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">id=</span>“pgC_1035”
+            <span class="code-attribute">class=</span>“accordian-content
+            pg-el-12 collapse show”<span class="code-tag">&gt;
+                ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Expand</p>
+<div class="component-container">
+    <div class="hc-acc-container-header-expand">
+        {% load static %}
+        <img class="hc-accordion-style"
+             src="{% static "img/style_guide/accordion_hc_expand.png" %}"
+             alt="Expand Accordion."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>“accordian-group
+            pg-el-12”<span class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>“badge”
+            <span class="code-attribute">data-toggle=</span>“collapse” <span
+                class="code-attribute">data-target=</span>“#pgC_1035"
+            <span class="code-attribute">aria-controls=</span>“pgC_1035”
+            <span class="code-attribute">aria-level=</span>“3" <span
+                class="code-attribute">role=</span>“heading”<span
+                class="code-tag">&gt;...&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">id=</span>“pgC_1035”
+            <span class="code-attribute">class=</span>“accordian-content
+            pg-el-12 collapse show”<span class="code-tag">&gt;
+                ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/accordion/sd_accordion.html b/pgaweb/templates/pgaweb/styleguide/accordion/sd_accordion.html
new file mode 100644
index 0000000..98c6de6
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/accordion/sd_accordion.html
@@ -0,0 +1,55 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="container-header">
+        {% load static %}
+        <img class="accordion-style"
+             src="{% static "img/style_guide/accordion_default.png" %}"
+             alt="Default Accordion."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>“accordian-group
+            pg-el-12”<span class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>“badge”
+            <span class="code-attribute">data-toggle=</span>“collapse” <span
+                class="code-attribute">
+                data-target=</span>“#pgC_1035" <span class="code-attribute">aria-controls=</span>“pgC_1035”
+            <span class="code-attribute">aria-level=</span>“3" <span
+                class="code-attribute">role=</span>“heading”<span
+                class="code-tag">&gt;...&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">id=</span>“pgC_1035”
+            <span class="code-attribute">class=</span>“accordian-content
+            pg-el-12 collapse show”<span class="code-tag">&gt;
+                ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Expand</p>
+<div class="component-container">
+    <div class="acc-container-header-expand">
+        {% load static %}
+        <img class="accordion-style"
+             src="{% static "img/style_guide/accordion_expand.png" %}"
+             alt="Expand Accordion."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>“accordian-group
+            pg-el-12”<span class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>“badge”
+            <span class="code-attribute">data-toggle=</span>“collapse” <span
+                class="code-attribute">data-target=</span>“#pgC_1035"
+            <span class="code-attribute">aria-controls=</span>“pgC_1035”
+            <span class="code-attribute">aria-level=</span>“3" <span
+                class="code-attribute">role=</span>“heading”<span
+                class="code-tag">&gt;...&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">id=</span>“pgC_1035”
+            <span class="code-attribute">class=</span>“accordian-content
+            pg-el-12 collapse show”<span class="code-tag">&gt;
+                ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/alert.html b/pgaweb/templates/pgaweb/styleguide/alert/alert.html
new file mode 100644
index 0000000..2d3d4f0
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/alert/alert.html
@@ -0,0 +1,21 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Alerts</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/alert/sd_alert.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/alert/dark_alert.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/alert/hc_alert.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/dark_alert.html b/pgaweb/templates/pgaweb/styleguide/alert/dark_alert.html
new file mode 100644
index 0000000..e95492e
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/alert/dark_alert.html
@@ -0,0 +1,100 @@
+<p class="color-header">Success</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <div class="d-flex px-2 py-1 d-bg-success-light border d-border-success rounded alert-style-cont">
+            <div class="pr-2">
+                <i class="fa fa-check fa-lg d-text-success pg-bg-status-icon"
+                   aria-hidden="true" role="img"></i>
+            </div>
+            <div class="d-alert-text-body mx-auto pg-bg-status-text">
+                Successfully completed.
+            </div>
+        </div>
+    </div>
+    <div class="alrt-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"d-flex
+            px-2 py-1 bg-success-light border border-success rounded"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"pr-2"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;i</span> <span
+                class="code-attribute">class=</span>"fa fa-check fa-lg
+            text-success pg-bg-status-icon"
+            <span class="code-attribute">aria-hidden=</span>"true" <span
+                class="code-attribute">role=</span>"img"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"text-body
+            mx-auto pg-bg-status-text"<span class="code-tag">&gt;
+                    ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+<p class="color-header">Error</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <div class="d-flex px-2 py-1 d-bg-danger-light border d-border-danger rounded alert-style-cont">
+            <div class="pr-2">
+                <i class="fa fa-exclamation-triangle d-text-danger"
+                   aria-hidden="true" role="img"></i>
+            </div>
+            <div class="d-alert-text-body mx-auto pg-bg-status-text">Failed
+                (exit code:1)
+            </div>
+        </div>
+    </div>
+    <div class="alrt-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"d-flex
+            px-2 py-1 bg-danger-light border border-danger rounded"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"pr-2"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;i</span> <span
+                class="code-attribute">class=</span>"fa fa-exclamation-triangle
+            text-danger"
+            <span class="code-attribute">aria-hidden=</span>"true" <span
+                class="code-attribute">role=</span>"img"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"text-body
+            mx-auto pg-bg-status-text"<span class="code-tag">&gt;
+                    ... &lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Info</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <div class="d-flex px-2 py-1 d-bg-info-light border d-border-info rounded alert-style-cont">
+            <div class="pr-2">
+                <i class="fa fa-info-circle d-text-info" aria-hidden="true"
+                   role="img"></i>
+            </div>
+            <div class="d-alert-text-body mx-auto pg-bg-status-text">Lorem ipsum
+                ea proident commodo ad mollit
+            </div>
+        </div>
+    </div>
+    <div class="alrt-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"d-flex
+            px-2 py-1 bg-info-light border border-danger rounded"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"pr-2"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;i</span> <span
+                class="code-attribute">class=</span>"fa fa-exclamation-triangle
+            text-info"
+            <span class="code-attribute">aria-hidden=</span>"true" <span
+                class="code-attribute">role=</span>"img"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"text-body
+            mx-auto pg-bg-status-text"<span class="code-tag">&gt;
+                    ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/hc_alert.html b/pgaweb/templates/pgaweb/styleguide/alert/hc_alert.html
new file mode 100644
index 0000000..5295a35
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/alert/hc_alert.html
@@ -0,0 +1,100 @@
+<p class="color-header">Success</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <div class="d-flex px-2 py-1 hc-bg-success-light border d-border-success rounded alert-style-cont">
+            <div class="pr-2">
+                <i class="fa fa-check fa-lg hc-text-success pg-bg-status-icon"
+                   aria-hidden="true" role="img"></i>
+            </div>
+            <div class="hc-alert-text-body mx-auto pg-bg-status-text">
+                Successfully completed.
+            </div>
+        </div>
+    </div>
+    <div class="alrt-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"d-flex
+            px-2 py-1 bg-success-light border border-success rounded"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"pr-2"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;i</span> <span
+                class="code-attribute">class=</span>"fa fa-check fa-lg
+            text-success pg-bg-status-icon"
+            <span class="code-attribute">aria-hidden=</span>"true" <span
+                class="code-attribute">role=</span>"img"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"text-body
+            mx-auto pg-bg-status-text"<span class="code-tag">&gt;
+                    ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+<p class="color-header">Error</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <div class="d-flex px-2 py-1 hc-bg-danger-light border d-border-danger rounded alert-style-cont">
+            <div class="pr-2">
+                <i class="fa fa-exclamation-triangle hc-text-danger"
+                   aria-hidden="true" role="img"></i>
+            </div>
+            <div class="hc-alert-text-body mx-auto pg-bg-status-text">Failed
+                (exit code:1)
+            </div>
+        </div>
+    </div>
+    <div class="alrt-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"d-flex
+            px-2 py-1 bg-danger-light border border-danger rounded"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"pr-2"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;i</span> <span
+                class="code-attribute">class=</span>"fa fa-exclamation-triangle
+            text-danger"
+            <span class="code-attribute">aria-hidden=</span>"true" <span
+                class="code-attribute">role=</span>"img"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"text-body
+            mx-auto pg-bg-status-text"<span class="code-tag">&gt;
+                    ... &lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Info</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <div class="d-flex px-2 py-1 hc-bg-info-light border d-border-info rounded alert-style-cont">
+            <div class="pr-2">
+                <i class="fa fa-info-circle hc-text-info" aria-hidden="true"
+                   role="img"></i>
+            </div>
+            <div class="hc-alert-text-body mx-auto pg-bg-status-text">Lorem
+                ipsum ea proident commodo ad mollit
+            </div>
+        </div>
+    </div>
+    <div class="alrt-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"d-flex
+            px-2 py-1 bg-info-light border border-danger rounded"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"pr-2"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;i</span> <span
+                class="code-attribute">class=</span>"fa fa-exclamation-triangle
+            text-info"
+            <span class="code-attribute">aria-hidden=</span>"true" <span
+                class="code-attribute">role=</span>"img"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"text-body
+            mx-auto pg-bg-status-text"<span class="code-tag">&gt;
+                    ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/sd_alert.html b/pgaweb/templates/pgaweb/styleguide/alert/sd_alert.html
new file mode 100644
index 0000000..ff4a256
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/alert/sd_alert.html
@@ -0,0 +1,100 @@
+<p class="color-header">Success</p>
+<div class="component-container">
+    <div class="container-header">
+        <div class="d-flex px-2 py-1 bg-success-light border border-success rounded alert-style-cont">
+            <div class="pr-2">
+                <i class="fa fa-check fa-lg text-success pg-bg-status-icon"
+                   aria-hidden="true" role="img"></i>
+            </div>
+            <div class="text-body mx-auto pg-bg-status-text">Successfully
+                completed.
+            </div>
+        </div>
+    </div>
+    <div class="alrt-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"d-flex
+            px-2 py-1 bg-success-light border border-success rounded"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"pr-2"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;i</span> <span
+                class="code-attribute">class=</span>"fa fa-check fa-lg
+            text-success pg-bg-status-icon"
+            <span class="code-attribute">aria-hidden=</span>"true" <span
+                class="code-attribute">role=</span>"img"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"text-body
+            mx-auto pg-bg-status-text"<span class="code-tag">&gt;
+                    ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+<p class="color-header">Error</p>
+<div class="component-container">
+    <div class="container-header">
+        <div class="d-flex px-2 py-1 bg-danger-light border border-danger rounded alert-style-cont">
+            <div class="pr-2">
+                <i class="fa fa-exclamation-triangle text-danger"
+                   aria-hidden="true" role="img"></i>
+            </div>
+            <div class="text-body mx-auto pg-bg-status-text">Failed (exit
+                code:1)
+            </div>
+        </div>
+    </div>
+    <div class="alrt-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"d-flex
+            px-2 py-1 bg-danger-light border border-danger rounded"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"pr-2"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;i</span> <span
+                class="code-attribute">class=</span>"fa fa-exclamation-triangle
+            text-danger"
+            <span class="code-attribute">aria-hidden=</span>"true" <span
+                class="code-attribute">role=</span>"img"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"text-body
+            mx-auto pg-bg-status-text"<span class="code-tag">&gt;
+                    ... &lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Info</p>
+<div class="component-container">
+    <div class="container-header">
+        <div class="d-flex px-2 py-1 bg-info-light border border-info rounded alert-style-cont">
+            <div class="pr-2">
+                <i class="fa fa-info-circle text-info" aria-hidden="true"
+                   role="img"></i>
+            </div>
+            <div class="text-body mx-auto pg-bg-status-text">Lorem ipsum ea
+                proident commodo ad mollit
+            </div>
+        </div>
+    </div>
+    <div class="alrt-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"d-flex
+            px-2 py-1 bg-info-light border border-danger rounded"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"pr-2"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;i</span> <span
+                class="code-attribute">class=</span>"fa fa-exclamation-triangle
+            text-info"
+            <span class="code-attribute">aria-hidden=</span>"true" <span
+                class="code-attribute">role=</span>"img"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;/div&gt;
+            <br/>&emsp;&lt;div</span> <span class="code-attribute">class=</span>"text-body
+            mx-auto pg-bg-status-text"<span class="code-tag">&gt;
+                    ...&lt;/div&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/button/button.html b/pgaweb/templates/pgaweb/styleguide/button/button.html
new file mode 100644
index 0000000..5be1a06
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/button/button.html
@@ -0,0 +1,21 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Buttons</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/button/sd_button.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/button/dark_button.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/button/hc_button.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/button/dark_button.html b/pgaweb/templates/pgaweb/styleguide/button/dark_button.html
new file mode 100644
index 0000000..e734ee3
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/button/dark_button.html
@@ -0,0 +1,284 @@
+{% load static %}
+<p class="color-header">Primary Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Default
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn d-btn-primary d-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button d-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;button</span> <span
+                        class="code-attribute">class=</span>"ajs-button btn btn-
+                    primary fa fa-lg fa-save
+                    pg-alertify-button"<span class="code-tag">&gt;Save&lt;/button&gt;</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Hover
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn d-btn-primary-hover d-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button d-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-primary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Pressed
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn d-btn-primary-pressed d-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button d-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">.btn-primary:not(:disabled):not
+                (.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Disabled
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn d-btn-primary-disabled d-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button d-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
+
+<p class="color-header">Secondary Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Default
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn d-btn-secondary d-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button d-icon-secondary-color"></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;button</span> <span
+                        class="code-attribute">class=</span>"ajs-button btn btn-
+                    secondary fa fa-lg fa-times
+                    pg-alertify-button"<span class="code-tag">&gt;Save&lt;/button&gt;</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Hover
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn d-btn-secondary-hover d-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button d-icon-secondary-color"></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Pressed
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn d-btn-secondary-pressed d-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button d-icon-secondary-color-hover "></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap class</span>
+                    <span class="code-attribute"> .btn-secondary:not
+                (:disabled):not(.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Disabled
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn d-btn-secondary-disabled d-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button d-icon-secondary-color"></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
+
+
+<p class="color-header">Icon Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Default
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn d-secondary-btn d-btn-icon"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="d-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"wcFrameButton
+                    pg-toolbar-btn btn-secondary"<span class="code-attribute">
+                title=</span>"Query Tool" <span class="code-attribute">aria-label=
+                </span>"Query Tool"&gt;
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"pg-font-icon
+                    icon-query-tool"<span class="code-tag">&gt;&lt;/div&gt;
+                &lt;/div&gt;</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Hover
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn d-secondary-btn d-btn-icon-hover"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="d-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Pressed
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn d-secondary-btn d-btn-icon-pressed"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="d-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Disabled
+            </td>
+            <td class="d-btn-style d-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn d-secondary-btn d-btn-icon-disabled"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="d-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/button/hc_button.html b/pgaweb/templates/pgaweb/styleguide/button/hc_button.html
new file mode 100644
index 0000000..fc4b433
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/button/hc_button.html
@@ -0,0 +1,284 @@
+{% load static %}
+<p class="color-header">Primary Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Default
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn hc-btn-primary hc-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button hc-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;button</span> <span
+                        class="code-attribute">class=</span>"ajs-button btn btn-
+                    primary fa fa-lg fa-save
+                    pg-alertify-button"<span class="code-tag">&gt;Save&lt;/button&gt;</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Hover
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn hc-btn-primary-hover hc-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button hc-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-primary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Pressed
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn hc-btn-primary-pressed hc-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button hc-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">.btn-primary:not(:disabled):not
+                (.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Disabled
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn hc-btn-primary-disabled hc-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button hc-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
+
+<p class="color-header">Secondary Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Default
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn hc-btn-secondary hc-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button hc-icon-secondary-color"></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;button</span> <span
+                        class="code-attribute">class=</span>"ajs-button btn btn-
+                    secondary fa fa-lg fa-times
+                    pg-alertify-button"<span class="code-tag">&gt;Save&lt;/button&gt;</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Hover
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn hc-btn-secondary-hover hc-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button hc-icon-hover-color"></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Pressed
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn hc-btn-secondary-pressed hc-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button hc-icon-secondary-color-hover "></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap class</span>
+                    <span class="code-attribute"> .btn-secondary:not
+                (:disabled):not(.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Disabled
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn hc-btn-secondary-disabled hc-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button hc-icon-disabled-color"></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
+
+
+<p class="color-header">Icon Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Default
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn hc-secondary-btn hc-btn-icon"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="hc-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"wcFrameButton
+                    pg-toolbar-btn btn-secondary"<span class="code-attribute">
+                title=</span>"Query Tool" <span class="code-attribute">aria-label=
+                </span>"Query Tool"&gt;
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"pg-font-icon
+                    icon-query-tool"<span class="code-tag">&gt;&lt;/div&gt;
+                &lt;/div&gt;</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Hover
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn hc-secondary-btn hc-btn-icon-hover"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="hc-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Pressed
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn hc-secondary-btn hc-btn-icon-pressed"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="hc-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Disabled
+            </td>
+            <td class="hc-btn-style hc-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn hc-secondary-btn hc-btn-icon-disabled"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="hc-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/button/sd_button.html b/pgaweb/templates/pgaweb/styleguide/button/sd_button.html
new file mode 100644
index 0000000..c381369
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/button/sd_button.html
@@ -0,0 +1,284 @@
+{% load static %}
+<p class="color-header">Primary Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Default
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn sd-btn-primary sd-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button sd-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;button</span> <span
+                        class="code-attribute">class=</span>"ajs-button btn btn-
+                    primary fa fa-lg fa-save
+                    pg-alertify-button"<span class="code-tag">&gt;Save&lt;/button&gt;</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Hover
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn sd-btn-primary-hover sd-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button sd-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-primary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Pressed
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn sd-btn-primary-pressed sd-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button sd-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">.btn-primary:not(:disabled):not
+                (.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Disabled
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn sd-btn-primary-disabled sd-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-save pg-alertify-button sd-icon-color"></span>&nbsp;Save
+                    </button>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
+
+<p class="color-header">Secondary Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Default
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn sd-btn-secondary sd-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button sd-icon-secondary-color"></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;button</span> <span
+                        class="code-attribute">class=</span>"ajs-button btn btn-
+                    secondary fa fa-lg fa-times
+                    pg-alertify-button"<span class="code-tag">&gt;Save&lt;/button&gt;</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Hover
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn sd-btn-secondary-hover sd-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button sd-icon-secondary-color"></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Pressed
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn sd-btn-secondary-pressed sd-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button sd-icon-secondary-color "></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap class</span>
+                    <span class="code-attribute"> .btn-secondary:not
+                (:disabled):not(.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Disabled
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <button tabindex="0" type="save"
+                            class="btn sd-btn-secondary-disabled sd-secondary-btn mx-1"
+                            title="Save this object."><span
+                            class="fa fa-times pg-alertify-button sd-icon-secondary-color"></span>&nbsp;Cancel
+                    </button>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-value">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
+
+
+<p class="color-header">Icon Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Default
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn sd-secondary-btn sd-btn-icon"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="sd-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"wcFrameButton
+                    pg-toolbar-btn btn-secondary"<span class="code-attribute">
+                    title=</span>"Query Tool" <span class="code-attribute">aria-label=
+                    </span>"Query Tool"&gt;
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"pg-font-icon
+                    icon-query-tool"<span class="code-tag">&gt;&lt;/div&gt;
+                    &lt;/div&gt;</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Hover
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn sd-secondary-btn sd-btn-icon-hover"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="sd-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Pressed
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn sd-secondary-btn sd-btn-icon-pressed"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="sd-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Disabled
+            </td>
+            <td class="sd-btn-style sd-btn-block">
+                <div>
+                    <div class="wcFrameButton pg-toolbar-btn sd-secondary-btn sd-btn-icon-disabled"
+                         title="Query Tool" aria-label="Query Tool">
+                        <img class="sd-btn-icon-style"
+                             src="{% static "img/query_tool.svg" %}"/>
+                    </div>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html b/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
new file mode 100644
index 0000000..c1ee04e
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
@@ -0,0 +1,21 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Checkbox</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/checkbox/sd_checkbox.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/checkbox/dark_checkbox.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/checkbox/hc_checkbox.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/checkbox/dark_checkbox.html b/pgaweb/templates/pgaweb/styleguide/checkbox/dark_checkbox.html
new file mode 100644
index 0000000..10086e4
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/checkbox/dark_checkbox.html
@@ -0,0 +1,123 @@
+{% load static %}
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Default
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <div class="d-checkbox-cont">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input d-checkbox-default"
+                               name="connect_now">
+                        <label class="custom-control-label d-chk-style"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;button</span> <span
+                        class="code-attribute">class=</span>"btn btn-secondary
+                    btn-checkbox"<span class="code-tag">&gt;</span>
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"custom-control
+                    custom-checkbox"<span class="code-tag">&gt;
+                    ...&lt;/div&gt;
+                &lt;/button&gt;
+                </span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Hover
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <div class="d-checkbox-hover-bg">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input d-checkbox-default"
+                               name="connect_now">
+                        <label class="custom-control-label d-chk-style"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Pressed
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <div class="d-checkbox-pressed-bg">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input d-checkbox-default"
+                               name="connect_now">
+                        <label class="custom-control-label d-chk-style"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:not(:disabled)
+                :not(.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Selected
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <div class="d-checkbox-selected-bg">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input d-checkbox-default"
+                               name="connect_now" checked="checked">
+                        <label class="custom-control-label d-chk-style"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">checked</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Disabled
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <div class="d-checkbox-disabled-bg">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input d-checkbox-default"
+                               name="connect_now" checked="checked">
+                        <label class="custom-control-label d-chk-style"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/checkbox/hc_checkbox.html b/pgaweb/templates/pgaweb/styleguide/checkbox/hc_checkbox.html
new file mode 100644
index 0000000..9094740
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/checkbox/hc_checkbox.html
@@ -0,0 +1,100 @@
+{% load static %}
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Default
+            </td>
+            <td class="hc-btn-style hc-checkbox-block">
+                <div class="hc-checkbox-cont">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input hc-checkbox-default"
+                               name="connect_now">
+                        <label class="custom-control-label hc-chk-style"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;button</span> <span
+                        class="code-attribute">class=</span>"btn btn-secondary
+                    btn-checkbox"<span class="code-tag">&gt;</span>
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"custom-control
+                    custom-checkbox"<span class="code-tag">&gt;
+                    ...&lt;/div&gt;
+                &lt;/button&gt;
+                </span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Hover
+            </td>
+            <td class="hc-btn-style hc-checkbox-block">
+                <div class="hc-checkbox-hover-bg">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input hc-checkbox-default"
+                               name="connect_now">
+                        <label class="custom-control-label hc-chk-style"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Selected
+            </td>
+            <td class="hc-btn-style hc-checkbox-block">
+                <div class="hc-checkbox-selected-bg">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input hc-checkbox-default"
+                               name="connect_now" checked="checked">
+                        <label class="custom-control-label hc-chk-style"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">checked</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Disabled
+            </td>
+            <td class="hc-btn-style hc-checkbox-block">
+                <div class="hc-checkbox-disabled-bg">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input hc-checkbox-default"
+                               name="connect_now" checked="checked">
+                        <label class="custom-control-label hc-chk-style"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/checkbox/sd_checkbox.html b/pgaweb/templates/pgaweb/styleguide/checkbox/sd_checkbox.html
new file mode 100644
index 0000000..bc233b2
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/checkbox/sd_checkbox.html
@@ -0,0 +1,123 @@
+{% load static %}
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Default
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <div class="sd-checkbox-cont">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input sd-checkbox-default"
+                               name="connect_now">
+                        <label class="custom-control-label"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;button</span> <span
+                        class="code-attribute">class=</span>"btn btn-secondary
+                    btn-checkbox"<span class="code-tag">&gt;</span>
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"custom-control
+                    custom-checkbox"<span class="code-tag">&gt;
+                    ...&lt;/div&gt;
+                &lt;/button&gt;
+                </span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Hover
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <div class="sd-checkbox-hover-bg">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input sd-checkbox-default"
+                               name="connect_now">
+                        <label class="custom-control-label"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Pressed
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <div class="sd-checkbox-pressed-bg">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input sd-checkbox-default"
+                               name="connect_now">
+                        <label class="custom-control-label"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:not(:disabled)
+                :not(.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Selected
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <div class="sd-checkbox-selected-bg">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input sd-checkbox-default"
+                               name="connect_now" checked="checked">
+                        <label class="custom-control-label"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">checked</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Disabled
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <div class="sd-checkbox-disabled-bg">
+                    <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                        <input type="checkbox"
+                               class="custom-control-input sd-checkbox-default"
+                               name="connect_now" checked="checked">
+                        <label class="custom-control-label"><span>Checkbox</span></label>
+                    </div>
+                </div>
+
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html b/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
new file mode 100644
index 0000000..cc317e9
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
@@ -0,0 +1,32 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Color Palette</h1>
+    <p>
+        pgAdmin uses standard sets of colors for consistency and style. We are also
+        committed to complying with AA standard contrast ratios (AAA for the high contrast theme).
+        To do this, choose primary, secondary, and tertiary colors that
+        support usability by ensuring sufficient color contrast between elements
+        so that people with low vision can see and use the interface.
+    </p>
+    <p>
+        pgAdmin uses the Bootstrap framework for responsive layout and has
+        customised it using CSS based on specific needs.
+    </p>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content" id="sdTheme"
+             role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/color_palette/sd_color_palette.html" %}
+        </div>
+        <div class="tab-pane fade theme-content" id="drkTheme" role="tabpanel"
+             aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/color_palette/dark_color_palette.html" %}
+        </div>
+        <div class="tab-pane fade theme-content" id="hcTheme" role="tabpanel"
+             aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/color_palette/hc_color_palette.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/color_palette/dark_color_palette.html b/pgaweb/templates/pgaweb/styleguide/color_palette/dark_color_palette.html
new file mode 100644
index 0000000..530e1c9
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/color_palette/dark_color_palette.html
@@ -0,0 +1,189 @@
+<!--Primary color -->
+<p class="color-header">Primary Colors</p>
+<p>These are main colors of tool. Used for header, selections, primary buttons
+    etc.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block d-primary"></div>
+        <span class="color-name">primary</span><br/>
+        <span class="color-code">#234D6E</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-primary-dark"></div>
+        <span class="color-name">primary-dark</span><br/>
+        <span class="color-code">#15354F</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-primary-light"></div>
+        <span class="color-name">primary-light</span><br/>
+        <span class="color-code">#536270</span>
+    </div>
+</div>
+
+<!--Secondary color-->
+<p class="color-header">Secondary Colors</p>
+<p>Alert colors</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block d-success"></div>
+        <span class="color-name">success</span><br/>
+        <span class="color-code">#1A522B</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-success-light"></div>
+        <span class="color-name">success-light</span><br/>
+        <span class="color-code">#5A7863</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-warning-clr"></div>
+        <span class="color-name">warning</span><br/>
+        <span class="color-code">#EEA236</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-warning-light"></div>
+        <span class="color-name">warning-light</span><br/>
+        <span class="color-code">#B18D5A</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-danger"></div>
+        <span class="color-name">danger</span><br/>
+        <span class="color-code">#DA6758</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-danger-light"></div>
+        <span class="color-name">danger-light</span><br/>
+        <span class="color-code">#914649</span>
+    </div>
+</div>
+
+<!--Severity status color-->
+<p>Severity Status Colors</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block d-explain-sev-2"></div>
+        <span class="color-name">explain-sev-2</span><br/>
+        <span class="color-code">#DED17E</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-explain-sev-3"></div>
+        <span class="color-name">explain-sev-3</span><br/>
+        <span class="color-code">#C2812B</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-explain-sev-4"></div>
+        <span class="color-name">explain-sev-4</span><br/>
+        <span class="color-code">#880000</span>
+    </div>
+</div>
+
+<!--Schema diff color-->
+<p>Schema Diff Colors.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block d-diff-row"></div>
+        <span class="color-name">diff-row</span><br/>
+        <span class="color-code">#807A48</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-source-row"></div>
+        <span class="color-name">source-row</span><br/>
+        <span class="color-code">#402025</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-target-row"></div>
+        <span class="color-name">target-row</span><br/>
+        <span class="color-code">#6B5438</span>
+    </div>
+</div>
+
+<!--Query editor color-->
+<p>Query Editor Colors.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block d-number"></div>
+        <span class="color-name">number</span><br/>
+        <span class="color-code">#7FCC5C</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-string"></div>
+        <span class="color-name">string</span><br/>
+        <span class="color-code">#E4E487</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-activeline"></div>
+        <span class="color-name">activeline</span><br/>
+        <span class="color-code">#50B0F0</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-keyword"></div>
+        <span class="color-name">keyword</span><br/>
+        <span class="color-code">#DB7C74</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-editor-fg"></div>
+        <span class="color-name">fg</span><br/>
+        <span class="color-code">#7DC9F1</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-editor-operator"></div>
+        <span class="color-name">editor-operator</span><br/>
+        <span class="color-code">#D6AAAA</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-foldmarker"></div>
+        <span class="color-name">foldmarker</span><br/>
+        <span class="color-code">#0000FF</span>
+    </div>
+</div>
+
+<!--Ternary color-->
+<p class="color-header">Tertiary Colors</p>
+<p>Used for text, background, lines, borders, icons.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block d-gray-dark"></div>
+        <span class="color-name">gray-dark</span><br/>
+        <span class="color-code">#212121</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-gray"></div>
+        <span class="color-name">gray</span><br/>
+        <span class="color-code">#2E2E2E</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-gray-light"></div>
+        <span class="color-name">gray-light</span><br/>
+        <span class="color-code">#303030</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-gra-lighter"></div>
+        <span class="color-name">gra-lighter</span><br/>
+        <span class="color-code">#424242</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-border-color"></div>
+        <span class="color-name">border-color</span><br/>
+        <span class="color-code">#4A4A4A</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-base-color"></div>
+        <span class="color-name">base-color</span><br/>
+        <span class="color-code">#DDE0E6</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-text-muted"></div>
+        <span class="color-name">text-muted</span><br/>
+        <span class="color-code">#6B6B6B</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block d-fg"></div>
+        <span class="color-name">fg</span><br/>
+        <span class="color-code">#D4D4D4</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/color_palette/hc_color_palette.html b/pgaweb/templates/pgaweb/styleguide/color_palette/hc_color_palette.html
new file mode 100644
index 0000000..febf8c9
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/color_palette/hc_color_palette.html
@@ -0,0 +1,174 @@
+<!--Primary color -->
+<p class="color-header">Primary Colors</p>
+<p>These are main colors of tool. Used for header, selections, primary buttons
+    etc.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block hc-primary"></div>
+        <span class="color-name">primary</span><br/>
+        <span class="color-code">#234D6E</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-primary-light"></div>
+        <span class="color-name">primary-light</span><br/>
+        <span class="color-code">#536270</span>
+    </div>
+</div>
+
+<!--Secondary color-->
+<p class="color-header">Secondary Colors</p>
+<p>Alert colors</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block hc-success"></div>
+        <span class="color-name">success</span><br/>
+        <span class="color-code">#1A522B</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-warning-clr"></div>
+        <span class="color-name">warning</span><br/>
+        <span class="color-code">#EEA236</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-danger"></div>
+        <span class="color-name">danger</span><br/>
+        <span class="color-code">#DA6758</span>
+    </div>
+</div>
+
+<!--Severity status color-->
+<p>Severity Status Colors</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block hc-explain-sev-2"></div>
+        <span class="color-name">explain-sev-2</span><br/>
+        <span class="color-code">#DED17E</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-explain-sev-3"></div>
+        <span class="color-name">explain-sev-3</span><br/>
+        <span class="color-code">#C2812B</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-explain-sev-4"></div>
+        <span class="color-name">explain-sev-4</span><br/>
+        <span class="color-code">#880000</span>
+    </div>
+</div>
+
+<!--Schema diff color-->
+<p>Schema Diff Colors.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block hc-diff-row"></div>
+        <span class="color-name">diff-row</span><br/>
+        <span class="color-code">#807A48</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-source-row"></div>
+        <span class="color-name">source-row</span><br/>
+        <span class="color-code">#402025</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-target-row"></div>
+        <span class="color-name">target-row</span><br/>
+        <span class="color-code">#6B5438</span>
+    </div>
+</div>
+
+<!--Query editor color-->
+<p>Query Editor Colors.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block hc-number"></div>
+        <span class="color-name">number</span><br/>
+        <span class="color-code">#7FCC5C</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-string"></div>
+        <span class="color-name">string</span><br/>
+        <span class="color-code">#E4E487</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-variabe"></div>
+        <span class="color-name">variabe</span><br/>
+        <span class="color-code">#7DC9F1</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-builtin"></div>
+        <span class="color-name">builtin</span><br/>
+        <span class="color-code">#B394FC</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-comment"></div>
+        <span class="color-name">comment</span><br/>
+        <span class="color-code">#FFAD65</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-bracket"></div>
+        <span class="color-name">bracket</span><br/>
+        <span class="color-code">#D6AAAA</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-activeline"></div>
+        <span class="color-name">activeline</span><br/>
+        <span class="color-code">#50B0F0</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-keyword"></div>
+        <span class="color-name">keyword</span><br/>
+        <span class="color-code">#F8845F</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-foldmarker"></div>
+        <span class="color-name">foldmarker</span><br/>
+        <span class="color-code">#FFFFFF</span>
+    </div>
+</div>
+
+<!--Ternary color-->
+<p class="color-header">Tertiary Colors</p>
+<p>Used for text, background, lines, borders, icons.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block hc-gray-dark"></div>
+        <span class="color-name">gray-dark</span><br/>
+        <span class="color-code">#010B15</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-gray"></div>
+        <span class="color-name">gray</span><br/>
+        <span class="color-code">#1F2932</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-gray-light"></div>
+        <span class="color-name">gray-light</span><br/>
+        <span class="color-code">#2D3A48</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-gra-lighter"></div>
+        <span class="color-name">gra-lighter</span><br/>
+        <span class="color-code">#8B9CAD</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-border-color"></div>
+        <span class="color-name">border-color</span><br/>
+        <span class="color-code">#A6B7C8</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-base-color"></div>
+        <span class="color-name">base-color</span><br/>
+        <span class="color-code">#C9D0D7</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block hc-white"></div>
+        <span class="color-name">white</span><br/>
+        <span class="color-code">#FFFFFF</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/color_palette/sd_color_palette.html b/pgaweb/templates/pgaweb/styleguide/color_palette/sd_color_palette.html
new file mode 100644
index 0000000..8c5d1e0
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/color_palette/sd_color_palette.html
@@ -0,0 +1,199 @@
+<!--Primary color -->
+<p class="color-header">Primary Colors</p>
+<p>These are main colors of tool. Used for header, selections, primary buttons
+    etc.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block primary"></div>
+        <span class="color-name">primary</span><br/>
+        <span class="color-code">#326690</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block primary-dark"></div>
+        <span class="color-name">primary-dark</span><br/>
+        <span class="color-code">#295C85</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block primary-light"></div>
+        <span class="color-name">primary-light</span><br/>
+        <span class="color-code">#D6EFFC</span>
+    </div>
+</div>
+
+<!--Secondary color-->
+<p class="color-header">Secondary Colors</p>
+<p>Alert colors</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block success"></div>
+        <span class="color-name">success</span><br/>
+        <span class="color-code">#43A047</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block success-light"></div>
+        <span class="color-name">success-light</span><br/>
+        <span class="color-code">#ddf1de</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block warning-clr"></div>
+        <span class="color-name">warning</span><br/>
+        <span class="color-code">#EEA236</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block warning-light"></div>
+        <span class="color-name">warning-light</span><br/>
+        <span class="color-code">#FCE5C5</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block danger"></div>
+        <span class="color-name">danger</span><br/>
+        <span class="color-code">#E53935</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block danger-light"></div>
+        <span class="color-name">danger-light</span><br/>
+        <span class="color-code">#F39999</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block danger-lighter"></div>
+        <span class="color-name">danger-lighter</span><br/>
+        <span class="color-code">#faecec</span>
+    </div>
+</div>
+
+<!--Severity status color-->
+<p>Severity Status Colors</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block explain-sev-2"></div>
+        <span class="color-name">explain-sev-2</span><br/>
+        <span class="color-code">#FFEE88</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block explain-sev-3"></div>
+        <span class="color-name">explain-sev-3</span><br/>
+        <span class="color-code">#EE8800</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block explain-sev-4"></div>
+        <span class="color-name">explain-sev-4</span><br/>
+        <span class="color-code">#880000</span>
+    </div>
+</div>
+
+<!--Schema diff color-->
+<p>Schema Diff Colors.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block diff-row"></div>
+        <span class="color-name">diff-row</span><br/>
+        <span class="color-code">#FFF9C4</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block source-row"></div>
+        <span class="color-name">source-row</span><br/>
+        <span class="color-code">#FFEBEE</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block target-row"></div>
+        <span class="color-name">target-row</span><br/>
+        <span class="color-code">#FBE3BF</span>
+    </div>
+</div>
+
+<!--Query editor color-->
+<p>Query Editor Colors.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block number"></div>
+        <span class="color-name">number</span><br/>
+        <span class="color-code">#996644</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block string"></div>
+        <span class="color-name">string</span><br/>
+        <span class="color-code">#AA1111</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block variabe"></div>
+        <span class="color-name">variabe</span><br/>
+        <span class="color-code">#0055AA</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block builtin"></div>
+        <span class="color-name">builtin</span><br/>
+        <span class="color-code">#3300AA</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block comment"></div>
+        <span class="color-name">comment</span><br/>
+        <span class="color-code">#AA5500</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block bracket"></div>
+        <span class="color-name">bracket</span><br/>
+        <span class="color-code">#999977</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block activeline"></div>
+        <span class="color-name">activeline</span><br/>
+        <span class="color-code">#50B0F0</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block keyword"></div>
+        <span class="color-name">keyword</span><br/>
+        <span class="color-code">#990088</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block foldmarker"></div>
+        <span class="color-name">foldmarker</span><br/>
+        <span class="color-code">#0000FF</span>
+    </div>
+</div>
+
+<!--Ternary color-->
+<p class="color-header">Tertiary Colors</p>
+<p>Used for text, background, lines, borders, icons.</p>
+<!-- Create row for each content in color palette UX design-->
+<div class="color-row">
+    <div class="color-container">
+        <div class="color-block fg"></div>
+        <span class="color-name">fg</span><br/>
+        <span class="color-code">#222222</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block ternary"></div>
+        <span class="color-name">ternary</span><br/>
+        <span class="color-code">#5B6D7C</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block gray-dark"></div>
+        <span class="color-name">gray-dark</span><br/>
+        <span class="color-code">#848EA0</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block gray"></div>
+        <span class="color-name">gray</span><br/>
+        <span class="color-code">#BAC1CD</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block border-color"></div>
+        <span class="color-name">border-color</span><br/>
+        <span class="color-code">#DDE0E6</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block gray-light"></div>
+        <span class="color-name">gray-light</span><br/>
+        <span class="color-code">#EBEEF3</span>
+    </div>
+    <div class="color-container">
+        <div class="color-block gra-lighter"></div>
+        <span class="color-name">gra-lighter</span><br/>
+        <span class="color-code">#F3F5F9</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/dark_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdown/dark_dropdown.html
new file mode 100644
index 0000000..89f4c56
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/dropdown/dark_dropdown.html
@@ -0,0 +1,88 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <label class="d-input-label">Label</label>
+        {% load static %}
+        <img class="dd_default"
+             src="{% static "img/style_guide/dd_d_default.png" %}"
+             alt="Default Dropdown."/>
+    </div>
+    <div class="container-body dd-container-body">
+        <div class="code">
+            <span class="code-attribute">color:</span> <span class="code-value">#99999;</span><br/>
+            <span class="code-attribute">background:</span> <span
+                class="code-value">#FFFFFF;</span><br/>
+            <span class="code-attribute">border:</span> <span
+                class="code-value">1px solid #DDE0E6;</span><br/>
+            <span class="code-attribute">border-radius:</span> <span
+                class="code-value">4px;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Filled</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <label class="d-input-label">Label</label>
+        {% load static %}
+        <img class="dd_default"
+             src="{% static "img/style_guide/dd_d_filled.png" %}"
+             alt="Filled Dropdown."/>
+    </div>
+    <div class="container-body dd-container-filled">
+        <div class="code">
+            <span class="code-value">Handled by bootstrap class</span> <span
+                class="code-attribute">.select2-container--focus</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Expanded</p>
+<div class="component-container">
+    <div class="d-container-header-expand">
+        <div class="display-inline">
+            <label class="d-input-label">Label</label>
+        </div>
+        <div class="display-inline">
+            {% load static %}
+            <img class="dd_expand"
+                 src="{% static "img/style_guide/dd_d_expand.png" %}"
+                 alt="Filled Dropdown."/>
+        </div>
+    </div>
+    <div class="container-body dd-container-body">
+        <div class="code">
+            <span class="code-value">.select2-container--default .select2-results__option[aria-selected=true] {</span>
+            <br/>&emsp;<span class="code-attribute">background-color:</span>
+            <span class="code-value">#d6effc;</span>
+            <br/>&emsp;<span class="code-attribute">color:</span> <span
+                class="code-value">#222;<br/>
+            }</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Filled Dropdown_Expanded</p>
+<div class="component-container">
+    <div class="d-container-header-expand">
+        <div class="display-inline">
+            <label class="d-input-label">Label</label>
+        </div>
+        <div class="display-inline">
+            {% load static %}
+            <img class="dd_expand"
+                 src="{% static "img/style_guide/dd_d_filled_expand.png" %}"
+                 alt="Filled Expanded Dropdown."/>
+        </div>
+    </div>
+    <div class="container-body dd-container-body">
+        <div class="code">
+            <span class="code-value">.select2-container--default .select2-results__option--highlighted {</span>
+            <br/>&emsp;<span class="code-attribute">background-color:</span>
+            <span class="code-value">#ebeef3 !important;</span>
+            <br/>&emsp;<span class="code-attribute">color:</span> <span
+                class="code-value">#222!important;<br/>
+            }</span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html
new file mode 100644
index 0000000..8ab6799
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html
@@ -0,0 +1,21 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Dropdowns</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/dropdown/sd_dropdown.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/dropdown/dark_dropdown.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/dropdown/hc_dropdown.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/hc_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdown/hc_dropdown.html
new file mode 100644
index 0000000..8396a24
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/dropdown/hc_dropdown.html
@@ -0,0 +1,88 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="hc-container-header">
+        <label class="hc-input-label">Label</label>
+        {% load static %}
+        <img class="dd_default"
+             src="{% static "img/style_guide/dd_hc_default.png" %}"
+             alt="Default Dropdown."/>
+    </div>
+    <div class="container-body dd-container-body">
+        <div class="code">
+            <span class="code-attribute">color:</span> <span class="code-value">#99999;</span><br/>
+            <span class="code-attribute">background:</span> <span
+                class="code-value">#FFFFFF;</span><br/>
+            <span class="code-attribute">border:</span> <span
+                class="code-value">1px solid #DDE0E6;</span><br/>
+            <span class="code-attribute">border-radius:</span> <span
+                class="code-value">4px;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Filled</p>
+<div class="component-container">
+    <div class="hc-container-header">
+        <label class="hc-input-label">Label</label>
+        {% load static %}
+        <img class="dd_default"
+             src="{% static "img/style_guide/dd_hc_filled.png" %}"
+             alt="Filled Dropdown."/>
+    </div>
+    <div class="container-body dd-container-filled">
+        <div class="code">
+            <span class="code-value">Handled by bootstrap class</span> <span
+                class="code-attribute">.select2-container--focus</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Expanded</p>
+<div class="component-container">
+    <div class="hc-container-header-expand">
+        <div class="display-inline">
+            <label class="hc-input-label">Label</label>
+        </div>
+        <div class="display-inline">
+            {% load static %}
+            <img class="dd_expand"
+                 src="{% static "img/style_guide/dd_hc_expand.png" %}"
+                 alt="Filled Dropdown."/>
+        </div>
+    </div>
+    <div class="container-body dd-container-body">
+        <div class="code">
+            <span class="code-value">.select2-container--default .select2-results__option[aria-selected=true] {</span>
+            <br/>&emsp;<span class="code-attribute">background-color:</span>
+            <span class="code-value">#d6effc;</span>
+            <br/>&emsp;<span class="code-attribute">color:</span> <span
+                class="code-value">#222;<br/>
+            }</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Filled Dropdown_Expanded</p>
+<div class="component-container">
+    <div class="hc-container-header-expand">
+        <div class="display-inline">
+            <label class="hc-input-label">Label</label>
+        </div>
+        <div class="display-inline">
+            {% load static %}
+            <img class="dd_expand"
+                 src="{% static "img/style_guide/dd_hc_filled_expand.png" %}"
+                 alt="Filled Expanded Dropdown."/>
+        </div>
+    </div>
+    <div class="container-body dd-container-body">
+        <div class="code">
+            <span class="code-value">.select2-container--default .select2-results__option--highlighted {</span>
+            <br/>&emsp;<span class="code-attribute">background-color:</span>
+            <span class="code-value">#ebeef3 !important;</span>
+            <br/>&emsp;<span class="code-attribute">color:</span> <span
+                class="code-value">#222!important;<br/>
+            }</span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/sd_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdown/sd_dropdown.html
new file mode 100644
index 0000000..15b30d1
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/dropdown/sd_dropdown.html
@@ -0,0 +1,88 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="container-header">
+        <label class="input-label">Label</label>
+        {% load static %}
+        <img class="dd_default"
+             src="{% static "img/style_guide/dd_default.png" %}"
+             alt="Default Dropdown."/>
+    </div>
+    <div class="container-body dd-container-body">
+        <div class="code">
+            <span class="code-attribute">color:</span> <span class="code-value">#99999;</span><br/>
+            <span class="code-attribute">background:</span> <span
+                class="code-value">#FFFFFF;</span><br/>
+            <span class="code-attribute">border:</span> <span
+                class="code-value">1px solid #DDE0E6;</span><br/>
+            <span class="code-attribute">border-radius:</span> <span
+                class="code-value">4px;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Filled</p>
+<div class="component-container">
+    <div class="container-header">
+        <label class="input-label">Label</label>
+        {% load static %}
+        <img class="dd_default"
+             src="{% static "img/style_guide/dd_filled.png" %}"
+             alt="Filled Dropdown."/>
+    </div>
+    <div class="container-body dd-container-filled">
+        <div class="code">
+            <span class="code-value">Handled by bootstrap class</span> <span
+                class="code-attribute">.select2-container--focus</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Expanded</p>
+<div class="component-container">
+    <div class="container-header-expand">
+        <div class="display-inline">
+            <label class="input-label">Label</label>
+        </div>
+        <div class="display-inline">
+            {% load static %}
+            <img class="dd_expand"
+                 src="{% static "img/style_guide/dd_expand.png" %}"
+                 alt="Filled Dropdown."/>
+        </div>
+    </div>
+    <div class="container-body dd-container-body">
+        <div class="code">
+            <span class="code-value">.select2-container--default .select2-results__option[aria-selected=true] {</span>
+            <br/>&emsp;<span class="code-attribute">background-color:</span>
+            <span class="code-value">#d6effc;</span>
+            <br/>&emsp;<span class="code-attribute">color:</span> <span
+                class="code-value">#222;<br/>
+            }</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Filled Dropdown_Expanded</p>
+<div class="component-container">
+    <div class="container-header-expand">
+        <div class="display-inline">
+            <label class="input-label">Label</label>
+        </div>
+        <div class="display-inline">
+            {% load static %}
+            <img class="dd_expand"
+                 src="{% static "img/style_guide/dd_filled_expand.png" %}"
+                 alt="Filled Expanded Dropdown."/>
+        </div>
+    </div>
+    <div class="container-body dd-container-body">
+        <div class="code">
+            <span class="code-value">.select2-container--default .select2-results__option--highlighted {</span>
+            <br/>&emsp;<span class="code-attribute">background-color:</span>
+            <span class="code-value">#ebeef3 !important;</span>
+            <br/>&emsp;<span class="code-attribute">color:</span> <span
+                class="code-value">#222!important;<br/>
+            }</span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/dark_iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/dark_iconography.html
new file mode 100644
index 0000000..508a973
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/dark_iconography.html
@@ -0,0 +1,909 @@
+{% if section == 'fontawesome' %}
+<p class="color-header" id="fontawesome">Font Awesome version 5.14.0
+    (14x14px)</p>
+<div class="d-iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-save"></span><br/>
+            <span class=" d-icon-label">fa-save</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-edit"></span><br/>
+            <span class=" d-icon-label">fa-edit</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-anchor"></span><br/>
+            <span class=" d-icon-label">fa-anchor</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-arrow-circle-right"></span><br/>
+            <span class=" d-icon-label">fa-arrow-circle-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-arrows-alt-h"></span><br/>
+            <span class=" d-icon-label">fa-arrows-alt-h</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-arrows-alt-v"></span><br/>
+            <span class=" d-icon-label">fa-arrows-alt-v</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-chevron-right"></span><br/>
+            <span class=" d-icon-label">fa-chevron-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-chevron-down"></span><br/>
+            <span class=" d-icon-label">fa-chevron-down</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-check-square"></span><br/>
+            <span class=" d-icon-label">fa-check-square</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-check"></span><br/>
+            <span class=" d-icon-label">fa-check</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-unlink"></span><br/>
+            <span class=" d-icon-label">fa-unlink</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-caret-right"></span><br/>
+            <span class=" d-icon-label">fa-caret-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-circle"></span><br/>
+            <span class=" d-icon-label">fa-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-paste"></span><br/>
+            <span class=" d-icon-label">fa-paste</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-times"></span><br/>
+            <span class=" d-icon-label">fa-times</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-cogs"></span><br/>
+            <span class=" d-icon-label">fa-cogs</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-copy"></span><br/>
+            <span class=" d-icon-label">fa-copy</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-download"></span><br/>
+            <span class=" d-icon-label">fa-download</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-indent"></span><br/>
+            <span class=" d-icon-label">fa-indent</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-hourglass-half"></span><br/>
+            <span class=" d-icon-label">fa-hourglass-half</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-home"></span><br/>
+            <span class=" d-icon-label">fa-home</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-hdd"></span><br/>
+            <span class=" d-icon-label">fa-hdd</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-hand-pointer"></span><br/>
+            <span class=" d-icon-label">fa-hand-pointer</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-globe"></span><br/>
+            <span class=" d-icon-label">fa-globe</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-file"></span><br/>
+            <span class=" d-icon-label">fa-file</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-external-link-alt"></span><br/>
+            <span class=" d-icon-label">fa-external-link-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-exclamation-triangle"></span><br/>
+            <span class=" d-icon-label">fa-exclamation-triangle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-exclamation-circle"></span><br/>
+            <span class=" d-icon-label">fa-exclamation-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-exchange-alt"></span><br/>
+            <span class=" d-icon-label">fa-exchange-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-info-circle"></span><br/>
+            <span class=" d-icon-label">fa-info-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-chart-line"></span><br/>
+            <span class=" d-icon-label">fa-chart-line</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-list-alt"></span><br/>
+            <span class=" d-icon-label">fa-list-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-lock"></span><br/>
+            <span class=" d-icon-label">fa-lock</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-long-arrow-alt-right"></span><br/>
+            <span class=" d-icon-label">fa-long-arrow-alt-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-magic"></span><br/>
+            <span class=" d-icon-label">fa-magic</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-outdent"></span><br/>
+            <span class=" d-icon-label">fa-outdent</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-plus"></span><br/>
+            <span class=" d-icon-label">fa-plus</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-question"></span><br/>
+            <span class=" d-icon-label">fa-question</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-recycle"></span><br/>
+            <span class=" d-icon-label">fa-recycle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-sync-alt"></span><br/>
+            <span class=" d-icon-label">fa-sync-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-redo-alt"></span><br/>
+            <span class=" d-icon-label">fa-redo-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-search"></span><br/>
+            <span class=" d-icon-label">fa-search</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-unlock"></span><br/>
+            <span class=" d-icon-label">fa-unlock</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-level-up-alt"></span><br/>
+            <span class=" d-icon-label">fa-level-up-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-unlock-alt"></span><br/>
+            <span class=" d-icon-label">fa-unlock-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-book"></span><br/>
+            <span class=" d-icon-label">fa-book</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-backward"></span><br/>
+            <span class=" d-icon-label">fa-backward</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-ban"></span><br/>
+            <span class=" d-icon-label">fa-ban</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-caret-down"></span><br/>
+            <span class=" d-icon-label">fa-caret-down</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-calendar-check"></span><br/>
+            <span class=" d-icon-label">fa-calendar-check</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-bug"></span><br/>
+            <span class=" d-icon-label">fa-bug</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-calendar-alt"></span><br/>
+            <span class=" d-icon-label">fa-calendar-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-play"></span><br/>
+            <span class=" d-icon-label">fa-play</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-upload"></span><br/>
+            <span class=" d-icon-label">fa-upload</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-eraser"></span><br/>
+            <span class=" d-icon-label">fa-eraser</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-ellipsis-v"></span><br/>
+            <span class=" d-icon-label">fa-ellipsis-v</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-filter"></span><br/>
+            <span class=" d-icon-label">fa-filter</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-eye"></span><br/>
+            <span class=" d-icon-label">fa-eye</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-search-plus"></span><br/>
+            <span class=" d-icon-label">fa-search-plus</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-play-circle"></span><br/>
+            <span class=" d-icon-label">fa-play-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-forward"></span><br/>
+            <span class=" d-icon-label">fa-forward</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-folder-open"></span><br/>
+            <span class=" d-icon-label">fa-folder-open</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-user-circle"></span><br/>
+            <span class=" d-icon-label">fa-user-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-file-code"></span><br/>
+            <span class=" d-icon-label">fa-file-code</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-key"></span><br/>
+            <span class=" d-icon-label">fa-key</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-server"></span><br/>
+            <span class=" d-icon-label">fa-server</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-wrench"></span><br/>
+            <span class=" d-icon-label">fa-wrench</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-users"></span><br/>
+            <span class=" d-icon-label">fa-users</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-pause-circle"></span><br/>
+            <span class=" d-icon-label">fa-pause-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-pencil-alt"></span><br/>
+            <span class=" d-icon-label">fa-pencil-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-info"></span><br/>
+            <span class=" d-icon-label">fa-info</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-search-minus"></span><br/>
+            <span class=" d-icon-label">fa-search-minus</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-times-circle"></span><br/>
+            <span class=" d-icon-label">fa-times-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-th-list"></span><br/>
+            <span class=" d-icon-label">fa-th-list</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-table"></span><br/>
+            <span class=" d-icon-label">fa-table</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-stop-circle"></span><br/>
+            <span class=" d-icon-label">fa-stop-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-shopping-cart"></span><br/>
+            <span class=" d-icon-label">fa-shopping-cart</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-stop"></span><br/>
+            <span class=" d-icon-label">fa-stop</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-chart-bar"></span><br/>
+            <span class=" d-icon-label">fa-chart-bar</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-link"></span><br/>
+            <span class=" d-icon-label">fa-link</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-trash"></span><br/>
+            <span class=" d-icon-label">fa-trash</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-clock"></span><br/>
+            <span class=" d-icon-label">fa-clock</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-file-alt"></span><br/>
+            <span class=" d-icon-label">fa-file-alt</span>
+        </div>
+        <p class="d-icon-label">
+            <b>Note:</b> These are the icons we have used throughout pgAdmin and
+            may be changed or updated from version to version.
+        </p>
+    </div>
+</div>
+<div class="iconography-component-container">
+    <div class="iconography-header">
+        <div class="code">
+            <span class="code-tag">&lt;i</span> <span class="code-attribute">class=</span>"Icon
+            name" <span class="code-attribute">data-toggle=</span>"tooltip"
+            <span class="code-attribute">title=</span>"Icon title" <span
+                class="code-attribute">aria-label=</span>"Icon label"<span
+                class="code-tag">&gt;&lt;/i&gt;</span>
+        </div>
+    </div>
+</div>
+{% elif section == 'solid_icons' %}
+<p class="color-header" id="solidIcons">Custom Solid Icons (14x14px)</p>
+<div class="d-iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom commit dark-thm"></span>
+            <span class="d- d-icon-label">commit</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom compare dark-thm"></span>
+            <span class="d- d-icon-label">compare</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom connect dark-thm"></span>
+            <span class="d- d-icon-label">connect</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom disconnect dark-thm"></span>
+            <span class="d- d-icon-label">disconnect</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom drop_cascade dark-thm"></span>
+            <span class="d- d-icon-label">drop_cascade</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom query_tool dark-thm"></span>
+            <span class="d- d-icon-label">query_tool</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom rollback dark-thm"></span>
+            <span class="d- d-icon-label">rollback</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom row_filter dark-thm"></span>
+            <span class="d- d-icon-label">row_filter</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom save_data_changes dark-thm"></span>
+            <span class="d- d-icon-label">save_data</span><br/>
+            <span class="d- d-icon-label">_changes</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom script dark-thm"></span><br/>
+            <span class="d- d-icon-label">script</span>
+        </div>
+    </div>
+</div>
+<div class="iconography-component-container">
+    <div class="iconography-header">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"wcFrameButton
+            pg-toolbar-btn btn-secondary" <span
+                class="code-attribute">title=</span>"Query Tool" <span
+                class="code-attribute">aria-label=</span>"Query Tool"<span
+                class="code-tag">&gt;
+                &lt;div</span> <span class="code-attribute">class=</span>"pg-font-icon
+            icon-query-tool"<span class="code-tag">&gt;&lt;/div&gt;
+            &lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+{% elif section == 'tree_view_icons' %}
+<p class="color-header" id="treeView">Tree View Icons (14x14px)</p>
+<div class="d-iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-icon">
+            <span class="pg-icon cast"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-cast"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon catalog_object_column"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-column"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon catalog_object"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-catalog_object"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon catalog"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-catalog"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon domain_constraints"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-domain_constraints"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon primary_key"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon compound_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-compound_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-database"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon database"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon edbfunc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-edbfunc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_template"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_template"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-sequence"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon event_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-event_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon trigger_function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-trigger_function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon procedure"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon edbproc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-edbproc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon domain"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-domain"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon collation"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon language"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-language"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon mview"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-mview"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-procedure"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon schema"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-schema"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon synonym"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-synonym"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_parser"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon type"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-type"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon view"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-view"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon resource_group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-resource_group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon tablespace"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-tablespace"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon rule-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-rule"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon exclusion_constraint"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon package"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-package"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon index"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-index"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon role"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-role"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon partition"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-partition"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-foreign_data_wrapper-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon foreign_data_wrapper-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_job"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-pga_job"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_jobstep"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-pga_jobstep"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon user_mapping"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-user_mapping"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_schedule"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-pga_schedule"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon server_group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon server"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-foreign_server"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon trigger-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon triggerbad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_schedule-disabled"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_job-disabled"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_jobstep-disabled"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon serverbad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon domain_constraints-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon compound_trigger-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon databasebad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon check-constraint-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon check-constraint"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon sub_partition_table"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-inherited"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-inherits"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-multi-inherit"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon partition_table"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon unique_constraint"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-repl"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-foreign_table"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_dictionary"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon ppas"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pg"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-edbvar"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon edbvar"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon extension"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-extension"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_configuration"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_configuration-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_dictionary"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon ex_unknown"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_parser"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-constraints"></span>
+        </div>
+    </div>
+</div>
+{% elif section == 'query_plans' %}
+<p class="color-header" id="queryPlans">Query Plan Icons
+    (64x64px)</p>
+<div class="d-iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_aggregate"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_append"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_and"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_heap"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_index"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_or"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_cte_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_delete"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_foreign_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_gather_merge"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_gather_motion"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_group"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_intersect_all"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_intersect"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_unknown"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_index_only_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_index_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_materialize"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge_anti_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge_append"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge_semi_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_named_tuplestore_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_recursive_union"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_redistribute_motion"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_result"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_seek"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_setop"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_values_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_lock_rows"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_projectset"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_update"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_tid_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_window_aggregate"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_except_all"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_limit"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_table_func_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_semi_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_subplan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_nested_loop_semi_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_unique"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_except"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_broadcast_motion"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_anti_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_insert"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_nested_loop_anti_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_worktable_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_sort"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_join"></span>
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/hc_iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/hc_iconography.html
new file mode 100644
index 0000000..5b130db
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/hc_iconography.html
@@ -0,0 +1,912 @@
+{% if section == 'fontawesome' %}
+<p class="color-header" id="fontawesome">Font Awesome version 5.14.0
+    (14x14px)</p>
+<div class="d-iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-save"></span><br/>
+            <span class="d-icon-label">fa-save</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-edit"></span><br/>
+            <span class="d-icon-label">fa-edit</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-anchor"></span><br/>
+            <span class="d-icon-label">fa-anchor</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-arrow-circle-right"></span><br/>
+            <span class="d-icon-label">fa-arrow-circle-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-arrows-alt-h"></span><br/>
+            <span class="d-icon-label">fa-arrows-alt-h</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-arrows-alt-v"></span><br/>
+            <span class="d-icon-label">fa-arrows-alt-v</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-chevron-right"></span><br/>
+            <span class="d-icon-label">fa-chevron-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-chevron-down"></span><br/>
+            <span class="d-icon-label">fa-chevron-down</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-check-square"></span><br/>
+            <span class="d-icon-label">fa-check-square</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-check"></span><br/>
+            <span class="d-icon-label">fa-check</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-unlink"></span><br/>
+            <span class="d-icon-label">fa-unlink</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-caret-right"></span><br/>
+            <span class="d-icon-label">fa-caret-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-circle"></span><br/>
+            <span class="d-icon-label">fa-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-paste"></span><br/>
+            <span class="d-icon-label">fa-paste</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-times"></span><br/>
+            <span class="d-icon-label">fa-times</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-cogs"></span><br/>
+            <span class="d-icon-label">fa-cogs</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-copy"></span><br/>
+            <span class="d-icon-label">fa-copy</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-download"></span><br/>
+            <span class="d-icon-label">fa-download</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-indent"></span><br/>
+            <span class="d-icon-label">fa-indent</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-hourglass-half"></span><br/>
+            <span class="d-icon-label">fa-hourglass-half</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-home"></span><br/>
+            <span class="d-icon-label">fa-home</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-hdd"></span><br/>
+            <span class="d-icon-label">fa-hdd</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-hand-pointer"></span><br/>
+            <span class="d-icon-label">fa-hand-pointer</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-globe"></span><br/>
+            <span class="d-icon-label">fa-globe</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-file"></span><br/>
+            <span class="d-icon-label">fa-file</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-external-link-alt"></span><br/>
+            <span class="d-icon-label">fa-external-link-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-exclamation-triangle"></span><br/>
+            <span class="d-icon-label">fa-exclamation-triangle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-exclamation-circle"></span><br/>
+            <span class="d-icon-label">fa-exclamation-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-exchange-alt"></span><br/>
+            <span class="d-icon-label">fa-exchange-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-info-circle"></span><br/>
+            <span class="d-icon-label">fa-info-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-chart-line"></span><br/>
+            <span class="d-icon-label">fa-chart-line</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-list-alt"></span><br/>
+            <span class="d-icon-label">fa-list-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-lock"></span><br/>
+            <span class="d-icon-label">fa-lock</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-long-arrow-alt-right"></span><br/>
+            <span class="d-icon-label">fa-long-arrow-alt-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-magic"></span><br/>
+            <span class="d-icon-label">fa-magic</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-outdent"></span><br/>
+            <span class="d-icon-label">fa-outdent</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-plus"></span><br/>
+            <span class="d-icon-label">fa-plus</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-question"></span><br/>
+            <span class="d-icon-label">fa-question</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-recycle"></span><br/>
+            <span class="d-icon-label">fa-recycle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-sync-alt"></span><br/>
+            <span class="d-icon-label">fa-sync-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-redo-alt"></span><br/>
+            <span class="d-icon-label">fa-redo-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-search"></span><br/>
+            <span class="d-icon-label">fa-search</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-unlock"></span><br/>
+            <span class="d-icon-label">fa-unlock</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-level-up-alt"></span><br/>
+            <span class="d-icon-label">fa-level-up-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-unlock-alt"></span><br/>
+            <span class="d-icon-label">fa-unlock-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-book"></span><br/>
+            <span class="d-icon-label">fa-book</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-backward"></span><br/>
+            <span class="d-icon-label">fa-backward</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-ban"></span><br/>
+            <span class="d-icon-label">fa-ban</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-caret-down"></span><br/>
+            <span class="d-icon-label">fa-caret-down</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-calendar-check"></span><br/>
+            <span class="d-icon-label">fa-calendar-check</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-bug"></span><br/>
+            <span class="d-icon-label">fa-bug</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-calendar-alt"></span><br/>
+            <span class="d-icon-label">fa-calendar-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-play"></span><br/>
+            <span class="d-icon-label">fa-play</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-upload"></span><br/>
+            <span class="d-icon-label">fa-upload</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-eraser"></span><br/>
+            <span class="d-icon-label">fa-eraser</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-ellipsis-v"></span><br/>
+            <span class="d-icon-label">fa-ellipsis-v</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-filter"></span><br/>
+            <span class="d-icon-label">fa-filter</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-eye"></span><br/>
+            <span class="d-icon-label">fa-eye</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-search-plus"></span><br/>
+            <span class="d-icon-label">fa-search-plus</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-play-circle"></span><br/>
+            <span class="d-icon-label">fa-play-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-forward"></span><br/>
+            <span class="d-icon-label">fa-forward</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-folder-open"></span><br/>
+            <span class="d-icon-label">fa-folder-open</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-user-circle"></span><br/>
+            <span class="d-icon-label">fa-user-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-file-code"></span><br/>
+            <span class="d-icon-label">fa-file-code</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-key"></span><br/>
+            <span class="d-icon-label">fa-key</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-server"></span><br/>
+            <span class="d-icon-label">fa-server</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-wrench"></span><br/>
+            <span class="d-icon-label">fa-wrench</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-users"></span><br/>
+            <span class="d-icon-label">fa-users</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-pause-circle"></span><br/>
+            <span class="d-icon-label">fa-pause-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-pencil-alt"></span><br/>
+            <span class="d-icon-label">fa-pencil-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-info"></span><br/>
+            <span class="d-icon-label">fa-info</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-search-minus"></span><br/>
+            <span class="d-icon-label">fa-search-minus</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-times-circle"></span><br/>
+            <span class="d-icon-label">fa-times-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-th-list"></span><br/>
+            <span class="d-icon-label">fa-th-list</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-table"></span><br/>
+            <span class="d-icon-label">fa-table</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-stop-circle"></span><br/>
+            <span class="d-icon-label">fa-stop-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-shopping-cart"></span><br/>
+            <span class="d-icon-label">fa-shopping-cart</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-stop"></span><br/>
+            <span class="d-icon-label">fa-stop</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-chart-bar"></span><br/>
+            <span class="d-icon-label">fa-chart-bar</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-link"></span><br/>
+            <span class="d-icon-label">fa-link</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-trash"></span><br/>
+            <span class="d-icon-label">fa-trash</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-clock"></span><br/>
+            <span class="d-icon-label">fa-clock</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class=" pg-fa-icon dark-thm fa fa-file-alt"></span><br/>
+            <span class="d-icon-label">fa-file-alt</span>
+        </div>
+        <p class="d-icon-label">
+            <b>Note:</b> These are the icons we have used throughout pgAdmin and
+            may be changed or updated from version to version.
+        </p>
+    </div>
+</div>
+<div class="iconography-component-container">
+    <div class="iconography-header">
+        <div class="code">
+            <span class="code-tag">&lt;i</span> <span class="code-attribute">class=</span>"Icon
+            name" <span class="code-attribute">data-toggle=</span>"tooltip"
+            <span class="code-attribute">title=</span>"Icon title" <span
+                class="code-attribute">aria-label=</span>"Icon label"<span
+                class="code-tag">&gt;&lt;/i&gt;</span>
+        </div>
+    </div>
+</div>
+
+{% elif section == 'solid_icons' %}
+<p class="color-header" id="solidIcons">Custom Solid Icons (14x14px)</p>
+<div class="d-iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom commit dark-thm"></span>
+            <span class="d-icon-label">commit</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom compare dark-thm"></span>
+            <span class="d-icon-label">compare</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom connect dark-thm"></span>
+            <span class="d-icon-label">connect</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom disconnect dark-thm"></span>
+            <span class="d-icon-label">disconnect</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom drop_cascade dark-thm"></span>
+            <span class="d-icon-label">drop_cascade</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom query_tool dark-thm"></span>
+            <span class="d-icon-label">query_tool</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom rollback dark-thm"></span>
+            <span class="d-icon-label">rollback</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom row_filter dark-thm"></span>
+            <span class="d-icon-label">row_filter</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom save_data_changes dark-thm"></span>
+            <span class="d-icon-label">save_data</span><br/>
+            <span class="d-icon-label">_changes</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom script dark-thm"></span><br/>
+            <span class="d-icon-label">script</span>
+        </div>
+    </div>
+</div>
+<div class="iconography-component-container">
+    <div class="iconography-header">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"wcFrameButton
+            pg-toolbar-btn btn-secondary" <span
+                class="code-attribute">title=</span>"Query Tool" <span
+                class="code-attribute">aria-label=</span>"Query Tool"<span
+                class="code-tag">&gt;
+                &lt;div</span> <span class="code-attribute">class=</span>"pg-font-icon
+            icon-query-tool"<span class="code-tag">&gt;&lt;/div&gt;
+            &lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+{% elif section == 'tree_view_icons' %}
+<p class="color-header" id="treeView">Tree View Icons (14x14px)</p>
+<div class="d-iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-icon">
+            <span class="pg-icon cast"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-cast"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon catalog_object_column"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-column"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon catalog_object"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-catalog_object"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon catalog"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-catalog"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon domain_constraints"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-domain_constraints"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon primary_key"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon compound_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-compound_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-database"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon database"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon edbfunc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-edbfunc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_template"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_template"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-sequence"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon event_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-event_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon trigger_function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-trigger_function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon procedure"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon edbproc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-edbproc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon domain"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-domain"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon collation"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon language"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-language"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon mview"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-mview"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-procedure"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon schema"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-schema"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon synonym"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-synonym"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_parser"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon type"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-type"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon view"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-view"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon resource_group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-resource_group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon tablespace"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-tablespace"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon rule-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-rule"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon exclusion_constraint"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon package"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-package"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon index"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-index"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon role"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-role"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon partition"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-partition"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-foreign_data_wrapper-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon foreign_data_wrapper-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_job"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-pga_job"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_jobstep"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-pga_jobstep"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon user_mapping"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-user_mapping"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_schedule"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-pga_schedule"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon server_group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon server"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-foreign_server"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon trigger-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon triggerbad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_schedule-disabled"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_job-disabled"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_jobstep-disabled"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon serverbad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon domain_constraints-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon compound_trigger-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon databasebad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon check-constraint-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon check-constraint"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon sub_partition_table"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-inherited"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-inherits"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-multi-inherit"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon partition_table"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon unique_constraint"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-repl"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-foreign_table"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_dictionary"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon ppas"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pg"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-edbvar"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon edbvar"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon extension"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-extension"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_configuration"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_configuration-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_dictionary"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon ex_unknown"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_parser"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-constraints"></span>
+        </div>
+    </div>
+</div>
+
+{% elif section == 'query_plans' %}
+<p class="color-header" id="queryPlans">Query Plan Icons
+    (64x64px)</p>
+<div class="d-iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_aggregate"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_append"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_and"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_heap"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_index"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_or"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_cte_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_delete"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_foreign_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_gather_merge"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_gather_motion"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_group"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_intersect_all"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_intersect"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_unknown"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_index_only_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_index_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_materialize"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge_anti_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge_append"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge_semi_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_named_tuplestore_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_recursive_union"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_redistribute_motion"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_result"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_seek"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_setop"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_values_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_lock_rows"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_projectset"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_update"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_tid_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_window_aggregate"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_except_all"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_limit"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_table_func_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_semi_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_subplan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_nested_loop_semi_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_unique"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_except"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_broadcast_motion"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_anti_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_insert"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_nested_loop_anti_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_worktable_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_sort"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_join"></span>
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html
new file mode 100644
index 0000000..79fb2ef
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/iconography.html
@@ -0,0 +1,45 @@
+<h1 class="styleguide-title" id="typography">Iconography</h1>
+<p>
+    Icons are visual representations of commands, files or common actions. They
+    should be meaningful, simple and legible. pgAdmin uses custom as well as
+    <a href="https://fontawesome.com/">Font Awesome 5</a> icons.
+</p>
+
+<p class="icongrp-header">
+    Guidelines for icon selection:
+</p>
+<p>
+<ul class="icongrp-points">
+    <li>Icons should be suggestive of the associated functionality.</li>
+    <li>Custom icons are used for Tree view and Query explain section.
+        Font Awesome icons are used for all other commands, actions and files.
+    </li>
+    <li>Use both filled and outlined icons depending the required context and
+        legibility.
+    </li>
+    <li>Clickable icons must have a tooltip attached to let the user know what
+        happens when it is clicked.
+    </li>
+</ul>
+</p>
+
+<div class="color-palette">
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/iconography/sd_iconography.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/iconography/dark_iconography.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/iconography/hc_iconography.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/sd_iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/sd_iconography.html
new file mode 100644
index 0000000..3bff24e
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/sd_iconography.html
@@ -0,0 +1,911 @@
+{% if section == 'fontawesome' %}
+<p class="color-header" id="fontawesome">Font Awesome version 5.14.0
+    (14x14px)</p>
+<div class="iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-save"></span><br/>
+            <span class="icon-label">fa-save</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-edit"></span><br/>
+            <span class="icon-label">fa-edit</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-anchor"></span><br/>
+            <span class="icon-label">fa-anchor</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-arrow-circle-right"></span><br/>
+            <span class="icon-label">fa-arrow-circle-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-arrows-alt-h"></span><br/>
+            <span class="icon-label">fa-arrows-alt-h</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-arrows-alt-v"></span><br/>
+            <span class="icon-label">fa-arrows-alt-v</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-chevron-right"></span><br/>
+            <span class="icon-label">fa-chevron-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-chevron-down"></span><br/>
+            <span class="icon-label">fa-chevron-down</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-check-square"></span><br/>
+            <span class="icon-label">fa-check-square</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-check"></span><br/>
+            <span class="icon-label">fa-check</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-unlink"></span><br/>
+            <span class="icon-label">fa-unlink</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-caret-right"></span><br/>
+            <span class="icon-label">fa-caret-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-circle"></span><br/>
+            <span class="icon-label">fa-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-paste"></span><br/>
+            <span class="icon-label">fa-paste</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-times"></span><br/>
+            <span class="icon-label">fa-times</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-cogs"></span><br/>
+            <span class="icon-label">fa-cogs</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-copy"></span><br/>
+            <span class="icon-label">fa-copy</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-download"></span><br/>
+            <span class="icon-label">fa-download</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-indent"></span><br/>
+            <span class="icon-label">fa-indent</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-hourglass-half"></span><br/>
+            <span class="icon-label">fa-hourglass-half</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-home"></span><br/>
+            <span class="icon-label">fa-home</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-hdd"></span><br/>
+            <span class="icon-label">fa-hdd</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-hand-pointer"></span><br/>
+            <span class="icon-label">fa-hand-pointer</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-globe"></span><br/>
+            <span class="icon-label">fa-globe</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-file"></span><br/>
+            <span class="icon-label">fa-file</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-external-link-alt"></span><br/>
+            <span class="icon-label">fa-external-link-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-exclamation-triangle"></span><br/>
+            <span class="icon-label">fa-exclamation-triangle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-exclamation-circle"></span><br/>
+            <span class="icon-label">fa-exclamation-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-exchange-alt"></span><br/>
+            <span class="icon-label">fa-exchange-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-info-circle"></span><br/>
+            <span class="icon-label">fa-info-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-chart-line"></span><br/>
+            <span class="icon-label">fa-chart-line</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-list-alt"></span><br/>
+            <span class="icon-label">fa-list-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-lock"></span><br/>
+            <span class="icon-label">fa-lock</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-long-arrow-alt-right"></span><br/>
+            <span class="icon-label">fa-long-arrow-alt-right</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-magic"></span><br/>
+            <span class="icon-label">fa-magic</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-outdent"></span><br/>
+            <span class="icon-label">fa-outdent</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-plus"></span><br/>
+            <span class="icon-label">fa-plus</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-question"></span><br/>
+            <span class="icon-label">fa-question</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-recycle"></span><br/>
+            <span class="icon-label">fa-recycle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-sync-alt"></span><br/>
+            <span class="icon-label">fa-sync-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-redo-alt"></span><br/>
+            <span class="icon-label">fa-redo-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-search"></span><br/>
+            <span class="icon-label">fa-search</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-unlock"></span><br/>
+            <span class="icon-label">fa-unlock</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-level-up-alt"></span><br/>
+            <span class="icon-label">fa-level-up-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-unlock-alt"></span><br/>
+            <span class="icon-label">fa-unlock-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-book"></span><br/>
+            <span class="icon-label">fa-book</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-backward"></span><br/>
+            <span class="icon-label">fa-backward</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-ban"></span><br/>
+            <span class="icon-label">fa-ban</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-caret-down"></span><br/>
+            <span class="icon-label">fa-caret-down</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-calendar-check"></span><br/>
+            <span class="icon-label">fa-calendar-check</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-bug"></span><br/>
+            <span class="icon-label">fa-bug</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-calendar-alt"></span><br/>
+            <span class="icon-label">fa-calendar-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-play"></span><br/>
+            <span class="icon-label">fa-play</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-upload"></span><br/>
+            <span class="icon-label">fa-upload</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-eraser"></span><br/>
+            <span class="icon-label">fa-eraser</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-ellipsis-v"></span><br/>
+            <span class="icon-label">fa-ellipsis-v</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-filter"></span><br/>
+            <span class="icon-label">fa-filter</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-eye"></span><br/>
+            <span class="icon-label">fa-eye</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-search-plus"></span><br/>
+            <span class="icon-label">fa-search-plus</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-play-circle"></span><br/>
+            <span class="icon-label">fa-play-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-forward"></span><br/>
+            <span class="icon-label">fa-forward</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-folder-open"></span><br/>
+            <span class="icon-label">fa-folder-open</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-user-circle"></span><br/>
+            <span class="icon-label">fa-user-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-file-code"></span><br/>
+            <span class="icon-label">fa-file-code</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-key"></span><br/>
+            <span class="icon-label">fa-key</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-server"></span><br/>
+            <span class="icon-label">fa-server</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-wrench"></span><br/>
+            <span class="icon-label">fa-wrench</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-users"></span><br/>
+            <span class="icon-label">fa-users</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-pause-circle"></span><br/>
+            <span class="icon-label">fa-pause-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-pencil-alt"></span><br/>
+            <span class="icon-label">fa-pencil-alt</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-info"></span><br/>
+            <span class="icon-label">fa-info</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-search-minus"></span><br/>
+            <span class="icon-label">fa-search-minus</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-times-circle"></span><br/>
+            <span class="icon-label">fa-times-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-th-list"></span><br/>
+            <span class="icon-label">fa-th-list</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-table"></span><br/>
+            <span class="icon-label">fa-table</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-stop-circle"></span><br/>
+            <span class="icon-label">fa-stop-circle</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-shopping-cart"></span><br/>
+            <span class="icon-label">fa-shopping-cart</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-stop"></span><br/>
+            <span class="icon-label">fa-stop</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-chart-bar"></span><br/>
+            <span class="icon-label">fa-chart-bar</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-link"></span><br/>
+            <span class="icon-label">fa-link</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-trash"></span><br/>
+            <span class="icon-label">fa-trash</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-clock"></span><br/>
+            <span class="icon-label">fa-clock</span>
+        </div>
+        <div class="iconography-fa-icon">
+            <span class="pg-fa-icon fa fa-file-alt"></span><br/>
+            <span class="icon-label">fa-file-alt</span>
+        </div>
+        <p>
+            <b>Note:</b> These are the icons we have used throughout pgAdmin and
+            may be changed or updated from version to version.
+        </p>
+    </div>
+</div>
+<div class="iconography-component-container">
+    <div class="iconography-header">
+        <div class="code">
+            <span class="code-tag">&lt;i</span> <span class="code-attribute">class=</span>"Icon
+            name" <span class="code-attribute">data-toggle=</span>"tooltip"
+            <span class="code-attribute">title=</span>"Icon title" <span
+                class="code-attribute">aria-label=</span>"Icon label"<span
+                class="code-tag">&gt;&lt;/i&gt;</span>
+        </div>
+    </div>
+</div>
+{% elif section == 'solid_icons' %}
+<p class="color-header" id="solidIcons">Custom Solid Icons (14x14px)</p>
+<div class="iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom commit"></span>
+            <span class="icon-label">commit</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom compare"></span>
+            <span class="icon-label">compare</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom connect"></span>
+            <span class="icon-label">connect</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom disconnect"></span>
+            <span class="icon-label">disconnect</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom drop_cascade"></span>
+            <span class="icon-label">drop_cascade</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom query_tool"></span>
+            <span class="icon-label">query_tool</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom rollback"></span>
+            <span class="icon-label">rollback</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom row_filter"></span>
+            <span class="icon-label">row_filter</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom save_data_changes"></span>
+            <span class="icon-label">save_data</span><br/>
+            <span class="icon-label">_changes</span>
+        </div>
+        <div class="iconography-custom-icon">
+            <span class="pg-icon-custom script"></span><br/>
+            <span class="icon-label">script</span>
+        </div>
+    </div>
+</div>
+<div class="iconography-component-container">
+    <div class="iconography-header">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"wcFrameButton
+            pg-toolbar-btn btn-secondary" <span
+                class="code-attribute">title=</span>"Query Tool" <span
+                class="code-attribute">aria-label=</span>"Query Tool"<span
+                class="code-tag">&gt;
+                &lt;div</span> <span class="code-attribute">class=</span>"pg-font-icon
+            icon-query-tool"<span class="code-tag">&gt;&lt;/div&gt;
+            &lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+{% elif section == 'tree_view_icons' %}
+<p class="color-header" id="treeView">Tree View Icons (14x14px)</p>
+<div class="iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-icon">
+            <span class="pg-icon cast"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-cast"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon catalog_object_column"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-column"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon catalog_object"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-catalog_object"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon catalog"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-catalog"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon domain_constraints"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-domain_constraints"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon primary_key"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon compound_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-compound_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-database"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon database"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon edbfunc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-edbfunc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_template"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_template"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-sequence"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon event_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-event_trigger"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon trigger_function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-trigger_function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon procedure"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon edbproc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-edbproc"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon domain"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-domain"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon collation"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon language"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-language"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon mview"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-mview"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon function"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-procedure"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon schema"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-schema"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon synonym"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-synonym"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_parser"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon type"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-type"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon view"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-view"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon resource_group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-resource_group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon tablespace"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-tablespace"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon rule-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-rule"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon exclusion_constraint"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon package"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-package"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon index"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-index"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon role"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-role"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon partition"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-partition"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-foreign_data_wrapper-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon foreign_data_wrapper-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_job"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-pga_job"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_jobstep"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-pga_jobstep"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon user_mapping"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-user_mapping"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_schedule"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-pga_schedule"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon server_group"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon server"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-foreign_server"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon trigger-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon triggerbad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_schedule-disabled"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_job-disabled"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pga_jobstep-disabled"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon serverbad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon domain_constraints-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon compound_trigger-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon databasebad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon check-constraint-bad"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon check-constraint"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon sub_partition_table"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-inherited"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-inherits"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-multi-inherit"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon partition_table"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon unique_constraint"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon table-repl"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-foreign_table"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_dictionary"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon ppas"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon pg"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-edbvar"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon edbvar"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon extension"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-extension"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-fts_configuration"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_configuration-1"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_dictionary"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon ex_unknown"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon fts_parser"></span>
+        </div>
+        <div class="iconography-icon">
+            <span class="pg-icon coll-constraints"></span>
+        </div>
+    </div>
+</div>
+
+{% elif section == 'query_plans' %}
+<p class="color-header" id="queryPlans">Query Plan Icons
+    (64x64px)</p>
+<div class="iconography-component-container">
+    <div class="iconography-header">
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_aggregate"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_append"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_and"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_heap"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_index"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_bmp_or"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_cte_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_delete"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_foreign_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_gather_merge"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_gather_motion"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_group"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_intersect_all"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_intersect"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_unknown"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_index_only_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_index_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_materialize"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge_anti_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge_append"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge_semi_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_merge"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_named_tuplestore_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_recursive_union"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_redistribute_motion"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_result"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_seek"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_setop"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_values_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_lock_rows"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_projectset"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_update"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_tid_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_window_aggregate"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_except_all"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_limit"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_table_func_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_semi_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_subplan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_nested_loop_semi_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_unique"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_setop_except"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_broadcast_motion"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_hash_anti_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_insert"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_nested_loop_anti_join"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_worktable_scan"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_sort"></span>
+        </div>
+        <div class="iconography-query-icon">
+            <span class="pg-icon-query ex_join"></span>
+        </div>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html b/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html
new file mode 100644
index 0000000..bf27331
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html
@@ -0,0 +1,16 @@
+<div class="well style-header">
+    <h2>Contents</h2>
+
+    <ul class="style-action-menu">
+        <li><a href="{% url 'styleguide_index' page='typography' %}">Typography</a></li>
+        <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Themes</a></li>
+        <li><a href="{% url 'styleguide_index' page='iconography' section='fontawesome' %}">Iconography</a>
+            <ul>
+                <li><a href="{% url 'styleguide_index' page='iconography' section='fontawesome' %}">Font Awesome</a></li>
+                <li><a href="{% url 'styleguide_index' page='iconography' section='solid_icons' %}">Custom Solid</a></li>
+                <li><a href="{% url 'styleguide_index' page='iconography' section='tree_view_icons' %}">Tree View</a></li>
+                <li><a href="{% url 'styleguide_index' page='iconography' section='query_plans' %}">Query Plans</a></li>
+            </ul>
+        </li>
+    </ul>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/index.html b/pgaweb/templates/pgaweb/styleguide/index.html
index 060df4c..116a93a 100644
--- a/pgaweb/templates/pgaweb/styleguide/index.html
+++ b/pgaweb/templates/pgaweb/styleguide/index.html
@@ -4,366 +4,24 @@
 {% block title %}Style Guide{% endblock %}
 
 {% block content %}
-  <link rel="stylesheet" href="{% static 'COMPILED/assets/css/styleguide.css' %}?{{gitrev}}" />
-  <h2 class="styleguide-title">Introduction</h2>
-  <p>
-    Welcome to the style guide for UI elements in pgAdmin4 to help the product stay consistent as it grows.
-  </p>
-
-  <p>
-    The style guide is intended for developers and designers to leverage when implementing features in pgAdmin UI.
-  </p>
-
-  <div id="accordion">
-    <div class="card">
-      <div class="card-header" id="headingOne">
-        <h3 class="mb-0">
-          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-            Colours
-          </button>
-        </h3>
-      </div>
-
-      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
-        <div class="card-body">
-          <div class="styleguide-inner">
-            <p class="styleguide">pgAdmin styling, colors and usage of colors has been changed since version 4.0 largely to improve the consistency, user experience and ease of development</p>
-            <p class="styleguide">The app uses fixed set of colors throughout to give uniform look and feel across different dialogs, controls and tools.</p>
-            <p class="styleguide">Colors listed on this page are used for specific purpose. Class names starting with
-              <strong>.bg-</strong> or <strong>.text-</strong> or <strong>.border-</strong> are defined for quick use, but not to be used out of the theme
-              on which pgAdmin is build.</p>
-            <h5>
-              <i>Example:</i>
-            </h5>
-
-            <div>
-              To use a background color use the class:
-            </div>
-            <div class="codeBlock">
-              <div class="highlight">
-                <pre>bg-primary</pre>
-              </div>
-            </div>
-
-            <div>
-              To use a border color use the class:
-            </div>
-            <div class="codeBlock">
-              <div class="highlight">
-                <pre>border-primary</pre>
-              </div>
-            </div>
-
-            <div>
-              To use a text color use the class:
-            </div>
-            <div class="codeBlock">
-              <div class="highlight">
-                <pre>text-primary</pre>
-              </div>
-            </div>
-
-            <h3 id="colors-primaryblue" class="styleguide">Color variables</h3>
-            <p class="styleguide">The colors used by pgAdmin are described in this section. pgAdmin majorly uses three colors namely primary, secondary and gray.
-              There are few more colors which are used based on the specific context. To make the application more customizable, variables are defined specific to
-              modules and takes values from the standard available colors. These variables should be used in the SCSS files and if required new variables can be added
-              based on the module requirements, but the values should be taken from the available colors. Please note, all the required colors are defined and there
-              is no need to add any new colors.</p>
-            <p>Available colors are:</p>
-            <p>The primary color should be used to call attention to the main part of the app. Use sparingly.</p>
-            <div class="row">
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-primary-light">
-                  primary-light
-                </div>
-                $color-primary-light<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-primary font-white">
-                  primary
-                </div>
-                $color-primary<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-primary-dark font-white">
-                  primary-dark
-                </div>
-                $color-primary-dark<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip border-gray-lighter">
-                  primary-fg
-                </div>
-                $color-primary-fg<br/>
-              </div>
-            </div>
-            <p>Secondary color is used in places like secondary buttons (Cancel, Next, etc.), toolbar buttons apart from the primary use buttons.</p>
-            <div class="row">
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-secondary border-gray-lighter">
-                  secondary
-                </div>
-                $color-secondary<br/>
-              </div>
-            </div>
-            <p>Danger color is used to highlight errors and failures</p>
-            <div class="row">
-              <div class="col-md-2 chip-container">
-                <div class="color-chip bg-danger-lighter">
-                  danger-lighter
-                </div>
-                $color-danger-lighter<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-danger-light">
-                  danger-light
-                </div>
-                $color-danger-light<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-danger font-white">
-                  danger
-                </div>
-                $color-danger<br/>
-              </div>
-            </div>
-            <p>Success colors are used to highlight success and completions</p>
-            <div class="row">
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-success-light">
-                  success-light
-                </div>
-                $color-success-light<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-success font-white">
-                  success
-                </div>
-                $color-success<br/>
-              </div>
-            </div>
-            <p>Warning colors are used to give informative warnings</p>
-            <div class="row">
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-warning-light">
-                  warning-light
-                </div>
-                $color-warning-light<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-warning font-white">
-                  warning
-                </div>
-                $color-warning<br/>
-              </div>
-            </div>
-            <h3 id="Grays" class="styleguide">Grays</h3>
-            <p class="styleguide">Grays should be used for borders, negative/empty spaces, disabled texts only. They are generally used for framing the controls.</p>
-            <div class="row">
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-gray-lighter">
-                  gray-lighter
-                </div>
-                $color-gray-lighter<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-gray-light">
-                  gray-light
-                </div>
-                $color-gray-light<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-gray font-white">
-                  gray
-                </div>
-                $color-gray<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-gray-dark font-white">
-                  gray-dark
-                </div>
-                $color-gray-dark<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip bg-gray-darker font-white">
-                  gray-darker
-                </div>
-                $color-gray-darker<br/>
-              </div>
-            </div>
-
-            <h3 id="z-othercolors" class="styleguide">Others</h3>
-            <p class="styleguide">Use these variables for foreground and background colors instead of white and black respectively. This will help in switching the colors easily if planned for a dark theme.</p>
-            <div class="row">
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip chip-bg-theme">
-                  bg-theme
-                </div>
-                $color-bg-theme<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip chip-fg-theme">
-                  fg-theme
-                </div>
-                $color-fg-theme<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip chip-border-color">
-                  border-color
-                </div>
-                $border-color<br/>
-              </div>
-            </div>
-
-            <h3 id="z-othercolors" class="styleguide">SQL editor</h3>
-            <p class="styleguide">These are the color variables used by SQL editor</p>
-            <div class="row">
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip chip-editor-bg">
-                  bg
-                </div>
-                $color-editor-bg<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip chip-editor-keyword">
-                  keyword
-                </div>
-                $color-editor-keyword<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip chip-editor-foldmarker">
-                  foldmarker
-                </div>
-                $color-editor-foldmarker<br/>
-              </div>
-              <div class="col-xs-6 col-md-2 chip-container">
-                <div class="color-chip chip-editor-activeline">
-                  activeline
-                </div>
-                $color-editor-activeline<br/>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-header" id="headingTwo">
-        <h3 class="mb-0">
-          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-            Alerts
-          </button>
-        </h3>
-      </div>
-      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
-        <div class="card-body">
-          <p>
-            Use alerts to provide feedback to the user or call
-            attention to important information the user should know.
-          </p>
-
-          <p>
-            <b>Note: </b>Javascript functions exist for displaying most common alerts, avoiding the need to
-            manually style them in most cases.
-          </p>
-
-          <h3>Success alert</h3>
-          <div class="alert-row">
-            <div class="ajs-message ajs-success ajs-visible">
-                <div class="ajs-body">
-                    <span class="ajs-icon">
-                      <i class="fa fa-check text-success" aria-hidden="true"></i>
-                    </span>
-                    <span class="text-body">Successfully run. Total query runtime: 32 msec. 1 row retrieved</span>
-                </div>
-            </div>
-          </div>
-          <p>Use this to provide feedback on an event that happened correctly</p>
-
-          <h3>Error alert</h3>
-          <div class="alert-row">
-            <div class="ajs-message ajs-error ajs-visible">
-                <div class="ajs-body">
-                    <span class="ajs-icon">
-                      <i class="fa fa-times text-danger" aria-hidden="true"></i>
-                    </span>
-                    <span class="text-body">Error retrieving properties - INTERNAL SERVER ERROR</span>
-                </div>
-            </div>
-          </div>
-          <p>Use this to provide feedback that something went wrong:</p>
-
-          <h3>Info alert</h3>
-          <div class="alert-row">
-            <div class="ajs-message ajs-visible">
-                <div class="ajs-body">
-                    <span class="ajs-icon">
-                      <i class="fa fa-info text-primary" aria-hidden="true"></i>
-                    </span>
-                    <span class="text-body">This is a neutral message</span>
-                </div>
-            </div>
-          </div>
-          <p>
-            Use this for non urgent info that users should know.
-            Links can also be placed within the banner if needed.
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-header" id="headingThree">
-        <h3 class="mb-0">
-          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-            Fonts
-          </button>
-        </h3>
-      </div>
-      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
-        <div class="card-body">
-          <div class="styleguide-inner">
-            <p class="styleguide">
-                pgAdmin primarily uses Google Roboto for the overall
-                content. The font FontAwesome is used for icons and Source Code Pro
-                is used for SQL and other code. Variables are defined for these fonts
-                and can be used directly for font-family property of css.
-            </p>
-            <p class="styleguide"></p>
-
-            <div class="codeBlock">
-                <div class="highlight">
-                  <pre>
-$font-family-primary: "Roboto" !default;
-$font-family-editor: 'Source Code Pro' !default;
-$font-family-icon: 'FontAwesome' !default;</pre>
-                </div>
-              </div>
-          </div>
-        </div>
-      </div>
+    <div class="style-action">
+        {% if page == "typography" %}
+            {% include "pgaweb/styleguide/style_action.html" %}
+        {% elif page == "themes" %}
+            {% include "pgaweb/styleguide/style_action_theme.html" %}
+        {% elif page == "iconography" %}
+            {% include "pgaweb/styleguide/iconography/style_iconography_theme.html" %}
+        {% endif %}
     </div>
-    <div class="card">
-      <div class="card-header" id="headingfour">
-        <h3 class="mb-0">
-          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
-            Other SASS Vars
-          </button>
-        </h3>
-      </div>
-      <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
-        <div class="card-body">
-          <div class="styleguide-inner">
-            <p>pgAdmin uses SASS/SCSS variables across the application and transpiles
-              SCSS code to CSS when bundled. This makes customizing style easier and
-              global. These variables must be used wherever applicable when developing
-              new style codes.
-            </p>
-            <p>All the SCSS variables used in pgAdmin are viewable
-              <a href="https://git.postgresql.org/gitweb/?p=pgadmin4.git;a=blob;f=web/pgadmin/static/scss/resources/_default.variables.scss" target="_blank">here</a>.
-            </p>
-          </div>
-        </div>
-      </div>
+    <div class="style-guide">
+        <link rel="stylesheet"
+              href="{% static 'COMPILED/assets/css/styleguide.css' %}?{{ gitrev }}"/>
+        {% if page == 'typography' %}
+            {% include "pgaweb/styleguide/style_typography.html" %}
+        {% elif page == 'themes' %}
+            {% include "pgaweb/styleguide/style_theme.html" %}
+        {% elif page == 'iconography' %}
+            {% include "pgaweb/styleguide/iconography/iconography.html" %}
+        {% endif %}
     </div>
-  </div>
 {% endblock %}
diff --git a/pgaweb/templates/pgaweb/styleguide/input/dark_input.html b/pgaweb/templates/pgaweb/styleguide/input/dark_input.html
new file mode 100644
index 0000000..3e783a8
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/input/dark_input.html
@@ -0,0 +1,102 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <label class="d-input-label">Label</label>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="d-default-input"/>
+        </svg>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"pgadmin-control-group
+            form-group row pg-el-12 name"<span class="code-tag">&gt;</span>
+            <br/><span class="code-tag">&lt;label</span> <span
+                class="code-attribute">class=</span>"control-label pg-el-sm-3
+            pg-el-12"
+            <span class="code-attribute">for=</span>"pgC_321"<span
+                class="code-tag">&gt;...&lt;/label&gt;</span>
+            <br/>&emsp;<span class="code-tag">&lt;div</span> <span
+                class="code-attribute">class=</span>"pgadmin-controls pg-el-sm-9
+            pg-el-12"<span class="code-tag">&gt;</span>
+            <br/>&emsp;&emsp;<span class="code-tag">&lt;input</span> <span
+                class="code-attribute">type=</span>"text" <span
+                class="code-attribute">id=</span>"pgC_1030" <span
+                class="code-attribute">class=</span>"form-control"
+            <span class="code-attribute">name=</span>"name" <span
+                class="code-attribute">maxlength=</span>"255" <span
+                class="code-attribute">value=</span>"" <span
+                class="code-attribute">placeholder=</span>""<span
+                class="code-tag">&gt;</span>
+            <br/>&emsp;<span class="code-tag">&lt;/div&gt;</span>
+            <br/><span class="code-tag">&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Active</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <label class="d-input-label">Label</label>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="d-active-input"/>
+            <text x="60" y="20" class="d-input-svg-text-style">postgres</text>
+        </svg>
+    </div>
+    <div class="container-body-active">
+        <div class="code">
+            <span class="code-tag">Handled by bootstrap class</span><span
+                class="code-attribute">.form-control:focus</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Disabled</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <label class="d-input-label">Label</label>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="d-disabled-input"/>
+            <text x="60" y="20"
+                  class="d-input-svg-text-style d-input-svg-text-disabled">
+                postgres
+            </text>
+        </svg>
+    </div>
+    <div class="container-body-disabled">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"pgadmin-control-group
+            form-group row pg-el-12 name"<span class="code-tag">&gt;</span>
+            <br/>&emsp;...
+            <br/>&emsp;<span class="code-tag">&lt;input</span> <span
+                class="code-attribute">id=</span>"pgC_735" <span
+                class="code-attribute">class=</span>"form-control" <span
+                class="code-attribute">
+                readonly aria-readonly=</span>"true" <span
+                class="code-attribute">value=</span>"postgres"<span
+                class="code-tag">&gt;</span>
+            <br/><span class="code-tag">&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Error</p>
+<div class="component-container">
+    <div class="d-container-header">
+        <label class="d-input-label-error">Label</label>
+        <span class="fa fa-exclamation-triangle d-input-svg-text-error"></span>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="d-error-input"/>
+        </svg>
+    </div>
+    <div class="container-body-error">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>“pgadmin-control-group
+            form-group row pg-el-12 name has-error”<span class="code-tag">&gt;
+            ...&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/input/hc_input.html b/pgaweb/templates/pgaweb/styleguide/input/hc_input.html
new file mode 100644
index 0000000..c6a6dd1
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/input/hc_input.html
@@ -0,0 +1,102 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="hc-container-header">
+        <label class="hc-input-label">Label</label>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="hc-default-input"/>
+        </svg>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"pgadmin-control-group
+            form-group row pg-el-12 name"<span class="code-tag">&gt;</span>
+            <br/><span class="code-tag">&lt;label</span> <span
+                class="code-attribute">class=</span>"control-label pg-el-sm-3
+            pg-el-12"
+            <span class="code-attribute">for=</span>"pgC_321"<span
+                class="code-tag">&gt;...&lt;/label&gt;</span>
+            <br/>&emsp;<span class="code-tag">&lt;div</span> <span
+                class="code-attribute">class=</span>"pgadmin-controls pg-el-sm-9
+            pg-el-12"<span class="code-tag">&gt;</span>
+            <br/>&emsp;&emsp;<span class="code-tag">&lt;input</span> <span
+                class="code-attribute">type=</span>"text" <span
+                class="code-attribute">id=</span>"pgC_1030" <span
+                class="code-attribute">class=</span>"form-control"
+            <span class="code-attribute">name=</span>"name" <span
+                class="code-attribute">maxlength=</span>"255" <span
+                class="code-attribute">value=</span>"" <span
+                class="code-attribute">placeholder=</span>""<span
+                class="code-tag">&gt;</span>
+            <br/>&emsp;<span class="code-tag">&lt;/div&gt;</span>
+            <br/><span class="code-tag">&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Active</p>
+<div class="component-container">
+    <div class="hc-container-header">
+        <label class="hc-input-label">Label</label>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="hc-active-input"/>
+            <text x="60" y="20" class="hc-input-svg-text-style">postgres</text>
+        </svg>
+    </div>
+    <div class="container-body-active">
+        <div class="code">
+            <span class="code-tag">Handled by bootstrap class</span><span
+                class="code-attribute">.form-control:focus</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Disabled</p>
+<div class="component-container">
+    <div class="hc-container-header">
+        <label class="hc-input-label">Label</label>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="hc-disabled-input"/>
+            <text x="60" y="20"
+                  class="hc-input-svg-text-style hc-input-svg-text-disabled">
+                postgres
+            </text>
+        </svg>
+    </div>
+    <div class="container-body-disabled">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"pgadmin-control-group
+            form-group row pg-el-12 name"<span class="code-tag">&gt;</span>
+            <br/>&emsp;...
+            <br/>&emsp;<span class="code-tag">&lt;input</span> <span
+                class="code-attribute">id=</span>"pgC_735" <span
+                class="code-attribute">class=</span>"form-control" <span
+                class="code-attribute">
+                readonly aria-readonly=</span>"true" <span
+                class="code-attribute">value=</span>"postgres"<span
+                class="code-tag">&gt;</span>
+            <br/><span class="code-tag">&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Error</p>
+<div class="component-container">
+    <div class="hc-container-header">
+        <label class="hc-input-label-error">Label</label>
+        <span class="fa fa-exclamation-triangle hc-input-svg-text-error"></span>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="hc-error-input"/>
+        </svg>
+    </div>
+    <div class="container-body-error">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>“pgadmin-control-group
+            form-group row pg-el-12 name has-error”<span class="code-tag">&gt;
+            ...&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/input/input.html b/pgaweb/templates/pgaweb/styleguide/input/input.html
new file mode 100644
index 0000000..efc75bc
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/input/input.html
@@ -0,0 +1,21 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Input Field</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/input/sd_input.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/input/dark_input.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/input/hc_input.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/input/sd_input.html b/pgaweb/templates/pgaweb/styleguide/input/sd_input.html
new file mode 100644
index 0000000..05a213e
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/input/sd_input.html
@@ -0,0 +1,101 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="container-header">
+        <label class="input-label">Label</label>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="sd-default-input"/>
+        </svg>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"pgadmin-control-group
+            form-group row pg-el-12 name"<span class="code-tag">&gt;</span>
+            <br/><span class="code-tag">&lt;label</span> <span
+                class="code-attribute">class=</span>"control-label pg-el-sm-3
+            pg-el-12"
+            <span class="code-attribute">for=</span>"pgC_321"<span
+                class="code-tag">&gt;...&lt;/label&gt;</span>
+            <br/>&emsp;<span class="code-tag">&lt;div</span> <span
+                class="code-attribute">class=</span>"pgadmin-controls pg-el-sm-9
+            pg-el-12"<span class="code-tag">&gt;</span>
+            <br/>&emsp;&emsp;<span class="code-tag">&lt;input</span> <span
+                class="code-attribute">type=</span>"text" <span
+                class="code-attribute">id=</span>"pgC_1030" <span
+                class="code-attribute">class=</span>"form-control"
+            <span class="code-attribute">name=</span>"name" <span
+                class="code-attribute">maxlength=</span>"255" <span
+                class="code-attribute">value=</span>"" <span
+                class="code-attribute">placeholder=</span>""<span
+                class="code-tag">&gt;</span>
+            <br/>&emsp;<span class="code-tag">&lt;/div&gt;</span>
+            <br/><span class="code-tag">&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Active</p>
+<div class="component-container">
+    <div class="container-header">
+        <label class="input-label">Label</label>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="sd-active-input"/>
+            <text x="60" y="20" class="input-svg-text-style">postgres</text>
+        </svg>
+    </div>
+    <div class="container-body-active">
+        <div class="code">
+            <span class="code-tag">Handled by bootstrap class</span><span
+                class="code-attribute">.form-control:focus</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Disabled</p>
+<div class="component-container">
+    <div class="container-header">
+        <label class="input-label">Label</label>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="sd-disabled-input"/>
+            <text x="60" y="20"
+                  class="input-svg-text-style input-svg-text-disabled">postgres
+            </text>
+        </svg>
+    </div>
+    <div class="container-body-disabled">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"pgadmin-control-group
+            form-group row pg-el-12 name"<span class="code-tag">&gt;</span>
+            <br/>&emsp;...
+            <br/>&emsp;<span class="code-tag">&lt;input</span> <span
+                class="code-attribute">id=</span>"pgC_735" <span
+                class="code-attribute">class=</span>"form-control" <span
+                class="code-attribute">
+                readonly aria-readonly=</span>"true" <span
+                class="code-attribute">value=</span>"postgres"<span
+                class="code-tag">&gt;</span>
+            <br/><span class="code-tag">&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Error</p>
+<div class="component-container">
+    <div class="container-header">
+        <label class="input-label-error">Label</label>
+        <label class="fa fa-exclamation-triangle input-svg-text-error"></label>
+        <svg xmlns="http://www.w3.org/2000/svg" class="input-svg-style">
+            <rect x="50" y="1" height="32" width="252" rx="3" ry="3"
+                  class="sd-error-input"/>
+        </svg>
+    </div>
+    <div class="container-body-error">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>“pgadmin-control-group
+            form-group row pg-el-12 name has-error”<span class="code-tag">&gt;
+            ...&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/dark_menu.html b/pgaweb/templates/pgaweb/styleguide/menu/dark_menu.html
new file mode 100644
index 0000000..317a07f
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/menu/dark_menu.html
@@ -0,0 +1,26 @@
+<p class="color-header">Main Menu</p>
+<div class="component-container">
+    <div class="d-container-header">
+        {% load static %}
+        <img class="d-accordion-style"
+             src="{% static "img/style_guide/main_menu_dark.png" %}"
+             alt="Main Menu."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">.pg-navbar {
+                <br/>&emsp;<span class="code-attribute">font-size:</span> .925rem;
+                <br/>&emsp;<span class="code-attribute">background-color:</span> #326690;
+                <br/>&emsp;<span class="code-attribute">padding-left:</span> 0;
+                <br/>&emsp;<span class="code-attribute">padding-right:</span> .5rem;
+                <br/>}<br/>
+                .navbar-dark .navbar-brand, .navbar-dark .navbar-brand:focus, .navbar-dark
+                <br/>.navbar-brand:hover, .navbar-dark .navbar-nav.nav-link, .navbar-dark
+                <br/>.navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover
+            {
+                <br/>&emsp;<span class="code-attribute">color:</span> #fff;
+                <br/>}
+            </span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/hc_menu.html b/pgaweb/templates/pgaweb/styleguide/menu/hc_menu.html
new file mode 100644
index 0000000..84b4d4e
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/menu/hc_menu.html
@@ -0,0 +1,26 @@
+<p class="color-header">Main Menu</p>
+<div class="component-container">
+    <div class="hc-container-header">
+        {% load static %}
+        <img class="hc-accordion-style"
+             src="{% static "img/style_guide/main_menu_hc.png" %}"
+             alt="Main Menu."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">.pg-navbar {
+                <br/>&emsp;<span class="code-attribute">font-size:</span> .925rem;
+                <br/>&emsp;<span class="code-attribute">background-color:</span> #326690;
+                <br/>&emsp;<span class="code-attribute">padding-left:</span> 0;
+                <br/>&emsp;<span class="code-attribute">padding-right:</span> .5rem;
+                <br/>}<br/>
+                .navbar-dark .navbar-brand, .navbar-dark .navbar-brand:focus, .navbar-dark
+                <br/>.navbar-brand:hover, .navbar-dark .navbar-nav.nav-link, .navbar-dark
+                <br/>.navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover
+            {
+                <br/>&emsp;<span class="code-attribute">color:</span> #fff;
+                <br/>}
+            </span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/menu.html b/pgaweb/templates/pgaweb/styleguide/menu/menu.html
new file mode 100644
index 0000000..8f3bf50
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/menu/menu.html
@@ -0,0 +1,21 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Menu</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/menu/sd_menu.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/menu/dark_menu.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/menu/hc_menu.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/sd_menu.html b/pgaweb/templates/pgaweb/styleguide/menu/sd_menu.html
new file mode 100644
index 0000000..709eaa2
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/menu/sd_menu.html
@@ -0,0 +1,27 @@
+<p class="color-header">Main Menu</p>
+<div class="component-container">
+    <div class="container-header">
+        {% load static %}
+        <img class="accordion-style"
+             src="{% static "img/style_guide/main_menu.png" %}"
+             alt="Main Menu."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">.pg-navbar {
+                <br/>&emsp;<span class="code-attribute">font-size:</span> .925rem;
+                <br/>&emsp;<span class="code-attribute">background-color:</span> #326690;
+                <br/>&emsp;<span class="code-attribute">padding-left:</span> 0;
+                <br/>&emsp;<span class="code-attribute">padding-right:</span> .5rem;
+                <br/>}<br/>
+                .navbar-dark .navbar-brand, .navbar-dark .navbar-brand:focus, .navbar-dark
+                <br/>.navbar-brand:hover, .navbar-dark .navbar-nav.nav-link, .navbar-dark
+                <br/>.navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover
+            {
+                <br/>&emsp;<span class="code-attribute">color:</span> #fff;
+                <br/>}
+            </span>
+        </div>
+    </div>
+</div>
+
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/dark_radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radiobuttons/dark_radiobuttons.html
new file mode 100644
index 0000000..e955a19
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/radiobuttons/dark_radiobuttons.html
@@ -0,0 +1,116 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="d-container-header radio-container-header">
+        <div class="btn-group pgadmin-controls-radio-none" role="radiogroup"
+             aria-labelledby="pgC_2587_grplabel">
+            <label role="radio" class="btn btn-radiomodern d-btn-radio-primary"
+                   tabindex="0">
+                <i class="fa fa-check d-radio-check" role="img"></i>
+                <input type="radio" name="value" autocomplete="off" value="none"
+                       checked=""> None
+            </label>
+
+
+            <label role="radio"
+                   class="btn btn-radiomodern d-btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="docking"> Prevent Docking
+            </label>
+
+
+            <label role="radio"
+                   class="btn btn-radiomodern d-btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="full"> Full Lock
+            </label>
+
+        </div>
+    </div>
+    <div class="code radio-btn-code">
+        <div class="radio-btn-code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"btn-group
+            pgadmin-controls-radio-none"<span class="code-tag">&gt;
+            <br/>&emsp;&lt;label</span> <span
+                class="code-attribute">class=</span>"btn btn-radiomodern
+            btn-primary" tabindex="0"<span class="code-tag">&gt;
+            <br/>&emsp;&lt;i</span> <span class="code-attribute">class=</span>"fa
+            fa-check "<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;input</span> <span
+                class="code-attribute">type=</span>"radio" <span
+                class="code-attribute">name=</span>"value" <span
+                class="code-attribute">autocomplete=</span>"off" <span
+                class="code-attribute">value=</span>"none" <span
+                class="code-attribute">checked=</span>""<span class="code-tag">&gt;
+            None<br/>&emsp;&lt;/label&gt;</span>
+            <br/>&emsp;<span class="code-tag">&lt;label</span> <span
+                class="code-attribute">class=</span>"btn btn-radiomodern
+            btn-secondary" <span class="code-attribute">tabindex=</span>"0"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;i</span> <span class="code-attribute">class=</span>"fa
+            fa-check visibility-hidden"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;input</span> <span
+                class="code-attribute">type=</span>"radio" <span
+                class="code-attribute">name=</span>"value" <span
+                class="code-attribute">autocomplete=</span>"off" <span
+                class="code-attribute">value=</span>"docking"<span
+                class="code-tag">&gt;
+            Prevent Docking
+            <br/>&emsp;&lt;/label&gt;
+            <br/>&emsp;&lt;label</span> <span
+                class="code-attribute">class=</span>"btn btn-radiomodern
+            btn-secondary" <span class="code-attribute">tabindex=</span>"0"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;i</span> <span class="code-attribute">class=</span>"fa
+            fa-check visibility-hidden "<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;input</span> <span
+                class="code-attribute">type=</span>"radio" <span
+                class="code-attribute">name=</span>"value" <span
+                class="code-attribute">autocomplete=</span>"off" <span
+                class="code-attribute">value=</span>"full"<span
+                class="code-tag">&gt; Full Lock
+            <br/>&emsp;&lt;/label&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Hover</p>
+<div class="component-container">
+    <div class="d-container-header radio-container-header">
+        <div class="btn-group pgadmin-controls-radio-none" role="radiogroup"
+             aria-labelledby="pgC_2587_grplabel">
+            <label role="radio"
+                   class="btn btn-radiomodern d-btn-radio-primary-hover"
+                   tabindex="0">
+                <i class="fa fa-check d-radio-check" role="img"></i>
+                <input type="radio" name="value" autocomplete="off" value="none"
+                       checked=""> None
+            </label>
+
+
+            <label role="radio"
+                   class="btn btn-radiomodern d-btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="docking"> Prevent Docking
+            </label>
+
+
+            <label role="radio"
+                   class="btn btn-radiomodern d-btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="full"> Full Lock
+            </label>
+
+        </div>
+    </div>
+    <div class="code radio-btn-code">
+        <div class="radio-btn-code">
+            <span class="code-tag">Handled by bootstrap class</span> <span
+                class="code-attribute">.btn-primary:hover</span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/hc_radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radiobuttons/hc_radiobuttons.html
new file mode 100644
index 0000000..3f2a249
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/radiobuttons/hc_radiobuttons.html
@@ -0,0 +1,116 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="hc-container-header radio-container-header">
+        <div class="btn-group pgadmin-controls-radio-none" role="radiogroup"
+             aria-labelledby="pgC_2587_grplabel">
+            <label role="radio" class="btn btn-radiomodern hc-btn-radio-primary"
+                   tabindex="0">
+                <i class="fa fa-check hc-radio-check" role="img"></i>
+                <input type="radio" name="value" autocomplete="off" value="none"
+                       checked=""> None
+            </label>
+
+
+            <label role="radio"
+                   class="btn btn-radiomodern hc-btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="docking"> Prevent Docking
+            </label>
+
+
+            <label role="radio"
+                   class="btn btn-radiomodern hc-btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="full"> Full Lock
+            </label>
+
+        </div>
+    </div>
+    <div class="code radio-btn-code">
+        <div class="radio-btn-code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"btn-group
+            pgadmin-controls-radio-none"<span class="code-tag">&gt;
+            <br/>&emsp;&lt;label</span> <span
+                class="code-attribute">class=</span>"btn btn-radiomodern
+            btn-primary" tabindex="0"<span class="code-tag">&gt;
+            <br/>&emsp;&lt;i</span> <span class="code-attribute">class=</span>"fa
+            fa-check "<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;input</span> <span
+                class="code-attribute">type=</span>"radio" <span
+                class="code-attribute">name=</span>"value" <span
+                class="code-attribute">autocomplete=</span>"off" <span
+                class="code-attribute">value=</span>"none" <span
+                class="code-attribute">checked=</span>""<span class="code-tag">&gt;
+            None<br/>&emsp;&lt;/label&gt;</span>
+            <br/>&emsp;<span class="code-tag">&lt;label</span> <span
+                class="code-attribute">class=</span>"btn btn-radiomodern
+            btn-secondary" <span class="code-attribute">tabindex=</span>"0"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;i</span> <span class="code-attribute">class=</span>"fa
+            fa-check visibility-hidden"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;input</span> <span
+                class="code-attribute">type=</span>"radio" <span
+                class="code-attribute">name=</span>"value" <span
+                class="code-attribute">autocomplete=</span>"off" <span
+                class="code-attribute">value=</span>"docking"<span
+                class="code-tag">&gt;
+            Prevent Docking
+            <br/>&emsp;&lt;/label&gt;
+            <br/>&emsp;&lt;label</span> <span
+                class="code-attribute">class=</span>"btn btn-radiomodern
+            btn-secondary" <span class="code-attribute">tabindex=</span>"0"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;i</span> <span class="code-attribute">class=</span>"fa
+            fa-check visibility-hidden "<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;input</span> <span
+                class="code-attribute">type=</span>"radio" <span
+                class="code-attribute">name=</span>"value" <span
+                class="code-attribute">autocomplete=</span>"off" <span
+                class="code-attribute">value=</span>"full"<span
+                class="code-tag">&gt; Full Lock
+            <br/>&emsp;&lt;/label&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Hover</p>
+<div class="component-container">
+    <div class="hc-container-header radio-container-header">
+        <div class="btn-group pgadmin-controls-radio-none" role="radiogroup"
+             aria-labelledby="pgC_2587_grplabel">
+            <label role="radio"
+                   class="btn btn-radiomodern hc-btn-radio-primary-hover"
+                   tabindex="0">
+                <i class="fa fa-check hc-radio-check" role="img"></i>
+                <input type="radio" name="value" autocomplete="off" value="none"
+                       checked=""> None
+            </label>
+
+
+            <label role="radio"
+                   class="btn btn-radiomodern hc-btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="docking"> Prevent Docking
+            </label>
+
+
+            <label role="radio"
+                   class="btn btn-radiomodern hc-btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="full"> Full Lock
+            </label>
+
+        </div>
+    </div>
+    <div class="code radio-btn-code">
+        <div class="radio-btn-code">
+            <span class="code-tag">Handled by bootstrap class</span> <span
+                class="code-attribute">.btn-primary:hover</span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html
new file mode 100644
index 0000000..251b2c4
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html
@@ -0,0 +1,21 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Radio Buttons</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/radiobuttons/sd_radiobuttons.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/radiobuttons/dark_radiobuttons.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/radiobuttons/hc_radiobuttons.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/sd_radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radiobuttons/sd_radiobuttons.html
new file mode 100644
index 0000000..04bcd7a
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/radiobuttons/sd_radiobuttons.html
@@ -0,0 +1,112 @@
+<p class="color-header">Default</p>
+<div class="component-container">
+    <div class="container-header radio-container-header">
+        <div class="btn-group pgadmin-controls-radio-none" role="radiogroup"
+             aria-labelledby="pgC_2587_grplabel">
+            <label role="radio" class="btn btn-radiomodern btn-radio-primary"
+                   tabindex="0">
+                <i class="fa fa-check radio-check" role="img"></i>
+                <input type="radio" name="value" autocomplete="off" value="none"
+                       checked=""> None
+            </label>
+
+
+            <label role="radio" class="btn btn-radiomodern btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="docking"> Prevent Docking
+            </label>
+
+
+            <label role="radio" class="btn btn-radiomodern btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="full"> Full Lock
+            </label>
+
+        </div>
+    </div>
+    <div class="code radio-btn-code">
+        <div class="radio-btn-code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"btn-group
+            pgadmin-controls-radio-none"<span class="code-tag">&gt;
+            <br/>&emsp;&lt;label</span> <span
+                class="code-attribute">class=</span>"btn btn-radiomodern
+            btn-primary" tabindex="0"<span class="code-tag">&gt;
+            <br/>&emsp;&lt;i</span> <span class="code-attribute">class=</span>"fa
+            fa-check "<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;input</span> <span
+                class="code-attribute">type=</span>"radio" <span
+                class="code-attribute">name=</span>"value" <span
+                class="code-attribute">autocomplete=</span>"off" <span
+                class="code-attribute">value=</span>"none" <span
+                class="code-attribute">checked=</span>""<span class="code-tag">&gt;
+            None<br/>&emsp;&lt;/label&gt;</span>
+            <br/>&emsp;<span class="code-tag">&lt;label</span> <span
+                class="code-attribute">class=</span>"btn btn-radiomodern
+            btn-secondary" <span class="code-attribute">tabindex=</span>"0"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;i</span> <span class="code-attribute">class=</span>"fa
+            fa-check visibility-hidden"<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;input</span> <span
+                class="code-attribute">type=</span>"radio" <span
+                class="code-attribute">name=</span>"value" <span
+                class="code-attribute">autocomplete=</span>"off" <span
+                class="code-attribute">value=</span>"docking"<span
+                class="code-tag">&gt;
+            Prevent Docking
+            <br/>&emsp;&lt;/label&gt;
+            <br/>&emsp;&lt;label</span> <span
+                class="code-attribute">class=</span>"btn btn-radiomodern
+            btn-secondary" <span class="code-attribute">tabindex=</span>"0"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;i</span> <span class="code-attribute">class=</span>"fa
+            fa-check visibility-hidden "<span class="code-tag">&gt;&lt;/i&gt;
+            <br/>&emsp;&lt;input</span> <span
+                class="code-attribute">type=</span>"radio" <span
+                class="code-attribute">name=</span>"value" <span
+                class="code-attribute">autocomplete=</span>"off" <span
+                class="code-attribute">value=</span>"full"<span
+                class="code-tag">&gt; Full Lock
+            <br/>&emsp;&lt;/label&gt;
+            <br/>&lt;/div&gt;</span>
+        </div>
+    </div>
+</div>
+
+<p class="color-header">Hover</p>
+<div class="component-container">
+    <div class="container-header radio-container-header">
+        <div class="btn-group pgadmin-controls-radio-none" role="radiogroup"
+             aria-labelledby="pgC_2587_grplabel">
+            <label role="radio"
+                   class="btn btn-radiomodern btn-radio-primary-hover"
+                   tabindex="0">
+                <i class="fa fa-check radio-check" role="img"></i>
+                <input type="radio" name="value" autocomplete="off" value="none"
+                       checked=""> None
+            </label>
+
+
+            <label role="radio" class="btn btn-radiomodern btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="docking"> Prevent Docking
+            </label>
+
+
+            <label role="radio" class="btn btn-radiomodern btn-radio-secondary"
+                   tabindex="0">
+                <input type="radio" name="value" autocomplete="off"
+                       value="full"> Full Lock
+            </label>
+
+        </div>
+    </div>
+    <div class="code radio-btn-code">
+        <div class="radio-btn-code">
+            <span class="code-tag">Handled by bootstrap class</span> <span
+                class="code-attribute">.btn-primary:hover</span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/style_action.html b/pgaweb/templates/pgaweb/styleguide/style_action.html
new file mode 100644
index 0000000..d7844ba
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/style_action.html
@@ -0,0 +1,10 @@
+<div class="well style-header">
+    <h2>Contents</h2>
+
+    <ul class="style-action-menu">
+        <li><a href="{% url 'styleguide_index' page='typography' %}">Typography</a></li>
+        <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Themes</a>
+        </li>
+        <li><a href="{% url 'styleguide_index' page='iconography' section='fontawesome' %}">Iconography</a></li>
+    </ul>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/style_action_theme.html b/pgaweb/templates/pgaweb/styleguide/style_action_theme.html
new file mode 100644
index 0000000..615146f
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/style_action_theme.html
@@ -0,0 +1,36 @@
+<div class="well style-header">
+    <h2>Contents</h2>
+
+    <ul class="style-action-menu">
+        <li><a href="{% url 'styleguide_index' page='typography' %}">Typography</a></li>
+        <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Themes</a>
+            <ul>
+                <li><a href="{% url 'styleguide_index' page='themes' section='color' %}">Color
+                    Palette</a></li>
+                <li><a href="{% url 'styleguide_index' page='themes' section='input' %}">Input
+                    Field</a></li>
+                <li><a href="{% url 'styleguide_index' page='themes' section='dropdowns' %}">Dropdowns</a>
+                </li>
+                <li><a href="{% url 'styleguide_index' page='themes' section='buttons' %}">Buttons</a>
+                </li>
+                <li><a href="{% url 'styleguide_index' page='themes' section='checkbox' %}">Checkbox</a>
+                </li>
+                <li><a href="{% url 'styleguide_index' page='themes' section='radio_buttons' %}">Radio
+                    Buttons</a></li>
+                <li><a href="{% url 'styleguide_index' page='themes' section='toggle_buttons' %}">Toggle
+                    Buttons</a></li>
+                <li><a href="{% url 'styleguide_index' page='themes' section='alerts' %}">Alerts</a>
+                </li>
+                <li><a href="{% url 'styleguide_index' page='themes' section='table' %}">Table</a>
+                </li>
+                <li><a href="{% url 'styleguide_index' page='themes' section='accordion' %}">Accordion</a>
+                </li>
+                <li><a href="{% url 'styleguide_index' page='themes' section='menus' %}">Menu</a>
+                </li>
+                <li><a href="{% url 'styleguide_index' page='themes' section='tab_sets' %}">Tab
+                    Set</a></li>
+            </ul>
+        </li>
+        <li><a href="{% url 'styleguide_index' page='iconography' section='fontawesome' %}">Iconography</a></li>
+    </ul>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/style_theme.html b/pgaweb/templates/pgaweb/styleguide/style_theme.html
new file mode 100644
index 0000000..316f895
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/style_theme.html
@@ -0,0 +1,27 @@
+<div class="style-theme">
+    {% if section == 'color' %}
+        {% include "pgaweb/styleguide/color_palette/color_palette.html" %}
+    {% elif section == 'input' %}
+        {% include "pgaweb/styleguide/input/input.html" %}
+    {% elif section == 'dropdowns' %}
+        {% include "pgaweb/styleguide/dropdown/dropdown.html" %}
+    {% elif section == 'buttons' %}
+        {% include "pgaweb/styleguide/button/button.html" %}
+    {% elif section == 'checkbox' %}
+        {% include "pgaweb/styleguide/checkbox/checkbox.html" %}
+    {% elif section == 'radio_buttons' %}
+        {% include "pgaweb/styleguide/radiobuttons/radiobuttons.html" %}
+    {% elif section == 'toggle_buttons' %}
+        {% include "pgaweb/styleguide/togglebutton/togglebutton.html" %}
+    {% elif section == 'alerts' %}
+        {% include "pgaweb/styleguide/alert/alert.html" %}
+    {% elif section == 'table' %}
+        {% include "pgaweb/styleguide/table/table.html" %}
+    {% elif section == 'accordion' %}
+        {% include "pgaweb/styleguide/accordion/accordion.html" %}
+    {% elif section == 'menus' %}
+        {% include "pgaweb/styleguide/menu/menu.html" %}
+    {% elif section == 'tab_sets' %}
+        {% include "pgaweb/styleguide/tab_set/tab_set.html" %}
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/style_typography.html b/pgaweb/templates/pgaweb/styleguide/style_typography.html
new file mode 100644
index 0000000..c34aaba
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/style_typography.html
@@ -0,0 +1,49 @@
+<h1 class="styleguide-title" id="typography">Typography</h1>
+<p>
+    pgAdmin primarily uses Google Roboto for the overall content and Source Code
+    Pro is used for SQL and other code.
+    The arrangement of type involves selecting typefaces, point sizes, line
+    lengths, line-spacing, and letter-spacing,
+    and adjusting the space between pairs of letters.
+</p>
+
+<div class="typography-font-sect">
+    <p class="typg-style-section">
+        <span class="typg-font-normal">Aa</span>
+    </p>
+    <p class="typg-style-section">
+        <span class="typg-font-bold">Aa</span>
+    </p>
+
+    <p class="typg-font-normal-sample">
+        <span>Roboto Regular</span><br/>
+        <span>ABCDEFGHIJKLMNOPQRSTUVWXYZ</span><br/>
+        <span>abcdefghijklmnopqrstuvwxyz</span><br/>
+        <span>0123456789</span><br/>
+    </p>
+
+    <p class="typg-font-bold-sample">
+        <span>Roboto Regular</span><br/>
+        <span>ABCDEFGHIJKLMNOPQRSTUVWXYZ</span><br/>
+        <span>abcdefghijklmnopqrstuvwxyz</span><br/>
+        <span>0123456789</span><br/>
+    </p>
+</div>
+<div class="typography-font-sect font-family-desc">
+        <span>
+            <span class="font-family-color">$font-family-primary:</span> "Roboto", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        </span>
+    <br/>
+    <br/>
+    <span>
+            <span class="font-family-color">$font-family-editor:</span> "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        </span>
+</div>
+<div class="font-size-sect">
+    <p>Font Size</p>
+    <div class="typography-font-sect font-size-style">
+        <pre class="font-size-16-style">16px<span class="tab-16px">Lorem ipsum is dummy text.</span></pre>
+        <pre class="font-size-14-style">14px<span class="tab-14px">Lorem ipsum is dummy text.</span></pre>
+        <pre class="font-size-13-style">13px<span class="tab-13px">Lorem ipsum is dummy text.</span></pre>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/tab_set/dark_tab_set.html b/pgaweb/templates/pgaweb/styleguide/tab_set/dark_tab_set.html
new file mode 100644
index 0000000..8453c26
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/tab_set/dark_tab_set.html
@@ -0,0 +1,22 @@
+<p class="color-header">Tab Set</p>
+<div class="component-container">
+    <div class="d-acc-container-header-expand">
+        {% load static %}
+        <img class="d-accordion-style"
+             src="{% static "img/style_guide/menu_tab_dark.png" %}"
+             alt="Sub Menu."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">.wcPanelTabActive {
+                <br/>&emsp;<span class="code-attribute">border-bottom:</span> 3px solid #326690;
+                <br/>&emsp;<span class="code-attribute">color:</span> #326690;
+                <br/>}
+                <br/>.wcPanelTab {
+                <br/>&emsp;<span class="code-attribute">color:</span> #222;
+                <br/>&emsp;<span class="code-attribute">padding:</span> 5px 10px 2px; margin: 0;
+                <br/>}
+            </span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/tab_set/hc_tab_set.html b/pgaweb/templates/pgaweb/styleguide/tab_set/hc_tab_set.html
new file mode 100644
index 0000000..864c45b
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/tab_set/hc_tab_set.html
@@ -0,0 +1,22 @@
+<p class="color-header">Tab Set</p>
+<div class="component-container">
+    <div class="hc-acc-container-header-expand">
+        {% load static %}
+        <img class="hc-accordion-style"
+             src="{% static "img/style_guide/menu_tab_hc.png" %}"
+             alt="Sub Menu."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">.wcPanelTabActive {
+                <br/>&emsp;<span class="code-attribute">border-bottom:</span> 3px solid #326690;
+                <br/>&emsp;<span class="code-attribute">color:</span> #326690;
+                <br/>}
+                <br/>.wcPanelTab {
+                <br/>&emsp;<span class="code-attribute">color:</span> #222;
+                <br/>&emsp;<span class="code-attribute">padding:</span> 5px 10px 2px; margin: 0;
+                <br/>}
+            </span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/tab_set/sd_tab_set.html b/pgaweb/templates/pgaweb/styleguide/tab_set/sd_tab_set.html
new file mode 100644
index 0000000..9110edc
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/tab_set/sd_tab_set.html
@@ -0,0 +1,21 @@
+<p class="color-header">Tab Set</p>
+<div class="component-container">
+    <div class="acc-container-header-expand">
+        {% load static %}
+        <img class="accordion-style"
+             src="{% static "img/style_guide/menu_tab.png" %}" alt="Sub Menu."/>
+    </div>
+    <div class="container-body">
+        <div class="code">
+            <span class="code-tag">.wcPanelTabActive {
+                <br/>&emsp;<span class="code-attribute">border-bottom:</span> 3px solid #326690;
+                <br/>&emsp;<span class="code-attribute">color:</span> #326690;
+                <br/>}
+                <br/>.wcPanelTab {
+                <br/>&emsp;<span class="code-attribute">color:</span> #222;
+                <br/>&emsp;<span class="code-attribute">padding:</span> 5px 10px 2px; margin: 0;
+                <br/>}
+            </span>
+        </div>
+    </div>
+</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html b/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
new file mode 100644
index 0000000..334ea42
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
@@ -0,0 +1,21 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Tab Set</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/tab_set/sd_tab_set.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/tab_set/dark_tab_set.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/tab_set/hc_tab_set.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/table/dark_table.html b/pgaweb/templates/pgaweb/styleguide/table/dark_table.html
new file mode 100644
index 0000000..8ae6bda
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/table/dark_table.html
@@ -0,0 +1,133 @@
+<p class="color-header">Default with hover</p>
+<div class="component-container">
+    <div class="d-table-container-header">
+        <p class="d-table-hover-label">Hover</p>
+        <div class="pg-panel-statistics-container d-table-cont-style">
+            <table class="backgrid presentation table table-bordered d-custom-table-bordered d-table-bordered table-noouter-border d-table-hover"
+                   role="table">
+                <thead>
+                <tr>
+                    <th class="sortable renderable width_percent_25 statistics d-table-border"
+                        role="columnheader">
+                        <button class="d-table-header-style">Statistics<span
+                                class="sort-caret" aria-hidden="true"></span>
+                        </button>
+                    </th>
+                    <th class="sortable renderable value  d-table-border"
+                        role="columnheader">
+                        <button class="d-table-header-style">Value<span
+                                class="sort-caret" aria-hidden="true"></span>
+                        </button>
+                    </th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics d-table-border">
+                        <span class="display-text"
+                              title="Backends">Backends</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value d-table-border">
+                        <span class="display-text" title="2">2</span>
+                    </td>
+                </tr>
+                <tr class="d-table-hover-tr-style">
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics d-table-hover-td-style">
+                        <span class="display-text" title="Xact committed">Xact committed</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value d-table-hover-td-style">
+                        <span class="display-text" title="90830">90830</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics d-table-border">
+                        <span class="display-text" title="Xact rolled back">Xact rolled back</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value d-table-border">
+                        <span class="display-text" title="651">651</span></td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics d-table-border">
+                        <span class="display-text" title="Blocks read">Blocks read</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value d-table-border">
+                        <span class="display-text" title="64395">64395</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics d-table-border">
+                        <span class="display-text"
+                              title="Blocks hit">Blocks hit</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value d-table-border">
+                        <span class="display-text"
+                              title="3288016">3288016</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics d-table-border">
+                        <span class="display-text" title="Tuples returned">Tuples returned</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value d-table-border">
+                        <span class="display-text"
+                              title="6521406">6521406</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics d-table-border">
+                        <span class="display-text" title="Tuples fetched">Tuples fetched</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value d-table-border">
+                        <span class="display-text"
+                              title="1603080">1603080</span>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="tbl-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"pg-panel-statistics-container"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;table</span> <span
+                class="code-attribute">class=</span>"backgrid presentation table
+            table-bordered
+            table-noouter-border table-hover"
+            <span class="code-attribute">role=</span>"table"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;thead&gt;
+            <br/>&emsp;&emsp;&emsp;&lt;tr&gt;
+            <br/>&emsp;&emsp;&emsp;&emsp;&lt;th</span> <span
+                class="code-attribute">class=</span>"sortable renderable
+            width_percent_25 statistics"
+            <span class="code-attribute">role=</span>"columnheader"<span
+                class="code-tag">&gt;...&lt;/th&gt;
+            <br/>&emsp;&emsp;&emsp;&emsp;&lt;th</span> <span
+                class="code-attribute">class=</span>"sortable renderable value"
+            <span class="code-attribute">role=</span>"columnheader"<span
+                class="code-tag">&gt;
+                            ...&lt;/th&gt;
+            <br/>&emsp;&emsp;&emsp;&lt;/tr&gt;
+            <br/>&emsp;&emsp;&lt;/thead&gt;
+            <br/>&emsp;&emsp;&lt;tbody&gt;...&lt;/tbody&gt;
+            <br/>&emsp;&lt;/table&gt;
+            <br/>&lt;/div&gt;
+            </span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/table/hc_table.html b/pgaweb/templates/pgaweb/styleguide/table/hc_table.html
new file mode 100644
index 0000000..13fec91
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/table/hc_table.html
@@ -0,0 +1,133 @@
+<p class="color-header">Default with hover</p>
+<div class="component-container">
+    <div class="hc-table-container-header">
+        <p class="hc-table-hover-label">Hover</p>
+        <div class="pg-panel-statistics-container hc-table-cont-style">
+            <table class="backgrid presentation table table-bordered hc-custom-table-bordered hc-table-bordered table-noouter-border hc-table-hover"
+                   role="table">
+                <thead>
+                <tr>
+                    <th class="sortable renderable width_percent_25 statistics hc-table-border"
+                        role="columnheader">
+                        <button class="hc-table-header-style">Statistics<span
+                                class="sort-caret" aria-hidden="true"></span>
+                        </button>
+                    </th>
+                    <th class="sortable renderable value  hc-table-border"
+                        role="columnheader">
+                        <button class="hc-table-header-style">Value<span
+                                class="sort-caret" aria-hidden="true"></span>
+                        </button>
+                    </th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics hc-table-border">
+                        <span class="display-text"
+                              title="Backends">Backends</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value hc-table-border">
+                        <span class="display-text" title="2">2</span>
+                    </td>
+                </tr>
+                <tr class="hc-table-hover-tr-style">
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics hc-table-hover-td-style">
+                        <span class="display-text" title="Xact committed">Xact committed</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value hc-table-hover-td-style">
+                        <span class="display-text" title="90830">90830</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics hc-table-border">
+                        <span class="display-text" title="Xact rolled back">Xact rolled back</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value hc-table-border">
+                        <span class="display-text" title="651">651</span></td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics hc-table-border">
+                        <span class="display-text" title="Blocks read">Blocks read</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value hc-table-border">
+                        <span class="display-text" title="64395">64395</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics hc-table-border">
+                        <span class="display-text"
+                              title="Blocks hit">Blocks hit</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value hc-table-border">
+                        <span class="display-text"
+                              title="3288016">3288016</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics hc-table-border">
+                        <span class="display-text" title="Tuples returned">Tuples returned</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value hc-table-border">
+                        <span class="display-text"
+                              title="6521406">6521406</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics hc-table-border">
+                        <span class="display-text" title="Tuples fetched">Tuples fetched</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value hc-table-border">
+                        <span class="display-text"
+                              title="1603080">1603080</span>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="tbl-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"pg-panel-statistics-container"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;table</span> <span
+                class="code-attribute">class=</span>"backgrid presentation table
+            table-bordered
+            table-noouter-border table-hover"
+            <span class="code-attribute">role=</span>"table"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;thead&gt;
+            <br/>&emsp;&emsp;&emsp;&lt;tr&gt;
+            <br/>&emsp;&emsp;&emsp;&emsp;&lt;th</span> <span
+                class="code-attribute">class=</span>"sortable renderable
+            width_percent_25 statistics"
+            <span class="code-attribute">role=</span>"columnheader"<span
+                class="code-tag">&gt;...&lt;/th&gt;
+            <br/>&emsp;&emsp;&emsp;&emsp;&lt;th</span> <span
+                class="code-attribute">class=</span>"sortable renderable value"
+            <span class="code-attribute">role=</span>"columnheader"<span
+                class="code-tag">&gt;
+                            ...&lt;/th&gt;
+            <br/>&emsp;&emsp;&emsp;&lt;/tr&gt;
+            <br/>&emsp;&emsp;&lt;/thead&gt;
+            <br/>&emsp;&emsp;&lt;tbody&gt;...&lt;/tbody&gt;
+            <br/>&emsp;&lt;/table&gt;
+            <br/>&lt;/div&gt;
+            </span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/table/sd_table.html b/pgaweb/templates/pgaweb/styleguide/table/sd_table.html
new file mode 100644
index 0000000..ddb1169
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/table/sd_table.html
@@ -0,0 +1,131 @@
+<p class="color-header">Default with hover</p>
+<div class="component-container">
+    <div class="table-container-header">
+        <p class="table-hover-label">Hover</p>
+        <div class="pg-panel-statistics-container table-cont-style">
+            <table class="backgrid presentation table table-bordered table-noouter-border table-hover"
+                   role="table">
+                <thead>
+                <tr>
+                    <th class="sortable renderable width_percent_25 statistics"
+                        role="columnheader">
+                        <button>Statistics<span class="sort-caret"
+                                                aria-hidden="true"></span>
+                        </button>
+                    </th>
+                    <th class="sortable renderable value" role="columnheader">
+                        <button>Value<span class="sort-caret"
+                                           aria-hidden="true"></span></button>
+                    </th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics">
+                        <span class="display-text"
+                              title="Backends">Backends</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value">
+                        <span class="display-text" title="2">2</span>
+                    </td>
+                </tr>
+                <tr class="table-hover-tr-style">
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics table-hover-td-style">
+                        <span class="display-text" title="Xact committed">Xact committed</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value table-hover-td-style">
+                        <span class="display-text" title="90830">90830</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics">
+                        <span class="display-text" title="Xact rolled back">Xact rolled back</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value">
+                        <span class="display-text" title="651">651</span></td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics">
+                        <span class="display-text" title="Blocks read">Blocks read</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value">
+                        <span class="display-text" title="64395">64395</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics">
+                        <span class="display-text"
+                              title="Blocks hit">Blocks hit</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value">
+                        <span class="display-text"
+                              title="3288016">3288016</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics">
+                        <span class="display-text" title="Tuples returned">Tuples returned</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value">
+                        <span class="display-text"
+                              title="6521406">6521406</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable statistics">
+                        <span class="display-text" title="Tuples fetched">Tuples fetched</span>
+                    </td>
+                    <td tabindex="0"
+                        class="string-cell sortable renderable value">
+                        <span class="display-text"
+                              title="1603080">1603080</span>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="tbl-container-body">
+        <div class="code">
+            <span class="code-tag">&lt;div</span> <span class="code-attribute">class=</span>"pg-panel-statistics-container"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&lt;table</span> <span
+                class="code-attribute">class=</span>"backgrid presentation table
+            table-bordered
+            table-noouter-border table-hover"
+            <span class="code-attribute">role=</span>"table"<span
+                class="code-tag">&gt;
+            <br/>&emsp;&emsp;&lt;thead&gt;
+            <br/>&emsp;&emsp;&emsp;&lt;tr&gt;
+            <br/>&emsp;&emsp;&emsp;&emsp;&lt;th</span> <span
+                class="code-attribute">class=</span>"sortable renderable
+            width_percent_25 statistics"
+            <span class="code-attribute">role=</span>"columnheader"<span
+                class="code-tag">&gt;...&lt;/th&gt;
+            <br/>&emsp;&emsp;&emsp;&emsp;&lt;th</span> <span
+                class="code-attribute">class=</span>"sortable renderable value"
+            <span class="code-attribute">role=</span>"columnheader"<span
+                class="code-tag">&gt;
+                            ...&lt;/th&gt;
+            <br/>&emsp;&emsp;&emsp;&lt;/tr&gt;
+            <br/>&emsp;&emsp;&lt;/thead&gt;
+            <br/>&emsp;&emsp;&lt;tbody&gt;...&lt;/tbody&gt;
+            <br/>&emsp;&lt;/table&gt;
+            <br/>&lt;/div&gt;
+            </span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/table/table.html b/pgaweb/templates/pgaweb/styleguide/table/table.html
new file mode 100644
index 0000000..b3236eb
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/table/table.html
@@ -0,0 +1,21 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Table</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/table/sd_table.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/table/dark_table.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/table/hc_table.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/theme_nav_bar.html b/pgaweb/templates/pgaweb/styleguide/theme_nav_bar.html
new file mode 100644
index 0000000..1cf9661
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/theme_nav_bar.html
@@ -0,0 +1,23 @@
+<ul class="nav nav-tabs" id="themeType" role="tablist">
+    <li class="nav-item">
+        <a class="nav-link active" id="sd-tab" data-toggle="tab" role="tab"
+           href="#sdTheme" aria-controls="sdTheme"
+           aria-selected="true">
+            Standard Theme
+        </a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link" id="drk-tab" data-toggle="tab" role="tab"
+           href="#drkTheme" aria-controls="drkTheme"
+           aria-selected="false">
+            Dark Theme
+        </a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link" id="hc-tab" data-toggle="tab" role="tab"
+           href="#hcTheme" aria-controls="hcTheme"
+           aria-selected="false">
+            High Contrast Theme
+        </a>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/dark_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/togglebutton/dark_togglebutton.html
new file mode 100644
index 0000000..f99dc93
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/togglebutton/dark_togglebutton.html
@@ -0,0 +1,168 @@
+{% load static %}
+<p class="color-header">Primary Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Default
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_dark_default.png" %}"
+                     alt="Default Toggle."/>
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"toggle-group"<span
+                        class="code-tag">&gt;
+                  &lt;label</span> <span class="code-attribute">class=</span>"btn
+                    btn-success btn
+                    -xs toggle-on"<span
+                        class="code-attribute">aria-hidden=</span>"true"<span
+                        class="code-tag">
+                  &gt;True&lt;/label&gt;
+                  &lt;span</span> <span class="code-attribute">class=</span>"toggle-handle
+                    btn
+                    btn-light btn-xs"<span class="code-attribute">
+                  aria-hidden=</span>"true"<span class="code-tag">&lt;/span&gt;
+                &lt;/div&gt;
+                </span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Hover
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_dark_hover.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Pressed
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_dark_pressed.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:not(:disabled)
+                :not(.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Disabled
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_dark_disabled.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
+
+<p class="color-header">Toggle off</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Default
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_dark_off_default.png" %}"
+                     alt="Default Toggle."/>
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"toggle-group"<span
+                        class="code-tag">&gt;
+                  &lt;label</span> <span class="code-attribute">class=</span>"btn
+                    btn-success btn
+                    -xs toggle-on"<span
+                        class="code-attribute">aria-hidden=</span>"true"<span
+                        class="code-tag">
+                  &gt;True&lt;/label&gt;
+                  &lt;span</span> <span class="code-attribute">class=</span>"toggle-handle
+                    btn
+                    btn-light btn-xs"<span class="code-attribute">
+                  aria-hidden=</span>"true"<span class="code-tag">&lt;/span&gt;
+                &lt;/div&gt;
+                </span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Hover
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_dark_off_hover.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Pressed
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_dark_off_pressed.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:not(:disabled)
+                :not(.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="d-btn-style d-btn-label">
+                Disabled
+            </td>
+            <td class="d-btn-style d-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_dark_off_disabled.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="d-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/hc_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/togglebutton/hc_togglebutton.html
new file mode 100644
index 0000000..b5b18fe
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/togglebutton/hc_togglebutton.html
@@ -0,0 +1,134 @@
+{% load static %}
+<p class="color-header">Primary Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Default
+            </td>
+            <td class="hc-btn-style hc-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_hc_default.png" %}"
+                     alt="Default Toggle."/>
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"toggle-group"<span
+                        class="code-tag">&gt;
+                  &lt;label</span> <span class="code-attribute">class=</span>"btn
+                    btn-success btn
+                    -xs toggle-on"<span
+                        class="code-attribute">aria-hidden=</span>"true"<span
+                        class="code-tag">
+                  &gt;True&lt;/label&gt;
+                  &lt;span</span> <span class="code-attribute">class=</span>"toggle-handle
+                    btn
+                    btn-light btn-xs"<span class="code-attribute">
+                  aria-hidden=</span>"true"<span class="code-tag">&lt;/span&gt;
+                &lt;/div&gt;
+                </span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Hover
+            </td>
+            <td class="hc-btn-style hc-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_hc_hover.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Disabled
+            </td>
+            <td class="hc-btn-style hc-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_hc_disabled.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
+
+<p class="color-header">Toggle off</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Default
+            </td>
+            <td class="hc-btn-style hc-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_hc_off_default.png" %}"
+                     alt="Default Toggle."/>
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"toggle-group"<span
+                        class="code-tag">&gt;
+                  &lt;label</span> <span class="code-attribute">class=</span>"btn
+                    btn-success btn
+                    -xs toggle-on"<span
+                        class="code-attribute">aria-hidden=</span>"true"<span
+                        class="code-tag">
+                  &gt;True&lt;/label&gt;
+                  &lt;span</span> <span class="code-attribute">class=</span>"toggle-handle
+                    btn
+                    btn-light btn-xs"<span class="code-attribute">
+                  aria-hidden=</span>"true"<span class="code-tag">&lt;/span&gt;
+                &lt;/div&gt;
+                </span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Hover
+            </td>
+            <td class="hc-btn-style hc-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_hc_off_hover.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="hc-btn-style hc-btn-label">
+                Disabled
+            </td>
+            <td class="hc-btn-style hc-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_hc_off_disabled.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="hc-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/sd_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/togglebutton/sd_togglebutton.html
new file mode 100644
index 0000000..d84d528
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/togglebutton/sd_togglebutton.html
@@ -0,0 +1,168 @@
+{% load static %}
+<p class="color-header">Primary Buttons</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Default
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_default.png" %}"
+                     alt="Default Toggle."/>
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"toggle-group"<span
+                        class="code-tag">&gt;
+                  &lt;label</span> <span class="code-attribute">class=</span>"btn
+                    btn-success btn
+                    -xs toggle-on"<span
+                        class="code-attribute">aria-hidden=</span>"true"<span
+                        class="code-tag">
+                  &gt;True&lt;/label&gt;
+                  &lt;span</span> <span class="code-attribute">class=</span>"toggle-handle
+                    btn
+                    btn-light btn-xs"<span class="code-attribute">
+                  aria-hidden=</span>"true"<span class="code-tag">&lt;/span&gt;
+                &lt;/div&gt;
+                </span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Hover
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_hover.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Pressed
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_pressed.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:not(:disabled)
+                :not(.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Disabled
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_disabled.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
+
+<p class="color-header">Toggle off</p>
+<div class="btn-container">
+    <table>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Default
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_off_default.png" %}"
+                     alt="Default Toggle."/>
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">&lt;div</span> <span
+                        class="code-attribute">class=</span>"toggle-group"<span
+                        class="code-tag">&gt;
+                  &lt;label</span> <span class="code-attribute">class=</span>"btn
+                    btn-success btn
+                    -xs toggle-on"<span
+                        class="code-attribute">aria-hidden=</span>"true"<span
+                        class="code-tag">
+                  &gt;True&lt;/label&gt;
+                  &lt;span</span> <span class="code-attribute">class=</span>"toggle-handle
+                    btn
+                    btn-light btn-xs"<span class="code-attribute">
+                  aria-hidden=</span>"true"<span class="code-tag">&lt;/span&gt;
+                &lt;/div&gt;
+                </span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Hover
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_off_hover.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:hover</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Pressed
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_off_pressed.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by Bootstrap class</span>
+                    <span class="code-attribute">.btn-secondary:not(:disabled)
+                :not(.disabled):active</span>
+                </div>
+            </td>
+        </tr>
+        <tr class="sd-btn-row">
+            <td class="sd-btn-style sd-btn-label">
+                Disabled
+            </td>
+            <td class="sd-btn-style sd-checkbox-block">
+                <img class="toggle_default"
+                     src="{% static "img/style_guide/toggle_off_disabled.png" %}"
+                     alt="Hover Toggle."/>
+            </td>
+            <td class="sd-btn-code-block">
+                <div class="code">
+                    <span class="code-tag">Handled by bootstrap attribute</span>
+                    <span class="code-attribute">disabled</span>
+                </div>
+            </td>
+        </tr>
+    </table>
+</div>
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html b/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html
new file mode 100644
index 0000000..6419e9f
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html
@@ -0,0 +1,21 @@
+<div class="color-palette">
+    <h1 class="styleguide-title" id="colorpalette">Toggle Buttons</h1>
+    <p>
+        {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+        <!--Add page specific content as per theme selection-->
+    <div class="tab-content" id="themeTabContent">
+        <div class="tab-pane fade show active theme-content theme-content-default"
+             id="sdTheme" role="tabpanel" aria-labelledby="sd-tab">
+            {% include "pgaweb/styleguide/togglebutton/sd_togglebutton.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="drkTheme" role="tabpanel" aria-labelledby="dek-tab">
+            {% include "pgaweb/styleguide/togglebutton/dark_togglebutton.html" %}
+        </div>
+        <div class="tab-pane fade theme-content  theme-content-default"
+             id="hcTheme" role="tabpanel" aria-labelledby="hc-tab">
+            {% include "pgaweb/styleguide/togglebutton/hc_togglebutton.html" %}
+        </div>
+    </div>
+    </p>
+</div>
\ No newline at end of file
diff --git a/pgaweb/urls.py b/pgaweb/urls.py
index 249521e..3b0b6d2 100644
--- a/pgaweb/urls.py
+++ b/pgaweb/urls.py
@@ -7,11 +7,10 @@
 #
 ##########################################################################
 
-from django.conf.urls import handler400, handler403, handler404, handler500, include, url
+from django.conf.urls import include, url
 from django.contrib import admin
 from pgaweb import views as pgaweb_views
 from faq import views as faq_views
-from search import views as search_views
 from versions import views as versions_views
 
 from . import settings
@@ -37,9 +36,8 @@ urlpatterns = [
     url(r'^development/resources/$', pgaweb_views.development_resources,
         name='development_resources'),
     url(r'^development/team/$', pgaweb_views.development_team, name='development_team'),
-
-    url(r'^styleguide/$', pgaweb_views.styleguide_index, name='styleguide_index'),
-
+    url(r'^styleguide/(?P<page>[a-zA-Z]+)(?:/(?P<section>[a-zA-Z_]+))?/$', pgaweb_views.styleguide_index,
+        name='styleguide_index'),
     url(r'^support/$', pgaweb_views.support_index, name='support_index'),
     url(r'^support/issues/$', pgaweb_views.support_issues, name='support_issues'),
     url(r'^support/list/$', pgaweb_views.support_list, name='support_list'),
diff --git a/pgaweb/views.py b/pgaweb/views.py
index 06a94f6..5090ecc 100644
--- a/pgaweb/views.py
+++ b/pgaweb/views.py
@@ -64,9 +64,16 @@ def development_team(request):
     return render(request, 'pgaweb/development/team.html', {})
 
 
-# Handle the Styleguide page
-def styleguide_index(request):
-    return render(request, 'pgaweb/styleguide/index.html', {})
+# Handle the Styleguide pages
+def styleguide_index(request, page='typography', section=''):
+
+    if page == 'themes' and not section:
+        section = 'color'
+
+    if page == 'iconography' and not section:
+        section = 'fontawesome'
+
+    return render(request, 'pgaweb/styleguide/index.html', {'page': page, 'section': section})
 
 # Handle the Support level pages
 def support_index(request):
diff --git a/static/img/query_tool.svg b/static/img/query_tool.svg
new file mode 100644
index 0000000..88bf37f
--- /dev/null
+++ b/static/img/query_tool.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<g>
+	<path d="M13.1,9.2c0.4-0.3,0.6-0.6,0.6-0.9v-3C12.6,6,10.8,6.5,8.9,6.6L13.1,9.2z"/>
+	<path d="M7.2,5.8c3.6,0,6.5-1,6.5-2.1V2.4c0-1.2-2.9-2.1-6.5-2.1s-6.5,1-6.5,2.1v1.3C0.7,4.9,3.6,5.8,7.2,5.8z"/>
+	<path d="M0.7,10v3c0,1.2,2.9,2.1,6.5,2.1c0.1,0,0.2,0,0.2,0v-3.7c-0.1,0-0.2,0-0.2,0C4.6,11.4,2.1,11,0.7,10z"/>
+	<path d="M0.7,5.4v3c0,1.2,2.9,2.1,6.5,2.1c0.1,0,0.2,0,0.2,0v-3c0-0.3,0.1-0.6,0.3-0.7c-0.2,0-0.4,0-0.6,0C4.6,6.8,2.1,6.3,0.7,5.4
+		z"/>
+	<path d="M14.9,11.2L9.4,8C9,7.7,8.3,7.9,8.3,8.6V15c0,0.6,0.6,0.9,1.1,0.6l5.5-3.2C15.4,12.2,15.4,11.5,14.9,11.2z"/>
+</g>
+</svg>
diff --git a/static/img/style_guide/accordion_dark_default.png b/static/img/style_guide/accordion_dark_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0921538dfa40a260a4399a5fd6a4c7c11000bda
GIT binary patch
diff --git a/static/img/style_guide/accordion_dark_expand.png b/static/img/style_guide/accordion_dark_expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..b767b1ac369f3c0dcca8a5477e83738d0ffffc9a
GIT binary patch
diff --git a/static/img/style_guide/accordion_default.png b/static/img/style_guide/accordion_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..594eaab1a16cebc68b53214ff59a3fb77398d11a
GIT binary patch
diff --git a/static/img/style_guide/accordion_expand.png b/static/img/style_guide/accordion_expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..948e9576091bc2cb038b133e3954cbf405aade39
GIT binary patch
diff --git a/static/img/style_guide/accordion_hc_default.png b/static/img/style_guide/accordion_hc_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..5024d92e0e253fe3a7a2bf9bf51ca116357032b5
GIT binary patch
diff --git a/static/img/style_guide/accordion_hc_expand.png b/static/img/style_guide/accordion_hc_expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b215b7b60022c8bc1b1836396c7a297c3bee27c
GIT binary patch
diff --git a/static/img/style_guide/dd_d_default.png b/static/img/style_guide/dd_d_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..a430604986632bef3f0a879f103f7522a1397f4c
GIT binary patch
diff --git a/static/img/style_guide/dd_d_expand.png b/static/img/style_guide/dd_d_expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5ddc56a79ebbf0080fc586349aaa0aace0d5359
GIT binary patch
diff --git a/static/img/style_guide/dd_d_filled.png b/static/img/style_guide/dd_d_filled.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff73a7b8d1b7c4cb21199c61de3898f846fc5496
GIT binary patch
diff --git a/static/img/style_guide/dd_d_filled_expand.png b/static/img/style_guide/dd_d_filled_expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..fbd332485b9fa7cf25cfb56b4b936080d8009870
GIT binary patch
diff --git a/static/img/style_guide/dd_default.png b/static/img/style_guide/dd_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..33f0e1d50e8d494a24f2e82550d0dc5d9a02d8af
GIT binary patch
diff --git a/static/img/style_guide/dd_expand.png b/static/img/style_guide/dd_expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..6263a2c4b1733f03146c61a8a90e14f4607627f4
GIT binary patch
diff --git a/static/img/style_guide/dd_filled.png b/static/img/style_guide/dd_filled.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f4ae68b75a4d1249492c2b8d286e307b7180227
GIT binary patch
diff --git a/static/img/style_guide/dd_filled_expand.png b/static/img/style_guide/dd_filled_expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..e8780ea1909e51612a9ff0208db78e171eabfa26
GIT binary patch
diff --git a/static/img/style_guide/dd_hc_default.png b/static/img/style_guide/dd_hc_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e65703c2204a3145fa822d3a19ef23fb88cf4f4
GIT binary patch
diff --git a/static/img/style_guide/dd_hc_expand.png b/static/img/style_guide/dd_hc_expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..384bc1633965b9e4804147e9635f811d2c3ba3c7
GIT binary patch
diff --git a/static/img/style_guide/dd_hc_filled.png b/static/img/style_guide/dd_hc_filled.png
new file mode 100644
index 0000000000000000000000000000000000000000..144b3843f4a7a0d1098a5813bc8ab890784693bc
GIT binary patch
diff --git a/static/img/style_guide/dd_hc_filled_expand.png b/static/img/style_guide/dd_hc_filled_expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..88dcc4eaf5e7770e5002750eb5f112c3300c870e
GIT binary patch
diff --git a/static/img/style_guide/iconography_assets/custom_solid_icons/commit.svg b/static/img/style_guide/iconography_assets/custom_solid_icons/commit.svg
new file mode 100644
index 0000000..4c9fe64
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/custom_solid_icons/commit.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0899 11.7306V13.0392C22.0899 13.513 21.7403 13.9477 21.0388 14.3479C20.1418 14.8171 19.1735 15.1414 18.1754 15.307C16.8759 15.5485 15.5557 15.6658 14.2333 15.6566C12.9131 15.6635 11.5952 15.5462 10.2958 15.307C9.30218 15.1391 8.3408 14.8171 7.45072 14.3479C6.75154 13.9477 6.39505 13.5107 6.39505 13.0392V11.7306C6.39505 11.2752 6.74924 10.8221 7.45072 10.4219C8.35 9.955 9.31598 9.63301 10.3142 9.46742C11.6113 9.22362 12.9292 9.10403 14.2517 9.11322C15.5741 9.10403 16.8943 9.22362 18.1938 9.46742C19.1919 9.63301 20.1579 9.955 21.0572 10.4219C21.7449 10.8267 22.0899 11.2637 22.0899 11.7306ZM14.231 20.9004C12.7038 20.905 11.1812 20.7532 9.68397 20.4451C8.4995 20.2381 7.36792 19.7965 6.35595 19.1456V20.882C6.35595 21.3374 6.71014 21.7905 7.41162 22.1907C8.3086 22.6599 9.27688 22.9842 10.2751 23.1498C11.5722 23.3913 12.8924 23.5086 14.2126 23.4994C15.535 23.5063 16.8552 23.3913 18.1547 23.1498C19.1551 22.9842 20.1211 22.6599 21.0181 22.1907C21.7173 21.7905 22.0692 21.3535 22.0692 20.882V19.164C21.0595 19.8172 19.9302 20.2588 18.7457 20.4634C17.2623 20.7624 15.7466 20.9096 14.231 20.9004ZM14.231 16.9744C12.7038 16.979 11.1812 16.8272 9.68397 16.519C8.4995 16.312 7.36792 15.8705 6.35595 15.2196V16.956C6.35595 17.4114 6.71014 17.8645 7.41162 18.2647C8.3086 18.7339 9.27688 19.0582 10.2751 19.2238C11.5722 19.4653 12.8924 19.5826 14.2126 19.5734C15.535 19.5803 16.8552 19.4653 18.1547 19.2238C19.1551 19.0582 20.1211 18.7339 21.0181 18.2647C21.7173 17.8645 22.0692 17.4275 22.0692 16.956V15.238C21.0664 15.8935 19.944 16.3419 18.7641 16.5558C17.2738 16.8479 15.7535 16.9882 14.231 16.9744ZM9.11818 3.11497C9.77596 3.11267 10.4291 3.23457 11.0409 3.47836C11.6481 3.71526 12.2047 4.06715 12.6785 4.51564L11.2778 5.9255C11.0731 6.1003 11.0156 6.39469 11.1375 6.63389C11.2249 6.88918 11.4687 7.05477 11.7378 7.04327H16.3193C16.4918 7.04098 16.6551 6.96968 16.7747 6.84778C16.8966 6.72818 16.9656 6.56489 16.9656 6.39239V1.8063C16.9794 1.53721 16.8115 1.29111 16.5562 1.20142C16.317 1.07952 16.0249 1.13932 15.8524 1.34171L14.5253 2.66418C13.7986 1.9765 12.9499 1.43371 12.0207 1.06342C10.1118 0.292938 7.97741 0.313638 6.08455 1.11862C5.60847 1.32101 5.15308 1.56251 4.72069 1.8454C4.52519 1.9811 4.3343 2.12369 4.1526 2.27319L3.97091 2.42729C3.09463 3.17247 2.39774 4.10395 1.93086 5.15502C1.90326 5.23322 1.90326 5.31832 1.93086 5.39651C1.95156 5.47241 2.00215 5.53681 2.07115 5.57361L3.81221 6.55109C3.89731 6.59249 3.99391 6.60169 4.0859 6.57409C4.1733 6.54189 4.2423 6.47749 4.2768 6.39239C4.4125 6.0566 4.58269 5.73461 4.78509 5.43331L4.96218 5.18722L5.07028 5.05152C5.15308 4.95263 5.23818 4.85143 5.33017 4.75713L5.35777 4.73413L5.56247 4.53404L5.60387 4.49264C5.67746 4.42364 5.75336 4.36154 5.83156 4.29714L5.95346 4.20514L6.05006 4.13155C6.37435 3.89925 6.72394 3.70376 7.09193 3.54966C7.72901 3.26677 8.419 3.11957 9.11818 3.11497Z" fill="black"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/custom_solid_icons/compare.svg b/static/img/style_guide/iconography_assets/custom_solid_icons/compare.svg
new file mode 100644
index 0000000..90d5b93
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/custom_solid_icons/compare.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.8871 0.499878H11.478C10.328 0.499878 9.38707 1.44079 9.38707 2.59079V5.72715H3.11435C1.96435 5.72715 1.02344 6.66806 1.02344 7.81806V21.409C1.02344 22.559 1.96435 23.4999 3.11435 23.4999H11.478C12.628 23.4999 13.5689 22.559 13.5689 21.409V18.2726H20.8871C22.0371 18.2726 22.978 17.3317 22.978 16.1817V2.59079C22.978 1.44079 22.0371 0.499878 20.8871 0.499878ZM11.478 13.8817H7.71435L8.7598 12.8362C8.86435 12.7317 8.86435 12.6272 8.86435 12.5226C8.86435 12.4181 8.86435 12.3135 8.7598 12.209L8.44616 11.8953C8.34162 11.7908 8.23707 11.7908 8.13253 11.7908C8.02798 11.7908 7.92344 11.7908 7.81889 11.8953L5.41435 14.2999C5.3098 14.4044 5.3098 14.509 5.3098 14.6135C5.3098 14.7181 5.3098 14.8226 5.41435 14.9272L7.81889 17.3317C7.92344 17.4362 8.02798 17.4362 8.13253 17.4362C8.23707 17.4362 8.34162 17.4362 8.44616 17.3317L8.7598 17.0181C8.86435 16.9135 8.86435 16.809 8.86435 16.7044C8.86435 16.5999 8.86435 16.4953 8.7598 16.3908L7.71435 15.3453H11.478V21.409H3.11435V7.81806H11.478V13.8817ZM20.8871 8.65442H17.1234L18.1689 7.60897C18.2734 7.50442 18.2734 7.39988 18.2734 7.29533C18.2734 7.19079 18.2734 7.08624 18.1689 6.9817L17.8553 6.66806C17.7507 6.56351 17.6462 6.56351 17.5416 6.56351C17.4371 6.56351 17.3325 6.56351 17.228 6.66806L14.8234 9.0726C14.7189 9.17715 14.7189 9.2817 14.7189 9.38624C14.7189 9.49079 14.7189 9.59533 14.8234 9.69988L17.228 12.1044C17.3325 12.209 17.4371 12.209 17.5416 12.209C17.6462 12.209 17.7507 12.209 17.8553 12.1044L18.1689 11.7908C18.2734 11.6862 18.2734 11.5817 18.2734 11.4772C18.2734 11.3726 18.2734 11.2681 18.1689 11.1635L17.1234 10.1181H20.8871V16.1817H13.5689V7.81806C13.5689 6.66806 12.628 5.72715 11.478 5.72715V2.59079H20.8871V8.65442Z" fill="#222222"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/custom_solid_icons/connect.svg b/static/img/style_guide/iconography_assets/custom_solid_icons/connect.svg
new file mode 100644
index 0000000..890053e
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/custom_solid_icons/connect.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.4082 2.44341C23.5306 2.32099 23.5306 2.19635 23.4082 2.07393C23.0387 1.82687 22.5446 1.33498 22.1751 0.963273C22.0527 0.840856 21.9281 0.840856 21.8056 0.963273C20.942 1.82687 20.0784 2.69047 19.2171 3.55184L18.97 3.30478C17.3652 1.45739 14.652 1.08792 12.4329 2.32099C11.694 2.81511 10.9528 3.43165 10.3362 4.17061L9.59728 4.78715C9.47486 4.54009 9.2278 4.29303 8.98074 4.17061C8.73368 3.92355 8.85833 4.04819 8.73368 4.17061C8.3642 4.54009 7.99473 4.90956 7.50061 5.40369C7.37819 5.5261 7.37819 5.65075 7.50061 5.77316C8.3642 6.63676 9.2278 7.50036 10.0892 8.23932C10.2116 8.36174 10.2116 8.48638 10.0892 8.6088L8.23956 10.336C6.75942 8.9805 5.65099 7.74742 5.15687 7.37572C5.03445 7.12866 4.90981 7.12866 4.78739 7.2533C4.41791 7.74742 4.04844 8.1169 3.67673 8.48638C3.55431 8.6088 3.55431 8.73344 3.67673 8.85586C3.79915 8.97827 4.04621 9.22533 4.41569 9.59481C3.79915 10.2114 3.18261 10.7055 2.68849 11.1974C1.33299 12.4304 0.838874 14.4025 1.33299 16.1297C1.58006 17.2403 2.19659 18.1017 2.93555 18.8429C3.05797 18.9653 3.05797 19.09 2.93555 19.2124C2.19659 19.9513 1.33299 20.8149 0.591813 21.5561C0.469396 21.6785 0.469396 21.8032 0.591813 21.9256C0.961291 22.2951 1.33077 22.6645 1.70247 23.0362C1.82489 23.1587 1.94953 23.1587 2.07195 23.0362C2.68849 22.4197 3.42745 21.6807 4.04398 21.0642C4.1664 20.9418 4.41346 20.5701 4.66052 20.5701C4.90758 20.5701 5.03 20.8171 5.27706 21.0642C7.24909 23.0362 10.4564 23.0362 12.4285 21.0642C13.045 20.4477 13.5391 19.8311 14.1557 19.2146C14.4027 19.5841 14.6498 19.7087 14.8946 19.9535C15.1417 20.2006 15.017 20.076 15.1417 19.9535C15.5112 19.5841 15.8806 19.2146 16.2523 18.8429C16.3748 18.7205 16.4994 18.5958 16.2523 18.4734C15.6358 17.8569 14.7722 17.1179 13.9086 16.1297C14.5251 15.5131 15.1417 14.8966 15.6358 14.2801C15.7582 14.1576 15.8829 14.1576 16.0053 14.2801L18.5983 16.8709C18.7207 16.9933 18.8454 16.9933 18.8454 16.8709C19.2148 16.5014 19.709 16.0073 20.0784 15.6378C20.2009 15.5154 20.2009 15.5154 20.0784 15.3907L19.4619 14.5271C20.0784 14.033 20.695 13.4165 21.1891 12.9246C22.4222 11.8139 22.9163 10.0889 22.6692 8.36174C22.5468 7.12866 21.9303 6.018 20.942 5.27904C20.8196 5.15663 20.8196 5.03198 20.942 4.90956C21.8056 4.17061 22.5446 3.30701 23.4082 2.44341ZM12.5576 17.9815C12.0634 18.4756 11.5715 19.0922 10.955 19.5841C9.72192 20.8171 7.74989 20.8171 6.51682 19.5841C5.77786 18.9653 5.43509 18.5847 4.29772 17.365C3.02458 16.1742 2.81758 14.1599 3.92824 12.9268C4.05066 12.8044 4.1753 12.6797 4.29772 12.5573C4.79184 12.0632 5.28374 11.5713 5.77786 10.9548L12.5598 17.7367C12.68 17.8591 12.68 17.8591 12.5576 17.9815ZM14.1601 12.6797L12.4329 14.5293C11.5693 13.6657 10.5833 12.6797 9.7197 11.8161L11.4469 9.96652C11.5693 9.8441 11.694 9.71946 11.8164 9.96652C12.5553 10.7055 13.2965 11.4467 14.1601 12.3103C14.4072 12.5551 14.4072 12.5551 14.1601 12.6797ZM19.8314 11.4467L19.709 11.5691C19.2148 12.0632 18.7229 12.5551 18.2288 13.0492L11.1998 6.14264L12.927 4.54009C14.1601 3.42943 16.0097 3.30701 17.2428 4.41767C18.1064 5.28127 18.97 6.26728 19.8314 7.13088C21.0645 8.36396 21.0645 10.336 19.8314 11.4467Z" fill="black"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/custom_solid_icons/disconnect.svg b/static/img/style_guide/iconography_assets/custom_solid_icons/disconnect.svg
new file mode 100644
index 0000000..121454f
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/custom_solid_icons/disconnect.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.3632 1.88728C23.4713 1.77919 23.4713 1.66879 23.3632 1.5607C23.0366 1.23412 22.7101 0.907533 22.3835 0.580949C22.2754 0.472854 22.165 0.472854 22.0569 0.580949C21.2956 1.34221 20.5344 2.10347 19.7731 2.86473L19.5546 2.64625C18.1448 1.01793 15.7529 0.691343 13.9038 1.77919C13.2506 2.21387 12.5975 2.75664 12.0547 3.29941L11.4015 3.84219C11.2934 3.73409 11.0749 3.5156 10.8587 3.29941C10.6403 3.08092 10.7507 3.19132 10.6403 3.29941C10.3137 3.626 9.98709 3.95258 9.55241 4.27916C9.44432 4.38726 9.44432 4.49765 9.55241 4.60575C10.3137 5.36701 10.9668 6.02018 11.7281 6.78144C11.8362 6.88953 11.8362 6.99993 11.7281 7.10802L9.55241 9.28371C9.44432 9.39181 9.44432 9.5022 9.55241 9.6103C9.879 9.93688 10.2056 10.2635 10.5322 10.59C10.6403 10.6981 10.7507 10.6981 10.8587 10.59L13.0344 8.41436C13.1425 8.30626 13.2529 8.19587 13.361 8.41436C14.0142 9.06752 14.6651 9.71839 15.3182 10.3716C15.4263 10.4797 15.4263 10.59 15.3182 10.6981L13.1425 12.8738C13.0344 12.9819 13.0344 13.0923 13.1425 13.2004C13.4691 13.527 13.7957 13.8536 14.1223 14.1802C14.2304 14.2883 14.3408 14.2883 14.4489 14.1802C15.2101 13.4189 15.8633 12.7657 16.6246 12.0045C16.7327 11.8964 16.843 11.8964 16.9511 12.0045L19.1268 14.1802C19.2349 14.2883 19.2349 14.2883 19.3453 14.1802C19.6719 13.8536 19.9985 13.4189 20.4332 13.0923C20.5413 12.9842 20.5413 12.9842 20.4332 12.8738L19.78 12.2207C20.3228 11.786 20.8678 11.3513 21.3025 10.8062C22.3904 9.82649 22.825 8.30626 22.6066 6.89183C22.3881 5.80399 21.8453 4.82654 21.084 4.17337C20.9759 4.06527 20.9759 3.95488 21.084 3.84679C21.9511 3.29941 22.602 2.64855 23.3632 1.88728ZM20.2101 9.71609C20.102 9.82419 20.102 9.82419 20.2101 9.71609C19.6673 10.2589 19.2303 10.6958 18.906 11.1305L12.8159 5.15082L14.3385 3.73639C15.3182 2.75664 16.9488 2.64855 18.0367 3.6283C18.7979 4.38956 19.5592 5.15082 20.3205 5.91208C21.2979 6.99763 21.2979 8.73864 20.2101 9.71609ZM4.55246 9.71609C4.44437 9.608 4.44437 9.608 4.33397 9.71609C4.00739 10.0427 3.68081 10.3693 3.35422 10.6958C3.24613 10.8039 3.24613 10.9143 3.35422 11.0224C3.46232 11.1305 3.68081 11.349 4.00739 11.6756C3.46462 12.2184 2.91954 12.6553 2.48487 13.09C1.39702 14.1779 0.854247 15.8085 1.28893 17.331C1.50741 18.2004 2.05019 19.072 2.70336 19.7229C2.81145 19.831 2.81145 19.9414 2.70336 20.0495C2.05019 20.7003 1.28893 21.4593 0.635758 22.1125C0.527664 22.2206 0.527664 22.331 0.635758 22.4391C0.962342 22.7656 1.28893 23.0922 1.61551 23.4188C1.7236 23.5269 1.834 23.5269 1.94209 23.4188C2.48487 22.876 3.13803 22.2229 3.68311 21.6778C3.90159 21.4593 4.00969 21.2431 4.22588 21.2431C4.44437 21.2431 4.55246 21.4616 4.76865 21.6778C6.50966 23.3084 9.22813 23.3084 10.9668 21.6778C11.5096 21.135 11.9466 20.59 12.4894 20.0472C12.7079 20.3738 12.924 20.4819 13.1425 20.7003C13.361 20.9188 13.2506 20.8084 13.361 20.7003C13.6876 20.3738 14.0142 20.0472 14.3408 19.7206C14.4489 19.6125 14.5593 19.5021 14.3408 19.394C12.1628 17.2206 5.7484 10.8039 4.55246 9.71609ZM10.9668 18.9593C10.5322 19.394 10.0975 19.9391 9.55241 20.3738C8.46457 21.4616 6.83395 21.4616 5.7461 20.3738C5.63801 20.2657 5.63801 20.2657 5.52761 20.1553C4.98484 19.5021 4.33167 18.9593 3.7866 18.4143C2.59066 17.4345 2.48257 15.6958 3.46002 14.4999C3.56811 14.3918 3.67851 14.2814 3.7866 14.1733C4.22128 13.7386 4.65596 13.3039 5.09064 12.8692L10.9622 18.7408C11.0749 18.7408 11.0749 18.8512 10.9668 18.9593Z" fill="black"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/custom_solid_icons/drop_cascade.svg b/static/img/style_guide/iconography_assets/custom_solid_icons/drop_cascade.svg
new file mode 100644
index 0000000..5fd73e2
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/custom_solid_icons/drop_cascade.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.3323 13.6802L20.2871 15.7253V6.22998H18.5341V15.7253L16.489 13.6802L15.3203 14.8488L19.4106 18.9392L23.5009 14.8488L22.3323 13.6802Z" fill="black"/>
+<path d="M14.7349 6.66818H11.5211L10.9368 4.91519C10.7907 4.62303 10.6446 4.47694 10.3525 4.33086C10.0603 4.18478 9.76812 4.0387 9.47596 4.0387H6.11606C5.8239 4.0387 5.53173 4.18478 5.38565 4.33086C5.09348 4.47694 4.9474 4.76911 4.80132 5.06127L4.07091 6.81426H0.857091C0.711008 6.81426 0.711008 6.81426 0.564926 6.96035C0.418843 7.10643 0.564926 7.10643 0.564926 7.10643V7.69076C0.564926 7.83684 0.564926 7.83684 0.711008 7.98292C0.857091 8.12901 0.857091 8.12901 1.00317 8.12901H1.87967V17.9165C1.87967 18.5009 2.02575 18.9391 2.464 19.3774C2.75616 19.6695 3.19441 19.9617 3.63266 19.9617H12.1054C12.5437 19.9617 12.9819 19.8156 13.2741 19.3774C13.5663 18.9391 13.8584 18.5009 13.8584 17.9165V7.98292H14.881C15.0271 7.98292 15.0271 7.98292 15.1732 7.83684C15.0271 7.83684 15.0271 7.69076 15.0271 7.69076V7.10643C15.1732 6.96035 15.0271 6.96035 15.0271 6.81426C14.881 6.66818 14.881 6.66818 14.7349 6.66818ZM5.96998 5.49952C6.11606 5.35344 6.11606 5.35344 6.26214 5.35344H9.47596C9.62204 5.35344 9.62204 5.49952 9.62204 5.49952L10.2064 6.66818H5.53173L5.96998 5.49952ZM12.3976 18.2087C12.2515 18.3548 12.2515 18.5009 12.2515 18.5009C12.1054 18.5009 12.1054 18.5009 12.1054 18.5009H3.48658C3.48658 18.5009 3.34049 18.5009 3.34049 18.3548C3.34049 18.3548 3.34049 18.3548 3.19441 18.2087C3.04833 18.0626 3.04833 17.9165 3.04833 17.7704V7.98292H12.2515V17.7704H12.3976C12.3976 17.9165 12.3976 18.0626 12.3976 18.2087Z" fill="black"/>
+<path d="M10.6445 9.88184H10.0602C9.91413 9.88184 9.91413 9.88184 9.76805 10.0279C9.62197 10.174 9.76805 10.174 9.76805 10.3201V16.1634C9.76805 16.3095 9.76805 16.3095 9.91413 16.4555C10.0602 16.6016 10.0602 16.6016 10.0602 16.6016H10.6445C10.7906 16.6016 10.7906 16.6016 10.9367 16.4555C11.0828 16.3095 11.0828 16.3095 11.0828 16.1634V10.3201C11.0828 10.174 11.0828 10.174 10.9367 10.0279C10.9367 9.88184 10.7906 9.88184 10.6445 9.88184Z" fill="black"/>
+<path d="M5.38626 9.88184H4.80193C4.65585 9.88184 4.65585 9.88184 4.50977 10.0279C4.50977 10.174 4.50977 10.174 4.50977 10.3201V16.1634C4.50977 16.3095 4.50977 16.3095 4.65585 16.4555C4.65585 16.6016 4.65585 16.6016 4.80193 16.6016H5.38626C5.53234 16.6016 5.53234 16.6016 5.67843 16.4555C5.82451 16.3095 5.82451 16.3095 5.82451 16.1634V10.3201C5.82451 10.174 5.82451 10.174 5.67843 10.0279C5.53234 9.88184 5.53234 9.88184 5.38626 9.88184Z" fill="black"/>
+<path d="M8.01564 9.88184H7.43131C7.28523 9.88184 7.28523 9.88184 7.13914 10.0279C6.99306 10.174 7.13914 10.174 7.13914 10.3201V16.1634C7.13914 16.3095 7.13914 16.3095 7.28523 16.4555C7.43131 16.6016 7.43131 16.6016 7.43131 16.6016H8.01564C8.16172 16.6016 8.16172 16.6016 8.30781 16.4555C8.45389 16.3095 8.45389 16.3095 8.45389 16.1634V10.3201C8.45389 10.174 8.45389 10.174 8.30781 10.0279C8.30781 9.88184 8.16172 9.88184 8.01564 9.88184Z" fill="black"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/custom_solid_icons/query_tool.svg b/static/img/style_guide/iconography_assets/custom_solid_icons/query_tool.svg
new file mode 100644
index 0000000..ccee562
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/custom_solid_icons/query_tool.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6267 13.7764C20.2234 13.3289 20.5217 12.8814 20.5217 12.4339V7.95862C18.8808 9.00284 16.1957 9.74872 13.3613 9.89789L19.6267 13.7764Z" fill="black"/>
+<path d="M10.8253 8.70452C16.1956 8.70452 20.5217 7.21276 20.5217 5.57184V3.63256C20.5217 1.84246 16.1956 0.499878 10.8253 0.499878C5.45499 0.499878 1.12891 1.99163 1.12891 3.63256V5.57184C1.12891 7.36194 5.45499 8.70452 10.8253 8.70452Z" fill="black"/>
+<path d="M1.12891 14.9702V19.4455C1.12891 21.2356 5.45499 22.5782 10.8253 22.5782C10.9745 22.5782 11.1236 22.5782 11.1236 22.5782V17.0587C10.9745 17.0587 10.8253 17.0587 10.8253 17.0587C6.94674 17.0587 3.21736 16.462 1.12891 14.9702Z" fill="black"/>
+<path d="M1.12891 8.10718V12.5824C1.12891 14.3725 5.45499 15.7151 10.8253 15.7151C10.9745 15.7151 11.1236 15.7151 11.1236 15.7151V11.2399C11.1236 10.7923 11.2728 10.3448 11.5712 10.1956C11.2728 10.1956 10.9745 10.1956 10.6761 10.1956C6.94674 10.1956 3.21736 9.44976 1.12891 8.10718Z" fill="black"/>
+<path d="M22.3124 16.7606L14.1077 11.987C13.511 11.5395 12.4668 11.8379 12.4668 12.8821V22.4293C12.4668 23.3244 13.3618 23.7719 14.1077 23.3244L22.3124 18.5507C23.0582 18.2524 23.0582 17.2082 22.3124 16.7606Z" fill="black"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/custom_solid_icons/rollback.svg b/static/img/style_guide/iconography_assets/custom_solid_icons/rollback.svg
new file mode 100644
index 0000000..9a63883
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/custom_solid_icons/rollback.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.0024 11.7317V13.0405C23.0024 13.5143 22.6528 13.9491 21.9512 14.3493C21.0542 14.8185 20.0858 15.1428 19.0875 15.3085C17.7879 15.55 16.4676 15.6673 15.145 15.6581C13.8247 15.665 12.5067 15.5477 11.2071 15.3085C10.2135 15.1405 9.25198 14.8185 8.36182 14.3493C7.66256 13.9491 7.30603 13.512 7.30603 13.0405V11.7317C7.30603 11.2762 7.66026 10.8231 8.36182 10.4229C9.26118 9.95595 10.2273 9.63392 11.2255 9.46831C12.5228 9.22449 13.8408 9.10488 15.1634 9.11408C16.486 9.10488 17.8063 9.22449 19.1059 9.46831C20.1042 9.63392 21.0703 9.95595 21.9696 10.4229C22.6574 10.8277 23.0024 11.2647 23.0024 11.7317ZM15.145 20.9002C13.6177 20.9048 12.095 20.753 10.5976 20.4447C9.41299 20.2377 8.28131 19.7961 7.26923 19.1451V20.8818C7.26923 21.3372 7.62346 21.7903 8.32501 22.1906C9.22208 22.6598 10.1905 22.9841 11.1887 23.1498C12.486 23.3913 13.8063 23.5086 15.1266 23.4994C16.4492 23.5063 17.7695 23.3913 19.0691 23.1498C20.0697 22.9841 21.0358 22.6598 21.9328 22.1906C22.6321 21.7903 22.984 21.3533 22.984 20.8818V19.1635C21.9742 19.8168 20.8449 20.2584 19.6603 20.4631C18.1744 20.7622 16.6608 20.9094 15.145 20.9002ZM15.145 16.9738C13.6177 16.9784 12.095 16.8266 10.5976 16.5183C9.41299 16.3113 8.28131 15.8697 7.26923 15.2187V16.9554C7.26923 17.4108 7.62346 17.8639 8.32501 18.2642C9.22208 18.7334 10.1905 19.0577 11.1887 19.2234C12.486 19.4649 13.8063 19.5822 15.1266 19.573C16.4492 19.5799 17.7695 19.4649 19.0691 19.2234C20.0697 19.0577 21.0358 18.7334 21.9328 18.2642C22.6321 17.8639 22.984 17.4269 22.984 16.9554V15.2371C21.9811 15.8927 20.8587 16.3412 19.6787 16.5551C18.1859 16.8473 16.6677 16.9876 15.145 16.9738ZM10.8805 3.52926C11.2485 3.68337 11.5982 3.87889 11.9225 4.1112L12.0191 4.18481L12.141 4.27682C12.2192 4.34122 12.2951 4.40333 12.3687 4.47233L12.4101 4.51373L12.6148 4.71385L12.6654 4.76905C12.7574 4.86566 12.8426 4.96457 12.9254 5.06348L13.0335 5.19919C13.091 5.27739 13.1508 5.3602 13.2106 5.4453C13.413 5.74663 13.5832 6.06865 13.7189 6.40448C13.7534 6.48958 13.8224 6.55629 13.9098 6.58619C13.9995 6.61379 14.0984 6.60459 14.1836 6.56319L15.911 5.58101C15.98 5.54191 16.0306 5.47981 16.0513 5.4039C16.0789 5.3257 16.0789 5.24059 16.0513 5.16238C15.5844 4.1112 14.8851 3.17963 14.011 2.43438L13.8293 2.28026C13.6476 2.13075 13.4567 1.99044 13.2612 1.85243C12.8288 1.56951 12.3733 1.32569 11.8972 1.12558C9.99724 0.311315 7.85118 0.290613 5.93973 1.07037C5.01046 1.4384 4.1594 1.98354 3.43484 2.66899L2.11224 1.34179C1.93743 1.13708 1.64761 1.07957 1.40839 1.20148C1.15077 1.28889 0.985156 1.53731 0.996657 1.80643V6.38838C0.996657 6.55859 1.06566 6.7242 1.18757 6.84381C1.30718 6.96572 1.47049 7.03703 1.64301 7.03933H6.23415C6.50327 7.05083 6.74709 6.88521 6.8345 6.62989C6.95641 6.38838 6.8989 6.09625 6.69419 5.92144L5.29338 4.51143C5.76722 4.0629 6.32386 3.71097 6.93111 3.47406C7.54295 3.23024 8.1962 3.10603 8.85405 3.11063C9.55101 3.10833 10.2411 3.25094 10.8805 3.52926Z" fill="black"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/custom_solid_icons/row_filter.svg b/static/img/style_guide/iconography_assets/custom_solid_icons/row_filter.svg
new file mode 100644
index 0000000..658a72d
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/custom_solid_icons/row_filter.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.4641 4.94797C19.0397 4.37245 18.608 3.50916 17.8886 3.50916H1.34222C0.622815 3.50916 0.19117 4.37245 0.766697 4.94797L7.38526 11.5665V18.9045C7.38526 19.1923 7.52914 19.48 7.8169 19.6239C7.8169 19.6239 9.97513 20.9188 9.97513 20.3433V9.83995C9.97513 9.12054 10.5507 8.40113 11.4139 8.40113H15.1549L18.4641 4.94797Z" fill="black"/>
+<path d="M22.3484 9.84058H12.4206C11.8451 9.84058 11.2695 10.4161 11.2695 10.9916V19.3368C11.2695 19.9123 11.8451 20.4878 12.4206 20.4878H22.3484C22.9239 20.4878 23.4995 19.9123 23.4995 19.3368V10.9916C23.4995 10.2722 22.9239 9.84058 22.3484 9.84058ZM16.5932 18.9051H12.8522V16.603H16.5932V18.9051ZM16.5932 15.1642H12.8522V12.8621H16.5932V15.1642ZM21.9168 18.9051H18.1759V16.603H21.9168V18.9051ZM21.9168 15.1642H18.1759V12.8621H21.9168V15.1642Z" fill="black"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/custom_solid_icons/save_data_changes.svg b/static/img/style_guide/iconography_assets/custom_solid_icons/save_data_changes.svg
new file mode 100644
index 0000000..db5cffd
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/custom_solid_icons/save_data_changes.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4279 12.2081C17.6692 12.463 17.7977 12.7783 17.7977 13.1208C17.7977 13.4731 17.6673 13.7903 17.4201 14.0355L12.9205 18.5429C12.9186 18.5449 12.9147 18.5487 12.9128 18.5507C12.6598 18.792 12.3425 18.9205 12 18.9205C11.6477 18.9205 11.3305 18.7901 11.0853 18.5429L6.58961 14.0433C6.33466 13.802 6.20037 13.4828 6.20037 13.1247C6.20037 12.7686 6.32882 12.4591 6.58377 12.2042L7.09367 11.6865C7.09562 11.6846 7.10146 11.6787 7.1034 11.6768C7.35835 11.4354 7.67363 11.307 8.01616 11.307C8.36842 11.307 8.68565 11.4374 8.93087 11.6846L10.2543 13.008V9.1409C10.2543 8.79448 10.3866 8.47725 10.6377 8.22619C10.8887 7.97513 11.206 7.84279 11.5524 7.84279H12.4379C12.7843 7.84279 13.1015 7.97513 13.3526 8.22619C13.6037 8.47725 13.736 8.79448 13.736 9.1409V13.006L15.0594 11.6826C15.3066 11.4354 15.6218 11.3051 15.9741 11.3051C16.3166 11.3051 16.6339 11.4316 16.8869 11.6748C16.8888 11.6768 16.8927 11.6807 16.8947 11.6826L17.4123 12.2003C17.4221 12.2022 17.426 12.2061 17.4279 12.2081ZM23.5 4.47979V19.5179C23.5 20.1252 23.282 20.6467 22.85 21.0807C22.4179 21.5128 21.8963 21.7308 21.2872 21.7308H2.71086C2.10366 21.7308 1.58208 21.5128 1.14808 21.0807C0.71408 20.6487 0.5 20.1271 0.5 19.5199V4.47979C0.5 3.87258 0.717973 3.351 1.15003 2.917C1.58208 2.483 2.10366 2.26892 2.71086 2.26892H21.2872C21.8944 2.26892 22.416 2.48689 22.85 2.91895C23.284 3.351 23.5 3.87258 23.5 4.47979ZM2.26908 8.90346C2.26908 9.03191 2.30995 9.13895 2.39364 9.22069C2.47732 9.30438 2.58242 9.34525 2.71086 9.34525H7.13454C7.26299 9.34525 7.37003 9.30438 7.45177 9.22069C7.53545 9.137 7.57632 9.03191 7.57632 8.90346V6.24887C7.57632 6.12042 7.53545 6.01338 7.45177 5.93164C7.36808 5.84795 7.26299 5.80708 7.13454 5.80708H2.71086C2.58242 5.80708 2.47538 5.84795 2.39364 5.93164C2.30995 6.01532 2.26908 6.12042 2.26908 6.24887V8.90346V8.90346ZM7.57632 16.8653C7.57632 16.7369 7.53545 16.6298 7.45177 16.5481C7.36808 16.4644 7.26299 16.4235 7.13454 16.4235H2.71086C2.58242 16.4235 2.47538 16.4644 2.39364 16.5481C2.30995 16.6318 2.26908 16.7369 2.26908 16.8653V19.5199C2.26908 19.6483 2.30995 19.7554 2.39364 19.8371C2.47732 19.9208 2.58242 19.9617 2.71086 19.9617H7.13454C7.26299 19.9617 7.37003 19.9208 7.45177 19.8371C7.53545 19.7534 7.57632 19.6483 7.57632 19.5199V16.8653V16.8653ZM21.7309 16.8653C21.7309 16.7369 21.69 16.6298 21.6064 16.5481C21.5227 16.4644 21.4176 16.4235 21.2891 16.4235H16.8655C16.737 16.4235 16.63 16.4644 16.5482 16.5481C16.4645 16.6318 16.4237 16.7369 16.4237 16.8653V19.5199C16.4237 19.6483 16.4645 19.7554 16.5482 19.8371C16.6319 19.9189 16.737 19.9617 16.8655 19.9617H21.2891C21.4176 19.9617 21.5246 19.9208 21.6064 19.8371C21.6881 19.7534 21.7309 19.6483 21.7309 19.5199V16.8653ZM21.7309 11.5581C21.7309 11.4296 21.69 11.3226 21.6064 11.2408C21.5227 11.1591 21.4176 11.1163 21.2891 11.1163H16.8655C16.8557 11.1163 16.8479 11.1163 16.8382 11.1182C16.5774 10.9684 16.2874 10.8905 15.9819 10.8905C15.5168 10.8905 15.1003 11.0637 14.7733 11.3887L14.6526 11.5094C14.6429 11.4024 14.602 11.3128 14.53 11.2408C14.4464 11.1571 14.3413 11.1163 14.2128 11.1163H14.1583V9.34719H14.2128C14.3413 9.34719 14.4483 9.30632 14.53 9.22264C14.6137 9.13895 14.6546 9.03386 14.6546 8.90541V6.24887C14.6546 6.12042 14.6137 6.01338 14.53 5.93164C14.4464 5.84795 14.3413 5.80708 14.2128 5.80708H9.78914C9.66069 5.80708 9.55365 5.84795 9.47191 5.93164C9.38822 6.01532 9.34735 6.12042 9.34735 6.24887V8.90346C9.34735 9.03191 9.38822 9.13895 9.47191 9.22069C9.55559 9.30438 9.66069 9.34525 9.78914 9.34525H9.84363V11.1143H9.78914C9.66069 11.1143 9.55365 11.1552 9.47191 11.2389C9.3999 11.3109 9.35903 11.4004 9.35124 11.5075L9.23058 11.3868C8.90362 11.0598 8.48714 10.8886 8.022 10.8886C7.7145 10.8886 7.42258 10.9664 7.16568 11.1163C7.15789 11.1163 7.14816 11.1143 7.13843 11.1143H2.71086C2.58242 11.1143 2.47538 11.1552 2.39364 11.2389C2.30995 11.3226 2.26908 11.4277 2.26908 11.5561V14.2107C2.26908 14.3392 2.30995 14.4462 2.39364 14.5279C2.47732 14.6116 2.58242 14.6525 2.71086 14.6525H6.61686L9.34541 17.3849V19.5179C9.34541 19.6464 9.38628 19.7534 9.46996 19.8352C9.55365 19.9169 9.65874 19.9597 9.78719 19.9597H14.2109C14.3393 19.9597 14.4464 19.9189 14.5281 19.8352C14.6118 19.7515 14.6526 19.6464 14.6526 19.5179V17.3947L17.389 14.6544H21.2872C21.4156 14.6544 21.5227 14.6136 21.6044 14.5299C21.6881 14.4462 21.729 14.3411 21.729 14.2127V11.5581H21.7309ZM21.7309 6.24887C21.7309 6.12042 21.69 6.01338 21.6064 5.93164C21.5227 5.84795 21.4176 5.80708 21.2891 5.80708H16.8655C16.737 5.80708 16.63 5.84795 16.5482 5.93164C16.4645 6.01532 16.4237 6.12042 16.4237 6.24887V8.90346C16.4237 9.03191 16.4645 9.13895 16.5482 9.22069C16.6319 9.30438 16.737 9.34525 16.8655 9.34525H21.2891C21.4176 9.34525 21.5246 9.30438 21.6064 9.22069C21.69 9.137 21.7309 9.03191 21.7309 8.90346V6.24887Z" fill="#222222"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/custom_solid_icons/script.svg b/static/img/style_guide/iconography_assets/custom_solid_icons/script.svg
new file mode 100644
index 0000000..aee005c
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/custom_solid_icons/script.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9 16.5998V5.55984C18.9 3.76584 17.474 2.33984 15.68 2.33984H3.72C1.926 2.33984 0.5 3.76584 0.5 5.55984C0.5 6.98584 1.466 8.22784 2.8 8.64184V18.4398C2.8 20.2338 4.226 21.6598 6.02 21.6598H20.28C22.074 21.6598 23.5 20.2338 23.5 18.4398V16.5998H18.9ZM20.28 19.8198C19.912 19.8198 19.452 19.1758 19.13 18.4398H21.43C21.154 19.1298 20.648 19.8198 20.28 19.8198ZM3.72 4.17984H12.736C12.552 4.59384 12.46 5.05384 12.46 5.55984C12.46 6.01984 12.552 6.47984 12.782 6.93984H3.72C2.938 6.93984 2.34 6.34184 2.34 5.55984C2.34 4.77784 2.938 4.17984 3.72 4.17984ZM17.382 19.8198H6.02C5.238 19.8198 4.64 19.2218 4.64 18.4398V8.77984H16.14V6.93984H15.68C14.898 6.93984 14.3 6.34184 14.3 5.55984C14.3 4.77784 14.898 4.17984 15.68 4.17984C16.462 4.17984 17.06 4.77784 17.06 5.55984V18.4398C17.06 18.8998 17.152 19.3598 17.382 19.8198Z" fill="#222222"/>
+<path d="M8.32047 10.1595H6.48047V11.9995H8.32047V10.1595Z" fill="#222222"/>
+<path d="M15.2202 10.1595H9.24023V11.9995H15.2202V10.1595Z" fill="#222222"/>
+<path d="M8.32047 13.38H6.48047V15.22H8.32047V13.38Z" fill="#222222"/>
+<path d="M15.2202 13.38H9.24023V15.22H15.2202V13.38Z" fill="#222222"/>
+<path d="M8.32047 16.5996H6.48047V18.4396H8.32047V16.5996Z" fill="#222222"/>
+<path d="M15.2202 16.5996H9.24023V18.4396H15.2202V16.5996Z" fill="#222222"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_aggregate.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_aggregate.svg
new file mode 100644
index 0000000..fffc685
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_aggregate.svg
@@ -0,0 +1,41 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M46.6999 27.25H38.4199V36.25H46.6999V27.25Z" fill="#F0ECB6"/>
+<path d="M46.1999 27.75V35.75H38.9199V27.75H46.1999ZM47.1999 26.75H37.9199V36.75H47.1999V26.75Z" fill="#C18F35"/>
+<path d="M54.9987 27.25H46.7188V36.25H54.9987V27.25Z" fill="#F0ECB6"/>
+<path d="M54.4987 27.75V35.75H47.2188V27.75H54.4987ZM55.4987 26.75H46.2188V36.75H55.4987V26.75Z" fill="#C18F35"/>
+<path d="M39.9199 45.23C38.5499 45.23 38.4199 45.1 38.4199 43.73V36.23H46.6999V45.23H39.9199Z" fill="#C8FFAC"/>
+<path d="M46.1999 36.73V44.73H39.9199C39.6177 44.7453 39.3147 44.7184 39.0199 44.65C38.9211 44.354 38.887 44.0403 38.9199 43.73V36.73H46.1999ZM47.1999 35.73H37.9199V43.73C37.9199 45.38 38.2699 45.73 39.9199 45.73H47.1999V35.73Z" fill="#48D601"/>
+<path d="M46.7188 45.23V36.23H54.9987V43.73C54.9987 45.1 54.8687 45.23 53.4987 45.23H46.7188Z" fill="#C8FFAC"/>
+<path d="M54.4987 36.73V43.73C54.5136 44.0322 54.4867 44.3351 54.4187 44.63C54.1228 44.7288 53.809 44.7629 53.4987 44.73H47.2188V36.73H54.4987ZM55.4987 35.73H46.2188V45.73H53.4987C55.1487 45.73 55.4987 45.38 55.4987 43.73V35.73Z" fill="#48D601"/>
+<path d="M38.4199 27.27V19.77C38.4199 18.4 38.5499 18.27 39.9199 18.27H46.6999V27.27H38.4199Z" fill="#D3D4F3"/>
+<path d="M46.1999 18.77V26.77H38.9199V19.77C38.9051 19.4678 38.932 19.1649 38.9999 18.87C39.2959 18.7712 39.6096 18.7371 39.9199 18.77H46.1999ZM47.1999 17.77H39.9199C38.2699 17.77 37.9199 18.12 37.9199 19.77V27.77H47.1999V17.77Z" fill="#666BD1"/>
+<path d="M46.7188 27.27V18.27H53.4987C54.8687 18.27 54.9987 18.4 54.9987 19.77V27.27H46.7188Z" fill="#D3D4F3"/>
+<path d="M53.4987 18.77C53.801 18.7547 54.1039 18.7816 54.3988 18.85C54.4975 19.146 54.5316 19.4597 54.4987 19.77V26.77H47.2188V18.77H53.4987ZM53.4987 17.77H46.2188V27.77H55.4987V19.77C55.4987 18.12 55.1487 17.77 53.4987 17.77Z" fill="#666BD1"/>
+<path d="M9 25.4302V13.9302C9 12.5602 9.13 12.4302 10.5 12.4302H16.28V25.4302H9Z" fill="#D3D4F3"/>
+<path d="M15.8093 12.9302V24.9302H9.5293V13.9302C9.51432 13.6279 9.54124 13.325 9.6093 13.0302C9.90527 12.9314 10.219 12.8973 10.5293 12.9302H15.8093ZM16.8093 11.9302H10.5293C8.8793 11.9302 8.5293 12.2802 8.5293 13.9302V25.9302H16.8093V11.9302Z" fill="#666BD1"/>
+<path d="M16.3184 25.4302V12.4302H22.0984C23.4684 12.4302 23.5984 12.5602 23.5984 13.9302V25.4302H16.3184Z" fill="#D3D4F3"/>
+<path d="M22.0984 12.9302C22.4002 12.9115 22.7031 12.9351 22.9984 13.0002C23.0972 13.2961 23.1313 13.6099 23.0984 13.9202V24.9202H16.8184V12.9202H22.0984V12.9302ZM22.0984 11.9202H15.8184V25.9202H24.0984V13.9202C24.0984 12.2702 23.7484 11.9202 22.0984 11.9202Z" fill="#666BD1"/>
+<path opacity="0.8" d="M9.05859 18.77H15.7986" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M16.0801 18.77H23.5701" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M10.53 51.4502C9.16 51.4502 9 51.3302 9 50.0002V38.4502H16.28V51.4502H10.53Z" fill="#C8FFAC"/>
+<path d="M15.8093 39V51H10.5293C10.227 51.0154 9.92411 50.9884 9.6293 50.92C9.53051 50.624 9.49641 50.3103 9.5293 50V39H15.8093ZM16.8093 38H8.5293V50C8.5293 51.65 8.8793 52 10.5293 52H16.8093V38Z" fill="#48D601"/>
+<path d="M16.3184 51.4502V38.4502H23.5984V50.0002C23.5984 51.3702 23.4684 51.5002 22.0984 51.5002L16.3184 51.4502Z" fill="#C8FFAC"/>
+<path d="M23.0984 39V50C23.1133 50.3023 23.0864 50.6051 23.0184 50.9C22.7224 50.9988 22.4087 51.0329 22.0984 51H16.8184V39H23.0984ZM24.0984 38H15.8184V52H22.0984C23.7484 52 24.0984 51.65 24.0984 50V38Z" fill="#48D601"/>
+<path opacity="0.7" d="M16.0801 44.8003H23.5701" stroke="#48D601" stroke-miterlimit="10"/>
+<path opacity="0.7" d="M9.05859 44.8003H15.7986" stroke="#48D601" stroke-miterlimit="10"/>
+<path d="M23.5984 25.4302H16.3184V38.4302H23.5984V25.4302Z" fill="#F0ECB6"/>
+<path d="M23.0984 25.9302V37.9302H16.8184V25.9302H23.0984ZM24.0984 24.9302H15.8184V38.9302H24.0984V24.9302Z" fill="#C18F35"/>
+<path opacity="0.8" d="M16.0801 31.78H23.5701" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M16.3093 25.4302H9.0293V38.4302H16.3093V25.4302Z" fill="#F0ECB6"/>
+<path d="M15.8093 25.9302V37.9302H9.5293V25.9302H15.8093ZM16.8093 24.9302H8.5293V38.9302H16.8093V24.9302Z" fill="#C18F35"/>
+<path opacity="0.8" d="M9.05859 31.78H15.7986" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M37.0091 23.1101L33.8691 24.1201L35.1591 20.3901L37.0091 23.1101Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.0933 19.8945C35.2807 19.8696 35.4662 19.9526 35.5726 20.109L37.4226 22.829C37.5112 22.9593 37.5332 23.1237 37.482 23.2727C37.4308 23.4217 37.3123 23.5379 37.1623 23.5861L34.0223 24.5961C33.8419 24.6541 33.6443 24.6052 33.5118 24.4698C33.3793 24.3344 33.3347 24.1358 33.3966 23.9567L34.6866 20.2267C34.7484 20.048 34.9058 19.9194 35.0933 19.8945ZM35.3061 21.4952L34.6688 23.3377L36.2199 22.8388L35.3061 21.4952Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5291 18.8724C24.6218 18.6123 24.9078 18.4765 25.1679 18.5692L35.0779 22.0992C35.338 22.1918 35.4738 22.4778 35.3811 22.738C35.2885 22.9981 35.0025 23.1338 34.7424 23.0412L24.8324 19.5112C24.5722 19.4185 24.4365 19.1325 24.5291 18.8724Z" fill="#34495E"/>
+<path d="M37.0091 40.8701L33.8691 39.8701L35.1591 43.6001L37.0091 40.8701Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.5113 39.521C33.6434 39.3855 33.8406 39.3363 34.0209 39.3937L37.1609 40.3937C37.3111 40.4416 37.43 40.5575 37.4816 40.7065C37.5332 40.8555 37.5115 41.0201 37.4231 41.1506L35.5731 43.8806C35.4669 44.0373 35.2813 44.1206 35.0937 44.0958C34.9061 44.071 34.7485 43.9424 34.6866 43.7636L33.3966 40.0336C33.3348 39.8548 33.3792 39.6564 33.5113 39.521ZM34.6676 40.6492L35.3054 42.4931L36.2199 41.1435L34.6676 40.6492Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.3811 41.2525C35.4738 41.5127 35.338 41.7987 35.0779 41.8913L25.1679 45.4213C24.9078 45.514 24.6218 45.3782 24.5291 45.1181C24.4365 44.858 24.5722 44.572 24.8324 44.4793L34.7424 40.9493C35.0025 40.8566 35.2885 40.9924 35.3811 41.2525Z" fill="#34495E"/>
+<path d="M37.0697 31.7803L34.4297 33.7603V29.8003L37.0697 31.7803Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.2061 29.3531C34.3755 29.2684 34.5782 29.2867 34.7297 29.4003L37.3697 31.3803C37.4956 31.4747 37.5697 31.6229 37.5697 31.7803C37.5697 31.9377 37.4956 32.0859 37.3697 32.1803L34.7297 34.1603C34.5782 34.2739 34.3755 34.2922 34.2061 34.2075C34.0367 34.1228 33.9297 33.9497 33.9297 33.7603V29.8003C33.9297 29.6109 34.0367 29.4378 34.2061 29.3531ZM34.9297 30.8003V32.7603L36.2364 31.7803L34.9297 30.8003Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.39 31.8781C35.3911 32.1542 35.1682 32.379 34.892 32.3801L25.002 32.4201C24.7259 32.4212 24.5011 32.1983 24.5 31.9222C24.4989 31.646 24.7218 31.4212 24.998 31.4201L34.888 31.3801C35.1641 31.379 35.3889 31.602 35.39 31.8781Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_append.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_append.svg
new file mode 100644
index 0000000..b5cd254
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_append.svg
@@ -0,0 +1,36 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.0398 38.1099L25.5698 41.4899H20.5098L23.0398 38.1099Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0398 37.6099C23.1973 37.6099 23.3456 37.6841 23.4401 37.8102L25.9701 41.1902C26.0835 41.3418 26.1016 41.5444 26.0169 41.7137C25.9321 41.8829 25.7591 41.9899 25.5698 41.9899H20.5098C20.3205 41.9899 20.1474 41.8829 20.0627 41.7137C19.9779 41.5444 19.996 41.3418 20.1095 41.1902L22.6395 37.8102C22.7339 37.6841 22.8822 37.6099 23.0398 37.6099ZM21.5086 40.9899H24.571L23.0398 38.9442L21.5086 40.9899Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0391 40.49C23.5913 40.49 24.0391 40.9377 24.0391 41.49V44.47C24.0391 45.0223 23.5913 45.47 23.0391 45.47C22.4868 45.47 22.0391 45.0223 22.0391 44.47V41.49C22.0391 40.9377 22.4868 40.49 23.0391 40.49Z" fill="#528D19"/>
+<path d="M40.9792 38.1099L43.4992 41.4899H38.4492L40.9792 38.1099Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.9797 37.6099C41.1374 37.61 41.2858 37.6846 41.3801 37.811L43.9001 41.191C44.0131 41.3426 44.0309 41.5451 43.9461 41.7141C43.8613 41.8831 43.6884 41.9899 43.4992 41.9899H38.4492C38.2599 41.9899 38.0869 41.8829 38.0021 41.7137C37.9174 41.5444 37.9355 41.3418 38.0489 41.1902L40.5789 37.8102C40.6734 37.684 40.822 37.6097 40.9797 37.6099ZM39.448 40.9899H42.5028L40.9784 38.9453L39.448 40.9899Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.9707 40.49C41.523 40.49 41.9707 40.9377 41.9707 41.49V44.47C41.9707 45.0223 41.523 45.47 40.9707 45.47C40.4184 45.47 39.9707 45.0223 39.9707 44.47V41.49C39.9707 40.9377 40.4184 40.49 40.9707 40.49Z" fill="#528D19"/>
+<path d="M8 34.5C6.63 34.5 6.5 34.37 6.5 33V12.5H57.5V33C57.5 34.37 57.37 34.5 56 34.5H8Z" fill="#F0ECB6"/>
+<path d="M57 13V33C57.015 33.3023 56.9881 33.6051 56.92 33.9C56.624 33.9988 56.3103 34.0329 56 34H8C7.69774 34.0154 7.39481 33.9884 7.1 33.92C7.00121 33.624 6.96711 33.3103 7 33V13H57ZM58 12H6V33C6 34.65 6.35 35 8 35H56C57.65 35 58 34.65 58 33V12Z" fill="#3588C1"/>
+<path d="M46.3809 12.5V6.5H56.0009C57.3709 6.5 57.5009 6.63 57.5009 8V12.5H46.3809Z" fill="#ADDFF3"/>
+<path d="M56.0009 7C56.3031 6.98463 56.6061 7.01156 56.9009 7.08C56.9997 7.37598 57.0338 7.68971 57.0009 8V12H46.8809V7H56.0009ZM56.0009 6H45.8809V13H58.0009V8C58.0009 6.35 57.6509 6 56.0009 6Z" fill="#2980B9"/>
+<path d="M6.51953 12.5V8C6.51953 6.63 6.64953 6.5 8.01953 6.5H17.5995V12.5H6.51953Z" fill="#ADDFF3"/>
+<path d="M17.1 7V12H7V8C6.98502 7.69775 7.01194 7.39487 7.08 7.1C7.37598 7.00121 7.68971 6.96711 8 7H17.1ZM18.1 6H8C6.37 6 6 6.35 6 8V13H18.1V6Z" fill="#2980B9"/>
+<path d="M46.3803 6.5H36.8203V12.5H46.3803V6.5Z" fill="#ADDFF3"/>
+<path d="M45.8803 7V12H37.3103V7H45.8703H45.8803ZM46.8703 6H36.3203V13H46.8803V6H46.8703Z" fill="#2980B9"/>
+<path d="M36.81 6.5H27.25V12.5H36.81V6.5Z" fill="#ADDFF3"/>
+<path d="M36.3198 7V12H27.7498V7H36.3098H36.3198ZM37.3098 6H26.7598V13H37.3198V6H37.3098Z" fill="#2980B9"/>
+<path d="M27.2391 6.5H17.6191V12.5H27.2391V6.5Z" fill="#ADDFF3"/>
+<path d="M26.7409 7V12H18.1209V7H26.7309H26.7409ZM27.7309 6H17.1309V13H27.7409V6H27.7309Z" fill="#2980B9"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M17.6094 34V13" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M36.8008 34V13" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M27.2109 34V13" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M46.3906 34V13" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M7 19.8499H57.25" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M7 27.23H57.25" stroke="#C18F35" stroke-linejoin="round"/>
+</g>
+<path d="M55.9995 48.5H8.01953C7.1911 48.5 6.51953 49.1716 6.51953 50V56C6.51953 56.8284 7.1911 57.5 8.01953 57.5H55.9995C56.828 57.5 57.4995 56.8284 57.4995 56V50C57.4995 49.1716 56.828 48.5 55.9995 48.5Z" fill="#D3D4F3"/>
+<path d="M56 49C56.3023 48.9846 56.6052 49.0116 56.9 49.08C56.9988 49.376 57.0329 49.6897 57 50V56C57.015 56.3023 56.9881 56.6051 56.92 56.9C56.624 56.9988 56.3103 57.0329 56 57H8C7.69774 57.0154 7.39481 56.9884 7.1 56.92C7.00121 56.624 6.96711 56.3103 7 56V50C6.98502 49.6977 7.01194 49.3949 7.08 49.1C7.37598 49.0012 7.68971 48.9671 8 49H56ZM56 48H8C6.35 48 6 48.35 6 50V56C6 57.65 6.35 58 8 58H56C57.65 58 58 57.65 58 56V50C58 48.35 57.65 48 56 48Z" fill="#666BD1"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M17.5996 57.0598V48.8298" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M27.1992 57.0598V48.8298" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M36.7988 57.0598V48.8298" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M46.4004 57.0598V48.8298" stroke="#666BD1" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_and.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_and.svg
new file mode 100644
index 0000000..51ac760
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_and.svg
@@ -0,0 +1,33 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.0008 28.8898C25.7069 28.2388 25.5503 27.5341 25.5408 26.8198C25.522 26.1791 25.6368 25.5415 25.8778 24.9476C26.1189 24.3536 26.4808 23.8163 26.9408 23.3698C27.4429 22.9029 28.0333 22.5412 28.6773 22.3059C29.3213 22.0706 30.0059 21.9665 30.6908 21.9998C31.3284 21.9622 31.9669 22.0554 32.5671 22.2738C33.1673 22.4922 33.7165 22.8312 34.1808 23.2698C34.5802 23.6606 34.8975 24.1273 35.1139 24.6425C35.3303 25.1577 35.4414 25.711 35.4408 26.2698C35.46 27.5941 34.998 28.8803 34.1408 29.8898C33.3933 30.7047 32.5389 31.4145 31.6008 31.9998L35.5108 36.6898C35.7708 35.9365 35.9341 35.3732 36.0008 34.9998C36.0674 34.6265 36.1708 34.0865 36.3108 33.3798H38.8108C38.6513 34.7507 38.3152 36.0952 37.8108 37.3798C37.3174 38.6465 37.0708 39.1565 37.0708 38.9098L40.8808 43.5598H37.5508L35.5508 41.0998C34.9117 41.8309 34.1747 42.4703 33.3608 42.9998C32.1511 43.7153 30.7658 44.079 29.3608 44.0498C27.1208 44.0165 25.4974 43.3965 24.4908 42.1898C23.5168 41.0549 22.9874 39.6053 23.0008 38.1098C22.9408 36.6048 23.4597 35.1341 24.4508 33.9998C25.4613 33.0271 26.5941 32.1901 27.8208 31.5098C27.0907 30.7291 26.4776 29.8465 26.0008 28.8898ZM32.3308 40.8898C33.0343 40.4601 33.6433 39.8919 34.1208 39.2198L29.2708 33.2898C28.2988 33.8871 27.3994 34.5952 26.5908 35.3998C25.9326 36.1358 25.5756 37.0926 25.5908 38.0798C25.5644 38.589 25.6647 39.0967 25.8829 39.5575C26.1011 40.0182 26.4302 40.4176 26.8408 40.7198C27.6024 41.3101 28.5372 41.6334 29.5008 41.6398C30.4934 41.6868 31.4778 41.4398 32.3308 40.9298V40.8898ZM32.1208 28.6898C32.6665 28.1005 32.9792 27.3328 33.0008 26.5298C33.0107 25.9223 32.7849 25.3345 32.3708 24.8898C32.1561 24.659 31.8937 24.4777 31.6019 24.3585C31.31 24.2393 30.9957 24.1852 30.6808 24.1998C30.3564 24.1563 30.0265 24.1837 29.7138 24.2802C29.401 24.3766 29.113 24.5399 28.8696 24.7586C28.6261 24.9773 28.4331 25.2463 28.3038 25.5469C28.1745 25.8476 28.1121 26.1727 28.1208 26.4998C28.1229 27.1042 28.2926 27.6961 28.6108 28.2098C29.0965 28.9616 29.6451 29.6708 30.2508 30.3298C30.9311 29.8707 31.5582 29.3375 32.1208 28.7398V28.6898Z" fill="#34495E"/>
+<path d="M17.0191 7.5H8.03906C7.21064 7.5 6.53906 8.17157 6.53906 9V55C6.53906 55.8284 7.21064 56.5 8.03906 56.5H17.0191C17.8475 56.5 18.5191 55.8284 18.5191 55V9C18.5191 8.17157 17.8475 7.5 17.0191 7.5Z" fill="#D3D4F3"/>
+<path d="M17 8C17.3023 7.98463 17.6052 8.01156 17.9 8.08C17.9988 8.37598 18.0329 8.68971 18 9V55C18.015 55.3023 17.9881 55.6051 17.92 55.9C17.624 55.9988 17.3103 56.0329 17 56H8C7.69774 56.0154 7.39481 55.9884 7.1 55.92C7.00121 55.624 6.96711 55.3103 7 55V9C6.98502 8.69775 7.01194 8.39487 7.08 8.1C7.37598 8.00121 7.68971 7.96711 8 8H17ZM17 7H8C6.39 7 6 7.35 6 9V55C6 56.65 6.35 57 8 57H17C18.65 57 19 56.65 19 55V9C19 7.35 18.65 7 17 7Z" fill="#666BD1"/>
+<path d="M6.53906 15.5V9C6.53906 7.63 6.66906 7.5 8.03906 7.5H17.0391C18.4091 7.5 18.5391 7.63 18.5391 9V15.5H6.53906Z" fill="#ADDFF3"/>
+<path d="M17 8C17.3023 7.98463 17.6052 8.01156 17.9 8.08C17.9988 8.37598 18.0329 8.68971 18 9V15H7V9C6.98502 8.69775 7.01194 8.39487 7.08 8.1C7.37598 8.00121 7.68971 7.96711 8 8H17ZM17 7H8C6.39 7 6 7.35 6 9V16H19V9C19 7.35 18.65 7 17 7Z" fill="#2980B9"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M7.05078 23.74H18.0208" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M7.05078 31.49H18.0208" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M7.05078 39.23H18.0208" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M7.05078 46.97H18.0208" stroke="#666BD1" stroke-linejoin="round"/>
+</g>
+<path d="M11.2852 18.9001V18.3318C11.5488 18.3201 11.7334 18.3025 11.8389 18.2791C12.0068 18.2419 12.1436 18.1677 12.249 18.0564C12.3213 17.9802 12.376 17.8787 12.4131 17.7517C12.4346 17.6755 12.4453 17.6189 12.4453 17.5818H13.1396V21.8298H12.2842V18.9001H11.2852Z" fill="#34495E"/>
+<path d="M11.9092 27.677C11.9092 28.1653 11.9492 28.5393 12.0293 28.7991C12.1094 29.0569 12.2734 29.1858 12.5215 29.1858C12.7695 29.1858 12.9316 29.0569 13.0078 28.7991C13.0859 28.5393 13.125 28.1653 13.125 27.677C13.125 27.1653 13.0859 26.7864 13.0078 26.5403C12.9316 26.2942 12.7695 26.1711 12.5215 26.1711C12.2734 26.1711 12.1094 26.2942 12.0293 26.5403C11.9492 26.7864 11.9092 27.1653 11.9092 27.677ZM12.5215 25.4827C13.0625 25.4827 13.4414 25.6731 13.6582 26.054C13.877 26.4348 13.9863 26.9758 13.9863 27.677C13.9863 28.3782 13.877 28.9182 13.6582 29.2971C13.4414 29.676 13.0625 29.8655 12.5215 29.8655C11.9805 29.8655 11.6006 29.676 11.3818 29.2971C11.165 28.9182 11.0566 28.3782 11.0566 27.677C11.0566 26.9758 11.165 26.4348 11.3818 26.054C11.6006 25.6731 11.9805 25.4827 12.5215 25.4827Z" fill="#34495E"/>
+<path d="M11.2852 42.3103V41.7419C11.5488 41.7302 11.7334 41.7126 11.8389 41.6892C12.0068 41.6521 12.1436 41.5779 12.249 41.4666C12.3213 41.3904 12.376 41.2888 12.4131 41.1619C12.4346 41.0857 12.4453 41.0291 12.4453 40.9919H13.1396V45.24H12.2842V42.3103H11.2852Z" fill="#34495E"/>
+<path d="M11.9092 35.5369C11.9092 36.0251 11.9492 36.3992 12.0293 36.6589C12.1094 36.9167 12.2734 37.0457 12.5215 37.0457C12.7695 37.0457 12.9316 36.9167 13.0078 36.6589C13.0859 36.3992 13.125 36.0251 13.125 35.5369C13.125 35.0251 13.0859 34.6462 13.0078 34.4001C12.9316 34.1541 12.7695 34.031 12.5215 34.031C12.2734 34.031 12.1094 34.1541 12.0293 34.4001C11.9492 34.6462 11.9092 35.0251 11.9092 35.5369ZM12.5215 33.3425C13.0625 33.3425 13.4414 33.533 13.6582 33.9138C13.877 34.2947 13.9863 34.8357 13.9863 35.5369C13.9863 36.238 13.877 36.7781 13.6582 37.157C13.4414 37.5359 13.0625 37.7253 12.5215 37.7253C11.9805 37.7253 11.6006 37.5359 11.3818 37.157C11.165 36.7781 11.0566 36.238 11.0566 35.5369C11.0566 34.8357 11.165 34.2947 11.3818 33.9138C11.6006 33.533 11.9805 33.3425 12.5215 33.3425Z" fill="#34495E"/>
+<path d="M11.9092 51.2471C11.9092 51.7354 11.9492 52.1094 12.0293 52.3691C12.1094 52.627 12.2734 52.7559 12.5215 52.7559C12.7695 52.7559 12.9316 52.627 13.0078 52.3691C13.0859 52.1094 13.125 51.7354 13.125 51.2471C13.125 50.7354 13.0859 50.3564 13.0078 50.1104C12.9316 49.8643 12.7695 49.7412 12.5215 49.7412C12.2734 49.7412 12.1094 49.8643 12.0293 50.1104C11.9492 50.3564 11.9092 50.7354 11.9092 51.2471ZM12.5215 49.0527C13.0625 49.0527 13.4414 49.2432 13.6582 49.624C13.877 50.0049 13.9863 50.5459 13.9863 51.2471C13.9863 51.9482 13.877 52.4883 13.6582 52.8672C13.4414 53.2461 13.0625 53.4355 12.5215 53.4355C11.9805 53.4355 11.6006 53.2461 11.3818 52.8672C11.165 52.4883 11.0566 51.9482 11.0566 51.2471C11.0566 50.5459 11.165 50.0049 11.3818 49.624C11.6006 49.2432 11.9805 49.0527 12.5215 49.0527Z" fill="#34495E"/>
+<path d="M55.9507 7.5H46.9707C46.1423 7.5 45.4707 8.17157 45.4707 9V55C45.4707 55.8284 46.1423 56.5 46.9707 56.5H55.9507C56.7791 56.5 57.4507 55.8284 57.4507 55V9C57.4507 8.17157 56.7791 7.5 55.9507 7.5Z" fill="#F0ECB6"/>
+<path d="M56 8C56.3023 7.98463 56.6052 8.01156 56.9 8.08C56.9988 8.37598 57.0329 8.68971 57 9V55C57.015 55.3023 56.9881 55.6051 56.92 55.9C56.624 55.9988 56.3103 56.0329 56 56H47C46.6977 56.0154 46.3948 55.9884 46.1 55.92C46.0012 55.624 45.9671 55.3103 46 55V9C45.9586 8.70143 45.9586 8.39858 46 8.1C46.321 7.98924 46.6634 7.955 47 8H56ZM56 7H47C45.35 7 45 7.35 45 9V55C45 56.65 45.35 57 47 57H56C57.65 57 58 56.65 58 55V9C58 7.35 57.65 7 56 7Z" fill="#C18F35"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M45.9805 23.74H56.9505" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M45.9805 31.49H56.9505" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M45.9805 39.23H56.9505" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M45.9805 46.97H56.9505" stroke="#C18F35" stroke-linejoin="round"/>
+</g>
+<path d="M50.8408 19.7471C50.8408 20.2353 50.8809 20.6094 50.9609 20.8691C51.041 21.127 51.2051 21.2559 51.4531 21.2559C51.7012 21.2559 51.8633 21.127 51.9395 20.8691C52.0176 20.6094 52.0566 20.2353 52.0566 19.7471C52.0566 19.2354 52.0176 18.8564 51.9395 18.6104C51.8633 18.3643 51.7012 18.2412 51.4531 18.2412C51.2051 18.2412 51.041 18.3643 50.9609 18.6104C50.8809 18.8564 50.8408 19.2354 50.8408 19.7471ZM51.4531 17.5527C51.9941 17.5527 52.373 17.7432 52.5898 18.124C52.8086 18.5049 52.918 19.0459 52.918 19.7471C52.918 20.4482 52.8086 20.9883 52.5898 21.3672C52.373 21.7461 51.9941 21.9355 51.4531 21.9355C50.9121 21.9355 50.5322 21.7461 50.3135 21.3672C50.0967 20.9883 49.9883 20.4482 49.9883 19.7471C49.9883 19.0459 50.0967 18.5049 50.3135 18.124C50.5322 17.7432 50.9121 17.5527 51.4531 17.5527Z" fill="#34495E"/>
+<path d="M50.8408 27.677C50.8408 28.1653 50.8809 28.5393 50.9609 28.7991C51.041 29.0569 51.2051 29.1858 51.4531 29.1858C51.7012 29.1858 51.8633 29.0569 51.9395 28.7991C52.0176 28.5393 52.0566 28.1653 52.0566 27.677C52.0566 27.1653 52.0176 26.7864 51.9395 26.5403C51.8633 26.2942 51.7012 26.1711 51.4531 26.1711C51.2051 26.1711 51.041 26.2942 50.9609 26.5403C50.8809 26.7864 50.8408 27.1653 50.8408 27.677ZM51.4531 25.4827C51.9941 25.4827 52.373 25.6731 52.5898 26.054C52.8086 26.4348 52.918 26.9758 52.918 27.677C52.918 28.3782 52.8086 28.9182 52.5898 29.2971C52.373 29.676 51.9941 29.8655 51.4531 29.8655C50.9121 29.8655 50.5322 29.676 50.3135 29.2971C50.0967 28.9182 49.9883 28.3782 49.9883 27.677C49.9883 26.9758 50.0967 26.4348 50.3135 26.054C50.5322 25.6731 50.9121 25.4827 51.4531 25.4827Z" fill="#34495E"/>
+<path d="M50.2168 42.3103V41.7419C50.4805 41.7302 50.665 41.7126 50.7705 41.6892C50.9385 41.6521 51.0752 41.5779 51.1807 41.4666C51.2529 41.3904 51.3076 41.2888 51.3447 41.1619C51.3662 41.0857 51.377 41.0291 51.377 40.9919H52.0713V45.24H51.2158V42.3103H50.2168Z" fill="#34495E"/>
+<path d="M50.2168 34.6902V34.1218C50.4805 34.1101 50.665 34.0925 50.7705 34.0691C50.9385 34.032 51.0752 33.9578 51.1807 33.8464C51.2529 33.7703 51.3076 33.6687 51.3447 33.5417C51.3662 33.4656 51.377 33.4089 51.377 33.3718H52.0713V37.6199H51.2158V34.6902H50.2168Z" fill="#34495E"/>
+<path d="M50.2168 50.4001V49.8318C50.4805 49.8201 50.665 49.8025 50.7705 49.7791C50.9385 49.7419 51.0752 49.6677 51.1807 49.5564C51.2529 49.4802 51.3076 49.3787 51.3447 49.2517C51.3662 49.1755 51.377 49.1189 51.377 49.0818H52.0713V53.3298H51.2158V50.4001H50.2168Z" fill="#34495E"/>
+<path d="M45.4707 15.5V9C45.4707 7.63 45.6007 7.5 46.9707 7.5H55.9707C57.3407 7.5 57.4707 7.63 57.4707 9V15.5H45.4707Z" fill="#ADDFF3"/>
+<path d="M56 8C56.3023 7.98463 56.6052 8.01156 56.9 8.08C56.9988 8.37598 57.0329 8.68971 57 9V15H46V9C45.9586 8.70143 45.9586 8.39858 46 8.1C46.321 7.98924 46.6634 7.955 47 8H56ZM56 7H47C45.35 7 45 7.35 45 9V16H58V9C58 7.35 57.65 7 56 7Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_heap.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_heap.svg
new file mode 100644
index 0000000..8064d02
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_heap.svg
@@ -0,0 +1,41 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37 56.5C35.63 56.5 35.5 56.37 35.5 55V9C35.5 8.1 35.93 7.5 38 7.5H55C57.07 7.5 57.5 8.1 57.5 9V55C57.5 56.37 57.37 56.5 56 56.5H37Z" fill="#F0ECB6"/>
+<path d="M55 8C57 8 57 8.55 57 9V55C57.015 55.3023 56.9881 55.6051 56.92 55.9C56.624 55.9988 56.3103 56.0329 56 56H37C36.6977 56.0154 36.3948 55.9884 36.1 55.92C36.0009 55.6241 35.9668 55.3103 36 55V9C36 8.55 36 8 38 8H55ZM55 7H38C36.35 7 35 7.35 35 9V55C35 56.65 35.35 57 37 57H56C57.65 57 58 56.65 58 55V9C58 7.35 56.65 7 55 7Z" fill="#C18F35"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M35.9805 23.74H56.9405" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M35.9805 31.49H56.9405" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M35.9805 39.23H56.9405" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M35.9805 46.97H56.9405" stroke="#C18F35" stroke-linejoin="round"/>
+</g>
+<g opacity="0.7">
+<path opacity="0.7" d="M50.041 16V56.11" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M43.0703 16V56.11" stroke="#C18F35" stroke-linejoin="round"/>
+</g>
+<path d="M35.4707 15.5V9C35.4707 7.63 35.6007 7.5 36.9707 7.5H56.0007C57.3707 7.5 57.5007 7.63 57.5007 9V15.5H35.4707Z" fill="#ADDFF3"/>
+<path d="M56 8C56.3023 7.98463 56.6052 8.01156 56.9 8.08C56.9988 8.37598 57.0329 8.68971 57 9V15H36V9C35.9586 8.70143 35.9586 8.39858 36 8.1C36.321 7.98924 36.6634 7.955 37 8H56ZM56 7H37C35.35 7 35 7.35 35 9V16H58V9C58 7.35 57.65 7 56 7Z" fill="#2980B9"/>
+<path d="M36.7109 25L41.8309 25.08V30.47L36.7109 30.39V25Z" fill="#34495E"/>
+<path d="M51.0703 40.48L56.1903 40.56V46L51.0703 45.92V40.48Z" fill="#34495E"/>
+<path d="M8 56.5C6.63 56.5 6.5 56.37 6.5 55V10C6.5 7.93 7.1 7.5 8 7.5H17C17.9 7.5 18.5 7.93 18.5 10V55C18.5 56.37 18.37 56.5 17 56.5H8Z" fill="#D3D4F3"/>
+<path d="M17 8C17.45 8 18 8 18 10V55C18.015 55.3023 17.9881 55.6051 17.92 55.9C17.624 55.9988 17.3103 56.0329 17 56H8C7.69774 56.0154 7.39481 55.9884 7.1 55.92C7.00121 55.624 6.96711 55.3103 7 55V10C7 8 7.55 8 8 8H17ZM17 7H8C6.35 7 6 8.35 6 10V55C6 56.65 6.35 57 8 57H17C18.65 57 19 56.65 19 55V10C19 8.35 18.65 7 17 7Z" fill="#666BD1"/>
+<path d="M6.5 15.5V9C6.5 7.63 6.63 7.5 8 7.5H17C18.37 7.5 18.5 7.63 18.5 9V15.5H6.5Z" fill="#ADDFF3"/>
+<path d="M17 8C17.3023 7.98463 17.6052 8.01156 17.9 8.08C17.9991 8.37591 18.0332 8.68971 18 9V15H7V9C6.98502 8.69775 7.01194 8.39487 7.08 8.1C7.37598 8.00121 7.68971 7.96711 8 8H17ZM17 7H8C6.35 7 6 7.35 6 9V16H19V9C19 7.35 18.65 7 17 7Z" fill="#2980B9"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M7.00977 23.74H17.9698" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M7.00977 31.49H17.9698" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M7.00977 39.23H17.9698" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M7.00977 46.97H17.9698" stroke="#666BD1" stroke-linejoin="round"/>
+</g>
+<path d="M11.2363 18.9001V18.3318C11.5 18.3201 11.6846 18.3025 11.79 18.2791C11.958 18.2419 12.0947 18.1677 12.2002 18.0564C12.2725 17.9802 12.3271 17.8787 12.3643 17.7517C12.3857 17.6755 12.3965 17.6189 12.3965 17.5818H13.0908V21.8298H12.2354V18.9001H11.2363Z" fill="#34495E"/>
+<path d="M11.8604 27.677C11.8604 28.1653 11.9004 28.5393 11.9805 28.7991C12.0605 29.0569 12.2246 29.1858 12.4727 29.1858C12.7207 29.1858 12.8828 29.0569 12.959 28.7991C13.0371 28.5393 13.0762 28.1653 13.0762 27.677C13.0762 27.1653 13.0371 26.7864 12.959 26.5403C12.8828 26.2942 12.7207 26.1711 12.4727 26.1711C12.2246 26.1711 12.0605 26.2942 11.9805 26.5403C11.9004 26.7864 11.8604 27.1653 11.8604 27.677ZM12.4727 25.4827C13.0137 25.4827 13.3926 25.6731 13.6094 26.054C13.8281 26.4348 13.9375 26.9758 13.9375 27.677C13.9375 28.3782 13.8281 28.9182 13.6094 29.2971C13.3926 29.676 13.0137 29.8655 12.4727 29.8655C11.9316 29.8655 11.5518 29.676 11.333 29.2971C11.1162 28.9182 11.0078 28.3782 11.0078 27.677C11.0078 26.9758 11.1162 26.4348 11.333 26.054C11.5518 25.6731 11.9316 25.4827 12.4727 25.4827Z" fill="#34495E"/>
+<path d="M11.2363 42.3103V41.7419C11.5 41.7302 11.6846 41.7126 11.79 41.6892C11.958 41.6521 12.0947 41.5779 12.2002 41.4666C12.2725 41.3904 12.3271 41.2888 12.3643 41.1619C12.3857 41.0857 12.3965 41.0291 12.3965 40.9919H13.0908V45.24H12.2354V42.3103H11.2363Z" fill="#34495E"/>
+<path d="M11.8604 35.5369C11.8604 36.0251 11.9004 36.3992 11.9805 36.6589C12.0605 36.9167 12.2246 37.0457 12.4727 37.0457C12.7207 37.0457 12.8828 36.9167 12.959 36.6589C13.0371 36.3992 13.0762 36.0251 13.0762 35.5369C13.0762 35.0251 13.0371 34.6462 12.959 34.4001C12.8828 34.1541 12.7207 34.031 12.4727 34.031C12.2246 34.031 12.0605 34.1541 11.9805 34.4001C11.9004 34.6462 11.8604 35.0251 11.8604 35.5369ZM12.4727 33.3425C13.0137 33.3425 13.3926 33.533 13.6094 33.9138C13.8281 34.2947 13.9375 34.8357 13.9375 35.5369C13.9375 36.238 13.8281 36.7781 13.6094 37.157C13.3926 37.5359 13.0137 37.7253 12.4727 37.7253C11.9316 37.7253 11.5518 37.5359 11.333 37.157C11.1162 36.7781 11.0078 36.238 11.0078 35.5369C11.0078 34.8357 11.1162 34.2947 11.333 33.9138C11.5518 33.533 11.9316 33.3425 12.4727 33.3425Z" fill="#34495E"/>
+<path d="M11.8604 51.2471C11.8604 51.7354 11.9004 52.1094 11.9805 52.3691C12.0605 52.627 12.2246 52.7559 12.4727 52.7559C12.7207 52.7559 12.8828 52.627 12.959 52.3691C13.0371 52.1094 13.0762 51.7354 13.0762 51.2471C13.0762 50.7354 13.0371 50.3564 12.959 50.1104C12.8828 49.8643 12.7207 49.7412 12.4727 49.7412C12.2246 49.7412 12.0605 49.8643 11.9805 50.1104C11.9004 50.3564 11.8604 50.7354 11.8604 51.2471ZM12.4727 49.0527C13.0137 49.0527 13.3926 49.2432 13.6094 49.624C13.8281 50.0049 13.9375 50.5459 13.9375 51.2471C13.9375 51.9482 13.8281 52.4883 13.6094 52.8672C13.3926 53.2461 13.0137 53.4355 12.4727 53.4355C11.9316 53.4355 11.5518 53.2461 11.333 52.8672C11.1162 52.4883 11.0078 51.9482 11.0078 51.2471C11.0078 50.5459 11.1162 50.0049 11.333 49.624C11.5518 49.2432 11.9316 49.0527 12.4727 49.0527Z" fill="#34495E"/>
+<path d="M17.8105 27.49L21.1905 24.96V30.02L17.8105 27.49Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4144 24.5129C21.5836 24.5976 21.6905 24.7707 21.6905 24.96V30.02C21.6905 30.2093 21.5836 30.3823 21.4144 30.4671C21.2451 30.5518 21.0425 30.5337 20.8909 30.4202L17.5109 27.8902C17.3848 27.7958 17.3105 27.6475 17.3105 27.49C17.3105 27.3324 17.3848 27.1841 17.5109 27.0897L20.8909 24.5597C21.0425 24.4462 21.2451 24.4281 21.4144 24.5129ZM18.6449 27.49L20.6905 29.0211V25.9588L18.6449 27.49Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1895 27.49C20.1895 26.9377 20.6372 26.49 21.1895 26.49H36.1595C36.7117 26.49 37.1595 26.9377 37.1595 27.49C37.1595 28.0423 36.7117 28.49 36.1595 28.49H21.1895C20.6372 28.49 20.1895 28.0423 20.1895 27.49Z" fill="#528D19"/>
+<path d="M17.8105 43.01L21.1905 40.48V45.54L17.8105 43.01Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4144 40.0329C21.5836 40.1176 21.6905 40.2907 21.6905 40.48V45.54C21.6905 45.7293 21.5836 45.9024 21.4144 45.9871C21.2451 46.0718 21.0425 46.0537 20.8909 45.9403L17.5109 43.4103C17.3848 43.3159 17.3105 43.1675 17.3105 43.01C17.3105 42.8524 17.3848 42.7041 17.5109 42.6097L20.8909 40.0797C21.0425 39.9663 21.2451 39.9481 21.4144 40.0329ZM18.6449 43.01L20.6905 44.5412V41.4788L18.6449 43.01Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1895 43.01C20.1895 42.4577 20.6372 42.01 21.1895 42.01H50.0395C50.5917 42.01 51.0395 42.4577 51.0395 43.01C51.0395 43.5623 50.5917 44.01 50.0395 44.01H21.1895C20.6372 44.01 20.1895 43.5623 20.1895 43.01Z" fill="#528D19"/>
+<path d="M30.4695 51.6801L27.9395 48.3H32.9995L30.4695 51.6801Z" fill="#2980B9" stroke="#2980B9" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.4707 16.3198C31.023 16.3198 31.4707 16.7675 31.4707 17.3198V48.2998C31.4707 48.8521 31.023 49.2998 30.4707 49.2998C29.9184 49.2998 29.4707 48.8521 29.4707 48.2998V17.3198C29.4707 16.7675 29.9184 16.3198 30.4707 16.3198Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_index.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_index.svg
new file mode 100644
index 0000000..b10b6d9
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_index.svg
@@ -0,0 +1,40 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37 54.5C35.63 54.5 35.5 54.37 35.5 53V16.5H57.5V53C57.5 54.37 57.37 54.5 56 54.5H37Z" fill="#F0ECB6"/>
+<path d="M57 17V53C57.015 53.3023 56.9881 53.6051 56.92 53.9C56.624 53.9988 56.3103 54.0329 56 54H37C36.6977 54.0154 36.3948 53.9884 36.1 53.92C36.0009 53.6241 35.9668 53.3103 36 53V17H57ZM58 16H35V53C35 54.65 35.35 55 37 55H56C57.65 55 58 54.65 58 53V16Z" fill="#C18F35"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M36.0293 23.74H56.9893" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M36.0293 31.49H56.9893" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M36.0293 39.23H56.9893" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M36.0293 46.97H56.9893" stroke="#C18F35" stroke-linejoin="round"/>
+</g>
+<g opacity="0.7">
+<path opacity="0.7" d="M50.0801 17V54.11" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M43.1191 17V54.11" stroke="#C18F35" stroke-linejoin="round"/>
+</g>
+<path d="M35.5195 16.5V10C35.5195 9.1 35.9495 8.5 38.0195 8.5H55.9995C57.3695 8.5 57.4995 8.63 57.4995 10V16.5H35.5195Z" fill="#ADDFF3"/>
+<path d="M56 9C56.3023 8.98463 56.6052 9.01156 56.9 9.08C56.9988 9.37598 57.0329 9.68971 57 10V16H36V10C36 9.55 36 9 38 9H56ZM56 8H38C36.35 8 35 8.35 35 10V17H58V10C58 8.35 57.65 8 56 8Z" fill="#2980B9"/>
+<path d="M36.7598 25L41.8798 25.08V30.47L36.7598 30.39V25Z" fill="#34495E"/>
+<path d="M36.7598 40.48L41.8798 40.56V46L36.7598 45.92V40.48Z" fill="#34495E"/>
+<path d="M30.1997 51.6801L27.6797 48.3H32.7297L30.1997 51.6801Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2328 48.0758C27.3176 47.9068 27.4906 47.8 27.6797 47.8H32.7297C32.919 47.8 33.0921 47.907 33.1768 48.0762C33.2615 48.2455 33.2434 48.4481 33.13 48.5997L30.6 51.9797C30.5055 52.1059 30.3569 52.1802 30.1992 52.1801C30.0415 52.1799 29.8931 52.1054 29.7988 51.9789L27.2788 48.5989C27.1658 48.4473 27.148 48.2448 27.2328 48.0758ZM28.6761 48.8L30.2005 50.8446L31.7309 48.8H28.6761Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1992 16.3198C30.7515 16.3198 31.1992 16.7675 31.1992 17.3198V48.2998C31.1992 48.8521 30.7515 49.2998 30.1992 49.2998C29.6469 49.2998 29.1992 48.8521 29.1992 48.2998V17.3198C29.1992 16.7675 29.6469 16.3198 30.1992 16.3198Z" fill="#34495E"/>
+<path d="M10 54.5C8.63 54.5 8.5 54.37 8.5 53V16.5H20.5V53C20.5 54.37 20.37 54.5 19 54.5H10Z" fill="#D3D4F3"/>
+<path d="M20 17V53C20.015 53.3023 19.9881 53.6051 19.92 53.9C19.624 53.9988 19.3103 54.0329 19 54H10C9.69774 54.0154 9.39481 53.9884 9.1 53.92C9.00121 53.624 8.96711 53.3103 9 53V17H20ZM21 16H8V53C8 54.65 8.35 55 10 55H19C20.65 55 21 54.65 21 53V16Z" fill="#666BD1"/>
+<path d="M8.5 16.5V10C8.5 8.63 8.63 8.5 10 8.5H19C20.37 8.5 20.5 8.63 20.5 10V16.5H8.5Z" fill="#ADDFF3"/>
+<path d="M19 9C19.3023 8.98463 19.6052 9.01156 19.9 9.08C19.9991 9.37591 20.0332 9.68971 20 10V16H9V10C8.98502 9.69775 9.01194 9.39487 9.08 9.1C9.37598 9.00121 9.68971 8.96711 10 9H19ZM19 8H10C8.35 8 8 8.35 8 10V17H21V10C21 8.35 20.65 8 19 8Z" fill="#2980B9"/>
+<path d="M9 23.74H19.99" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M9 31.49H19.99" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M9 39.23H19.99" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M9 46.98H19.99" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M17.8105 27.49L21.1905 24.96V30.02L17.8105 27.49Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4144 24.5129C21.5836 24.5976 21.6905 24.7707 21.6905 24.96V30.02C21.6905 30.2093 21.5836 30.3823 21.4144 30.4671C21.2451 30.5518 21.0425 30.5337 20.8909 30.4202L17.5109 27.8902C17.3848 27.7958 17.3105 27.6475 17.3105 27.49C17.3105 27.3324 17.3848 27.1841 17.5109 27.0897L20.8909 24.5597C21.0425 24.4462 21.2451 24.4281 21.4144 24.5129ZM18.6449 27.49L20.6905 29.0211V25.9588L18.6449 27.49Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1895 27.49C20.1895 26.9377 20.6372 26.49 21.1895 26.49H36.1595C36.7117 26.49 37.1595 26.9377 37.1595 27.49C37.1595 28.0423 36.7117 28.49 36.1595 28.49H21.1895C20.6372 28.49 20.1895 28.0423 20.1895 27.49Z" fill="#528D19"/>
+<path d="M17.8105 43.2202L21.1905 40.6902V45.7502L17.8105 43.2202Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4144 40.2431C21.5836 40.3278 21.6905 40.5009 21.6905 40.6902V45.7502C21.6905 45.9395 21.5836 46.1126 21.4144 46.1973C21.2451 46.282 21.0425 46.2639 20.8909 46.1505L17.5109 43.6205C17.3848 43.5261 17.3105 43.3777 17.3105 43.2202C17.3105 43.0626 17.3848 42.9143 17.5109 42.8199L20.8909 40.2899C21.0425 40.1765 21.2451 40.1583 21.4144 40.2431ZM18.6449 43.2202L20.6905 44.7514V41.689L18.6449 43.2202Z" fill="#528D19"/>
+<path d="M21.1895 43.22H36.1595" stroke="#528D19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.8604 20.3669C13.8604 20.8552 13.9004 21.2293 13.9805 21.489C14.0605 21.7468 14.2246 21.8757 14.4727 21.8757C14.7207 21.8757 14.8828 21.7468 14.959 21.489C15.0371 21.2293 15.0762 20.8552 15.0762 20.3669C15.0762 19.8552 15.0371 19.4763 14.959 19.2302C14.8828 18.9841 14.7207 18.8611 14.4727 18.8611C14.2246 18.8611 14.0605 18.9841 13.9805 19.2302C13.9004 19.4763 13.8604 19.8552 13.8604 20.3669ZM14.4727 18.1726C15.0137 18.1726 15.3926 18.363 15.6094 18.7439C15.8281 19.1248 15.9375 19.6658 15.9375 20.3669C15.9375 21.0681 15.8281 21.6082 15.6094 21.9871C15.3926 22.366 15.0137 22.5554 14.4727 22.5554C13.9316 22.5554 13.5518 22.366 13.333 21.9871C13.1162 21.6082 13.0078 21.0681 13.0078 20.3669C13.0078 19.6658 13.1162 19.1248 13.333 18.7439C13.5518 18.363 13.9316 18.1726 14.4727 18.1726Z" fill="#34495E"/>
+<path d="M13.2363 27.0903V26.522C13.5 26.5103 13.6846 26.4927 13.79 26.4692C13.958 26.4321 14.0947 26.3579 14.2002 26.2466C14.2725 26.1704 14.3271 26.0688 14.3643 25.9419C14.3857 25.8657 14.3965 25.8091 14.3965 25.772H15.0908V30.02H14.2354V27.0903H13.2363Z" fill="#34495E"/>
+<path d="M13.2363 42.3103V41.7419C13.5 41.7302 13.6846 41.7126 13.79 41.6892C13.958 41.6521 14.0947 41.5779 14.2002 41.4666C14.2725 41.3904 14.3271 41.2888 14.3643 41.1619C14.3857 41.0857 14.3965 41.0291 14.3965 40.9919H15.0908V45.24H14.2354V42.3103H13.2363Z" fill="#34495E"/>
+<path d="M13.8604 35.2471C13.8604 35.7354 13.9004 36.1094 13.9805 36.3691C14.0605 36.627 14.2246 36.7559 14.4727 36.7559C14.7207 36.7559 14.8828 36.627 14.959 36.3691C15.0371 36.1094 15.0762 35.7354 15.0762 35.2471C15.0762 34.7354 15.0371 34.3564 14.959 34.1104C14.8828 33.8643 14.7207 33.7412 14.4727 33.7412C14.2246 33.7412 14.0605 33.8643 13.9805 34.1104C13.9004 34.3564 13.8604 34.7354 13.8604 35.2471ZM14.4727 33.0527C15.0137 33.0527 15.3926 33.2432 15.6094 33.624C15.8281 34.0049 15.9375 34.5459 15.9375 35.2471C15.9375 35.9482 15.8281 36.4883 15.6094 36.8672C15.3926 37.2461 15.0137 37.4355 14.4727 37.4355C13.9316 37.4355 13.5518 37.2461 13.333 36.8672C13.1162 36.4883 13.0078 35.9482 13.0078 35.2471C13.0078 34.5459 13.1162 34.0049 13.333 33.624C13.5518 33.2432 13.9316 33.0527 14.4727 33.0527Z" fill="#34495E"/>
+<path d="M13.8604 50.647C13.8604 51.1353 13.9004 51.5093 13.9805 51.7691C14.0605 52.0269 14.2246 52.1558 14.4727 52.1558C14.7207 52.1558 14.8828 52.0269 14.959 51.7691C15.0371 51.5093 15.0762 51.1353 15.0762 50.647C15.0762 50.1353 15.0371 49.7564 14.959 49.5103C14.8828 49.2642 14.7207 49.1411 14.4727 49.1411C14.2246 49.1411 14.0605 49.2642 13.9805 49.5103C13.9004 49.7564 13.8604 50.1353 13.8604 50.647ZM14.4727 48.4526C15.0137 48.4526 15.3926 48.6431 15.6094 49.0239C15.8281 49.4048 15.9375 49.9458 15.9375 50.647C15.9375 51.3482 15.8281 51.8882 15.6094 52.2671C15.3926 52.646 15.0137 52.8355 14.4727 52.8355C13.9316 52.8355 13.5518 52.646 13.333 52.2671C13.1162 51.8882 13.0078 51.3482 13.0078 50.647C13.0078 49.9458 13.1162 49.4048 13.333 49.0239C13.5518 48.6431 13.9316 48.4526 14.4727 48.4526Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_or.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_or.svg
new file mode 100644
index 0000000..60f6b22
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_bmp_or.svg
@@ -0,0 +1,31 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32 13.8398C33.1046 13.8398 34 14.7353 34 15.8398V48.1598C34 49.2644 33.1046 50.1598 32 50.1598C30.8954 50.1598 30 49.2644 30 48.1598V15.8398C30 14.7353 30.8954 13.8398 32 13.8398Z" fill="#34495E"/>
+<path d="M10 56.5C8.63 56.5 8.5 56.37 8.5 55V15.46H20.5V55C20.5 56.37 20.37 56.5 19 56.5H10Z" fill="#D3D4F3"/>
+<path d="M20 16V55C20.015 55.3023 19.9881 55.6051 19.92 55.9C19.624 55.9988 19.3103 56.0329 19 56H10C9.69774 56.0154 9.39481 55.9884 9.1 55.92C9.00121 55.624 8.96711 55.3103 9 55V16H20ZM21 15H8V55C8 56.65 8.35 57 10 57H19C20.65 57 21 56.65 21 55V15Z" fill="#666BD1"/>
+<path d="M9.00977 23.74H19.9698" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M9.00977 31.49H19.9698" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M9.00977 39.23H19.9698" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M9.00977 46.97H19.9698" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M13.2363 18.9001V18.3318C13.5 18.3201 13.6846 18.3025 13.79 18.2791C13.958 18.2419 14.0947 18.1677 14.2002 18.0564C14.2725 17.9802 14.3271 17.8787 14.3643 17.7517C14.3857 17.6755 14.3965 17.6189 14.3965 17.5818H15.0908V21.8298H14.2354V18.9001H13.2363Z" fill="#34495E"/>
+<path d="M13.8604 27.677C13.8604 28.1653 13.9004 28.5393 13.9805 28.7991C14.0605 29.0569 14.2246 29.1858 14.4727 29.1858C14.7207 29.1858 14.8828 29.0569 14.959 28.7991C15.0371 28.5393 15.0762 28.1653 15.0762 27.677C15.0762 27.1653 15.0371 26.7864 14.959 26.5403C14.8828 26.2942 14.7207 26.1711 14.4727 26.1711C14.2246 26.1711 14.0605 26.2942 13.9805 26.5403C13.9004 26.7864 13.8604 27.1653 13.8604 27.677ZM14.4727 25.4827C15.0137 25.4827 15.3926 25.6731 15.6094 26.054C15.8281 26.4348 15.9375 26.9758 15.9375 27.677C15.9375 28.3782 15.8281 28.9182 15.6094 29.2971C15.3926 29.676 15.0137 29.8655 14.4727 29.8655C13.9316 29.8655 13.5518 29.676 13.333 29.2971C13.1162 28.9182 13.0078 28.3782 13.0078 27.677C13.0078 26.9758 13.1162 26.4348 13.333 26.054C13.5518 25.6731 13.9316 25.4827 14.4727 25.4827Z" fill="#34495E"/>
+<path d="M13.2363 42.3103V41.7419C13.5 41.7302 13.6846 41.7126 13.79 41.6892C13.958 41.6521 14.0947 41.5779 14.2002 41.4666C14.2725 41.3904 14.3271 41.2888 14.3643 41.1619C14.3857 41.0857 14.3965 41.0291 14.3965 40.9919H15.0908V45.24H14.2354V42.3103H13.2363Z" fill="#34495E"/>
+<path d="M13.8604 35.5369C13.8604 36.0251 13.9004 36.3992 13.9805 36.6589C14.0605 36.9167 14.2246 37.0457 14.4727 37.0457C14.7207 37.0457 14.8828 36.9167 14.959 36.6589C15.0371 36.3992 15.0762 36.0251 15.0762 35.5369C15.0762 35.0251 15.0371 34.6462 14.959 34.4001C14.8828 34.1541 14.7207 34.031 14.4727 34.031C14.2246 34.031 14.0605 34.1541 13.9805 34.4001C13.9004 34.6462 13.8604 35.0251 13.8604 35.5369ZM14.4727 33.3425C15.0137 33.3425 15.3926 33.533 15.6094 33.9138C15.8281 34.2947 15.9375 34.8357 15.9375 35.5369C15.9375 36.238 15.8281 36.7781 15.6094 37.157C15.3926 37.5359 15.0137 37.7253 14.4727 37.7253C13.9316 37.7253 13.5518 37.5359 13.333 37.157C13.1162 36.7781 13.0078 36.238 13.0078 35.5369C13.0078 34.8357 13.1162 34.2947 13.333 33.9138C13.5518 33.533 13.9316 33.3425 14.4727 33.3425Z" fill="#34495E"/>
+<path d="M13.8604 51.2471C13.8604 51.7354 13.9004 52.1094 13.9805 52.3691C14.0605 52.627 14.2246 52.7559 14.4727 52.7559C14.7207 52.7559 14.8828 52.627 14.959 52.3691C15.0371 52.1094 15.0762 51.7354 15.0762 51.2471C15.0762 50.7354 15.0371 50.3564 14.959 50.1104C14.8828 49.8643 14.7207 49.7412 14.4727 49.7412C14.2246 49.7412 14.0605 49.8643 13.9805 50.1104C13.9004 50.3564 13.8604 50.7354 13.8604 51.2471ZM14.4727 49.0527C15.0137 49.0527 15.3926 49.2432 15.6094 49.624C15.8281 50.0049 15.9375 50.5459 15.9375 51.2471C15.9375 51.9482 15.8281 52.4883 15.6094 52.8672C15.3926 53.2461 15.0137 53.4355 14.4727 53.4355C13.9316 53.4355 13.5518 53.2461 13.333 52.8672C13.1162 52.4883 13.0078 51.9482 13.0078 51.2471C13.0078 50.5459 13.1162 50.0049 13.333 49.624C13.5518 49.2432 13.9316 49.0527 14.4727 49.0527Z" fill="#34495E"/>
+<path d="M8.5 15.5V9C8.5 7.63 8.63 7.5 10 7.5H19C20.37 7.5 20.5 7.63 20.5 9V15.5H8.5Z" fill="#ADDFF3"/>
+<path d="M19 8C19.3023 7.98463 19.6052 8.01156 19.9 8.08C19.9991 8.37591 20.0332 8.68971 20 9V15H9V9C8.98502 8.69775 9.01194 8.39487 9.08 8.1C9.37598 8.00121 9.68971 7.96711 10 8H19ZM19 7H10C8.35 7 8 7.35 8 9V16H21V9C21 7.35 20.65 7 19 7Z" fill="#2980B9"/>
+<path d="M45 56.5C43.63 56.5 43.5 56.37 43.5 55V15.46H55.5V55C55.5 56.37 55.37 56.5 54 56.5H45Z" fill="#F0ECB6"/>
+<path d="M55 16V55C55.015 55.3023 54.9881 55.6051 54.92 55.9C54.624 55.9988 54.3103 56.0329 54 56H45C44.6977 56.0154 44.3948 55.9884 44.1 55.92C44.0012 55.624 43.9671 55.3103 44 55V16H55ZM56 15H43V55C43 56.65 43.35 57 45 57H54C55.65 57 56 56.65 56 55V15Z" fill="#C18F35"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M44.0293 23.74H54.9893" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M44.0293 31.49H54.9893" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M44.0293 39.23H54.9893" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M44.0293 46.97H54.9893" stroke="#C18F35" stroke-linejoin="round"/>
+</g>
+<path d="M48.8799 19.7471C48.8799 20.2353 48.9199 20.6094 49 20.8691C49.0801 21.127 49.2441 21.2559 49.4922 21.2559C49.7402 21.2559 49.9023 21.127 49.9785 20.8691C50.0566 20.6094 50.0957 20.2353 50.0957 19.7471C50.0957 19.2354 50.0566 18.8564 49.9785 18.6104C49.9023 18.3643 49.7402 18.2412 49.4922 18.2412C49.2441 18.2412 49.0801 18.3643 49 18.6104C48.9199 18.8564 48.8799 19.2354 48.8799 19.7471ZM49.4922 17.5527C50.0332 17.5527 50.4121 17.7432 50.6289 18.124C50.8477 18.5049 50.957 19.0459 50.957 19.7471C50.957 20.4482 50.8477 20.9883 50.6289 21.3672C50.4121 21.7461 50.0332 21.9355 49.4922 21.9355C48.9512 21.9355 48.5713 21.7461 48.3525 21.3672C48.1357 20.9883 48.0273 20.4482 48.0273 19.7471C48.0273 19.0459 48.1357 18.5049 48.3525 18.124C48.5713 17.7432 48.9512 17.5527 49.4922 17.5527Z" fill="#34495E"/>
+<path d="M48.8799 27.677C48.8799 28.1653 48.9199 28.5393 49 28.7991C49.0801 29.0569 49.2441 29.1858 49.4922 29.1858C49.7402 29.1858 49.9023 29.0569 49.9785 28.7991C50.0566 28.5393 50.0957 28.1653 50.0957 27.677C50.0957 27.1653 50.0566 26.7864 49.9785 26.5403C49.9023 26.2942 49.7402 26.1711 49.4922 26.1711C49.2441 26.1711 49.0801 26.2942 49 26.5403C48.9199 26.7864 48.8799 27.1653 48.8799 27.677ZM49.4922 25.4827C50.0332 25.4827 50.4121 25.6731 50.6289 26.054C50.8477 26.4348 50.957 26.9758 50.957 27.677C50.957 28.3782 50.8477 28.9182 50.6289 29.2971C50.4121 29.676 50.0332 29.8655 49.4922 29.8655C48.9512 29.8655 48.5713 29.676 48.3525 29.2971C48.1357 28.9182 48.0273 28.3782 48.0273 27.677C48.0273 26.9758 48.1357 26.4348 48.3525 26.054C48.5713 25.6731 48.9512 25.4827 49.4922 25.4827Z" fill="#34495E"/>
+<path d="M48.2559 42.3103V41.7419C48.5195 41.7302 48.7041 41.7126 48.8096 41.6892C48.9775 41.6521 49.1143 41.5779 49.2197 41.4666C49.292 41.3904 49.3467 41.2888 49.3838 41.1619C49.4053 41.0857 49.416 41.0291 49.416 40.9919H50.1104V45.24H49.2549V42.3103H48.2559Z" fill="#34495E"/>
+<path d="M48.2559 34.6902V34.1218C48.5195 34.1101 48.7041 34.0925 48.8096 34.0691C48.9775 34.032 49.1143 33.9578 49.2197 33.8464C49.292 33.7703 49.3467 33.6687 49.3838 33.5417C49.4053 33.4656 49.416 33.4089 49.416 33.3718H50.1104V37.6199H49.2549V34.6902H48.2559Z" fill="#34495E"/>
+<path d="M48.2559 50.4001V49.8318C48.5195 49.8201 48.7041 49.8025 48.8096 49.7791C48.9775 49.7419 49.1143 49.6677 49.2197 49.5564C49.292 49.4802 49.3467 49.3787 49.3838 49.2517C49.4053 49.1755 49.416 49.1189 49.416 49.0818H50.1104V53.3298H49.2549V50.4001H48.2559Z" fill="#34495E"/>
+<path d="M43.5195 15.5V9C43.5195 7.63 43.6495 7.5 45.0195 7.5H54.0195C55.3895 7.5 55.5195 7.63 55.5195 9V15.5H43.5195Z" fill="#ADDFF3"/>
+<path d="M54 8C54.3023 7.98463 54.6052 8.01156 54.9 8.08C54.9988 8.37598 55.0329 8.68971 55 9V15H44V9C43.985 8.69775 44.0119 8.39487 44.08 8.1C44.376 8.00121 44.6897 7.96711 45 8H54ZM54 7H45C43.35 7 43 7.35 43 9V16H56V9C56 7.35 55.65 7 54 7Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_broadcast_motion.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_broadcast_motion.svg
new file mode 100644
index 0000000..8355ab8
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_broadcast_motion.svg
@@ -0,0 +1,25 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5605 51.69C20.2205 51.69 20.0705 51.56 20.0605 50.28V14.15C20.0605 12.87 20.2105 12.74 21.5605 12.74H30.5605C31.9005 12.74 32.0406 12.87 32.0606 14.15V50.28C32.0606 51.56 31.9105 51.69 30.5605 51.69H21.5605Z" fill="#F0ECB6"/>
+<path d="M21.5605 13.24H30.5605C30.8628 13.2224 31.1661 13.2494 31.4605 13.32C31.5534 13.5897 31.5875 13.8761 31.5605 14.16V50.27C31.5708 50.5424 31.5439 50.8149 31.4805 51.08C31.1848 51.1797 30.8708 51.2138 30.5605 51.18H21.5605C21.2582 51.1976 20.955 51.1706 20.6605 51.1C20.5677 50.8303 20.5336 50.5439 20.5605 50.26V14.16C20.5503 13.8876 20.5772 13.6151 20.6405 13.35C20.9363 13.2503 21.2503 13.2162 21.5605 13.25V13.24ZM21.5605 12.25C19.9505 12.25 19.5605 12.59 19.5605 14.15V50.28C19.5605 51.84 19.9405 52.18 21.5605 52.18H30.5605C32.1705 52.18 32.5606 51.84 32.5606 50.28V14.15C32.5606 12.59 32.1805 12.25 30.5605 12.25H21.5605Z" fill="#C18F35"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M20.5703 19.9299H31.5403" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M20.5703 27.6699H31.5403" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M20.5703 35.4199H31.5403" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M20.5703 43.1599H31.5403" stroke="#C18F35" stroke-linejoin="round"/>
+</g>
+<path d="M43.2998 54.6798L42.2698 51.5498L40.0098 54.7898L43.2998 54.6798Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.3423 51.0551C42.5297 51.0826 42.6855 51.2136 42.7447 51.3935L43.7747 54.5235C43.8239 54.6731 43.7998 54.8371 43.7097 54.9661C43.6195 55.0952 43.4738 55.1743 43.3165 55.1795L40.0265 55.2895C39.8373 55.2959 39.6607 55.1948 39.5704 55.0285C39.48 54.8621 39.4914 54.659 39.5997 54.5038L41.8597 51.2638C41.968 51.1084 42.1549 51.0276 42.3423 51.0551ZM40.9912 54.2567L42.6163 54.2024L42.1075 52.6564L40.9912 54.2567Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.0919 47.3511C33.2514 47.1257 33.5634 47.0723 33.7888 47.2318L41.8588 52.9418C42.0843 53.1013 42.1377 53.4133 41.9782 53.6387C41.8187 53.8642 41.5067 53.9176 41.2812 53.7581L33.2112 48.0481C32.9858 47.8886 32.9324 47.5766 33.0919 47.3511Z" fill="#34495E"/>
+<path d="M43.2998 9.31996L42.2698 12.45L40.0098 9.20996L43.2998 9.31996Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.5704 8.97131C39.6607 8.80497 39.8373 8.70392 40.0265 8.71024L43.3165 8.82024C43.4738 8.8255 43.6195 8.90457 43.7097 9.03364C43.7998 9.16271 43.8239 9.3267 43.7747 9.47625L42.7447 12.6063C42.6855 12.7862 42.5297 12.9172 42.3423 12.9447C42.1549 12.9722 41.968 12.8914 41.8597 12.736L39.5997 9.49601C39.4914 9.34076 39.48 9.13766 39.5704 8.97131ZM40.9912 9.74306L42.1075 11.3434L42.6163 9.79739L40.9912 9.74306Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.9782 10.3611C42.1377 10.5866 42.0843 10.8986 41.8588 11.0581L33.7888 16.7681C33.5634 16.9276 33.2514 16.8742 33.0919 16.6487C32.9324 16.4233 32.9858 16.1113 33.2112 15.9518L41.2812 10.2418C41.5067 10.0823 41.8187 10.1357 41.9782 10.3611Z" fill="#34495E"/>
+<path d="M45.4408 31.6301L42.8008 29.6501V33.6002L45.4408 31.6301Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.5772 29.2029C42.7466 29.1182 42.9493 29.1365 43.1008 29.2501L45.7408 31.2302C45.8669 31.3247 45.941 31.4732 45.9408 31.6308C45.9406 31.7884 45.8661 31.9366 45.7398 32.0309L43.0998 34.0009C42.9482 34.114 42.7457 34.1319 42.5766 34.0471C42.4075 33.9623 42.3008 33.7893 42.3008 33.6002V29.6501C42.3008 29.4608 42.4078 29.2876 42.5772 29.2029ZM43.3008 30.6502V32.6032L44.6061 31.6291L43.3008 30.6502Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.8613 31.4775C32.8627 31.2013 33.0877 30.9786 33.3639 30.98L43.2539 31.03C43.53 31.0314 43.7527 31.2564 43.7513 31.5325C43.7499 31.8086 43.5249 32.0314 43.2488 32.03L33.3588 31.98C33.0827 31.9786 32.8599 31.7536 32.8613 31.4775Z" fill="#34495E"/>
+<path d="M45.0409 18.95L41.8809 18L43.2309 21.71L45.0409 18.95Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.5174 17.6564C41.6473 17.5189 41.8437 17.4665 42.0248 17.5209L45.1848 18.4709C45.3359 18.5164 45.4567 18.6305 45.5107 18.7787C45.5647 18.927 45.5455 19.092 45.459 19.224L43.649 21.984C43.5452 22.1422 43.3611 22.2283 43.1731 22.2064C42.9852 22.1846 42.8257 22.0585 42.761 21.8807L41.411 18.1707C41.3463 17.993 41.3875 17.7939 41.5174 17.6564ZM42.6916 18.7656L43.3597 20.6016L44.2554 19.2357L42.6916 18.7656Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.4214 19.4412C43.5147 19.7011 43.3795 19.9874 43.1196 20.0806L33.8096 23.4206C33.5497 23.5139 33.2634 23.3788 33.1701 23.1188C33.0769 22.8589 33.212 22.5726 33.4719 22.4794L42.7819 19.1394C43.0419 19.0461 43.3282 19.1812 43.4214 19.4412Z" fill="#34495E"/>
+<path d="M45.0409 43.48L41.8809 44.44L43.2309 40.72L45.0409 43.48Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.1729 40.2233C43.3609 40.2014 43.5452 40.2875 43.649 40.4458L45.459 43.2058C45.5454 43.3375 45.5646 43.5023 45.511 43.6504C45.4573 43.7985 45.3369 43.9126 45.1862 43.9584L42.0262 44.9184C41.845 44.9734 41.6483 44.9214 41.518 44.784C41.3878 44.6466 41.3463 44.4474 41.4109 44.2694L42.7609 40.5494C42.8254 40.3715 42.9849 40.2453 43.1729 40.2233ZM43.3603 41.8291L42.6918 43.671L44.2565 43.1957L43.3603 41.8291Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.1701 39.3213C33.2634 39.0614 33.5497 38.9262 33.8096 39.0195L43.1196 42.3595C43.3795 42.4527 43.5147 42.739 43.4214 42.999C43.3282 43.2589 43.0419 43.394 42.7819 43.3008L33.4719 39.9608C33.212 39.8675 33.0769 39.5812 33.1701 39.3213Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_cte_scan.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_cte_scan.svg
new file mode 100644
index 0000000..c5c5985
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_cte_scan.svg
@@ -0,0 +1,32 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.97024 50.7499L6.49023 46.0999H13.4502L9.97024 50.7499Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.04314 45.876C6.12788 45.7068 6.30094 45.5999 6.49024 45.5999H13.4502C13.6395 45.5999 13.8126 45.7068 13.8973 45.876C13.9821 46.0453 13.964 46.2479 13.8505 46.3994L10.3705 51.0494C10.2761 51.1756 10.1278 51.2499 9.97024 51.2499C9.81268 51.2499 9.66433 51.1756 9.56993 51.0494L6.08993 46.3994C5.97651 46.2479 5.9584 46.0453 6.04314 45.876ZM7.48895 46.5999L9.97024 49.9154L12.4515 46.5999H7.48895Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.9707 14.76C10.523 14.76 10.9707 15.2077 10.9707 15.76V46.74C10.9707 47.2923 10.523 47.74 9.9707 47.74C9.41842 47.74 8.9707 47.2923 8.9707 46.74V15.76C8.9707 15.2077 9.41842 14.76 9.9707 14.76Z" fill="#2980B9"/>
+<path d="M18 57.44C16.63 57.44 16.5 57.31 16.5 55.94V15.5H57.5V55.94C57.5 57.31 57.37 57.44 56 57.44H18Z" fill="#CAF0B7"/>
+<path d="M57 16V55.94C57.015 56.2422 56.9881 56.5451 56.92 56.84C56.624 56.9388 56.3103 56.9729 56 56.94H18C17.6977 56.9554 17.3948 56.9284 17.1 56.86C17.0012 56.564 16.9671 56.2503 17 55.94V16H57ZM58 15H16V55.94C16 57.59 16.35 57.94 18 57.94H56C57.65 57.94 58 57.59 58 55.94V15Z" fill="#36C13D"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M24.6992 56.9402V15.9402" stroke="#36C13D" stroke-linejoin="round"/>
+<path opacity="0.7" d="M41.0996 56.9402V15.9402" stroke="#36C13D" stroke-linejoin="round"/>
+<path opacity="0.7" d="M32.9004 56.9402V15.9402" stroke="#36C13D" stroke-linejoin="round"/>
+<path opacity="0.7" d="M49.3008 56.9402V15.9402" stroke="#36C13D" stroke-linejoin="round"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M17 23.9402H56.97" stroke="#36C13D" stroke-linejoin="round"/>
+<path opacity="0.7" d="M17 32.3101H56.97" stroke="#36C13D" stroke-linejoin="round"/>
+<path opacity="0.7" d="M17 40.6802H56.97" stroke="#36C13D" stroke-linejoin="round"/>
+<path opacity="0.7" d="M17 49.05H56.97" stroke="#36C13D" stroke-linejoin="round"/>
+</g>
+</g>
+<path d="M49.3105 15.49V6.48999H56.0005C57.3705 6.48999 57.5005 6.61999 57.5005 7.98999V15.49H49.3105Z" fill="#ADDFF3"/>
+<path d="M56.0005 7C56.3028 6.98463 56.6057 7.01156 56.9005 7.08C56.9996 7.37591 57.0338 7.68971 57.0005 8V15H49.8105V7H56.0005ZM56.0005 6H48.8105V16H58.0005V8C58.0005 6.35 57.6505 6 56.0005 6Z" fill="#2980B9"/>
+<path d="M16.5098 15.49V8C16.5098 6.63 16.6398 6.5 18.0098 6.5H24.6998V15.5L16.5098 15.49Z" fill="#ADDFF3"/>
+<path d="M24.2 7V15H17V8C16.985 7.69775 17.0119 7.39487 17.08 7.1C17.376 7.00121 17.6897 6.96711 18 7H24.2ZM25.2 6H18C16.35 6 16 6.35 16 8V16H25.2V6Z" fill="#2980B9"/>
+<path d="M49.2896 6.48999H41.0996V15.49H49.2896V6.48999Z" fill="#ADDFF3"/>
+<path d="M48.7894 7V15H41.5994V7H48.7794H48.7894ZM49.7794 6H40.6094V16H49.7994V6H49.7794Z" fill="#2980B9"/>
+<path d="M41.1002 6.48999H32.9102V15.49H41.1002V6.48999Z" fill="#ADDFF3"/>
+<path d="M40.5999 7V15H33.4099V7H40.5999ZM41.5999 6H32.4199V16H41.5999V6Z" fill="#2980B9"/>
+<path d="M32.8907 6.48999H24.7207V15.49H32.8907V6.48999Z" fill="#ADDFF3"/>
+<path d="M32.4007 7V15H25.2207V7H32.4007ZM33.4007 6H24.2207V16H33.4007V6Z" fill="#2980B9"/>
+<path d="M29.8906 32.7122H31.7146C31.6586 32.2162 31.5226 31.7762 31.3066 31.3922C31.0906 31.0082 30.8146 30.6882 30.4786 30.4322C30.1506 30.1682 29.7746 29.9682 29.3506 29.8322C28.9346 29.6962 28.4906 29.6282 28.0186 29.6282C27.3626 29.6282 26.7706 29.7442 26.2426 29.9762C25.7226 30.2082 25.2826 30.5282 24.9226 30.9362C24.5626 31.3442 24.2866 31.8242 24.0946 32.3762C23.9026 32.9202 23.8066 33.5122 23.8066 34.1522C23.8066 34.7762 23.9026 35.3602 24.0946 35.9042C24.2866 36.4402 24.5626 36.9082 24.9226 37.3082C25.2826 37.7082 25.7226 38.0242 26.2426 38.2562C26.7706 38.4802 27.3626 38.5922 28.0186 38.5922C28.5466 38.5922 29.0306 38.5122 29.4706 38.3522C29.9106 38.1922 30.2946 37.9602 30.6226 37.6562C30.9506 37.3522 31.2146 36.9842 31.4146 36.5522C31.6146 36.1202 31.7386 35.6362 31.7866 35.1002H29.9626C29.8906 35.6762 29.6906 36.1402 29.3626 36.4922C29.0426 36.8442 28.5946 37.0202 28.0186 37.0202C27.5946 37.0202 27.2346 36.9402 26.9386 36.7802C26.6426 36.6122 26.4026 36.3922 26.2186 36.1202C26.0346 35.8482 25.8986 35.5442 25.8106 35.2082C25.7306 34.8642 25.6906 34.5122 25.6906 34.1522C25.6906 33.7762 25.7306 33.4122 25.8106 33.0602C25.8986 32.7082 26.0346 32.3962 26.2186 32.1242C26.4026 31.8442 26.6426 31.6242 26.9386 31.4642C27.2346 31.2962 27.5946 31.2122 28.0186 31.2122C28.2506 31.2122 28.4706 31.2522 28.6786 31.3322C28.8946 31.4042 29.0866 31.5082 29.2546 31.6442C29.4226 31.7802 29.5626 31.9402 29.6746 32.1242C29.7866 32.3002 29.8586 32.4962 29.8906 32.7122Z" fill="#34495E"/>
+<path d="M34.9692 31.4162V38.4002H36.8532V31.4162H39.4212V29.8322H32.4012V31.4162H34.9692Z" fill="#34495E"/>
+<path d="M40.4091 29.8322V38.4002H46.9131V36.8162H42.2931V34.7162H46.4451V33.2522H42.2931V31.4162H46.8171V29.8322H40.4091Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_delete.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_delete.svg
new file mode 100644
index 0000000..4c83ead
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_delete.svg
@@ -0,0 +1,34 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 57.44C16.63 57.44 16.5 57.31 16.5 55.94V15.5H57.5V55.94C57.5 57.31 57.37 57.44 56 57.44H18Z" fill="#F0ECB6"/>
+<path d="M57 16V55.94C57.015 56.2422 56.9881 56.5451 56.92 56.84C56.624 56.9388 56.3103 56.9729 56 56.94H18C17.6977 56.9554 17.3948 56.9284 17.1 56.86C17.0012 56.564 16.9671 56.2503 17 55.94V16H57ZM58 15H16V55.94C16 57.59 16.35 57.94 18 57.94H56C57.65 57.94 58 57.59 58 55.94V15Z" fill="#C18F36"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M24.6992 56.9402V15.9402" stroke="#C18F36" stroke-linejoin="round"/>
+<path opacity="0.7" d="M41.0996 56.9402V15.9402" stroke="#C18F36" stroke-linejoin="round"/>
+<path opacity="0.7" d="M32.9004 56.9402V15.9402" stroke="#C18F36" stroke-linejoin="round"/>
+<path opacity="0.7" d="M49.3008 56.9402V15.9402" stroke="#C18F36" stroke-linejoin="round"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M17 23.9402H56.97" stroke="#C18F36" stroke-linejoin="round"/>
+<path opacity="0.7" d="M17 32.3101H56.97" stroke="#C18F36" stroke-linejoin="round"/>
+<path opacity="0.7" d="M17 40.6802H56.97" stroke="#C18F36" stroke-linejoin="round"/>
+<path opacity="0.7" d="M17 49.05H56.97" stroke="#C18F36" stroke-linejoin="round"/>
+</g>
+</g>
+<path d="M49.3105 15.49V6.48999H56.0005C57.3705 6.48999 57.5005 6.61999 57.5005 7.98999V15.49H49.3105Z" fill="#ADDFF3"/>
+<path d="M56.0005 7C56.3028 6.98463 56.6057 7.01156 56.9005 7.08C56.9996 7.37591 57.0338 7.68971 57.0005 8V15H49.8105V7H56.0005ZM56.0005 6H48.8105V16H58.0005V8C58.0005 6.35 57.6505 6 56.0005 6Z" fill="#2980B9"/>
+<path d="M16.5098 15.49V8C16.5098 6.63 16.6398 6.5 18.0098 6.5H24.6998V15.5L16.5098 15.49Z" fill="#ADDFF3"/>
+<path d="M24.2 7V15H17V8C16.985 7.69775 17.0119 7.39487 17.08 7.1C17.376 7.00121 17.6897 6.96711 18 7H24.2ZM25.2 6H18C16.35 6 16 6.35 16 8V16H25.2V6Z" fill="#2980B9"/>
+<path d="M49.2896 6.48999H41.0996V15.49H49.2896V6.48999Z" fill="#ADDFF3"/>
+<path d="M48.7894 7V15H41.5994V7H48.7794H48.7894ZM49.7794 6H40.6094V16H49.7994V6H49.7794Z" fill="#2980B9"/>
+<path d="M41.1002 6.48999H32.9102V15.49H41.1002V6.48999Z" fill="#ADDFF3"/>
+<path d="M40.5999 7V15H33.4099V7H40.5999ZM41.5999 6H32.4199V16H41.5999V6Z" fill="#2980B9"/>
+<path d="M32.8907 6.48999H24.7207V15.49H32.8907V6.48999Z" fill="#ADDFF3"/>
+<path d="M32.4007 7V15H25.2207V7H32.4007ZM33.4007 6H24.2207V16H33.4007V6Z" fill="#2980B9"/>
+<path d="M17.5 24.9402H23.7V31.3102H17.5V24.9402Z" fill="#F64D12"/>
+<path d="M25.7109 41.72H31.9109V48.09H25.7109V41.72Z" fill="#F64D12"/>
+<path d="M33.9395 41.72H40.1395V48.09H33.9395V41.72Z" fill="#F64D12"/>
+<path d="M6 29.2198C5.99905 28.558 6.19298 27.9106 6.5576 27.3583C6.92223 26.806 7.4414 26.3732 8.05036 26.1141C8.65932 25.8549 9.33111 25.7808 9.98192 25.901C10.6327 26.0212 11.2337 26.3303 11.71 26.7898L11.84 26.9198L11.89 26.9698L23.45 38.5198C23.5313 38.5637 23.5949 38.6344 23.63 38.7198L25.26 44.5398V44.5998C25.2652 44.6397 25.2652 44.68 25.26 44.7198C25.2659 44.7596 25.2659 44.8001 25.26 44.8398C25.245 44.8759 25.2248 44.9096 25.2 44.9398L25.1 44.9998H24.98H24.86H24.79L18.97 43.3698C18.8846 43.3347 18.8139 43.2711 18.77 43.1898L6.95 31.5798C6.91629 31.545 6.88918 31.5044 6.87 31.4598C6.31297 30.8465 6.00301 30.0484 6 29.2198ZM18.9 42.3798L19.9 40.3798L10 30.4098L8.46 31.9298L18.9 42.3798ZM23.9 42.9298L23.06 43.7698L24.23 44.0998L23.9 42.9298ZM22.9 39.4498L20.64 40.5398L19.6 42.7998L22.17 43.5198L23.66 41.9998L22.9 39.4498ZM22.48 38.7498L12.08 28.3098L10.56 29.8298L20.49 39.7598L22.48 38.7498ZM6.83 29.2498C6.83036 29.6036 6.90434 29.9535 7.04723 30.2772C7.19012 30.6008 7.39881 30.8912 7.66 31.1298L7.88 31.3498L11.5 27.7298L11.28 27.5098C10.9317 27.1286 10.4762 26.8615 9.9733 26.7439C9.47044 26.6262 8.94375 26.6634 8.4624 26.8505C7.98105 27.0376 7.56755 27.366 7.27622 27.7924C6.98489 28.2188 6.82934 28.7234 6.83 29.2398V29.2498Z" fill="#C18F36"/>
+<path d="M18.8992 42.3802L19.8992 40.3602V40.3502L9.96922 30.4202L8.44922 31.9402L18.8992 42.3802Z" fill="#F0ECB6"/>
+<path d="M12.0708 28.3198L10.5508 29.8398L20.4808 39.7698L20.4908 39.7598L22.5208 38.7598L12.0708 28.3198Z" fill="#F0ECB6"/>
+<path d="M6.84961 29.21C6.84997 29.5638 6.92395 29.9137 7.06684 30.2373C7.20973 30.561 7.41841 30.8514 7.67961 31.09L7.89961 31.31L11.5196 27.69L11.2996 27.47C10.9513 27.0887 10.4958 26.8217 9.9929 26.7041C9.49005 26.5864 8.96335 26.6236 8.48201 26.8107C8.00066 26.9978 7.58716 27.3262 7.29583 27.7526C7.00449 28.179 6.84895 28.6836 6.84961 29.2V29.21Z" fill="#F0ECB6"/>
+<path d="M22.9396 39.45L20.6896 40.54L19.5996 42.7999L22.1696 43.5199L23.6596 42.0299L22.9396 39.45Z" fill="#F0ECB6"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_foreign_scan.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_foreign_scan.svg
new file mode 100644
index 0000000..8797fe8
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_foreign_scan.svg
@@ -0,0 +1,30 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.97024 50.7499L6.49023 46.0999H13.4502L9.97024 50.7499Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.04314 45.876C6.12788 45.7068 6.30094 45.5999 6.49024 45.5999H13.4502C13.6395 45.5999 13.8126 45.7068 13.8973 45.876C13.9821 46.0453 13.964 46.2479 13.8505 46.3994L10.3705 51.0494C10.2761 51.1756 10.1278 51.2499 9.97024 51.2499C9.81268 51.2499 9.66433 51.1756 9.56993 51.0494L6.08993 46.3994C5.97651 46.2479 5.9584 46.0453 6.04314 45.876ZM7.48895 46.5999L9.97024 49.9154L12.4515 46.5999H7.48895Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.9707 14.76C10.523 14.76 10.9707 15.2077 10.9707 15.76V46.74C10.9707 47.2923 10.523 47.74 9.9707 47.74C9.41842 47.74 8.9707 47.2923 8.9707 46.74V15.76C8.9707 15.2077 9.41842 14.76 9.9707 14.76Z" fill="#34495E"/>
+<path d="M18 57.44C16.63 57.44 16.5 57.31 16.5 55.94V15.5H57.5V55.94C57.5 57.31 57.37 57.44 56 57.44H18Z" fill="#DAE7E7"/>
+<path d="M57 16V55.94C57.015 56.2422 56.9881 56.5451 56.92 56.84C56.624 56.9388 56.3103 56.9729 56 56.94H18C17.6977 56.9554 17.3948 56.9284 17.1 56.86C17.0012 56.564 16.9671 56.2503 17 55.94V16H57ZM58 15H16V55.94C16 57.59 16.35 57.94 18 57.94H56C57.65 57.94 58 57.59 58 55.94V15Z" fill="#83B8BD"/>
+<g opacity="0.8">
+<path opacity="0.8" d="M24.6992 56.9402V15.9402" stroke="#83B8BD" stroke-linejoin="round"/>
+<path opacity="0.8" d="M41.0996 56.9402V15.9402" stroke="#83B8BD" stroke-linejoin="round"/>
+<path opacity="0.8" d="M32.9004 56.9402V15.9402" stroke="#83B8BD" stroke-linejoin="round"/>
+<path opacity="0.8" d="M49.3008 56.9402V15.9402" stroke="#83B8BD" stroke-linejoin="round"/>
+<path opacity="0.8" d="M17 23.9402H56.97" stroke="#83B8BD" stroke-linejoin="round"/>
+<path opacity="0.8" d="M17 32.3101H56.97" stroke="#83B8BD" stroke-linejoin="round"/>
+<path opacity="0.8" d="M17 40.6802H56.97" stroke="#83B8BD" stroke-linejoin="round"/>
+<path opacity="0.8" d="M17 49.05H56.97" stroke="#83B8BD" stroke-linejoin="round"/>
+</g>
+<path d="M49.3105 15.49V6.48999H56.0005C57.3705 6.48999 57.5005 6.61999 57.5005 7.98999V15.49H49.3105Z" fill="#ADDFF3"/>
+<path d="M56.0005 7C56.3028 6.98463 56.6057 7.01156 56.9005 7.08C56.9996 7.37591 57.0337 7.68971 57.0005 8V15H49.8105V7H56.0005ZM56.0005 6H48.8105V16H58.0005V8C58.0005 6.35 57.6505 6 56.0005 6Z" fill="#2980B9"/>
+<path d="M16.5098 15.49V8C16.5098 6.63 16.6398 6.5 18.0098 6.5H24.6998V15.5L16.5098 15.49Z" fill="#ADDFF3"/>
+<path d="M24.2 7V15H17V8C16.985 7.69775 17.0119 7.39487 17.08 7.1C17.376 7.00121 17.6897 6.96711 18 7H24.2ZM25.2 6H18C16.35 6 16 6.35 16 8V16H25.2V6Z" fill="#2980B9"/>
+<path d="M49.2896 6.48999H41.0996V15.49H49.2896V6.48999Z" fill="#ADDFF3"/>
+<path d="M48.7894 7V15H41.5994V7H48.7794H48.7894ZM49.7794 6H40.6094V16H49.7994V6H49.7794Z" fill="#2980B9"/>
+<path d="M41.1002 6.48999H32.9102V15.49H41.1002V6.48999Z" fill="#ADDFF3"/>
+<path d="M40.5999 7V15H33.4099V7H40.5999ZM41.5999 6H32.4199V16H41.5999V6Z" fill="#2980B9"/>
+<path d="M32.8907 6.48999H24.7207V15.49H32.8907V6.48999Z" fill="#ADDFF3"/>
+<path d="M32.4007 7V15H25.2207V7H32.4007ZM33.4007 6H24.2207V16H33.4007V6Z" fill="#2980B9"/>
+<path d="M29.8906 32.7122H31.7146C31.6586 32.2162 31.5226 31.7762 31.3066 31.3922C31.0906 31.0082 30.8146 30.6882 30.4786 30.4322C30.1506 30.1682 29.7746 29.9682 29.3506 29.8322C28.9346 29.6962 28.4906 29.6282 28.0186 29.6282C27.3626 29.6282 26.7706 29.7442 26.2426 29.9762C25.7226 30.2082 25.2826 30.5282 24.9226 30.9362C24.5626 31.3442 24.2866 31.8242 24.0946 32.3762C23.9026 32.9202 23.8066 33.5122 23.8066 34.1522C23.8066 34.7762 23.9026 35.3602 24.0946 35.9042C24.2866 36.4402 24.5626 36.9082 24.9226 37.3082C25.2826 37.7082 25.7226 38.0242 26.2426 38.2562C26.7706 38.4802 27.3626 38.5922 28.0186 38.5922C28.5466 38.5922 29.0306 38.5122 29.4706 38.3522C29.9106 38.1922 30.2946 37.9602 30.6226 37.6562C30.9506 37.3522 31.2146 36.9842 31.4146 36.5522C31.6146 36.1202 31.7386 35.6362 31.7866 35.1002H29.9626C29.8906 35.6762 29.6906 36.1402 29.3626 36.4922C29.0426 36.8442 28.5946 37.0202 28.0186 37.0202C27.5946 37.0202 27.2346 36.9402 26.9386 36.7802C26.6426 36.6122 26.4026 36.3922 26.2186 36.1202C26.0346 35.8482 25.8986 35.5442 25.8106 35.2082C25.7306 34.8642 25.6906 34.5122 25.6906 34.1522C25.6906 33.7762 25.7306 33.4122 25.8106 33.0602C25.8986 32.7082 26.0346 32.3962 26.2186 32.1242C26.4026 31.8442 26.6426 31.6242 26.9386 31.4642C27.2346 31.2962 27.5946 31.2122 28.0186 31.2122C28.2506 31.2122 28.4706 31.2522 28.6786 31.3322C28.8946 31.4042 29.0866 31.5082 29.2546 31.6442C29.4226 31.7802 29.5626 31.9402 29.6746 32.1242C29.7866 32.3002 29.8586 32.4962 29.8906 32.7122Z" fill="#34495E"/>
+<path d="M34.9692 31.4162V38.4002H36.8532V31.4162H39.4212V29.8322H32.4012V31.4162H34.9692Z" fill="#34495E"/>
+<path d="M40.4091 29.8322V38.4002H46.9131V36.8162H42.2931V34.7162H46.4451V33.2522H42.2931V31.4162H46.8171V29.8322H40.4091Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_gather_merge.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_gather_merge.svg
new file mode 100644
index 0000000..01af798
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_gather_merge.svg
@@ -0,0 +1,36 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8138 14.2998C11.4444 14.2998 11.3145 14.1798 11.3145 12.7998V8.7998C11.3145 7.4198 11.4444 7.2998 12.8138 7.2998H17.3116V14.2998H12.8138Z" fill="#D3D4F3"/>
+<path d="M16.8116 7.81982V13.8198H12.8135C12.5119 13.835 12.2096 13.8115 11.9139 13.7498C11.8131 13.4508 11.779 13.1334 11.814 12.8198V8.81982C11.7899 8.51746 11.817 8.2132 11.8939 7.91982C11.8939 7.91982 12.0839 7.81982 12.8135 7.81982H16.8116ZM17.8112 6.81982H12.8135C11.1643 6.81982 10.8145 7.16982 10.8145 8.81982V12.8198C10.8145 14.4698 11.1643 14.8198 12.8135 14.8198H17.8112V6.81982Z" fill="#666BD1"/>
+<path d="M17.3105 14.2998V7.2998H22.0883C23.4677 7.2998 23.5876 7.4198 23.5876 8.7998V12.7998C23.5876 14.1798 23.4677 14.2998 22.0883 14.2998H17.3105Z" fill="#D3D4F3"/>
+<path d="M22.09 7.81982C22.3917 7.80352 22.6941 7.82706 22.9896 7.88982C23.0904 8.1888 23.1245 8.50624 23.0896 8.81982V12.8198C23.1029 13.1216 23.0794 13.4238 23.0196 13.7198C22.7208 13.8207 22.4035 13.8548 22.09 13.8198H17.812V7.81982H22.09ZM22.09 6.81982H16.8125V14.8198H22.09C23.7393 14.8198 24.0891 14.4698 24.0891 12.8198V8.81982C24.0891 7.16982 23.7393 6.81982 22.09 6.81982Z" fill="#666BD1"/>
+<path d="M27.8567 14.2998C26.4874 14.2998 26.3574 14.1798 26.3574 12.7998V8.7998C26.3574 7.4198 26.4874 7.2998 27.8567 7.2998H32.3546V14.2998H27.8567Z" fill="#D3D4F3"/>
+<path d="M31.8546 7.81982V13.8198H27.8565C27.5549 13.8339 27.2527 13.8104 26.9569 13.7498C26.8629 13.4494 26.829 13.1334 26.857 12.8198V8.81982C26.8407 8.51754 26.8676 8.21449 26.9369 7.91982C27.232 7.81783 27.5463 7.78365 27.8565 7.81982H31.8546ZM32.8541 6.81982H27.8565C26.2073 6.81982 25.8574 7.16982 25.8574 8.81982V12.8198C25.8574 14.4698 26.2073 14.8198 27.8565 14.8198H32.8541V6.81982Z" fill="#666BD1"/>
+<path d="M32.3652 14.2998V7.2998H37.143C38.5124 7.2998 38.6423 7.4198 38.6423 8.7998V12.7998C38.6423 14.1798 38.5124 14.2998 37.143 14.2998H32.3652Z" fill="#D3D4F3"/>
+<path d="M37.1428 7.81982C37.4411 7.80382 37.7402 7.82736 38.0323 7.88982C38.1263 8.19027 38.1603 8.50627 38.1323 8.81982V12.8198C38.1486 13.1221 38.1217 13.4252 38.0523 13.7198C37.7572 13.8218 37.4429 13.856 37.1328 13.8198H32.8648V7.81982H37.1428ZM37.1428 6.81982H31.8652V14.8198H37.1428C38.792 14.8198 39.1418 14.4698 39.1418 12.8198V8.81982C39.1418 7.16982 38.792 6.81982 37.1428 6.81982Z" fill="#666BD1"/>
+<path d="M42.9095 14.2998C41.5301 14.2998 41.4102 14.1798 41.4102 12.7998V8.7998C41.4102 7.4198 41.5301 7.2998 42.9095 7.2998H47.4073V14.2998H42.9095Z" fill="#D3D4F3"/>
+<path d="M46.9073 7.81982V13.8198H42.9092C42.6076 13.8361 42.3051 13.8126 42.0096 13.7498C41.9088 13.4508 41.8747 13.1334 41.9097 12.8198V8.81982C41.8963 8.51809 41.9198 8.21586 41.9797 7.91982C42.2785 7.81896 42.5958 7.78483 42.9092 7.81982H46.9073ZM47.9069 6.81982H42.9092C41.26 6.81982 40.9102 7.16982 40.9102 8.81982V12.8198C40.9102 14.4698 41.26 14.8198 42.9092 14.8198H47.9069V6.81982Z" fill="#666BD1"/>
+<path d="M47.4082 14.2998V7.2998H52.186C53.5553 7.2998 53.6853 7.4198 53.6853 8.7998V12.7998C53.6853 14.1798 53.5553 14.2998 52.186 14.2998H47.4082Z" fill="#D3D4F3"/>
+<path d="M52.1857 7.81982C52.4873 7.80465 52.7897 7.82818 53.0853 7.88982C53.1861 8.1888 53.2202 8.50624 53.1853 8.81982V12.8198C53.2093 13.1222 53.1823 13.4264 53.1053 13.7198C53.1053 13.7198 52.9154 13.8198 52.1857 13.8198H47.9077V7.81982H52.1857ZM52.1857 6.81982H46.9082V14.8198H52.1857C53.835 14.8198 54.1848 14.4698 54.1848 12.8198V8.81982C54.1848 7.16982 53.835 6.81982 52.1857 6.81982Z" fill="#666BD1"/>
+<path d="M21.1985 57.44C19.8192 57.44 19.6992 57.31 19.6992 55.94V44.49H44.2877V55.94C44.2877 57.31 44.1577 57.44 42.7884 57.44H21.1985Z" fill="#F0ECB6"/>
+<path d="M43.7897 45V55.94C43.8004 56.2417 43.7769 56.5436 43.7197 56.84C43.4194 56.934 43.1035 56.968 42.7901 56.94H21.2002C20.8981 56.9573 20.595 56.9303 20.3007 56.86C20.2004 56.5644 20.1662 56.2503 20.2007 55.94V45H43.7897ZM44.7892 44H19.2012V55.94C19.2012 57.59 19.551 57.94 21.2002 57.94H42.7901C44.4394 57.94 44.7892 57.59 44.7892 55.94V44Z" fill="#C18F36"/>
+<g opacity="0.8">
+<path opacity="0.8" d="M27.8965 56.9297V44.9297" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M36.1016 56.9297V44.9297" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M20.1895 50.9297H43.7684" stroke="#C18F36" stroke-miterlimit="10"/>
+</g>
+<path d="M36.1133 44.49V38.49H42.8001C44.1695 38.49 44.2994 38.61 44.2994 39.99V44.49H36.1133Z" fill="#ADDFF3"/>
+<path d="M42.7999 39C43.1015 38.9848 43.4039 39.0084 43.6995 39.07C43.8003 39.369 43.8344 39.6864 43.7994 40V44H36.6128V39H42.7999ZM42.7999 38H35.6133V45H44.799V40C44.799 38.35 44.4491 38 42.7999 38Z" fill="#2980B9"/>
+<path d="M19.6992 44.49V40C19.6992 38.62 19.8192 38.5 21.1985 38.5H27.8854V44.5L19.6992 44.49Z" fill="#ADDFF3"/>
+<path d="M27.3873 39V44H20.2007V40C20.1873 39.6983 20.2108 39.396 20.2707 39.1C20.5695 38.9991 20.8868 38.965 21.2002 39H27.3873ZM28.3869 38H21.2002C19.551 38 19.2012 38.35 19.2012 40V45H28.3869V38Z" fill="#2980B9"/>
+<path d="M36.0924 38.49H27.9062V44.49H36.0924V38.49Z" fill="#ADDFF3"/>
+<path d="M35.5922 39V44H28.4056V39H35.5822H35.5922ZM36.5817 38H27.416V45H36.6017V38H36.5817Z" fill="#2980B9"/>
+<path d="M27.0874 36.38L27.947 32.25L23.3691 34.39L27.0874 36.38Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.2569 31.8579C28.4053 31.9754 28.4746 32.1666 28.436 32.3519L27.5764 36.4819C27.5443 36.6362 27.4414 36.7663 27.2987 36.833C27.1561 36.8997 26.9903 36.8952 26.8514 36.8209L23.1332 34.8309C22.9663 34.7416 22.8642 34.5657 22.8693 34.3765C22.8744 34.1873 22.9859 34.0171 23.1573 33.937L27.7352 31.797C27.9066 31.7169 28.1085 31.7405 28.2569 31.8579ZM24.4849 34.4202L26.734 35.624L27.254 33.1257L24.4849 34.4202Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5282 18.0335C19.0284 17.8 19.6232 18.0163 19.8567 18.5168L26.4436 32.6368C26.6771 33.1372 26.4608 33.7323 25.9606 33.9659C25.4603 34.1994 24.8656 33.9831 24.6321 33.4826L18.0452 19.3626C17.8117 18.8622 18.028 18.2671 18.5282 18.0335Z" fill="#528D19"/>
+<path d="M32.3845 36.1998L34.9033 32.8198H29.8457L32.3845 36.1998Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.3984 32.5964C29.483 32.4269 29.6561 32.3198 29.8455 32.3198H34.9031C35.0921 32.3198 35.265 32.4265 35.3498 32.5956C35.4346 32.7646 35.4168 32.9671 35.3038 33.1187L32.785 36.4987C32.6908 36.625 32.5427 36.6995 32.3852 36.6998C32.2278 36.7001 32.0794 36.6261 31.9848 36.5002L29.4459 33.1202C29.3322 32.9687 29.3137 32.7659 29.3984 32.5964ZM30.8462 33.3198L32.3827 35.3654L33.9071 33.3198H30.8462Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.3745 17.0198C32.9266 17.0198 33.3741 17.4675 33.3741 18.0198V32.5398C33.3741 33.0921 32.9266 33.5398 32.3745 33.5398C31.8225 33.5398 31.375 33.0921 31.375 32.5398V18.0198C31.375 17.4675 31.8225 17.0198 32.3745 17.0198Z" fill="#528D19"/>
+<path d="M38.5005 36.38L37.6309 32.25L42.2187 34.39L38.5005 36.38Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.3218 31.8584C37.4701 31.7406 37.6722 31.7168 37.8438 31.7968L42.4316 33.9368C42.6032 34.0169 42.7148 34.187 42.72 34.3763C42.7252 34.5656 42.6231 34.7416 42.4562 34.8309L38.7379 36.8209C38.5992 36.8951 38.4337 36.8997 38.2911 36.8332C38.1486 36.7668 38.0456 36.6371 38.0132 36.4831L37.1436 32.3531C37.1045 32.1677 37.1736 31.9762 37.3218 31.8584ZM38.3278 33.1259L38.8539 35.6247L41.1036 34.4207L38.3278 33.1259Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.0504 18.0335C47.5506 18.2671 47.7669 18.8622 47.5334 19.3626L40.9465 33.4826C40.7131 33.9831 40.1183 34.1994 39.6181 33.9659C39.1178 33.7323 38.9016 33.1372 39.135 32.6368L45.722 18.5168C45.9554 18.0163 46.5502 17.8 47.0504 18.0335Z" fill="#528D19"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_gather_motion.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_gather_motion.svg
new file mode 100644
index 0000000..20bdcd2
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_gather_motion.svg
@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.6914 45.4297H47.6914C47.4153 45.4297 47.1914 45.6535 47.1914 45.9297V53.9297C47.1914 54.2058 47.4153 54.4297 47.6914 54.4297H55.6914C55.9676 54.4297 56.1914 54.2058 56.1914 53.9297V45.9297C56.1914 45.6535 55.9676 45.4297 55.6914 45.4297Z" fill="#ADDFF3"/>
+<path d="M55.6914 45.9297V53.9297H47.6914V45.9297H55.6914ZM55.6914 44.9297H47.6914C47.4262 44.9297 47.1718 45.035 46.9843 45.2226C46.7968 45.4101 46.6914 45.6645 46.6914 45.9297V53.9297C46.6914 54.1949 46.7968 54.4493 46.9843 54.6368C47.1718 54.8243 47.4262 54.9297 47.6914 54.9297H55.6914C55.9566 54.9297 56.211 54.8243 56.3985 54.6368C56.5861 54.4493 56.6914 54.1949 56.6914 53.9297V45.9297C56.6914 45.6645 56.5861 45.4101 56.3985 45.2226C56.211 45.035 55.9566 44.9297 55.6914 44.9297Z" fill="#2980B9"/>
+<path d="M16.3105 45.4297H8.31055C8.03441 45.4297 7.81055 45.6535 7.81055 45.9297V53.9297C7.81055 54.2058 8.03441 54.4297 8.31055 54.4297H16.3105C16.5867 54.4297 16.8105 54.2058 16.8105 53.9297V45.9297C16.8105 45.6535 16.5867 45.4297 16.3105 45.4297Z" fill="#ADDFF3"/>
+<path d="M16.3105 45.9297V53.9297H8.31055V45.9297H16.3105ZM16.3105 44.9297H8.31055C8.04533 44.9297 7.79098 45.035 7.60344 45.2226C7.4159 45.4101 7.31055 45.6645 7.31055 45.9297V53.9297C7.31055 54.1949 7.4159 54.4493 7.60344 54.6368C7.79098 54.8243 8.04533 54.9297 8.31055 54.9297H16.3105C16.5758 54.9297 16.8301 54.8243 17.0177 54.6368C17.2052 54.4493 17.3105 54.1949 17.3105 53.9297V45.9297C17.3105 45.6645 17.2052 45.4101 17.0177 45.2226C16.8301 45.035 16.5758 44.9297 16.3105 44.9297Z" fill="#2980B9"/>
+<path d="M36.0098 9.56982H28.0098C27.7336 9.56982 27.5098 9.79368 27.5098 10.0698V18.0698C27.5098 18.346 27.7336 18.5698 28.0098 18.5698H36.0098C36.2859 18.5698 36.5098 18.346 36.5098 18.0698V10.0698C36.5098 9.79368 36.2859 9.56982 36.0098 9.56982Z" fill="#ADDFF3"/>
+<path d="M36 10.0698V18.0698H28V10.0698H36ZM36 9.06982H28C27.7348 9.06982 27.4804 9.17518 27.2929 9.36272C27.1054 9.55025 27 9.80461 27 10.0698V18.0698C27 18.335 27.1054 18.5894 27.2929 18.7769C27.4804 18.9645 27.7348 19.0698 28 19.0698H36C36.2652 19.0698 36.5196 18.9645 36.7071 18.7769C36.8946 18.5894 37 18.335 37 18.0698V10.0698C37 9.80461 36.8946 9.55025 36.7071 9.36272C36.5196 9.17518 36.2652 9.06982 36 9.06982Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.3538 41.7698C22.4918 42.009 22.4097 42.3148 22.1705 42.4527L18.3905 44.6327C18.1513 44.7707 17.8455 44.6886 17.7076 44.4494C17.5696 44.2102 17.6517 43.9044 17.8909 43.7665L21.6709 41.5865C21.9101 41.4485 22.2159 41.5306 22.3538 41.7698Z" fill="#D04465"/>
+<path d="M23.9996 40.8198C23.155 41.8239 22.4795 42.9587 21.9996 44.1798L21.6496 42.1798L20.0996 40.8798C21.3943 41.0712 22.7114 41.051 23.9996 40.8198Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6275 41.97C41.7655 41.7308 42.0712 41.6487 42.3104 41.7867L46.0904 43.9667C46.3296 44.1046 46.4117 44.4104 46.2738 44.6496C46.1358 44.8888 45.8301 44.9709 45.5908 44.8329L41.8108 42.6529C41.5716 42.515 41.4895 42.2092 41.6275 41.97Z" fill="#D04465"/>
+<path d="M40 41C40.8446 42.0041 41.5201 43.1389 42 44.36L42.35 42.36L43.9 41.06C42.6053 41.2514 41.2882 41.2311 40 41Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0912 19.5698C32.3674 19.5705 32.5907 19.7948 32.5901 20.071L32.5801 24.431C32.5794 24.7071 32.3551 24.9305 32.0789 24.9298C31.8028 24.9292 31.5794 24.7048 31.5801 24.4287L31.5901 20.0687C31.5907 19.7925 31.8151 19.5692 32.0912 19.5698Z" fill="#D04465"/>
+<path d="M32.0797 26.8497C31.6362 25.6141 30.9945 24.459 30.1797 23.4297L32.0797 24.1197L33.9797 23.4297C33.1647 24.4589 32.523 25.614 32.0797 26.8497Z" fill="#D04465"/>
+<path d="M32.0801 43.4297C36.2222 43.4297 39.5801 40.0718 39.5801 35.9297C39.5801 31.7876 36.2222 28.4297 32.0801 28.4297C27.9379 28.4297 24.5801 31.7876 24.5801 35.9297C24.5801 40.0718 27.9379 43.4297 32.0801 43.4297Z" fill="#F3C7D7"/>
+<path d="M32.0801 28.9297C33.4646 28.9297 34.8179 29.3402 35.9691 30.1094C37.1202 30.8786 38.0174 31.9718 38.5472 33.2509C39.077 34.53 39.2157 35.9375 38.9456 37.2953C38.6755 38.6532 38.0088 39.9005 37.0298 40.8794C36.0509 41.8584 34.8036 42.5251 33.4457 42.7952C32.0878 43.0653 30.6804 42.9267 29.4013 42.3968C28.1222 41.867 27.029 40.9698 26.2598 39.8187C25.4906 38.6675 25.0801 37.3142 25.0801 35.9297C25.0801 34.0732 25.8176 32.2927 27.1303 30.9799C28.4431 29.6672 30.2236 28.9297 32.0801 28.9297ZM32.0801 27.9297C30.4978 27.9297 28.9511 28.3989 27.6355 29.2779C26.3199 30.157 25.2945 31.4064 24.689 32.8682C24.0835 34.33 23.9251 35.9386 24.2338 37.4904C24.5425 39.0423 25.3044 40.4677 26.4232 41.5865C27.542 42.7054 28.9675 43.4673 30.5194 43.776C32.0712 44.0847 33.6797 43.9262 35.1415 43.3207C36.6034 42.7152 37.8528 41.6898 38.7318 40.3742C39.6109 39.0587 40.0801 37.5119 40.0801 35.9297C40.0801 33.808 39.2372 31.7731 37.7369 30.2728C36.2366 28.7725 34.2018 27.9297 32.0801 27.9297Z" fill="#D04465"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_group.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_group.svg
new file mode 100644
index 0000000..b99073f
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_group.svg
@@ -0,0 +1,31 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.0093 16H19.0293V40.96H55.0093V16Z" fill="#F0ECB6"/>
+<path d="M54.5195 16.5V40.5H19.5195V16.5H54.5195ZM55.5195 15.5H18.5195V41.5H55.5195V15.5Z" fill="#C18F35"/>
+<path d="M20.5293 56C19.1593 56 19.0293 55.87 19.0293 54.5V41H54.9993V54.5C54.9993 55.87 54.8693 56 53.4993 56H20.5293Z" fill="#D3D4F3"/>
+<path d="M54.5195 41.5V54.5C54.5345 54.8023 54.5076 55.1051 54.4395 55.4C54.1435 55.4988 53.8298 55.5329 53.5195 55.5H20.5195C20.2173 55.5154 19.9143 55.4884 19.6195 55.42C19.5207 55.124 19.4866 54.8103 19.5195 54.5V41.5H54.5195ZM55.5195 40.5H18.5195V54.5C18.5195 56.15 18.8695 56.5 20.5195 56.5H53.5195C55.1695 56.5 55.5195 56.15 55.5195 54.5V40.5Z" fill="#666BD1"/>
+<path d="M46.8691 16V8H53.4991C54.8691 8 54.9991 8.13 54.9991 9.5V16H46.8691Z" fill="#ADDFF3"/>
+<path d="M53.4891 8.5C53.7914 8.48463 54.0943 8.51156 54.3891 8.58C54.4879 8.87598 54.522 9.18971 54.4891 9.5V15.5H47.3691V8.5H53.4991H53.4891ZM53.4991 7.5H46.3691V16.5H55.4991V9.5C55.4991 7.85 55.1491 7.5 53.4991 7.5Z" fill="#2980B9"/>
+<path d="M19 16V9.5C19 8.13 19.13 8 20.5 8H27.09V16H19Z" fill="#ADDFF3"/>
+<path d="M26.5898 8.5V15.5H19.5098V9.5C19.4948 9.19775 19.5217 8.89487 19.5898 8.6C19.8857 8.50121 20.1995 8.46711 20.5098 8.5H26.5998H26.5898ZM27.5998 7.5H20.5098C18.8598 7.5 18.5098 7.85 18.5098 9.5V16.5H27.5998V7.5Z" fill="#2980B9"/>
+<path d="M47.3605 8H40.3105V16H47.3605V8Z" fill="#ADDFF3"/>
+<path d="M46.8608 8.5V15.5H40.8008V8.5H46.8008H46.8608ZM47.8008 7.5H39.8008V16.5H47.8508V7.5H47.8008Z" fill="#2980B9"/>
+<path d="M40.3102 8H33.7402V16H40.3102V8Z" fill="#ADDFF3"/>
+<path d="M39.81 8.5V15.5H34.24V8.5H39.8H39.81ZM40.8 7.5H33.25V16.5H40.82V7.5H40.8Z" fill="#2980B9"/>
+<path d="M33.7191 8H26.6191V16H33.7191V8Z" fill="#ADDFF3"/>
+<path d="M33.2291 8.5V15.5H27.1191V8.5H33.2191H33.2291ZM34.2191 7.5H26.1191V16.5H34.2291V7.5H34.2191Z" fill="#2980B9"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M26.6094 40.5V16.5" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M40.291 40.5V16.5" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M33.7012 40.5V16.5" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M47.3711 40.5V16.5" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M26.6094 55.62V40.5" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M40.291 55.62V40.5" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M33.7012 55.62V40.5" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M47.3711 55.62V40.5" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M19.4902 24.3499H54.4602" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.7" d="M19.5195 48.5H54.4895" stroke="#666BD1" stroke-miterlimit="10"/>
+<path opacity="0.7" d="M19.4902 32.73H54.4602" stroke="#C18F35" stroke-linejoin="round"/>
+</g>
+<path d="M14.8793 38.29H14.3493C14.1234 38.2709 13.8994 38.2341 13.6793 38.18C13.4465 38.1022 13.2193 38.0087 12.9993 37.9C12.7479 37.7968 12.5123 37.6588 12.2993 37.49C11.9691 37.2442 11.6876 36.939 11.4693 36.59C11.2562 36.2609 11.0975 35.8996 10.9993 35.52C10.9093 35.13 10.7793 30.27 10.6993 29.86C10.632 29.4734 10.4706 29.1094 10.2293 28.8C9.95802 28.4814 9.61541 28.2313 9.2293 28.07C9.13011 28.0079 9.04832 27.9217 8.99163 27.8194C8.93493 27.717 8.90519 27.602 8.90519 27.485C8.90519 27.368 8.93493 27.2529 8.99163 27.1506C9.04832 27.0483 9.13011 26.962 9.2293 26.9C9.61559 26.739 9.95828 26.4889 10.2293 26.17C10.4713 25.861 10.6328 25.4968 10.6993 25.11C10.7793 24.7 10.8293 22.2 10.8393 21.73C10.8531 21.2993 10.9067 20.8708 10.9993 20.45C11.0852 20.0728 11.2303 19.7117 11.4293 19.38C11.6481 19.0314 11.9295 18.7263 12.2593 18.48C12.4722 18.3111 12.7078 18.1731 12.9593 18.07C13.1933 17.9757 13.434 17.8988 13.6793 17.84C13.8992 17.7849 14.1233 17.7481 14.3493 17.73H14.8793V18.17C14.165 18.1738 13.4621 18.3486 12.8293 18.68C12.3842 18.9367 12.0176 19.3101 11.7693 19.76C11.5415 20.1943 11.4053 20.6708 11.3693 21.16C11.3693 21.66 11.2293 24.86 11.1693 25.16C11.1269 25.4486 11.0391 25.7287 10.9093 25.99C10.7946 26.2115 10.6461 26.414 10.4693 26.59C10.2875 26.7742 10.0784 26.9294 9.8493 27.05C9.64503 27.1601 9.43073 27.2505 9.2093 27.32C9.01346 27.3807 8.8127 27.4242 8.6093 27.45C8.4193 27.45 8.4193 27.55 8.6093 27.57C8.81272 27.5957 9.01349 27.6392 9.2093 27.7C9.43006 27.7713 9.6442 27.8616 9.8493 27.97C10.0783 28.0907 10.2874 28.2458 10.4693 28.43C10.6466 28.6056 10.7951 28.8081 10.9093 29.03C11.0393 29.2912 11.127 29.5713 11.1693 29.86C11.2696 30.1593 11.3137 30.4746 11.2993 30.79C11.2993 30.79 11.2993 34.39 11.3593 34.89C11.3956 35.3791 11.5317 35.8555 11.7593 36.29C12.0072 36.7401 12.3739 37.1137 12.8193 37.37C13.4514 37.7032 14.1548 37.8782 14.8693 37.88L14.8793 38.29Z" fill="#34495E" stroke="#C18F35" stroke-miterlimit="10"/>
+<path d="M14.8793 55.3H14.3493C14.1234 55.2809 13.8994 55.2441 13.6793 55.19C13.4342 55.1303 13.1936 55.0534 12.9593 54.96C12.7079 54.8568 12.4723 54.7188 12.2593 54.55C11.9291 54.3042 11.6476 53.999 11.4293 53.65C11.2252 53.3029 11.0799 52.9245 10.9993 52.53C10.9093 52.14 10.7793 51.28 10.6993 50.87C10.632 50.4834 10.4706 50.1194 10.2293 49.81C9.95802 49.4914 9.61541 49.2413 9.2293 49.08C9.13011 49.018 9.04832 48.9317 8.99163 48.8294C8.93493 48.727 8.90519 48.612 8.90519 48.495C8.90519 48.378 8.93493 48.2629 8.99163 48.1606C9.04832 48.0583 9.13011 47.972 9.2293 47.91C9.61559 47.749 9.95828 47.4989 10.2293 47.18C10.4713 46.871 10.6328 46.5068 10.6993 46.12C10.7793 45.71 10.9093 44.84 10.9993 44.46C11.0852 44.0828 11.2303 43.7217 11.4293 43.39C11.6481 43.0414 11.9295 42.7363 12.2593 42.49C12.4722 42.3211 12.7078 42.1831 12.9593 42.08C13.1933 41.9857 13.434 41.9088 13.6793 41.85C13.8992 41.7949 14.1233 41.7581 14.3493 41.74H14.8793V42.18C14.165 42.1838 13.4621 42.3586 12.8293 42.69C12.3842 42.9467 12.0176 43.3201 11.7693 43.77C11.5415 44.2043 11.4053 44.6808 11.3693 45.17C11.3249 45.5074 11.2581 45.8415 11.1693 46.17C11.1269 46.4586 11.0391 46.7387 10.9093 47C10.7946 47.2216 10.6461 47.424 10.4693 47.6C10.2875 47.7843 10.0784 47.9394 9.8493 48.06C9.64503 48.1701 9.43073 48.2605 9.2093 48.33C9.01346 48.3907 8.8127 48.4342 8.6093 48.46C8.4193 48.46 8.4193 48.56 8.6093 48.58C8.81272 48.6057 9.01349 48.6492 9.2093 48.71C9.43006 48.7813 9.6442 48.8716 9.8493 48.98C10.0783 49.1007 10.2874 49.2558 10.4693 49.44C10.6466 49.6156 10.7951 49.8181 10.9093 50.04C11.0393 50.3012 11.127 50.5813 11.1693 50.87C11.2581 51.1985 11.3249 51.5326 11.3693 51.87C11.4056 52.3591 11.5417 52.8355 11.7693 53.27C12.0172 53.7201 12.3839 54.0937 12.8293 54.35C13.4614 54.6832 14.1648 54.8582 14.8793 54.86V55.3Z" fill="#528D19" stroke="#666BD1" stroke-miterlimit="10"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash.svg
new file mode 100644
index 0000000..4420825
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash.svg
@@ -0,0 +1,35 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3809 56.5C9.01086 56.5 8.88086 56.37 8.88086 55V15.5H17.8809V55C17.8809 56.37 17.7509 56.5 16.3809 56.5H10.3809Z" fill="#D3D4F3"/>
+<path d="M17.3594 16V55C17.3744 55.3023 17.3474 55.6051 17.2794 55.9C16.9834 55.9988 16.6697 56.0329 16.3594 56H10.3594C10.0571 56.0154 9.75419 55.9884 9.45938 55.92C9.36028 55.6241 9.32617 55.3103 9.35937 55V16H17.3594ZM18.3594 15H8.35938V55C8.35938 56.65 8.70937 57 10.3594 57H16.3594C18.0094 57 18.3594 56.65 18.3594 55V15Z" fill="#666BD1"/>
+<path d="M8.88086 15.5V9C8.88086 7.63 9.01086 7.5 10.3809 7.5H16.3809C17.7509 7.5 17.8809 7.63 17.8809 9V15.5H8.88086Z" fill="#ADDFF3"/>
+<path d="M16.3594 8C16.6616 7.98463 16.9646 8.01156 17.2594 8.08C17.3585 8.37591 17.3926 8.68971 17.3594 9V15H9.35937V9C9.3444 8.69775 9.37132 8.39487 9.43937 8.1C9.73535 8.00121 10.0491 7.96711 10.3594 8H16.3594ZM16.3594 7H10.3594C8.70937 7 8.35938 7.35 8.35938 9V16H18.3594V9C18.3594 7.35 18.0094 7 16.3594 7Z" fill="#2980B9"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M9.39062 23.74H17.3506" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M9.39062 31.49H17.3506" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M9.39062 39.23H17.3506" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M9.39062 46.97H17.3506" stroke="#666BD1" stroke-linejoin="round"/>
+</g>
+<path d="M47.4004 46.22V18.22H53.6204C54.9904 18.22 55.1204 18.35 55.1204 19.72V44.72C55.1204 46.09 54.9904 46.22 53.6204 46.22H47.4004Z" fill="#D3D4F3"/>
+<path d="M53.6204 18.72C53.9227 18.7046 54.2256 18.7315 54.5204 18.8C54.6192 19.0959 54.6533 19.4097 54.6204 19.72V44.72C54.6354 45.0222 54.6085 45.3251 54.5404 45.62C54.2444 45.7188 53.9307 45.7529 53.6204 45.72H47.9004V18.72H53.6204ZM53.6204 17.72H46.9004V46.72H53.6204C55.2704 46.72 55.6204 46.37 55.6204 44.72V19.72C55.6204 18.07 55.2704 17.72 53.6204 17.72Z" fill="#666BD1"/>
+<path d="M26.6406 46.22C25.2706 46.22 25.1406 46.09 25.1406 44.72V24.22H47.4206V46.22H26.6406Z" fill="#F0ECB6"/>
+<path d="M46.9206 24.72V45.72H26.6406C26.3384 45.7353 26.0354 45.7084 25.7406 45.64C25.6418 45.344 25.6077 45.0303 25.6406 44.72V24.72H46.9206ZM47.9206 23.72H24.6406V44.72C24.6406 46.37 24.9906 46.72 26.6406 46.72H47.9206V23.72Z" fill="#C18F35"/>
+<path d="M25.1406 24.22V19.72C25.1406 18.35 25.2706 18.22 26.6406 18.22H47.4206V24.22H25.1406Z" fill="#ADDFF3"/>
+<path d="M46.9206 18.72V23.72H25.6406V19.72C25.6256 19.4177 25.6526 19.1148 25.7206 18.82C26.0166 18.7212 26.3303 18.6871 26.6406 18.72H46.9206ZM47.9206 17.72H26.6406C24.9906 17.72 24.6406 18.07 24.6406 19.72V24.72H47.9206V17.72Z" fill="#2980B9"/>
+<path d="M32.5996 24.05V18.24" stroke="#2980B9" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M54.9999 24.22H47.9199" stroke="#666BD1" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M54.9999 31.49H47.9199" stroke="#666BD1" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M54.9999 38.96H47.9199" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M40.3496 24.05V18.24" stroke="#2980B9" stroke-miterlimit="10" stroke-linecap="round"/>
+<path opacity="0.8" d="M32.5996 46.05V24.72" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M40.3496 46.05V24.72" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M25.1699 31.5698H47.4199" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M25.1699 38.96H47.4199" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M10.2695 32.8599H16.6495V37.9999H10.2695V32.8599Z" fill="#CC0000"/>
+<path d="M33.8105 32.71H39.2105V37.94H33.8105V32.71Z" fill="#CC0000"/>
+<path d="M33.4308 35.53L30.0508 33V38.06L33.4308 35.53Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.827 32.5529C29.9962 32.4682 30.1989 32.4863 30.3504 32.5997L33.7304 35.1297C33.8565 35.2241 33.9308 35.3725 33.9308 35.53C33.9308 35.6875 33.8565 35.8359 33.7304 35.9303L30.3504 38.4603C30.1989 38.5737 29.9962 38.5919 29.827 38.5071C29.6577 38.4224 29.5508 38.2493 29.5508 38.06V33C29.5508 32.8107 29.6577 32.6376 29.827 32.5529ZM30.5508 33.9988V37.0612L32.5964 35.53L30.5508 33.9988Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3301 35.53C18.3301 34.9777 18.7778 34.53 19.3301 34.53H29.7701C30.3224 34.53 30.7701 34.9777 30.7701 35.53C30.7701 36.0823 30.3224 36.53 29.7701 36.53H19.3301C18.7778 36.53 18.3301 36.0823 18.3301 35.53Z" fill="#528D19"/>
+<path d="M36.8405 7.67017L34.3105 11.0502H39.3705L36.8405 7.67017Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.8405 7.17017C36.9981 7.17017 37.1464 7.24442 37.2408 7.37055L39.7708 10.7505C39.8843 10.9021 39.9024 11.1047 39.8177 11.274C39.7329 11.4433 39.5598 11.5502 39.3705 11.5502H34.3105C34.1212 11.5502 33.9482 11.4433 33.8634 11.274C33.7787 11.1047 33.7968 10.9021 33.9103 10.7505L36.4403 7.37055C36.5347 7.24442 36.683 7.17017 36.8405 7.17017ZM35.3094 10.5502H38.3717L36.8405 8.50455L35.3094 10.5502Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.8398 10.3298C37.3921 10.3298 37.8398 10.7775 37.8398 11.3298V30.7698C37.8398 31.3221 37.3921 31.7698 36.8398 31.7698C36.2876 31.7698 35.8398 31.3221 35.8398 30.7698V11.3298C35.8398 10.7775 36.2876 10.3298 36.8398 10.3298Z" fill="#528D19"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_anti_join.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_anti_join.svg
new file mode 100644
index 0000000..c630bdf
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_anti_join.svg
@@ -0,0 +1,36 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1402 7.5H10.1602C9.33173 7.5 8.66016 8.17157 8.66016 9V55C8.66016 55.8284 9.33173 56.5 10.1602 56.5H16.1402C16.9686 56.5 17.6402 55.8284 17.6402 55V9C17.6402 8.17157 16.9686 7.5 16.1402 7.5Z" fill="#D3D4F3"/>
+<path d="M16.1406 8C16.4429 7.98463 16.7458 8.01156 17.0406 8.08C17.1394 8.37598 17.1735 8.68971 17.1406 9V55C17.1556 55.3023 17.1287 55.6051 17.0606 55.9C16.7647 55.9988 16.4509 56.0329 16.1406 56H10.1406C9.83836 56.0154 9.53544 55.9884 9.24062 55.92C9.14183 55.624 9.10773 55.3103 9.14063 55V9C9.12565 8.69775 9.15257 8.39487 9.22063 8.1C9.5166 8.00121 9.83034 7.96711 10.1406 8H16.1406ZM16.1406 7H10.1406C8.49063 7 8.14062 7.35 8.14062 9V55C8.14062 56.65 8.49063 57 10.1406 57H16.1406C17.7906 57 18.1406 56.65 18.1406 55V9C18.1406 7.35 17.7906 7 16.1406 7Z" fill="#666BD1"/>
+<path d="M8.66016 15.5V9C8.66016 7.63 8.79016 7.5 10.1602 7.5H16.1602C17.5302 7.5 17.6602 7.63 17.6602 9V15.5H8.66016Z" fill="#ADDFF3"/>
+<path d="M16.1406 8C16.4429 7.98463 16.7458 8.01156 17.0406 8.08C17.1394 8.37598 17.1735 8.68971 17.1406 9V15H9.14063V9C9.12565 8.69775 9.15257 8.39487 9.22063 8.1C9.5166 8.00121 9.83034 7.96711 10.1406 8H16.1406ZM16.1406 7H10.1406C8.49063 7 8.14062 7.35 8.14062 9V16H18.1406V9C18.1406 7.35 17.7906 7 16.1406 7Z" fill="#2980B9"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M9.16992 23.74H17.1299" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M9.16992 31.49H17.1299" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M9.16992 39.23H17.1299" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M9.16992 46.97H17.1299" stroke="#666BD1" stroke-linejoin="round"/>
+</g>
+<path d="M47.1797 46.22V18.22H53.3997C54.7697 18.22 54.8997 18.35 54.8997 19.72V44.72C54.8997 46.09 54.7697 46.22 53.3997 46.22H47.1797Z" fill="#D3D4F3"/>
+<path d="M53.3997 18.72C53.702 18.7046 54.0049 18.7315 54.2997 18.8C54.3985 19.0959 54.4326 19.4097 54.3997 19.72V44.72C54.4147 45.0222 54.3877 45.3251 54.3197 45.62C54.0237 45.7188 53.71 45.7529 53.3997 45.72H47.6797V18.72H53.3997ZM53.3997 17.72H46.6797V46.72H53.3997C55.0497 46.72 55.3997 46.37 55.3997 44.72V19.72C55.3997 18.07 55.0497 17.72 53.3997 17.72Z" fill="#666BD1"/>
+<path d="M26.4199 46.22C25.0499 46.22 24.9199 46.09 24.9199 44.72V24.22H47.1999V46.22H26.4199Z" fill="#F0ECB6"/>
+<path d="M46.6999 24.72V45.72H26.4199C26.1177 45.7353 25.8147 45.7084 25.5199 45.64C25.4211 45.344 25.387 45.0303 25.4199 44.72V24.72H46.6999ZM47.6999 23.72H24.4199V44.72C24.4199 46.37 24.7699 46.72 26.4199 46.72H47.6999V23.72Z" fill="#C18F35"/>
+<path d="M24.9199 24.22V19.72C24.9199 18.35 25.0499 18.22 26.4199 18.22H47.1999V24.22H24.9199Z" fill="#ADDFF3"/>
+<path d="M46.6999 18.72V23.72H25.4199V19.72C25.4049 19.4177 25.4319 19.1148 25.4999 18.82C25.7959 18.7212 26.1096 18.6871 26.4199 18.72H46.6999ZM47.6999 17.72H26.4199C24.7699 17.72 24.4199 18.07 24.4199 19.72V24.72H47.6999V17.72Z" fill="#2980B9"/>
+<path d="M32.3809 24.05V18.24" stroke="#2980B9" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M54.7792 24.22H47.6992" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M40.1309 24.05V18.24" stroke="#2980B9" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M32.3809 46.05V24.72" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M40.1309 46.05V24.72" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M24.9492 31.5698H47.1992" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M24.9492 38.96H47.1992" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M10.0508 32.8599H16.4208V37.9999H10.0508V32.8599Z" fill="#CC0000"/>
+<path d="M33.5898 32.71H38.9998V37.94H33.5998L33.5898 32.71Z" fill="#CC0000"/>
+<path d="M33.2101 35.53L29.8301 33V38.06L33.2101 35.53Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.6063 32.5529C29.7755 32.4682 29.9782 32.4863 30.1297 32.5997L33.5097 35.1297C33.6358 35.2241 33.7101 35.3725 33.7101 35.53C33.7101 35.6875 33.6358 35.8359 33.5097 35.9303L30.1297 38.4603C29.9782 38.5737 29.7755 38.5919 29.6063 38.5071C29.437 38.4224 29.3301 38.2493 29.3301 38.06V33C29.3301 32.8107 29.437 32.6376 29.6063 32.5529ZM30.3301 33.9988V37.0612L32.3757 35.53L30.3301 33.9988Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1094 35.53C18.1094 34.9777 18.5571 34.53 19.1094 34.53H29.5494C30.1017 34.53 30.5494 34.9777 30.5494 35.53C30.5494 36.0823 30.1017 36.53 29.5494 36.53H19.1094C18.5571 36.53 18.1094 36.0823 18.1094 35.53Z" fill="#528D19"/>
+<path d="M36.6198 7.67017L34.0898 11.0502H39.1498L36.6198 7.67017Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.6198 7.17017C36.7774 7.17017 36.9257 7.24442 37.0201 7.37054L39.5501 10.7505C39.6636 10.9021 39.6817 11.1047 39.597 11.274C39.5122 11.4433 39.3392 11.5502 39.1498 11.5502H34.0898C33.9005 11.5502 33.7275 11.4433 33.6427 11.274C33.558 11.1047 33.5761 10.9021 33.6896 10.7505L36.2196 7.37055C36.314 7.24442 36.4623 7.17017 36.6198 7.17017ZM36.6198 8.50455L35.0887 10.5502H38.151L36.6198 8.50455Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.6191 10.3298C37.1714 10.3298 37.6191 10.7775 37.6191 11.3298V30.7698C37.6191 31.3221 37.1714 31.7698 36.6191 31.7698C36.0669 31.7698 35.6191 31.3221 35.6191 30.7698V11.3298C35.6191 10.7775 36.0669 10.3298 36.6191 10.3298Z" fill="#528D19"/>
+<path d="M50.7998 38.6598C53.1691 38.6598 55.0898 36.7391 55.0898 34.3698C55.0898 32.0005 53.1691 30.0798 50.7998 30.0798C48.4305 30.0798 46.5098 32.0005 46.5098 34.3698C46.5098 36.7391 48.4305 38.6598 50.7998 38.6598Z" fill="#DEF4FD"/>
+<path d="M50.8008 30.8298C51.5009 30.8298 52.1854 31.0375 52.7675 31.4264C53.3497 31.8154 53.8034 32.3683 54.0713 33.0151C54.3393 33.662 54.4094 34.3738 54.2728 35.0605C54.1362 35.7471 53.799 36.3779 53.3039 36.873C52.8089 37.3681 52.1781 37.7052 51.4914 37.8418C50.8047 37.9784 50.0929 37.9083 49.4461 37.6404C48.7992 37.3724 48.2464 36.9187 47.8574 36.3366C47.4684 35.7544 47.2608 35.07 47.2608 34.3698C47.2634 33.4318 47.6372 32.5329 48.3005 31.8696C48.9638 31.2063 49.8627 30.8325 50.8008 30.8298ZM50.8008 29.3298C49.8119 29.3298 48.8452 29.6231 48.0229 30.1725C47.2007 30.7219 46.5598 31.5028 46.1814 32.4164C45.8029 33.33 45.7039 34.3354 45.8969 35.3053C46.0898 36.2752 46.566 37.1661 47.2652 37.8654C47.9645 38.5646 48.8554 39.0408 49.8253 39.2338C50.7952 39.4267 51.8006 39.3277 52.7142 38.9492C53.6278 38.5708 54.4087 37.9299 54.9581 37.1077C55.5075 36.2854 55.8008 35.3187 55.8008 34.3298C55.8008 33.0038 55.274 31.732 54.3363 30.7943C53.3986 29.8566 52.1269 29.3298 50.8008 29.3298Z" fill="#CC0000"/>
+<path d="M47.5195 36.6402L54.0295 31.9102" stroke="#CC0000" stroke-width="1.5" stroke-miterlimit="10"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_semi_join.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_semi_join.svg
new file mode 100644
index 0000000..6a77384
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_semi_join.svg
@@ -0,0 +1,35 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1602 56.5C8.79016 56.5 8.66016 56.37 8.66016 55V15.5H17.6602V55C17.6602 56.37 17.5302 56.5 16.1602 56.5H10.1602Z" fill="#D3D4F3"/>
+<path d="M17.1406 16V55C17.1556 55.3023 17.1287 55.6051 17.0606 55.9C16.7647 55.9988 16.4509 56.0329 16.1406 56H10.1406C9.83836 56.0154 9.53544 55.9884 9.24062 55.92C9.14183 55.624 9.10773 55.3103 9.14063 55V16H17.1406ZM18.1406 15H8.14062V55C8.14062 56.65 8.49063 57 10.1406 57H16.1406C17.7906 57 18.1406 56.65 18.1406 55V15Z" fill="#666BD1"/>
+<path d="M8.66016 15.5V9C8.66016 7.63 8.79016 7.5 10.1602 7.5H16.1602C17.5302 7.5 17.6602 7.63 17.6602 9V15.5H8.66016Z" fill="#ADDFF3"/>
+<path d="M16.1406 8C16.4429 7.98463 16.7458 8.01156 17.0406 8.08C17.1394 8.37598 17.1735 8.68971 17.1406 9V15H9.14063V9C9.12565 8.69775 9.15257 8.39487 9.22063 8.1C9.5166 8.00121 9.83034 7.96711 10.1406 8H16.1406ZM16.1406 7H10.1406C8.49063 7 8.14062 7.35 8.14062 9V16H18.1406V9C18.1406 7.35 17.7906 7 16.1406 7Z" fill="#2980B9"/>
+<g opacity="0.7">
+<path opacity="0.7" d="M9.16992 23.74H17.1299" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M9.16992 31.49H17.1299" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M9.16992 39.23H17.1299" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.7" d="M9.16992 46.97H17.1299" stroke="#666BD1" stroke-linejoin="round"/>
+</g>
+<path d="M47.1797 46.22V18.22H53.3997C54.7697 18.22 54.8997 18.35 54.8997 19.72V44.72C54.8997 46.09 54.7697 46.22 53.3997 46.22H47.1797Z" fill="#D3D4F3"/>
+<path d="M53.3997 18.72C53.702 18.7046 54.0049 18.7315 54.2997 18.8C54.3985 19.0959 54.4326 19.4097 54.3997 19.72V44.72C54.4147 45.0222 54.3877 45.3251 54.3197 45.62C54.0237 45.7188 53.71 45.7529 53.3997 45.72H47.6797V18.72H53.3997ZM53.3997 17.72H46.6797V46.72H53.3997C55.0497 46.72 55.3997 46.37 55.3997 44.72V19.72C55.3997 18.07 55.0497 17.72 53.3997 17.72Z" fill="#666BD1"/>
+<path d="M26.4199 46.22C25.0499 46.22 24.9199 46.09 24.9199 44.72V24.22H47.1999V46.22H26.4199Z" fill="#F0ECB6"/>
+<path d="M46.6999 24.72V45.72H26.4199C26.1177 45.7353 25.8147 45.7084 25.5199 45.64C25.4211 45.344 25.387 45.0303 25.4199 44.72V24.72H46.6999ZM47.6999 23.72H24.4199V44.72C24.4199 46.37 24.7699 46.72 26.4199 46.72H47.6999V23.72Z" fill="#C18F35"/>
+<path d="M24.9199 24.22V19.72C24.9199 18.35 25.0499 18.22 26.4199 18.22H47.1999V24.22H24.9199Z" fill="#ADDFF3"/>
+<path d="M46.6999 18.72V23.72H25.4199V19.72C25.4049 19.4177 25.4319 19.1148 25.4999 18.82C25.7959 18.7212 26.1096 18.6871 26.4199 18.72H46.6999ZM47.6999 17.72H26.4199C24.7699 17.72 24.4199 18.07 24.4199 19.72V24.72H47.6999V17.72Z" fill="#2980B9"/>
+<path d="M32.3809 24.05V18.24" stroke="#2980B9" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M54.7792 24.22H47.6992" stroke="#666BD1" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M54.7792 31.49H47.6992" stroke="#666BD1" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M54.7792 38.96H47.6992" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M40.1309 24.05V18.24" stroke="#2980B9" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M32.3809 46.05V24.72" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M40.1309 46.05V24.72" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M24.9492 31.5698H47.1992" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M24.9492 38.96H47.1992" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M10.0508 32.8599H16.4208V37.9999H10.0508V32.8599Z" fill="#CC0000"/>
+<path d="M33.5898 32.71H38.9998V37.94H33.5998L33.5898 32.71Z" fill="#CC0000"/>
+<path d="M33.2101 35.53L29.8301 33V38.06L33.2101 35.53Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.6063 32.5529C29.7755 32.4682 29.9782 32.4863 30.1297 32.5997L33.5097 35.1297C33.6358 35.2241 33.7101 35.3725 33.7101 35.53C33.7101 35.6875 33.6358 35.8359 33.5097 35.9303L30.1297 38.4603C29.9782 38.5737 29.7755 38.5919 29.6063 38.5071C29.437 38.4224 29.3301 38.2493 29.3301 38.06V33C29.3301 32.8107 29.437 32.6376 29.6063 32.5529ZM30.3301 33.9988V37.0612L32.3757 35.53L30.3301 33.9988Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1094 35.53C18.1094 34.9777 18.5571 34.53 19.1094 34.53H29.5494C30.1017 34.53 30.5494 34.9777 30.5494 35.53C30.5494 36.0823 30.1017 36.53 29.5494 36.53H19.1094C18.5571 36.53 18.1094 36.0823 18.1094 35.53Z" fill="#528D19"/>
+<path d="M36.6198 7.67017L34.0898 11.0502H39.1498L36.6198 7.67017Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.6198 7.17017C36.7774 7.17017 36.9257 7.24442 37.0201 7.37054L39.5501 10.7505C39.6636 10.9021 39.6817 11.1047 39.597 11.274C39.5122 11.4433 39.3392 11.5502 39.1498 11.5502H34.0898C33.9005 11.5502 33.7275 11.4433 33.6427 11.274C33.558 11.1047 33.5761 10.9021 33.6896 10.7505L36.2196 7.37055C36.314 7.24442 36.4623 7.17017 36.6198 7.17017ZM36.6198 8.50455L35.0887 10.5502H38.151L36.6198 8.50455Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.6191 10.3298C37.1714 10.3298 37.6191 10.7775 37.6191 11.3298V30.7698C37.6191 31.3221 37.1714 31.7698 36.6191 31.7698C36.0669 31.7698 35.6191 31.3221 35.6191 30.7698V11.3298C35.6191 10.7775 36.0669 10.3298 36.6191 10.3298Z" fill="#528D19"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_except.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_except.svg
new file mode 100644
index 0000000..121b44c
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_except.svg
@@ -0,0 +1,28 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1602 58.21C11.7902 58.21 11.6602 58.08 11.6602 56.71V39.52H18.6602V56.71C18.6602 58.08 18.5302 58.21 17.1602 58.21H13.1602Z" fill="#F0ECB6"/>
+<path d="M18.1504 40V56.71C18.1654 57.0123 18.1384 57.3151 18.0704 57.61C17.7744 57.7088 17.4607 57.7429 17.1504 57.71H13.1504C12.8481 57.7254 12.5452 57.6984 12.2504 57.63C12.1513 57.3341 12.1172 57.0203 12.1504 56.71V40H18.1504ZM19.1504 39H11.1504V56.71C11.1504 58.36 11.5004 58.71 13.1504 58.71H17.1504C18.8004 58.71 19.1504 58.36 19.1504 56.71V39Z" fill="#C18F35"/>
+<path opacity="0.8" d="M12.0508 45.8699H18.2908" stroke="#C18F35" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M12.0508 51.79H18.2908" stroke="#C18F35" stroke-miterlimit="10"/>
+<path d="M11.6602 11.6702V7.17017C11.6602 5.80017 11.7902 5.67017 13.1602 5.67017H17.1602C18.5302 5.67017 18.6602 5.80017 18.6602 7.17017V11.6702H11.6602Z" fill="#ADDFF3"/>
+<path d="M17.1504 6.17017C17.4527 6.1548 17.7556 6.18172 18.0504 6.25017C18.1492 6.54614 18.1833 6.85988 18.1504 7.17017V11.1702H12.1504V7.17017C12.1354 6.86791 12.1623 6.56504 12.2304 6.27017C12.5264 6.17138 12.8401 6.13727 13.1504 6.17017H17.1504ZM17.1504 5.17017H13.1504C11.5004 5.17017 11.1504 5.52017 11.1504 7.17017V12.1702H19.1504V7.17017C19.1504 5.52017 18.8004 5.17017 17.1504 5.17017Z" fill="#2980B9"/>
+<path d="M13.1602 30.3602C11.7902 30.3602 11.6602 30.2302 11.6602 28.8602V11.6702H18.6602V28.8602C18.6602 30.2302 18.5302 30.3602 17.1602 30.3602H13.1602Z" fill="#D3D4F3"/>
+<path d="M18.1504 12.1702V28.8602C18.1654 29.1624 18.1384 29.4653 18.0704 29.7602C17.7744 29.859 17.4607 29.8931 17.1504 29.8602H13.1504C12.8481 29.8755 12.5452 29.8486 12.2504 29.7802C12.1516 29.4842 12.1175 29.1705 12.1504 28.8602V12.1702H18.1504ZM19.1504 11.1702H11.1504V28.8602C11.1504 30.5102 11.5004 30.8602 13.1504 30.8602H17.1504C18.8004 30.8602 19.1504 30.5102 19.1504 28.8602V11.1702Z" fill="#666BD1"/>
+<path opacity="0.8" d="M12.0508 18.02H18.2908" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M12.0508 23.9402H18.2908" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M11.6602 39.52V35C11.6602 33.63 11.7902 33.5 13.1602 33.5H17.1602C18.5302 33.5 18.6602 33.63 18.6602 35V39.5L11.6602 39.52Z" fill="#ADDFF3"/>
+<path d="M17.1504 34C17.4527 33.9846 17.7556 34.0116 18.0504 34.08C18.1495 34.3759 18.1836 34.6897 18.1504 35V39H12.1504V35C12.1354 34.6977 12.1623 34.3949 12.2304 34.1C12.5264 34.0012 12.8401 33.9671 13.1504 34H17.1504ZM17.1504 33H13.1504C11.5004 33 11.1504 33.35 11.1504 35V40H19.1504V35C19.1504 33.35 18.8004 33 17.1504 33Z" fill="#2980B9"/>
+<path d="M22.2507 41.12C22.9652 41.1182 23.6686 40.9432 24.3007 40.61C24.7461 40.3537 25.1128 39.9802 25.3607 39.53C25.5883 39.0956 25.7244 38.6191 25.7607 38.13C25.8007 37.63 25.8207 37.1433 25.8207 36.67V37C25.8207 36.32 25.8207 35.75 25.8207 35.28C25.8553 34.8832 25.9154 34.4891 26.0007 34.1C26.043 33.8113 26.1307 33.5312 26.2607 33.27C26.3749 33.0481 26.5234 32.8456 26.7007 32.67C26.8826 32.4859 27.0917 32.3307 27.3207 32.21C27.5258 32.1016 27.7399 32.0113 27.9607 31.94C28.1565 31.8792 28.3573 31.8357 28.5607 31.81C28.7507 31.81 28.7507 31.71 28.5607 31.69C28.3573 31.6642 28.1565 31.6207 27.9607 31.56C27.7393 31.4906 27.525 31.4001 27.3207 31.29C27.0916 31.1694 26.8825 31.0143 26.7007 30.83C26.5239 30.654 26.3754 30.4516 26.2607 30.23C26.1309 29.9688 26.0431 29.6886 26.0007 29.4C25.9382 29.0028 25.9014 28.602 25.8907 28.2C25.8907 27.7267 25.8907 27.15 25.8907 26.47V26.83C25.8907 26.36 25.8907 25.83 25.8307 25.37C25.7947 24.8809 25.6585 24.4043 25.4307 23.97C25.1619 23.5144 24.7703 23.1436 24.3007 22.9C23.6679 22.5687 22.965 22.3938 22.2507 22.39V22H22.7807C23.0067 22.0181 23.2308 22.0549 23.4507 22.11C23.696 22.1688 23.9367 22.2457 24.1707 22.34C24.4222 22.4431 24.6578 22.5811 24.8707 22.75C25.2005 22.9963 25.4819 23.3014 25.7007 23.65C25.8997 23.9817 26.0448 24.3429 26.1307 24.72C26.22 25.1411 26.2702 25.5696 26.2807 26C26.2807 26.47 26.2807 27.88 26.2807 27.88C26.2729 28.3827 26.3131 28.885 26.4007 29.38C26.4672 29.7668 26.6287 30.131 26.8707 30.44C27.1417 30.7589 27.4844 31.009 27.8707 31.17C27.9699 31.232 28.0517 31.3183 28.1084 31.4206C28.1651 31.5229 28.1948 31.638 28.1948 31.755C28.1948 31.872 28.1651 31.9871 28.1084 32.0894C28.0517 32.1917 27.9699 32.278 27.8707 32.34C27.4846 32.5013 27.142 32.7514 26.8707 33.07C26.6294 33.3794 26.468 33.7434 26.4007 34.13C26.3131 34.625 26.2729 35.1273 26.2807 35.63C26.2807 35.63 26.1907 38.41 26.1007 38.8C26.015 39.1772 25.8698 39.5384 25.6707 39.87C25.4524 40.219 25.1709 40.5242 24.8407 40.77C24.6277 40.9388 24.3921 41.0768 24.1407 41.18C23.9064 41.2734 23.6658 41.3503 23.4207 41.41C23.2006 41.4641 22.9766 41.5009 22.7507 41.52H22.2207L22.2507 41.12Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M35.1797 37.79C33.8097 37.79 33.6797 37.66 33.6797 36.29V24.79H40.9997V37.79H35.1797Z" fill="#F0ECB6"/>
+<path d="M40.4597 25.29V37.29H35.1797C34.8774 37.3054 34.5745 37.2785 34.2797 37.21C34.1806 36.9141 34.1465 36.6003 34.1797 36.29V25.29H40.4597ZM41.4597 24.29H33.1797V36.29C33.1797 37.94 33.5297 38.29 35.1797 38.29H41.4597V24.29Z" fill="#C18F35"/>
+<path d="M40.9492 37.79V24.79H48.2292V36.29C48.2292 37.66 48.0992 37.79 46.7292 37.79H40.9492Z" fill="#D3D4F3"/>
+<path d="M47.7292 25.29V36.29C47.7442 36.5923 47.7173 36.8952 47.6492 37.19C47.3532 37.2888 47.0395 37.3229 46.7292 37.29H41.4492V25.29H47.7292ZM48.7292 24.29H40.4492V38.29H46.7292C48.3792 38.29 48.7292 37.94 48.7292 36.29V24.29Z" fill="#666BD1"/>
+<path d="M33.6797 24.79V20.29C33.6797 18.92 33.8097 18.79 35.1797 18.79H40.9997V24.79H33.6797Z" fill="#ADDFF3"/>
+<path d="M40.4597 19.29V24.29H34.1797V20.29C34.1647 19.9878 34.1916 19.6849 34.2597 19.39C34.5557 19.2912 34.8694 19.2571 35.1797 19.29H40.4597ZM41.4597 18.29H35.1797C33.5297 18.29 33.1797 18.64 33.1797 20.29V25.29H41.4597V18.29Z" fill="#2980B9"/>
+<path d="M40.9492 24.79V18.79H46.7292C48.0992 18.79 48.2292 18.92 48.2292 20.29V24.79H40.9492Z" fill="#ADDFF3"/>
+<path d="M46.7292 19.29C47.0315 19.2747 47.3344 19.3016 47.6292 19.37C47.728 19.666 47.7621 19.9797 47.7292 20.29V24.29H41.4492V19.29H46.7292ZM46.7292 18.29H40.4492V25.29H48.7292V20.29C48.7292 18.64 48.3792 18.29 46.7292 18.29Z" fill="#2980B9"/>
+<path opacity="0.8" d="M40.7109 31.1401H48.2009" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M33.7109 31.1401H40.4509" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M36.0003 50.4201C36.0044 48.7967 36.4788 47.2093 37.3662 45.8499C38.2535 44.4904 39.5158 43.4172 41.0003 42.7601C39.7212 42.1867 38.3188 41.9425 36.9211 42.0498C35.5234 42.1571 34.1748 42.6125 32.9981 43.3745C31.8215 44.1364 30.8542 45.1808 30.1846 46.4123C29.5149 47.6438 29.1641 49.0233 29.1641 50.4251C29.1641 51.827 29.5149 53.2065 30.1846 54.438C30.8542 55.6695 31.8215 56.7139 32.9981 57.4758C34.1748 58.2378 35.5234 58.6932 36.9211 58.8005C38.3188 58.9078 39.7212 58.6636 41.0003 58.0901C39.5143 57.4324 38.2509 56.3576 37.3635 54.9962C36.476 53.6349 36.0025 52.0453 36.0003 50.4201Z" fill="#88F625"/>
+<path d="M37.5602 43.4001C38.9249 43.4001 40.2589 43.8048 41.3936 44.563C42.5283 45.3212 43.4127 46.3988 43.9349 47.6596C44.4572 48.9204 44.5938 50.3078 44.3276 51.6463C44.0613 52.9847 43.4042 54.2142 42.4392 55.1792C41.4742 56.1442 40.2448 56.8013 38.9063 57.0676C37.5678 57.3338 36.1805 57.1972 34.9196 56.6749C33.6588 56.1527 32.5812 55.2683 31.823 54.1336C31.0648 52.9989 30.6602 51.6648 30.6602 50.3001C30.6628 48.471 31.3906 46.7175 32.684 45.424C33.9775 44.1306 35.731 43.4028 37.5602 43.4001ZM37.5602 41.9001C35.8988 41.9001 34.2747 42.3928 32.8934 43.3158C31.512 44.2388 30.4353 45.5507 29.7996 47.0856C29.1638 48.6205 28.9974 50.3095 29.3216 51.9389C29.6457 53.5683 30.4457 55.0651 31.6205 56.2398C32.7952 57.4146 34.292 58.2146 35.9214 58.5387C37.5508 58.8629 39.2398 58.6965 40.7747 58.0607C42.3096 57.425 43.6215 56.3483 44.5445 54.9669C45.4675 53.5856 45.9602 51.9615 45.9602 50.3001C45.9602 48.0723 45.0752 45.9358 43.4999 44.3604C41.9246 42.7851 39.788 41.9001 37.5602 41.9001Z" fill="#C18F35"/>
+<path d="M44.4293 43.4001C45.794 43.4001 47.128 43.8048 48.2627 44.563C49.3974 45.3212 50.2818 46.3988 50.8041 47.6596C51.3263 48.9204 51.463 50.3078 51.1967 51.6463C50.9305 52.9847 50.2733 54.2142 49.3083 55.1792C48.3434 56.1442 47.1139 56.8013 45.7754 57.0676C44.437 57.3338 43.0496 57.1972 41.7888 56.6749C40.528 56.1527 39.4503 55.2683 38.6922 54.1336C37.934 52.9989 37.5293 51.6648 37.5293 50.3001C37.5319 48.471 38.2598 46.7175 39.5532 45.424C40.8466 44.1306 42.6001 43.4028 44.4293 43.4001ZM44.4293 41.9001C42.7679 41.9001 41.1439 42.3928 39.7625 43.3158C38.3811 44.2388 37.3045 45.5507 36.6687 47.0856C36.0329 48.6205 35.8666 50.3095 36.1907 51.9389C36.5148 53.5683 37.3148 55.0651 38.4896 56.2398C39.6644 57.4146 41.1611 58.2146 42.7905 58.5387C44.42 58.8629 46.1089 58.6965 47.6438 58.0607C49.1787 57.425 50.4906 56.3483 51.4137 54.9669C52.3367 53.5856 52.8293 51.9615 52.8293 50.3001C52.8293 48.0723 51.9443 45.9358 50.369 44.3604C48.7937 42.7851 46.6571 41.9001 44.4293 41.9001Z" fill="#666BD1"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_except_all.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_except_all.svg
new file mode 100644
index 0000000..381fdc2
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_except_all.svg
@@ -0,0 +1,31 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1602 58.21C11.7902 58.21 11.6602 58.08 11.6602 56.71V39.52H18.6602V56.71C18.6602 58.08 18.5302 58.21 17.1602 58.21H13.1602Z" fill="#F0ECB6"/>
+<path d="M18.1504 40V56.71C18.1654 57.0123 18.1384 57.3151 18.0704 57.61C17.7744 57.7088 17.4607 57.7429 17.1504 57.71H13.1504C12.8481 57.7254 12.5452 57.6984 12.2504 57.63C12.1513 57.3341 12.1172 57.0203 12.1504 56.71V40H18.1504ZM19.1504 39H11.1504V56.71C11.1504 58.36 11.5004 58.71 13.1504 58.71H17.1504C18.8004 58.71 19.1504 58.36 19.1504 56.71V39Z" fill="#C18F35"/>
+<path opacity="0.8" d="M12.0508 45.8699H18.2908" stroke="#C18F35" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M12.0508 51.79H18.2908" stroke="#C18F35" stroke-miterlimit="10"/>
+<path d="M11.6602 11.6702V7.17017C11.6602 5.80017 11.7902 5.67017 13.1602 5.67017H17.1602C18.5302 5.67017 18.6602 5.80017 18.6602 7.17017V11.6702H11.6602Z" fill="#ADDFF3"/>
+<path d="M17.1504 6.17017C17.4527 6.1548 17.7556 6.18172 18.0504 6.25017C18.1495 6.54607 18.1836 6.85988 18.1504 7.17017V11.1702H12.1504V7.17017C12.1354 6.86791 12.1623 6.56504 12.2304 6.27017C12.5264 6.17138 12.8401 6.13727 13.1504 6.17017H17.1504ZM17.1504 5.17017H13.1504C11.5004 5.17017 11.1504 5.52017 11.1504 7.17017V12.1702H19.1504V7.17017C19.1504 5.52017 18.8004 5.17017 17.1504 5.17017Z" fill="#2980B9"/>
+<path d="M13.1602 30.3602C11.7902 30.3602 11.6602 30.2302 11.6602 28.8602V11.6702H18.6602V28.8602C18.6602 30.2302 18.5302 30.3602 17.1602 30.3602H13.1602Z" fill="#D3D4F3"/>
+<path d="M18.1504 12.1702V28.8602C18.1654 29.1624 18.1384 29.4653 18.0704 29.7602C17.7744 29.859 17.4607 29.8931 17.1504 29.8602H13.1504C12.8481 29.8755 12.5452 29.8486 12.2504 29.7802C12.1513 29.4843 12.1172 29.1705 12.1504 28.8602V12.1702H18.1504ZM19.1504 11.1702H11.1504V28.8602C11.1504 30.5102 11.5004 30.8602 13.1504 30.8602H17.1504C18.8004 30.8602 19.1504 30.5102 19.1504 28.8602V11.1702Z" fill="#666BD1"/>
+<path opacity="0.8" d="M12.0508 18.02H18.2908" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M12.0508 23.9402H18.2908" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M11.6602 39.52V35C11.6602 33.63 11.7902 33.5 13.1602 33.5H17.1602C18.5302 33.5 18.6602 33.63 18.6602 35V39.5L11.6602 39.52Z" fill="#ADDFF3"/>
+<path d="M17.1504 34C17.4527 33.9846 17.7556 34.0116 18.0504 34.08C18.1495 34.3759 18.1836 34.6897 18.1504 35V39H12.1504V35C12.1354 34.6977 12.1623 34.3949 12.2304 34.1C12.5264 34.0012 12.8401 33.9671 13.1504 34H17.1504ZM17.1504 33H13.1504C11.5004 33 11.1504 33.35 11.1504 35V40H19.1504V35C19.1504 33.35 18.8004 33 17.1504 33Z" fill="#2980B9"/>
+<path d="M22.2507 41.12C22.9652 41.1182 23.6686 40.9432 24.3007 40.61C24.7461 40.3537 25.1128 39.9802 25.3607 39.53C25.5883 39.0956 25.7244 38.6191 25.7607 38.13C25.8007 37.63 25.8207 37.1433 25.8207 36.67V37C25.8207 36.32 25.8207 35.75 25.8207 35.28C25.8553 34.8832 25.9154 34.4891 26.0007 34.1C26.043 33.8113 26.1307 33.5312 26.2607 33.27C26.3749 33.0481 26.5234 32.8456 26.7007 32.67C26.8826 32.4859 27.0917 32.3307 27.3207 32.21C27.5258 32.1016 27.7399 32.0113 27.9607 31.94C28.1565 31.8792 28.3573 31.8357 28.5607 31.81C28.7507 31.81 28.7507 31.71 28.5607 31.69C28.3573 31.6642 28.1565 31.6207 27.9607 31.56C27.7393 31.4906 27.525 31.4001 27.3207 31.29C27.0916 31.1694 26.8825 31.0143 26.7007 30.83C26.5239 30.654 26.3754 30.4516 26.2607 30.23C26.1309 29.9688 26.0431 29.6886 26.0007 29.4C25.9382 29.0028 25.9014 28.602 25.8907 28.2C25.8907 27.7267 25.8907 27.15 25.8907 26.47V26.83C25.8907 26.36 25.8907 25.83 25.8307 25.37C25.7947 24.8809 25.6585 24.4043 25.4307 23.97C25.1619 23.5144 24.7703 23.1436 24.3007 22.9C23.6679 22.5687 22.965 22.3938 22.2507 22.39V22H22.7807C23.0067 22.0181 23.2308 22.0549 23.4507 22.11C23.696 22.1688 23.9367 22.2457 24.1707 22.34C24.4222 22.4431 24.6578 22.5811 24.8707 22.75C25.2005 22.9963 25.4819 23.3014 25.7007 23.65C25.8997 23.9817 26.0448 24.3429 26.1307 24.72C26.22 25.1411 26.2702 25.5696 26.2807 26C26.2807 26.47 26.2807 27.88 26.2807 27.88C26.2729 28.3827 26.3131 28.885 26.4007 29.38C26.4672 29.7668 26.6287 30.131 26.8707 30.44C27.1417 30.7589 27.4844 31.009 27.8707 31.17C27.9699 31.232 28.0517 31.3183 28.1084 31.4206C28.1651 31.5229 28.1948 31.638 28.1948 31.755C28.1948 31.872 28.1651 31.9871 28.1084 32.0894C28.0517 32.1917 27.9699 32.278 27.8707 32.34C27.4846 32.5013 27.142 32.7514 26.8707 33.07C26.6294 33.3794 26.468 33.7434 26.4007 34.13C26.3131 34.625 26.2729 35.1273 26.2807 35.63C26.2807 35.63 26.1907 38.41 26.1007 38.8C26.015 39.1772 25.8698 39.5384 25.6707 39.87C25.4524 40.219 25.1709 40.5242 24.8407 40.77C24.6277 40.9388 24.3921 41.0768 24.1407 41.18C23.9064 41.2734 23.6658 41.3503 23.4207 41.41C23.2006 41.4641 22.9766 41.5009 22.7507 41.52H22.2207L22.2507 41.12Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M35.1797 37.79C33.8097 37.79 33.6797 37.66 33.6797 36.29V24.79H40.9997V37.79H35.1797Z" fill="#F0ECB6"/>
+<path d="M40.4597 25.29V37.29H35.1797C34.8774 37.3054 34.5745 37.2785 34.2797 37.21C34.1809 36.9141 34.1468 36.6003 34.1797 36.29V25.29H40.4597ZM41.4597 24.29H33.1797V36.29C33.1797 37.94 33.5297 38.29 35.1797 38.29H41.4597V24.29Z" fill="#C18F35"/>
+<path d="M40.9492 37.79V24.79H48.2292V36.29C48.2292 37.66 48.0992 37.79 46.7292 37.79H40.9492Z" fill="#D3D4F3"/>
+<path d="M47.7292 25.29V36.29C47.7442 36.5923 47.7173 36.8952 47.6492 37.19C47.3532 37.2888 47.0395 37.3229 46.7292 37.29H41.4492V25.29H47.7292ZM48.7292 24.29H40.4492V38.29H46.7292C48.3792 38.29 48.7292 37.94 48.7292 36.29V24.29Z" fill="#666BD1"/>
+<path d="M33.6797 24.79V20.29C33.6797 18.92 33.8097 18.79 35.1797 18.79H40.9997V24.79H33.6797Z" fill="#ADDFF3"/>
+<path d="M40.4597 19.29V24.29H34.1797V20.29C34.1647 19.9878 34.1916 19.6849 34.2597 19.39C34.5557 19.2912 34.8694 19.2571 35.1797 19.29H40.4597ZM41.4597 18.29H35.1797C33.5297 18.29 33.1797 18.64 33.1797 20.29V25.29H41.4597V18.29Z" fill="#2980B9"/>
+<path d="M40.9492 24.79V18.79H46.7292C48.0992 18.79 48.2292 18.92 48.2292 20.29V24.79H40.9492Z" fill="#ADDFF3"/>
+<path d="M46.7292 19.29C47.0315 19.2747 47.3344 19.3016 47.6292 19.37C47.7283 19.6659 47.7624 19.9797 47.7292 20.29V24.29H41.4492V19.29H46.7292ZM46.7292 18.29H40.4492V25.29H48.7292V20.29C48.7292 18.64 48.3792 18.29 46.7292 18.29Z" fill="#2980B9"/>
+<path opacity="0.8" d="M40.7109 31.1401H48.2009" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M33.7109 31.1401H40.4509" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M36.0003 50.4201C36.0044 48.7967 36.4788 47.2093 37.3662 45.8499C38.2535 44.4904 39.5158 43.4172 41.0003 42.7601C39.7212 42.1867 38.3188 41.9425 36.9211 42.0498C35.5234 42.1571 34.1748 42.6125 32.9981 43.3745C31.8215 44.1364 30.8542 45.1808 30.1846 46.4123C29.5149 47.6438 29.1641 49.0233 29.1641 50.4251C29.1641 51.827 29.5149 53.2065 30.1846 54.438C30.8542 55.6695 31.8215 56.7139 32.9981 57.4758C34.1748 58.2378 35.5234 58.6932 36.9211 58.8005C38.3188 58.9078 39.7212 58.6636 41.0003 58.0901C39.5143 57.4324 38.2509 56.3576 37.3635 54.9962C36.476 53.6349 36.0025 52.0453 36.0003 50.4201Z" fill="#88F625"/>
+<path d="M37.5602 43.4001C38.9249 43.4001 40.2589 43.8048 41.3936 44.563C42.5283 45.3212 43.4127 46.3988 43.9349 47.6596C44.4572 48.9204 44.5938 50.3078 44.3276 51.6463C44.0613 52.9847 43.4042 54.2142 42.4392 55.1792C41.4742 56.1442 40.2448 56.8013 38.9063 57.0676C37.5678 57.3338 36.1805 57.1972 34.9196 56.6749C33.6588 56.1527 32.5812 55.2683 31.823 54.1336C31.0648 52.9989 30.6602 51.6648 30.6602 50.3001C30.6628 48.471 31.3906 46.7175 32.684 45.424C33.9775 44.1306 35.731 43.4028 37.5602 43.4001ZM37.5602 41.9001C35.8988 41.9001 34.2747 42.3928 32.8934 43.3158C31.512 44.2388 30.4353 45.5507 29.7996 47.0856C29.1638 48.6205 28.9974 50.3095 29.3216 51.9389C29.6457 53.5683 30.4457 55.0651 31.6205 56.2398C32.7952 57.4146 34.292 58.2146 35.9214 58.5387C37.5508 58.8629 39.2398 58.6965 40.7747 58.0607C42.3096 57.425 43.6215 56.3483 44.5445 54.9669C45.4675 53.5856 45.9602 51.9615 45.9602 50.3001C45.9602 48.0723 45.0752 45.9358 43.4999 44.3604C41.9246 42.7851 39.788 41.9001 37.5602 41.9001Z" fill="#C18F35"/>
+<path d="M44.4293 43.4001C45.794 43.4001 47.128 43.8048 48.2627 44.563C49.3974 45.3212 50.2818 46.3988 50.8041 47.6596C51.3263 48.9204 51.463 50.3078 51.1967 51.6463C50.9305 52.9847 50.2733 54.2142 49.3083 55.1792C48.3434 56.1442 47.1139 56.8013 45.7754 57.0676C44.437 57.3338 43.0496 57.1972 41.7888 56.6749C40.528 56.1527 39.4503 55.2683 38.6922 54.1336C37.934 52.9989 37.5293 51.6648 37.5293 50.3001C37.5319 48.471 38.2598 46.7175 39.5532 45.424C40.8466 44.1306 42.6001 43.4028 44.4293 43.4001ZM44.4293 41.9001C42.7679 41.9001 41.1439 42.3928 39.7625 43.3158C38.3811 44.2388 37.3045 45.5507 36.6687 47.0856C36.0329 48.6205 35.8666 50.3095 36.1907 51.9389C36.5148 53.5683 37.3148 55.0651 38.4896 56.2398C39.6644 57.4146 41.1611 58.2146 42.7905 58.5387C44.42 58.8629 46.1089 58.6965 47.6438 58.0607C49.1787 57.425 50.4906 56.3483 51.4137 54.9669C52.3367 53.5856 52.8293 51.9615 52.8293 50.3001C52.8293 48.0723 51.9443 45.9358 50.369 44.3604C48.7937 42.7851 46.6571 41.9001 44.4293 41.9001Z" fill="#666BD1"/>
+<path d="M22.8062 14.5723H24.4497L23.6411 12.0234L22.8062 14.5723ZM22.8896 10.5425H24.4189L26.7129 17.02H25.2451L24.8276 15.6885H22.4414L21.9932 17.02H20.5781L22.8896 10.5425Z" fill="#34495E"/>
+<path d="M28.7168 17.02H27.4644V10.5425H28.7168V17.02Z" fill="#34495E"/>
+<path d="M31.2217 17.02H29.9692V10.5425H31.2217V17.02Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_intersect.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_intersect.svg
new file mode 100644
index 0000000..6976005
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_intersect.svg
@@ -0,0 +1,28 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41.0008 42.7C39.5309 43.3666 38.2841 44.4427 37.4097 45.7993C36.5353 47.156 36.0703 48.7359 36.0703 50.3499C36.0703 51.964 36.5353 53.5439 37.4097 54.9006C38.2841 56.2572 39.5309 57.3333 41.0008 58C42.4707 57.3333 43.7175 56.2572 44.5919 54.9006C45.4663 53.5439 45.9313 51.964 45.9313 50.3499C45.9313 48.7359 45.4663 47.156 44.5919 45.7993C43.7175 44.4427 42.4707 43.3666 41.0008 42.7Z" fill="#88F625"/>
+<path d="M13.1602 58.2698C11.7902 58.2698 11.6602 58.1398 11.6602 56.7698V39.5798H18.6602V56.7698C18.6602 58.1398 18.5302 58.2698 17.1602 58.2698H13.1602Z" fill="#F0ECB6"/>
+<path d="M18.1504 40.0798V56.7698C18.1654 57.0721 18.1384 57.375 18.0704 57.6698C17.7744 57.7686 17.4607 57.8027 17.1504 57.7698H13.1504C12.8481 57.7852 12.5452 57.7583 12.2504 57.6898C12.1513 57.3939 12.1172 57.0801 12.1504 56.7698V40.0798H18.1504ZM19.1504 39.0798H11.1504V56.7698C11.1504 58.4198 11.5004 58.7698 13.1504 58.7698H17.1504C18.8004 58.7698 19.1504 58.4198 19.1504 56.7698V39.0798Z" fill="#C18F35"/>
+<path opacity="0.8" d="M12.0508 45.9302H18.2908" stroke="#C18F35" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M12.0508 51.8499H18.2908" stroke="#C18F35" stroke-miterlimit="10"/>
+<path d="M11.6602 11.73V7.22998C11.6602 5.85998 11.7902 5.72998 13.1602 5.72998H17.1602C18.5302 5.72998 18.6602 5.85998 18.6602 7.22998V11.73H11.6602Z" fill="#ADDFF3"/>
+<path d="M17.1504 6.22998C17.4527 6.21461 17.7556 6.24154 18.0504 6.30998C18.1495 6.60589 18.1836 6.91969 18.1504 7.22998V11.23H12.1504V7.22998C12.1354 6.92773 12.1623 6.62485 12.2304 6.32998C12.5264 6.23119 12.8401 6.19709 13.1504 6.22998H17.1504ZM17.1504 5.22998H13.1504C11.5004 5.22998 11.1504 5.57998 11.1504 7.22998V12.23H19.1504V7.22998C19.1504 5.57998 18.8004 5.22998 17.1504 5.22998Z" fill="#2980B9"/>
+<path d="M13.1602 30.42C11.7902 30.42 11.6602 30.29 11.6602 28.92V11.73H18.6602V28.92C18.6602 30.29 18.5302 30.42 17.1602 30.42H13.1602Z" fill="#D3D4F3"/>
+<path d="M18.1504 12.23V28.92C18.1654 29.2222 18.1384 29.5251 18.0704 29.82C17.7744 29.9188 17.4607 29.9529 17.1504 29.92H13.1504C12.8481 29.9354 12.5452 29.9084 12.2504 29.84C12.1513 29.5441 12.1172 29.2303 12.1504 28.92V12.23H18.1504ZM19.1504 11.23H11.1504V28.92C11.1504 30.57 11.5004 30.92 13.1504 30.92H17.1504C18.8004 30.92 19.1504 30.57 19.1504 28.92V11.23Z" fill="#666BD1"/>
+<path opacity="0.8" d="M12.0508 18.0798H18.2908" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M12.0508 24H18.2908" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M11.6602 39.5798V35.0798C11.6602 33.7098 11.7902 33.5798 13.1602 33.5798H17.1602C18.5302 33.5798 18.6602 33.7098 18.6602 35.0798V39.5798H11.6602Z" fill="#ADDFF3"/>
+<path d="M17.1504 34.0798C17.4527 34.0645 17.7556 34.0914 18.0504 34.1598C18.1495 34.4557 18.1836 34.7695 18.1504 35.0798V39.0798H12.1504V35.0798C12.1354 34.7776 12.1623 34.4747 12.2304 34.1798C12.5264 34.081 12.8401 34.0469 13.1504 34.0798H17.1504ZM17.1504 33.0798H13.1504C11.5004 33.0798 11.1504 33.4298 11.1504 35.0798V40.0798H19.1504V35.0798C19.1504 33.4298 18.8004 33.0798 17.1504 33.0798Z" fill="#2980B9"/>
+<path d="M22.2505 41.18C22.965 41.1782 23.6684 41.0032 24.3005 40.67C24.7459 40.4137 25.1125 40.0402 25.3605 39.59C25.588 39.1556 25.7242 38.6791 25.7605 38.19C25.8005 37.69 25.8205 37.2033 25.8205 36.73V37.08C25.8205 36.4 25.8205 35.83 25.8205 35.36C25.8311 34.958 25.8678 34.5572 25.9305 34.16C25.9727 33.8713 26.0605 33.5912 26.1905 33.33C26.3046 33.1081 26.4531 32.9056 26.6305 32.73C26.8124 32.5458 27.0215 32.3907 27.2505 32.27C27.4556 32.1616 27.6697 32.0713 27.8905 32C28.0863 31.9392 28.287 31.8957 28.4905 31.87C28.6805 31.87 28.6805 31.77 28.4905 31.75C28.2871 31.7242 28.0863 31.6807 27.8905 31.62C27.669 31.5505 27.4547 31.4601 27.2505 31.35C27.0214 31.2294 26.8123 31.0743 26.6305 30.89C26.4536 30.714 26.3052 30.5116 26.1905 30.29C26.0606 30.0288 25.9729 29.7486 25.9305 29.46C25.8679 29.0628 25.8312 28.662 25.8205 28.26C25.8205 27.7867 25.8205 27.21 25.8205 26.53V26.89C25.8205 26.42 25.8205 25.89 25.7605 25.43C25.7244 24.9409 25.5883 24.4643 25.3605 24.03C25.105 23.5985 24.7391 23.243 24.3005 23C23.6677 22.6687 22.9647 22.4938 22.2505 22.49V22H22.7805C23.0065 22.0181 23.2306 22.0549 23.4505 22.11C23.6958 22.1688 23.9365 22.2457 24.1705 22.34C24.4219 22.4431 24.6576 22.5811 24.8705 22.75C25.2002 22.9963 25.4816 23.3014 25.7005 23.65C25.8994 23.9817 26.0446 24.3429 26.1305 24.72C26.2237 25.1441 26.2773 25.576 26.2905 26.01C26.2905 26.48 26.2905 27.89 26.2905 27.89C26.2827 28.3927 26.3228 28.895 26.4105 29.39C26.477 29.7768 26.6385 30.141 26.8805 30.45C27.1515 30.7689 27.4942 31.019 27.8805 31.18C27.9797 31.242 28.0614 31.3283 28.1181 31.4306C28.1748 31.5329 28.2046 31.648 28.2046 31.765C28.2046 31.882 28.1748 31.9971 28.1181 32.0994C28.0614 32.2017 27.9797 32.288 27.8805 32.35C27.4944 32.5113 27.1517 32.7614 26.8805 33.08C26.6392 33.3894 26.4778 33.7534 26.4105 34.14C26.3228 34.635 26.2827 35.1373 26.2905 35.64C26.2905 35.64 26.2005 38.42 26.1105 38.81C26.0247 39.1872 25.8796 39.5484 25.6805 39.88C25.4622 40.229 25.1807 40.5342 24.8505 40.78C24.6375 40.9488 24.4019 41.0868 24.1505 41.19C23.9161 41.2834 23.6756 41.3603 23.4305 41.42C23.2104 41.4741 22.9863 41.5109 22.7605 41.53H22.2305L22.2505 41.18Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M35.1797 37.8498C33.8097 37.8498 33.6797 37.7198 33.6797 36.3498V24.8499H40.9997V37.8498H35.1797Z" fill="#F0ECB6"/>
+<path d="M40.4597 25.3499V37.3498H35.1797C34.8774 37.3652 34.5745 37.3383 34.2797 37.2698C34.1806 36.9739 34.1465 36.6601 34.1797 36.3498V25.3499H40.4597ZM41.4597 24.3499H33.1797V36.3498C33.1797 37.9998 33.5297 38.3498 35.1797 38.3498H41.4597V24.3499Z" fill="#C18F35"/>
+<path d="M40.9492 37.8498V24.8499H48.2292V36.3498C48.2292 37.7198 48.0992 37.8498 46.7292 37.8498H40.9492Z" fill="#D3D4F3"/>
+<path d="M47.7292 25.3499V36.3498C47.7442 36.6521 47.7173 36.955 47.6492 37.2498C47.3532 37.3486 47.0395 37.3827 46.7292 37.3498H41.4492V25.3499H47.7292ZM48.7292 24.3499H40.4492V38.3498H46.7292C48.3792 38.3498 48.7292 37.9998 48.7292 36.3498V24.3499Z" fill="#666BD1"/>
+<path d="M33.6797 24.8499V20.3499C33.6797 18.9799 33.8097 18.8499 35.1797 18.8499H40.9997V24.8499H33.6797Z" fill="#ADDFF3"/>
+<path d="M40.4597 19.3499V24.3499H34.1797V20.3499C34.1647 20.0476 34.1916 19.7447 34.2597 19.4499C34.5557 19.3511 34.8694 19.317 35.1797 19.3499H40.4597ZM41.4597 18.3499H35.1797C33.5297 18.3499 33.1797 18.6999 33.1797 20.3499V25.3499H41.4597V18.3499Z" fill="#2980B9"/>
+<path d="M40.9492 24.8499V18.8499H46.7292C48.0992 18.8499 48.2292 18.9799 48.2292 20.3499V24.8499H40.9492Z" fill="#ADDFF3"/>
+<path d="M46.7292 19.3499C47.0315 19.3345 47.3344 19.3614 47.6292 19.4299C47.728 19.7258 47.7621 20.0396 47.7292 20.3499V24.3499H41.4492V19.3499H46.7292ZM46.7292 18.3499H40.4492V25.3499H48.7292V20.3499C48.7292 18.6999 48.3792 18.3499 46.7292 18.3499Z" fill="#2980B9"/>
+<path opacity="0.8" d="M40.7109 31.2H48.2009" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M33.7109 31.2H40.4509" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M37.5602 43.46C38.9249 43.46 40.2589 43.8646 41.3936 44.6228C42.5283 45.381 43.4127 46.4586 43.9349 47.7194C44.4572 48.9803 44.5938 50.3676 44.3276 51.7061C44.0613 53.0446 43.4042 54.274 42.4392 55.239C41.4742 56.204 40.2448 56.8611 38.9063 57.1274C37.5678 57.3936 36.1805 57.257 34.9196 56.7347C33.6588 56.2125 32.5812 55.3281 31.823 54.1934C31.0648 53.0587 30.6602 51.7247 30.6602 50.36C30.6628 48.5308 31.3906 46.7773 32.684 45.4839C33.9775 44.1904 35.731 43.4626 37.5602 43.46ZM37.5602 41.96C35.8988 41.96 34.2747 42.4526 32.8934 43.3756C31.512 44.2986 30.4353 45.6105 29.7996 47.1454C29.1638 48.6803 28.9974 50.3693 29.3216 51.9987C29.6457 53.6282 30.4457 55.1249 31.6205 56.2997C32.7952 57.4744 34.292 58.2744 35.9214 58.5986C37.5508 58.9227 39.2398 58.7563 40.7747 58.1206C42.3096 57.4848 43.6215 56.4081 44.5445 55.0268C45.4675 53.6454 45.9602 52.0213 45.9602 50.36C45.9602 48.1321 45.0752 45.9956 43.4999 44.4203C41.9246 42.845 39.788 41.96 37.5602 41.96Z" fill="#C18F35"/>
+<path d="M44.4293 43.46C45.794 43.46 47.128 43.8646 48.2627 44.6228C49.3974 45.381 50.2818 46.4586 50.8041 47.7194C51.3263 48.9803 51.463 50.3676 51.1967 51.7061C50.9305 53.0446 50.2733 54.274 49.3083 55.239C48.3434 56.204 47.1139 56.8611 45.7754 57.1274C44.437 57.3936 43.0496 57.257 41.7888 56.7347C40.528 56.2125 39.4503 55.3281 38.6922 54.1934C37.934 53.0587 37.5293 51.7247 37.5293 50.36C37.5319 48.5308 38.2598 46.7773 39.5532 45.4839C40.8466 44.1904 42.6001 43.4626 44.4293 43.46ZM44.4293 41.96C42.7679 41.96 41.1439 42.4526 39.7625 43.3756C38.3811 44.2986 37.3045 45.6105 36.6687 47.1454C36.0329 48.6803 35.8666 50.3693 36.1907 51.9987C36.5148 53.6282 37.3148 55.1249 38.4896 56.2997C39.6644 57.4744 41.1611 58.2744 42.7905 58.5986C44.42 58.9227 46.1089 58.7563 47.6438 58.1206C49.1787 57.4848 50.4906 56.4081 51.4137 55.0268C52.3367 53.6454 52.8293 52.0213 52.8293 50.36C52.8293 48.1321 51.9443 45.9956 50.369 44.4203C48.7937 42.845 46.6571 41.96 44.4293 41.96Z" fill="#666BD1"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_intersect_all.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_intersect_all.svg
new file mode 100644
index 0000000..7c105fa
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_intersect_all.svg
@@ -0,0 +1,31 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41.0008 42.7C39.5309 43.3666 38.2841 44.4427 37.4097 45.7993C36.5353 47.156 36.0703 48.7359 36.0703 50.3499C36.0703 51.964 36.5353 53.5439 37.4097 54.9006C38.2841 56.2572 39.5309 57.3333 41.0008 58C42.4707 57.3333 43.7175 56.2572 44.5919 54.9006C45.4663 53.5439 45.9313 51.964 45.9313 50.3499C45.9313 48.7359 45.4663 47.156 44.5919 45.7993C43.7175 44.4427 42.4707 43.3666 41.0008 42.7Z" fill="#88F625"/>
+<path d="M13.1602 58.2698C11.7902 58.2698 11.6602 58.1398 11.6602 56.7698V39.5798H18.6602V56.7698C18.6602 58.1398 18.5302 58.2698 17.1602 58.2698H13.1602Z" fill="#F0ECB6"/>
+<path d="M18.1504 40.0798V56.7698C18.1654 57.0721 18.1384 57.375 18.0704 57.6698C17.7744 57.7686 17.4607 57.8027 17.1504 57.7698H13.1504C12.8481 57.7852 12.5452 57.7583 12.2504 57.6898C12.1513 57.3939 12.1172 57.0801 12.1504 56.7698V40.0798H18.1504ZM19.1504 39.0798H11.1504V56.7698C11.1504 58.4198 11.5004 58.7698 13.1504 58.7698H17.1504C18.8004 58.7698 19.1504 58.4198 19.1504 56.7698V39.0798Z" fill="#C18F35"/>
+<path opacity="0.8" d="M12.0508 45.9302H18.2908" stroke="#C18F35" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M12.0508 51.8499H18.2908" stroke="#C18F35" stroke-miterlimit="10"/>
+<path d="M11.6602 11.73V7.22998C11.6602 5.85998 11.7902 5.72998 13.1602 5.72998H17.1602C18.5302 5.72998 18.6602 5.85998 18.6602 7.22998V11.73H11.6602Z" fill="#ADDFF3"/>
+<path d="M17.1504 6.22998C17.4527 6.21461 17.7556 6.24154 18.0504 6.30998C18.1495 6.60589 18.1836 6.91969 18.1504 7.22998V11.23H12.1504V7.22998C12.1354 6.92773 12.1623 6.62485 12.2304 6.32998C12.5264 6.23119 12.8401 6.19709 13.1504 6.22998H17.1504ZM17.1504 5.22998H13.1504C11.5004 5.22998 11.1504 5.57998 11.1504 7.22998V12.23H19.1504V7.22998C19.1504 5.57998 18.8004 5.22998 17.1504 5.22998Z" fill="#2980B9"/>
+<path d="M13.1602 30.42C11.7902 30.42 11.6602 30.29 11.6602 28.92V11.73H18.6602V28.92C18.6602 30.29 18.5302 30.42 17.1602 30.42H13.1602Z" fill="#D3D4F3"/>
+<path d="M18.1504 12.23V28.92C18.1654 29.2222 18.1384 29.5251 18.0704 29.82C17.7744 29.9188 17.4607 29.9529 17.1504 29.92H13.1504C12.8481 29.9354 12.5452 29.9084 12.2504 29.84C12.1513 29.5441 12.1172 29.2303 12.1504 28.92V12.23H18.1504ZM19.1504 11.23H11.1504V28.92C11.1504 30.57 11.5004 30.92 13.1504 30.92H17.1504C18.8004 30.92 19.1504 30.57 19.1504 28.92V11.23Z" fill="#666BD1"/>
+<path opacity="0.8" d="M12.0508 18.0798H18.2908" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M12.0508 24H18.2908" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M11.6602 39.5798V35.0798C11.6602 33.7098 11.7902 33.5798 13.1602 33.5798H17.1602C18.5302 33.5798 18.6602 33.7098 18.6602 35.0798V39.5798H11.6602Z" fill="#ADDFF3"/>
+<path d="M17.1504 34.0798C17.4527 34.0645 17.7556 34.0914 18.0504 34.1598C18.1495 34.4557 18.1836 34.7695 18.1504 35.0798V39.0798H12.1504V35.0798C12.1354 34.7776 12.1623 34.4747 12.2304 34.1798C12.5264 34.081 12.8401 34.0469 13.1504 34.0798H17.1504ZM17.1504 33.0798H13.1504C11.5004 33.0798 11.1504 33.4298 11.1504 35.0798V40.0798H19.1504V35.0798C19.1504 33.4298 18.8004 33.0798 17.1504 33.0798Z" fill="#2980B9"/>
+<path d="M22.2505 41.18C22.965 41.1782 23.6684 41.0032 24.3005 40.67C24.7459 40.4137 25.1125 40.0402 25.3605 39.59C25.588 39.1556 25.7242 38.6791 25.7605 38.19C25.8005 37.69 25.8205 37.2033 25.8205 36.73V37.08C25.8205 36.4 25.8205 35.83 25.8205 35.36C25.8311 34.958 25.8678 34.5572 25.9305 34.16C25.9727 33.8713 26.0605 33.5912 26.1905 33.33C26.3046 33.1081 26.4531 32.9056 26.6305 32.73C26.8124 32.5458 27.0215 32.3907 27.2505 32.27C27.4556 32.1616 27.6697 32.0713 27.8905 32C28.0863 31.9392 28.287 31.8957 28.4905 31.87C28.6805 31.87 28.6805 31.77 28.4905 31.75C28.2871 31.7242 28.0863 31.6807 27.8905 31.62C27.669 31.5505 27.4547 31.4601 27.2505 31.35C27.0214 31.2294 26.8123 31.0743 26.6305 30.89C26.4536 30.714 26.3052 30.5116 26.1905 30.29C26.0606 30.0288 25.9729 29.7486 25.9305 29.46C25.8679 29.0628 25.8312 28.662 25.8205 28.26C25.8205 27.7867 25.8205 27.21 25.8205 26.53V26.89C25.8205 26.42 25.8205 25.89 25.7605 25.43C25.7244 24.9409 25.5883 24.4643 25.3605 24.03C25.105 23.5985 24.7391 23.243 24.3005 23C23.6677 22.6687 22.9647 22.4938 22.2505 22.49V22H22.7805C23.0065 22.0181 23.2306 22.0549 23.4505 22.11C23.6958 22.1688 23.9365 22.2457 24.1705 22.34C24.4219 22.4431 24.6576 22.5811 24.8705 22.75C25.2002 22.9963 25.4816 23.3014 25.7005 23.65C25.8994 23.9817 26.0446 24.3429 26.1305 24.72C26.2237 25.1441 26.2773 25.576 26.2905 26.01C26.2905 26.48 26.2905 27.89 26.2905 27.89C26.2827 28.3927 26.3228 28.895 26.4105 29.39C26.477 29.7768 26.6385 30.141 26.8805 30.45C27.1515 30.7689 27.4942 31.019 27.8805 31.18C27.9797 31.242 28.0614 31.3283 28.1181 31.4306C28.1748 31.5329 28.2046 31.648 28.2046 31.765C28.2046 31.882 28.1748 31.9971 28.1181 32.0994C28.0614 32.2017 27.9797 32.288 27.8805 32.35C27.4944 32.5113 27.1517 32.7614 26.8805 33.08C26.6392 33.3894 26.4778 33.7534 26.4105 34.14C26.3228 34.635 26.2827 35.1373 26.2905 35.64C26.2905 35.64 26.2005 38.42 26.1105 38.81C26.0247 39.1872 25.8796 39.5484 25.6805 39.88C25.4622 40.229 25.1807 40.5342 24.8505 40.78C24.6375 40.9488 24.4019 41.0868 24.1505 41.19C23.9161 41.2834 23.6756 41.3603 23.4305 41.42C23.2104 41.4741 22.9863 41.5109 22.7605 41.53H22.2305L22.2505 41.18Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M35.1797 37.8498C33.8097 37.8498 33.6797 37.7198 33.6797 36.3498V24.8499H40.9997V37.8498H35.1797Z" fill="#F0ECB6"/>
+<path d="M40.4597 25.3499V37.3498H35.1797C34.8774 37.3652 34.5745 37.3383 34.2797 37.2698C34.1806 36.9739 34.1465 36.6601 34.1797 36.3498V25.3499H40.4597ZM41.4597 24.3499H33.1797V36.3498C33.1797 37.9998 33.5297 38.3498 35.1797 38.3498H41.4597V24.3499Z" fill="#C18F35"/>
+<path d="M40.9492 37.8498V24.8499H48.2292V36.3498C48.2292 37.7198 48.0992 37.8498 46.7292 37.8498H40.9492Z" fill="#D3D4F3"/>
+<path d="M47.7292 25.3499V36.3498C47.7442 36.6521 47.7173 36.955 47.6492 37.2498C47.3532 37.3486 47.0395 37.3827 46.7292 37.3498H41.4492V25.3499H47.7292ZM48.7292 24.3499H40.4492V38.3498H46.7292C48.3792 38.3498 48.7292 37.9998 48.7292 36.3498V24.3499Z" fill="#666BD1"/>
+<path d="M33.6797 24.8499V20.3499C33.6797 18.9799 33.8097 18.8499 35.1797 18.8499H40.9997V24.8499H33.6797Z" fill="#ADDFF3"/>
+<path d="M40.4597 19.3499V24.3499H34.1797V20.3499C34.1647 20.0476 34.1916 19.7447 34.2597 19.4499C34.5557 19.3511 34.8694 19.317 35.1797 19.3499H40.4597ZM41.4597 18.3499H35.1797C33.5297 18.3499 33.1797 18.6999 33.1797 20.3499V25.3499H41.4597V18.3499Z" fill="#2980B9"/>
+<path d="M40.9492 24.8499V18.8499H46.7292C48.0992 18.8499 48.2292 18.9799 48.2292 20.3499V24.8499H40.9492Z" fill="#ADDFF3"/>
+<path d="M46.7292 19.3499C47.0315 19.3345 47.3344 19.3614 47.6292 19.4299C47.7283 19.7258 47.7624 20.0396 47.7292 20.3499V24.3499H41.4492V19.3499H46.7292ZM46.7292 18.3499H40.4492V25.3499H48.7292V20.3499C48.7292 18.6999 48.3792 18.3499 46.7292 18.3499Z" fill="#2980B9"/>
+<path opacity="0.8" d="M40.7109 31.2H48.2009" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M33.7109 31.2H40.4509" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M37.5602 43.46C38.9249 43.46 40.2589 43.8646 41.3936 44.6228C42.5283 45.381 43.4127 46.4586 43.9349 47.7194C44.4572 48.9803 44.5938 50.3676 44.3276 51.7061C44.0613 53.0446 43.4042 54.274 42.4392 55.239C41.4742 56.204 40.2448 56.8611 38.9063 57.1274C37.5678 57.3936 36.1805 57.257 34.9196 56.7347C33.6588 56.2125 32.5812 55.3281 31.823 54.1934C31.0648 53.0587 30.6602 51.7247 30.6602 50.36C30.6628 48.5308 31.3906 46.7773 32.684 45.4839C33.9775 44.1904 35.731 43.4626 37.5602 43.46ZM37.5602 41.96C35.8988 41.96 34.2747 42.4526 32.8934 43.3756C31.512 44.2986 30.4353 45.6105 29.7996 47.1454C29.1638 48.6803 28.9974 50.3693 29.3216 51.9987C29.6457 53.6282 30.4457 55.1249 31.6205 56.2997C32.7952 57.4744 34.292 58.2744 35.9214 58.5986C37.5508 58.9227 39.2398 58.7563 40.7747 58.1206C42.3096 57.4848 43.6215 56.4081 44.5445 55.0268C45.4675 53.6454 45.9602 52.0213 45.9602 50.36C45.9602 48.1321 45.0752 45.9956 43.4999 44.4203C41.9246 42.845 39.788 41.96 37.5602 41.96Z" fill="#C18F35"/>
+<path d="M44.4293 43.46C45.794 43.46 47.128 43.8646 48.2627 44.6228C49.3974 45.381 50.2818 46.4586 50.8041 47.7194C51.3263 48.9803 51.463 50.3676 51.1967 51.7061C50.9305 53.0446 50.2733 54.274 49.3083 55.239C48.3434 56.204 47.1139 56.8611 45.7754 57.1274C44.437 57.3936 43.0496 57.257 41.7888 56.7347C40.528 56.2125 39.4503 55.3281 38.6922 54.1934C37.934 53.0587 37.5293 51.7247 37.5293 50.36C37.5319 48.5308 38.2598 46.7773 39.5532 45.4839C40.8466 44.1904 42.6001 43.4626 44.4293 43.46ZM44.4293 41.96C42.7679 41.96 41.1439 42.4526 39.7625 43.3756C38.3811 44.2986 37.3045 45.6105 36.6687 47.1454C36.0329 48.6803 35.8666 50.3693 36.1907 51.9987C36.5148 53.6282 37.3148 55.1249 38.4896 56.2997C39.6644 57.4744 41.1611 58.2744 42.7905 58.5986C44.42 58.9227 46.1089 58.7563 47.6438 58.1206C49.1787 57.4848 50.4906 56.4081 51.4137 55.0268C52.3367 53.6454 52.8293 52.0213 52.8293 50.36C52.8293 48.1321 51.9443 45.9956 50.369 44.4203C48.7937 42.845 46.6571 41.96 44.4293 41.96Z" fill="#666BD1"/>
+<path d="M23.437 14.9121H25.0806L24.272 12.3633L23.437 14.9121ZM23.5205 10.8823H25.0498L27.3438 17.3599H25.876L25.4585 16.0283H23.0723L22.624 17.3599H21.209L23.5205 10.8823Z" fill="#34495E"/>
+<path d="M29.3477 17.3599H28.0952V10.8823H29.3477V17.3599Z" fill="#34495E"/>
+<path d="M31.8525 17.3599H30.6001V10.8823H31.8525V17.3599Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_unknown.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_unknown.svg
new file mode 100644
index 0000000..1d963f5
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_hash_setop_unknown.svg
@@ -0,0 +1,28 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1602 58.2698C11.7902 58.2698 11.6602 58.1398 11.6602 56.7698V39.5798H18.6602V56.7698C18.6602 58.1398 18.5302 58.2698 17.1602 58.2698H13.1602Z" fill="#F0ECB6"/>
+<path d="M18.1504 40.0798V56.7698C18.1654 57.0721 18.1384 57.375 18.0704 57.6698C17.7744 57.7686 17.4607 57.8027 17.1504 57.7698H13.1504C12.8481 57.7852 12.5452 57.7583 12.2504 57.6898C12.1513 57.3939 12.1172 57.0801 12.1504 56.7698V40.0798H18.1504ZM19.1504 39.0798H11.1504V56.7698C11.1504 58.4198 11.5004 58.7698 13.1504 58.7698H17.1504C18.8004 58.7698 19.1504 58.4198 19.1504 56.7698V39.0798Z" fill="#C18F35"/>
+<path opacity="0.8" d="M12.0508 45.9302H18.2908" stroke="#C18F35" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M12.0508 51.8499H18.2908" stroke="#C18F35" stroke-miterlimit="10"/>
+<path d="M11.6602 11.73V7.22998C11.6602 5.85998 11.7902 5.72998 13.1602 5.72998H17.1602C18.5302 5.72998 18.6602 5.85998 18.6602 7.22998V11.73H11.6602Z" fill="#ADDFF3"/>
+<path d="M17.1504 6.22998C17.4527 6.21461 17.7556 6.24154 18.0504 6.30998C18.1495 6.60589 18.1836 6.91969 18.1504 7.22998V11.23H12.1504V7.22998C12.1354 6.92773 12.1623 6.62485 12.2304 6.32998C12.5264 6.23119 12.8401 6.19709 13.1504 6.22998H17.1504ZM17.1504 5.22998H13.1504C11.5004 5.22998 11.1504 5.57998 11.1504 7.22998V12.23H19.1504V7.22998C19.1504 5.57998 18.8004 5.22998 17.1504 5.22998Z" fill="#2980B9"/>
+<path d="M13.1602 30.42C11.7902 30.42 11.6602 30.29 11.6602 28.92V11.73H18.6602V28.92C18.6602 30.29 18.5302 30.42 17.1602 30.42H13.1602Z" fill="#D3D4F3"/>
+<path d="M18.1504 12.23V28.92C18.1654 29.2222 18.1384 29.5251 18.0704 29.82C17.7744 29.9188 17.4607 29.9529 17.1504 29.92H13.1504C12.8481 29.9354 12.5452 29.9084 12.2504 29.84C12.1513 29.5441 12.1172 29.2303 12.1504 28.92V12.23H18.1504ZM19.1504 11.23H11.1504V28.92C11.1504 30.57 11.5004 30.92 13.1504 30.92H17.1504C18.8004 30.92 19.1504 30.57 19.1504 28.92V11.23Z" fill="#666BD1"/>
+<path opacity="0.8" d="M12.0508 18.0798H18.2908" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M12.0508 24H18.2908" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M11.6602 39.5798V35.0798C11.6602 33.7098 11.7902 33.5798 13.1602 33.5798H17.1602C18.5302 33.5798 18.6602 33.7098 18.6602 35.0798V39.5798H11.6602Z" fill="#ADDFF3"/>
+<path d="M17.1504 34.0798C17.4527 34.0645 17.7556 34.0914 18.0504 34.1598C18.1495 34.4557 18.1836 34.7695 18.1504 35.0798V39.0798H12.1504V35.0798C12.1354 34.7776 12.1623 34.4747 12.2304 34.1798C12.5264 34.081 12.8401 34.0469 13.1504 34.0798H17.1504ZM17.1504 33.0798H13.1504C11.5004 33.0798 11.1504 33.4298 11.1504 35.0798V40.0798H19.1504V35.0798C19.1504 33.4298 18.8004 33.0798 17.1504 33.0798Z" fill="#2980B9"/>
+<path d="M22.2505 41.18C22.965 41.1782 23.6684 41.0032 24.3005 40.67C24.7459 40.4137 25.1125 40.0402 25.3605 39.59C25.588 39.1556 25.7242 38.6791 25.7605 38.19C25.8005 37.69 25.8205 37.2033 25.8205 36.73V37.08C25.8205 36.4 25.8205 35.83 25.8205 35.36C25.8311 34.958 25.8678 34.5572 25.9305 34.16C25.9727 33.8713 26.0605 33.5912 26.1905 33.33C26.3046 33.1081 26.4531 32.9056 26.6305 32.73C26.8124 32.5458 27.0215 32.3907 27.2505 32.27C27.4556 32.1616 27.6697 32.0713 27.8905 32C28.0863 31.9392 28.287 31.8957 28.4905 31.87C28.6805 31.87 28.6805 31.77 28.4905 31.75C28.2871 31.7242 28.0863 31.6807 27.8905 31.62C27.669 31.5505 27.4547 31.4601 27.2505 31.35C27.0214 31.2294 26.8123 31.0743 26.6305 30.89C26.4536 30.714 26.3052 30.5116 26.1905 30.29C26.0606 30.0288 25.9729 29.7486 25.9305 29.46C25.8679 29.0628 25.8312 28.662 25.8205 28.26C25.8205 27.7867 25.8205 27.21 25.8205 26.53V26.89C25.8205 26.42 25.8205 25.89 25.7605 25.43C25.7244 24.9409 25.5883 24.4643 25.3605 24.03C25.105 23.5985 24.7391 23.243 24.3005 23C23.6677 22.6687 22.9647 22.4938 22.2505 22.49V22H22.7805C23.0065 22.0181 23.2306 22.0549 23.4505 22.11C23.6958 22.1688 23.9365 22.2457 24.1705 22.34C24.4219 22.4431 24.6576 22.5811 24.8705 22.75C25.2002 22.9963 25.4816 23.3014 25.7005 23.65C25.8994 23.9817 26.0446 24.3429 26.1305 24.72C26.2237 25.1441 26.2773 25.576 26.2905 26.01C26.2905 26.48 26.2905 27.89 26.2905 27.89C26.2827 28.3927 26.3228 28.895 26.4105 29.39C26.477 29.7768 26.6385 30.141 26.8805 30.45C27.1515 30.7689 27.4942 31.019 27.8805 31.18C27.9797 31.242 28.0614 31.3283 28.1181 31.4306C28.1748 31.5329 28.2046 31.648 28.2046 31.765C28.2046 31.882 28.1748 31.9971 28.1181 32.0994C28.0614 32.2017 27.9797 32.288 27.8805 32.35C27.4944 32.5113 27.1517 32.7614 26.8805 33.08C26.6392 33.3894 26.4778 33.7534 26.4105 34.14C26.3228 34.635 26.2827 35.1373 26.2905 35.64C26.2905 35.64 26.2005 38.42 26.1105 38.81C26.0247 39.1872 25.8796 39.5484 25.6805 39.88C25.4622 40.229 25.1807 40.5342 24.8505 40.78C24.6375 40.9488 24.4019 41.0868 24.1505 41.19C23.9161 41.2834 23.6756 41.3603 23.4305 41.42C23.2104 41.4741 22.9863 41.5109 22.7605 41.53H22.2305L22.2505 41.18Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M35.1797 37.8498C33.8097 37.8498 33.6797 37.7198 33.6797 36.3498V24.8499H40.9997V37.8498H35.1797Z" fill="#F0ECB6"/>
+<path d="M40.4597 25.3499V37.3498H35.1797C34.8774 37.3652 34.5745 37.3383 34.2797 37.2698C34.1806 36.9739 34.1465 36.6601 34.1797 36.3498V25.3499H40.4597ZM41.4597 24.3499H33.1797V36.3498C33.1797 37.9998 33.5297 38.3498 35.1797 38.3498H41.4597V24.3499Z" fill="#C18F35"/>
+<path d="M40.9492 37.8498V24.8499H48.2292V36.3498C48.2292 37.7198 48.0992 37.8498 46.7292 37.8498H40.9492Z" fill="#D3D4F3"/>
+<path d="M47.7292 25.3499V36.3498C47.7442 36.6521 47.7173 36.955 47.6492 37.2498C47.3532 37.3486 47.0395 37.3827 46.7292 37.3498H41.4492V25.3499H47.7292ZM48.7292 24.3499H40.4492V38.3498H46.7292C48.3792 38.3498 48.7292 37.9998 48.7292 36.3498V24.3499Z" fill="#666BD1"/>
+<path d="M33.6797 24.8499V20.3499C33.6797 18.9799 33.8097 18.8499 35.1797 18.8499H40.9997V24.8499H33.6797Z" fill="#ADDFF3"/>
+<path d="M40.4597 19.3499V24.3499H34.1797V20.3499C34.1647 20.0476 34.1916 19.7447 34.2597 19.4499C34.5557 19.3511 34.8694 19.317 35.1797 19.3499H40.4597ZM41.4597 18.3499H35.1797C33.5297 18.3499 33.1797 18.6999 33.1797 20.3499V25.3499H41.4597V18.3499Z" fill="#2980B9"/>
+<path d="M40.9492 24.8499V18.8499H46.7292C48.0992 18.8499 48.2292 18.9799 48.2292 20.3499V24.8499H40.9492Z" fill="#ADDFF3"/>
+<path d="M46.7292 19.3499C47.0315 19.3345 47.3344 19.3614 47.6292 19.4299C47.728 19.7258 47.7621 20.0396 47.7292 20.3499V24.3499H41.4492V19.3499H46.7292ZM46.7292 18.3499H40.4492V25.3499H48.7292V20.3499C48.7292 18.6999 48.3792 18.3499 46.7292 18.3499Z" fill="#2980B9"/>
+<path opacity="0.8" d="M40.7109 31.2H48.2009" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M33.7109 31.2H40.4509" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M37.5602 43.46C38.9249 43.46 40.2589 43.8646 41.3936 44.6228C42.5283 45.381 43.4127 46.4586 43.9349 47.7194C44.4572 48.9803 44.5938 50.3676 44.3276 51.7061C44.0613 53.0446 43.4042 54.274 42.4392 55.239C41.4742 56.204 40.2448 56.8611 38.9063 57.1274C37.5678 57.3936 36.1805 57.257 34.9196 56.7347C33.6588 56.2125 32.5812 55.3281 31.823 54.1934C31.0648 53.0587 30.6602 51.7247 30.6602 50.36C30.6628 48.5308 31.3906 46.7773 32.684 45.4839C33.9775 44.1904 35.731 43.4626 37.5602 43.46ZM37.5602 41.96C35.8988 41.96 34.2747 42.4526 32.8934 43.3756C31.512 44.2986 30.4353 45.6105 29.7996 47.1454C29.1638 48.6803 28.9974 50.3693 29.3216 51.9987C29.6457 53.6282 30.4457 55.1249 31.6205 56.2997C32.7952 57.4744 34.292 58.2744 35.9214 58.5986C37.5508 58.9227 39.2398 58.7563 40.7747 58.1206C42.3096 57.4848 43.6215 56.4081 44.5445 55.0268C45.4675 53.6454 45.9602 52.0213 45.9602 50.36C45.9602 48.1321 45.0752 45.9956 43.4999 44.4203C41.9246 42.845 39.788 41.96 37.5602 41.96Z" fill="#C18F35"/>
+<path d="M44.4293 43.46C45.794 43.46 47.128 43.8646 48.2627 44.6228C49.3974 45.381 50.2818 46.4586 50.8041 47.7194C51.3263 48.9803 51.463 50.3676 51.1967 51.7061C50.9305 53.0446 50.2733 54.274 49.3083 55.239C48.3434 56.204 47.1139 56.8611 45.7754 57.1274C44.437 57.3936 43.0496 57.257 41.7888 56.7347C40.528 56.2125 39.4503 55.3281 38.6922 54.1934C37.934 53.0587 37.5293 51.7247 37.5293 50.36C37.5319 48.5308 38.2598 46.7773 39.5532 45.4839C40.8466 44.1904 42.6001 43.4626 44.4293 43.46ZM44.4293 41.96C42.7679 41.96 41.1439 42.4526 39.7625 43.3756C38.3811 44.2986 37.3045 45.6105 36.6687 47.1454C36.0329 48.6803 35.8666 50.3693 36.1907 51.9987C36.5148 53.6282 37.3148 55.1249 38.4896 56.2997C39.6644 57.4744 41.1611 58.2744 42.7905 58.5986C44.42 58.9227 46.1089 58.7563 47.6438 58.1206C49.1787 57.4848 50.4906 56.4081 51.4137 55.0268C52.3367 53.6454 52.8293 52.0213 52.8293 50.36C52.8293 48.1321 51.9443 45.9956 50.369 44.4203C48.7937 42.845 46.6571 41.96 44.4293 41.96Z" fill="#666BD1"/>
+<path d="M40.4341 51.5798H41.7437V52.8499H40.4341V51.5798ZM38.8301 48.4158C38.8652 47.5808 39.1567 46.989 39.7046 46.6404C40.0503 46.4177 40.4751 46.3064 40.979 46.3064C41.6411 46.3064 42.1904 46.4646 42.627 46.781C43.0664 47.0974 43.2861 47.5662 43.2861 48.1873C43.2861 48.5681 43.1909 48.8889 43.0005 49.1497C42.8892 49.3079 42.6753 49.51 42.3589 49.7561L42.0469 49.9978C41.877 50.1296 41.7642 50.2834 41.7085 50.4592C41.6733 50.5706 41.6543 50.7434 41.6514 50.9778H40.4648C40.4824 50.4827 40.5293 50.1414 40.6055 49.9539C40.6816 49.7634 40.8779 49.5452 41.1943 49.2991L41.5151 49.0486C41.6206 48.9695 41.7056 48.8831 41.77 48.7893C41.8872 48.6282 41.9458 48.4509 41.9458 48.2576C41.9458 48.0349 41.8799 47.8328 41.7481 47.6511C41.6191 47.4666 41.3818 47.3743 41.0361 47.3743C40.6963 47.3743 40.4546 47.4871 40.311 47.7126C40.1704 47.9382 40.1001 48.1726 40.1001 48.4158H38.8301Z" fill="#CC0000"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_index_only_scan.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_index_only_scan.svg
new file mode 100644
index 0000000..800ce00
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_index_only_scan.svg
@@ -0,0 +1,27 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.2156 24.2231C37.3188 24.4027 37.2569 24.6319 37.0773 24.7351L25.0873 31.6251C24.9077 31.7283 24.6785 31.6664 24.5753 31.4868C24.4721 31.3072 24.534 31.078 24.7136 30.9748L36.7036 24.0848C36.8832 23.9816 37.1124 24.0436 37.2156 24.2231Z" fill="#747474"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.5656 24.223C36.6689 24.0435 36.8981 23.9816 37.0776 24.0849L49.0576 30.9749C49.2372 31.0782 49.299 31.3074 49.1958 31.4869C49.0925 31.6665 48.8633 31.7283 48.6837 31.625L36.7037 24.735C36.5242 24.6318 36.4624 24.4026 36.5656 24.223Z" fill="#747474"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.1646 36.9544C25.3113 37.1006 25.3117 37.338 25.1655 37.4847L19.1855 43.4847C19.0393 43.6314 18.8019 43.6318 18.6552 43.4856C18.5085 43.3394 18.5081 43.1019 18.6543 42.9552L24.6343 36.9552C24.7805 36.8086 25.018 36.8082 25.1646 36.9544Z" fill="#747474"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.6354 36.9546C24.782 36.8083 25.0195 36.8085 25.1658 36.955L31.1558 42.955C31.3021 43.1016 31.3019 43.339 31.1553 43.4854C31.0088 43.6317 30.7713 43.6315 30.625 43.4849L24.635 37.4849C24.4887 37.3383 24.4889 37.1009 24.6354 36.9546Z" fill="#747474"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.1427 36.9618C49.2853 37.112 49.2792 37.3493 49.129 37.4919L42.809 43.4919C42.6588 43.6345 42.4214 43.6284 42.2788 43.4782C42.1362 43.328 42.1424 43.0906 42.2926 42.948L48.6126 36.948C48.7628 36.8054 49.0002 36.8116 49.1427 36.9618Z" fill="#747474"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.6044 36.9544C48.7511 36.8082 48.9885 36.8086 49.1347 36.9552L55.1147 42.9552C55.2609 43.1019 55.2605 43.3394 55.1139 43.4856C54.9672 43.6318 54.7297 43.6314 54.5835 43.4847L48.6035 37.4847C48.4573 37.338 48.4577 37.1006 48.6044 36.9544Z" fill="#747474"/>
+<path d="M33.3906 23.91C32.0206 23.91 31.8906 23.78 31.8906 22.41V18.22H41.8906V22.41C41.8906 23.78 41.7606 23.91 40.3906 23.91H33.3906Z" fill="#F0ECB6"/>
+<path d="M41.3809 18.72V22.41C41.3958 22.7122 41.3689 23.0151 41.3009 23.31C41.0049 23.4088 40.6912 23.4429 40.3809 23.41H33.3809C33.0786 23.4253 32.7757 23.3984 32.4809 23.33C32.3821 23.034 32.348 22.7203 32.3809 22.41V18.72H41.3809ZM42.3809 17.72H31.3809V22.41C31.3809 24.06 31.7309 24.41 33.3809 24.41H40.3809C42.0309 24.41 42.3809 24.06 42.3809 22.41V17.72Z" fill="#C18F35"/>
+<path d="M27.3902 31.03H22.4102C21.5817 31.03 20.9102 31.7016 20.9102 32.53V35.22C20.9102 36.0485 21.5817 36.72 22.4102 36.72H27.3902C28.2186 36.72 28.8902 36.0485 28.8902 35.22V32.53C28.8902 31.7016 28.2186 31.03 27.3902 31.03Z" fill="#F0ECB6"/>
+<path d="M27.3906 31.53C27.6929 31.5147 27.9958 31.5416 28.2906 31.61C28.3894 31.906 28.4235 32.2197 28.3906 32.53V35.22C28.4056 35.5223 28.3787 35.8252 28.3106 36.12C28.0147 36.2188 27.7009 36.2529 27.3906 36.22H22.3906C22.0884 36.2354 21.7854 36.2085 21.4906 36.14C21.3918 35.8441 21.3577 35.5303 21.3906 35.22V32.53C21.3756 32.2278 21.4026 31.9249 21.4706 31.63C21.7666 31.5312 22.0803 31.4971 22.3906 31.53H27.3906ZM27.3906 30.53H22.3906C20.7406 30.53 20.3906 30.88 20.3906 32.53V35.22C20.3906 36.87 20.7406 37.22 22.3906 37.22H27.3906C29.0406 37.22 29.3906 36.87 29.3906 35.22V32.53C29.3906 30.88 29.0406 30.53 27.3906 30.53Z" fill="#C18F35"/>
+<path d="M21.3999 43.72H16.4199C15.5915 43.72 14.9199 44.3915 14.9199 45.22V47.91C14.9199 48.7384 15.5915 49.41 16.4199 49.41H21.3999C22.2283 49.41 22.8999 48.7384 22.8999 47.91V45.22C22.8999 44.3915 22.2283 43.72 21.3999 43.72Z" fill="#F0ECB6"/>
+<path d="M21.4102 44.22C21.7124 44.2046 22.0153 44.2315 22.3102 44.3C22.4089 44.5959 22.443 44.9097 22.4102 45.22V47.91C22.4251 48.2122 22.3982 48.5151 22.3302 48.81C22.0342 48.9088 21.7204 48.9429 21.4102 48.91H16.4102C16.1079 48.9253 15.805 48.8984 15.5102 48.83C15.4114 48.534 15.3773 48.2203 15.4102 47.91V45.22C15.3952 44.9177 15.4221 44.6148 15.4902 44.32C15.7861 44.2212 16.0999 44.1871 16.4102 44.22H21.4102ZM21.4102 43.22H16.4102C14.7602 43.22 14.4102 43.57 14.4102 45.22V47.91C14.4102 49.56 14.7602 49.91 16.4102 49.91H21.4102C23.0602 49.91 23.4102 49.56 23.4102 47.91V45.22C23.4102 43.57 23.0602 43.22 21.4102 43.22Z" fill="#C18F35"/>
+<path d="M33.3706 43.72H28.3906C27.5622 43.72 26.8906 44.3915 26.8906 45.22V47.91C26.8906 48.7384 27.5622 49.41 28.3906 49.41H33.3706C34.1991 49.41 34.8706 48.7384 34.8706 47.91V45.22C34.8706 44.3915 34.1991 43.72 33.3706 43.72Z" fill="#F0ECB6"/>
+<path d="M33.3809 44.22C33.6831 44.2046 33.9861 44.2315 34.2809 44.3C34.3797 44.5959 34.4138 44.9097 34.3809 45.22V47.91C34.3958 48.2122 34.3689 48.5151 34.3009 48.81C34.0049 48.9088 33.6912 48.9429 33.3809 48.91H28.3809C28.0786 48.9253 27.7757 48.8984 27.4809 48.83C27.3821 48.534 27.348 48.2203 27.3809 47.91V45.22C27.3659 44.9177 27.3928 44.6148 27.4609 44.32C27.7568 44.2212 28.0706 44.1871 28.3809 44.22H33.3809ZM33.3809 43.22H28.3809C26.7309 43.22 26.3809 43.57 26.3809 45.22V47.91C26.3809 49.56 26.7309 49.91 28.3809 49.91H33.3809C35.0309 49.91 35.3809 49.56 35.3809 47.91V45.22C35.3809 43.57 35.0309 43.22 33.3809 43.22Z" fill="#C18F35"/>
+<path d="M45.3706 43.72H40.3906C39.5622 43.72 38.8906 44.3915 38.8906 45.22V47.91C38.8906 48.7384 39.5622 49.41 40.3906 49.41H45.3706C46.1991 49.41 46.8706 48.7384 46.8706 47.91V45.22C46.8706 44.3915 46.1991 43.72 45.3706 43.72Z" fill="#F0ECB6"/>
+<path d="M45.3809 44.22C45.6831 44.2046 45.986 44.2315 46.2809 44.3C46.3796 44.5959 46.4137 44.9097 46.3809 45.22V47.91C46.3958 48.2122 46.3689 48.5151 46.3009 48.81C46.0049 48.9088 45.6911 48.9429 45.3809 48.91H40.3809C40.0786 48.9253 39.7757 48.8984 39.4809 48.83C39.3821 48.534 39.348 48.2203 39.3809 47.91V45.22C39.3659 44.9177 39.3928 44.6148 39.4609 44.32C39.7568 44.2212 40.0706 44.1871 40.3809 44.22H45.3809ZM45.3809 43.22H40.3809C38.7309 43.22 38.3809 43.57 38.3809 45.22V47.91C38.3809 49.56 38.7309 49.91 40.3809 49.91H45.3809C47.0309 49.91 47.3809 49.56 47.3809 47.91V45.22C47.3809 43.57 47.0309 43.22 45.3809 43.22Z" fill="#C18F35"/>
+<path d="M57.3394 43.72H52.3594C51.5309 43.72 50.8594 44.3915 50.8594 45.22V47.91C50.8594 48.7384 51.5309 49.41 52.3594 49.41H57.3394C58.1678 49.41 58.8394 48.7384 58.8394 47.91V45.22C58.8394 44.3915 58.1678 43.72 57.3394 43.72Z" fill="#F0ECB6"/>
+<path d="M57.3496 44.22C57.6519 44.2046 57.9548 44.2315 58.2496 44.3C58.3484 44.5959 58.3825 44.9097 58.3496 45.22V47.91C58.3646 48.2122 58.3377 48.5151 58.2696 48.81C57.9736 48.9088 57.6599 48.9429 57.3496 48.91H52.3496C52.0473 48.9253 51.7444 48.8984 51.4496 48.83C51.3508 48.534 51.3167 48.2203 51.3496 47.91V45.22C51.3346 44.9177 51.3616 44.6148 51.4296 44.32C51.7256 44.2212 52.0393 44.1871 52.3496 44.22H57.3496ZM57.3496 43.22H52.3496C50.6996 43.22 50.3496 43.57 50.3496 45.22V47.91C50.3496 49.56 50.6996 49.91 52.3496 49.91H57.3496C58.9996 49.91 59.3496 49.56 59.3496 47.91V45.22C59.3496 43.57 58.9996 43.22 57.3496 43.22Z" fill="#C18F35"/>
+<path d="M51.3609 30.97H46.3809C45.5524 30.97 44.8809 31.6415 44.8809 32.47V35.16C44.8809 35.9884 45.5524 36.66 46.3809 36.66H51.3609C52.1893 36.66 52.8609 35.9884 52.8609 35.16V32.47C52.8609 31.6415 52.1893 30.97 51.3609 30.97Z" fill="#F0ECB6"/>
+<path d="M51.3594 31.47C51.6616 31.4546 51.9646 31.4815 52.2594 31.55C52.3582 31.8459 52.3923 32.1597 52.3594 32.47V35.16C52.3744 35.4622 52.3474 35.7651 52.2794 36.06C51.9834 36.1588 51.6697 36.1929 51.3594 36.16H46.3594C46.0571 36.1753 45.7542 36.1484 45.4594 36.08C45.3606 35.784 45.3265 35.4703 45.3594 35.16V32.47C45.3444 32.1677 45.3713 31.8648 45.4394 31.57C45.7353 31.4712 46.0491 31.4371 46.3594 31.47H51.3594ZM51.3594 30.47H46.3594C44.7094 30.47 44.3594 30.82 44.3594 32.47V35.16C44.3594 36.81 44.7094 37.16 46.3594 37.16H51.3594C53.0094 37.16 53.3594 36.81 53.3594 35.16V32.47C53.3594 30.82 53.0094 30.47 51.3594 30.47Z" fill="#C18F35"/>
+<path d="M31.8906 18.2798V16.0898C31.8906 14.7198 32.0206 14.5898 33.3906 14.5898H40.3906C41.7606 14.5898 41.8906 14.7198 41.8906 16.0898V18.2798H31.8906Z" fill="#ADDFF3"/>
+<path d="M40.3809 15.0898C40.6831 15.0745 40.986 15.1014 41.2809 15.1698C41.38 15.4658 41.4141 15.7796 41.3809 16.0898V17.7798H32.3809V16.0898C32.3659 15.7876 32.3928 15.4847 32.4609 15.1898C32.7568 15.0911 33.0706 15.057 33.3809 15.0898H40.3809ZM40.3809 14.0898H33.3809C31.7309 14.0898 31.3809 14.4398 31.3809 16.0898V18.7798H42.3809V16.0898C42.3809 14.4398 42.0309 14.0898 40.3809 14.0898Z" fill="#2980B9"/>
+<path d="M8.13039 49.4501L4.65039 44.8H11.6104L8.13039 49.4501Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.2033 44.5762C4.28804 44.4069 4.4611 44.3 4.65039 44.3H11.6104C11.7997 44.3 11.9727 44.4069 12.0575 44.5762C12.1422 44.7455 12.1241 44.9481 12.0107 45.0996L8.5307 49.7496C8.4363 49.8758 8.28795 49.9501 8.13039 49.9501C7.97283 49.9501 7.82449 49.8758 7.73008 49.7496L4.25008 45.0996C4.13666 44.9481 4.11855 44.7455 4.2033 44.5762ZM5.6491 45.3L8.13039 48.6156L10.6117 45.3H5.6491Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.13086 17.46C8.68314 17.46 9.13086 17.9077 9.13086 18.46V45.43C9.13086 45.9823 8.68314 46.43 8.13086 46.43C7.57857 46.43 7.13086 45.9823 7.13086 45.43V18.46C7.13086 17.9077 7.57857 17.46 8.13086 17.46Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_index_scan.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_index_scan.svg
new file mode 100644
index 0000000..a63d57d
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_index_scan.svg
@@ -0,0 +1,31 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6516 35.9116C13.8274 35.8022 14.0586 35.8561 14.1681 36.0319L19.4381 44.5019C19.5475 44.6778 19.4936 44.909 19.3178 45.0184C19.1419 45.1278 18.9107 45.074 18.8013 44.8981L13.5313 36.4281C13.4218 36.2523 13.4757 36.021 13.6516 35.9116Z" fill="#747474"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2897 27.6028C19.4649 27.7132 19.5173 27.9448 19.4069 28.12L14.1669 36.43C14.0564 36.6052 13.8248 36.6576 13.6496 36.5472C13.4745 36.4367 13.422 36.2051 13.5325 36.0299L18.7725 27.72C18.8829 27.5448 19.1145 27.4923 19.2897 27.6028Z" fill="#747474"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.3388 44.1073C27.4618 43.9406 27.6965 43.9051 27.8632 44.0281L35.8632 49.928C36.0299 50.051 36.0654 50.2857 35.9425 50.4524C35.8195 50.6191 35.5848 50.6546 35.4181 50.5316L27.4181 44.6317C27.2514 44.5087 27.2159 44.274 27.3388 44.1073Z" fill="#747474"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.9513 38.7099C36.0673 38.8815 36.0223 39.1146 35.8507 39.2306L27.8507 44.6406C27.6792 44.7566 27.446 44.7116 27.33 44.54C27.214 44.3685 27.259 44.1353 27.4306 44.0193L35.4306 38.6093C35.6022 38.4933 35.8353 38.5383 35.9513 38.7099Z" fill="#747474"/>
+<path d="M25.7398 41.6501H20.7598C19.9313 41.6501 19.2598 42.3217 19.2598 43.1501V45.8401C19.2598 46.6686 19.9313 47.3401 20.7598 47.3401H25.7398C26.5682 47.3401 27.2398 46.6686 27.2398 45.8401V43.1501C27.2398 42.3217 26.5682 41.6501 25.7398 41.6501Z" fill="#F0ECB6"/>
+<path d="M25.75 42.1501C26.0518 42.135 26.3542 42.1585 26.65 42.2201C26.744 42.5206 26.778 42.8366 26.75 43.1501V45.8401C26.7663 46.1424 26.7394 46.4455 26.67 46.7401C26.67 46.7401 26.48 46.8401 25.75 46.8401H20.75C20.4477 46.8574 20.1445 46.8305 19.85 46.7601C19.7533 46.4637 19.7192 46.1504 19.75 45.8401V43.1501C19.7337 42.8479 19.7606 42.5448 19.83 42.2501C19.83 42.2501 20.02 42.1501 20.75 42.1501H25.75ZM25.75 41.1501H20.75C19.1 41.1501 18.75 41.5001 18.75 43.1501V45.8401C18.75 47.4901 19.1 47.8401 20.75 47.8401H25.75C27.4 47.8401 27.75 47.4901 27.75 45.8401V43.1501C27.75 41.5001 27.4 41.1501 25.75 41.1501Z" fill="#C18F35"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.3388 27.6073C27.4618 27.4406 27.6965 27.4051 27.8632 27.5281L35.8632 33.4281C36.0299 33.551 36.0654 33.7858 35.9425 33.9524C35.8195 34.1191 35.5848 34.1546 35.4181 34.0317L27.4181 28.1317C27.2514 28.0087 27.2159 27.774 27.3388 27.6073Z" fill="#747474"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.9513 22.2099C36.0673 22.3815 36.0223 22.6146 35.8507 22.7306L27.8507 28.1406C27.6792 28.2566 27.446 28.2116 27.33 28.04C27.214 27.8685 27.259 27.6353 27.4306 27.5193L35.4306 22.1093C35.6022 21.9933 35.8353 22.0383 35.9513 22.2099Z" fill="#747474"/>
+<path d="M25.7398 25.1501H20.7598C19.9313 25.1501 19.2598 25.8217 19.2598 26.6501V29.3401C19.2598 30.1686 19.9313 30.8401 20.7598 30.8401H25.7398C26.5682 30.8401 27.2398 30.1686 27.2398 29.3401V26.6501C27.2398 25.8217 26.5682 25.1501 25.7398 25.1501Z" fill="#F0ECB6"/>
+<path d="M25.75 25.6501C26.0518 25.635 26.3542 25.6585 26.65 25.7201C26.744 26.0206 26.778 26.3366 26.75 26.6501V29.3401C26.7663 29.6424 26.7394 29.9455 26.67 30.2401C26.67 30.2401 26.48 30.3401 25.75 30.3401H20.75C20.4477 30.3574 20.1445 30.3305 19.85 30.2601C19.7533 29.9637 19.7192 29.6504 19.75 29.3401V26.6501C19.7337 26.3479 19.7606 26.0448 19.83 25.7501C19.83 25.7501 20.02 25.6501 20.75 25.6501H25.75ZM25.75 24.6501H20.75C19.1 24.6501 18.75 25.0001 18.75 26.6501V29.3401C18.75 30.9901 19.1 31.3401 20.75 31.3401H25.75C27.4 31.3401 27.75 30.9901 27.75 29.3401V26.6501C27.75 25.0001 27.4 24.6501 25.75 24.6501Z" fill="#C18F35"/>
+<path d="M6.60938 40.8899C5.22938 40.8899 5.10938 40.7599 5.10938 39.3899V35.2H13.1094V39.3899C13.1094 40.7599 12.9794 40.8899 11.6094 40.8899H6.60938Z" fill="#F0ECB6"/>
+<path d="M12.5896 35.7V39.3899C12.6137 39.6923 12.5866 39.9966 12.5096 40.29C12.5096 40.29 12.3196 40.3899 11.5896 40.3899H6.58961C6.28729 40.4089 5.98385 40.3819 5.68961 40.31C5.6015 40.0118 5.57096 39.6995 5.59961 39.3899V35.7H12.5996H12.5896ZM13.5996 34.7H4.59961V39.3899C4.59961 41.0399 4.94961 41.3899 6.59961 41.3899H11.5996C13.2496 41.3899 13.5996 41.0399 13.5996 39.3899V34.7Z" fill="#C18F35"/>
+<path d="M5.10938 35.2598V33.0698C5.10938 31.6898 5.22938 31.5698 6.60938 31.5698H11.6094C12.9794 31.5698 13.1094 31.6898 13.1094 33.0698V35.2598H5.10938Z" fill="#ADDFF3"/>
+<path d="M11.5898 32.0698C11.8916 32.0547 12.1941 32.0782 12.4898 32.1398C12.5907 32.4388 12.6248 32.7562 12.5898 33.0698V34.7598H5.58984V33.0698C5.57646 32.7681 5.59996 32.4659 5.65984 32.1698C5.95882 32.069 6.27626 32.0348 6.58984 32.0698H11.5898ZM11.5898 31.0698H6.58984C4.93984 31.0698 4.58984 31.4198 4.58984 33.0698V35.7598H13.5898V33.0698C13.5898 31.4198 13.2398 31.0698 11.5898 31.0698Z" fill="#2980B9"/>
+<path d="M35.7402 53.47C34.3602 53.47 34.2402 53.35 34.2402 51.97V19.53H58.8902V52C58.8902 53.38 58.7602 53.5 57.3902 53.5L35.7402 53.47Z" fill="#F0ECB6"/>
+<path d="M58.3902 20V52C58.4143 52.3024 58.3873 52.6066 58.3102 52.9C58.3102 52.9 58.1202 53 57.3902 53H35.7402C35.4385 53.0152 35.136 52.9916 34.8402 52.93C34.7394 52.631 34.7052 52.3136 34.7402 52V20H58.3902ZM59.3902 19H33.7402V52C33.7402 53.65 34.0902 54 35.7402 54H57.3902C59.0402 54 59.3902 53.65 59.3902 52V19Z" fill="#C18F36"/>
+<g opacity="0.8">
+<path opacity="0.8" d="M42.4414 52.97V19.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M50.6309 52.97V19.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M34.7305 27.97H58.3705" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M34.7305 36.3398H58.3705" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M34.7305 44.71H58.3705" stroke="#C18F36" stroke-miterlimit="10"/>
+</g>
+<path d="M50.6992 19.53V10.53H57.3892C58.7692 10.53 58.8892 10.65 58.8892 12.03V19.53H50.6992Z" fill="#ADDFF3"/>
+<path d="M57.3892 11C57.691 10.9837 57.9936 11.0072 58.2892 11.07C58.3747 11.3721 58.4052 11.6871 58.3792 12V19H51.1992V11H57.3892ZM57.3892 10H50.1992V20H59.3892V12C59.3892 10.35 59.0392 10 57.3892 10Z" fill="#2980B9"/>
+<path d="M34.2305 19.53V12C34.2305 10.62 34.3605 10.5 35.7305 10.5H42.4305V19.5L34.2305 19.53Z" fill="#ADDFF3"/>
+<path d="M41.9305 11V19H34.7305V12C34.7142 11.6977 34.7411 11.3947 34.8105 11.1C35.1057 10.998 35.4202 10.9638 35.7305 11H41.9305ZM42.9305 10H35.7305C34.0805 10 33.7305 10.35 33.7305 12V20H42.9305V10Z" fill="#2980B9"/>
+<path d="M50.6192 10.53H42.4492V19.53H50.6192V10.53Z" fill="#ADDFF3"/>
+<path d="M50.12 11V19H43V11H50.17H50.12ZM51.17 10H42V20H51.17V10Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_insert.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_insert.svg
new file mode 100644
index 0000000..a2e2d52
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_insert.svg
@@ -0,0 +1,32 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7305 57.47C15.3605 57.47 15.2305 57.34 15.2305 55.97V15.53H56.2305V56C56.2305 57.37 56.1005 57.5 54.7305 57.5L16.7305 57.47Z" fill="#F0ECB6"/>
+<path d="M55.7207 16V56C55.7356 56.3022 55.7086 56.6051 55.6407 56.9C55.3447 56.9988 55.031 57.0329 54.7207 57H16.7207C16.4184 57.0154 16.1155 56.9884 15.8207 56.92C15.7219 56.624 15.6878 56.3103 15.7207 56V16H55.7207ZM56.7207 15H14.7207V56C14.7207 57.65 15.0707 58 16.7207 58H54.7207C56.3707 58 56.7207 57.65 56.7207 56V15Z" fill="#C18F36"/>
+<path d="M55.7395 49.53H48.5195V56.97H55.7395V49.53Z" fill="#88F625"/>
+<path d="M47.5403 49.53H40.3203V56.97H47.5403V49.53Z" fill="#88F625"/>
+<path d="M39.3391 49.53H32.1191V56.97H39.3391V49.53Z" fill="#88F625"/>
+<g opacity="0.8">
+<path opacity="0.8" d="M23.4297 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M39.8301 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M31.6309 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M48.0312 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M15.7305 23.97H55.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M15.7305 32.3398H55.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M15.7305 40.71H55.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M15.7305 49.0798H55.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+</g>
+<path d="M48 15.53V6.53003H54.69C56.06 6.53003 56.19 6.66003 56.19 8.03003V15.53H48Z" fill="#ADDFF3"/>
+<path d="M54.7293 7C55.0316 6.98463 55.3345 7.01156 55.6293 7.08C55.7281 7.37598 55.7622 7.68971 55.7293 8V15H48.5293V7H54.7193H54.7293ZM54.7193 6H47.5293V16H56.7193V8C56.7193 6.35 56.3693 6 54.7193 6Z" fill="#2980B9"/>
+<path d="M15.2305 15.53V8C15.2305 6.63 15.3605 6.5 16.7305 6.5H23.4205V15.5L15.2305 15.53Z" fill="#ADDFF3"/>
+<path d="M22.9305 7V15H15.7305V8C15.7156 7.69775 15.7425 7.39489 15.8105 7.1C16.1064 7.00121 16.4202 6.96711 16.7305 7H22.9205H22.9305ZM23.9205 6H16.7305C15.0805 6 14.7305 6.35 14.7305 8V16H23.9205V6Z" fill="#2980B9"/>
+<path d="M48.0201 6.53003H39.8301V15.53H48.0201V6.53003Z" fill="#ADDFF3"/>
+<path d="M47.5201 7V15H40.3301V7H47.5101H47.5201ZM48.5101 6H39.3301V16H48.5201V6H48.5101Z" fill="#2980B9"/>
+<path d="M39.8306 6.53003H31.6406V15.53H39.8306V6.53003Z" fill="#ADDFF3"/>
+<path d="M39.3306 7V15H32.1406V7H39.3206H39.3306ZM40.3206 6H31.1406V16H40.3306V6H40.3206Z" fill="#2980B9"/>
+<path d="M31.6192 6.53003H23.4492V15.53H31.6192V6.53003Z" fill="#ADDFF3"/>
+<path d="M31.12 7V15H23.95V7H31.12ZM32.12 6H23V16H32.18V6H32.12Z" fill="#2980B9"/>
+<path d="M7.26962 28.2801C7.2648 27.6143 7.45733 26.962 7.82293 26.4054C8.18852 25.8489 8.71078 25.4132 9.3238 25.1532C9.93681 24.8932 10.6131 24.8207 11.2673 24.9447C11.9215 25.0688 12.5243 25.3838 12.9996 25.8501L13.1296 25.9801L13.1796 26.0302L24.7196 37.5801C24.8009 37.624 24.8645 37.6947 24.8996 37.7801L26.5296 43.6001V43.6601C26.5349 43.7 26.5349 43.7403 26.5296 43.7801C26.5355 43.8199 26.5355 43.8604 26.5296 43.9001C26.5146 43.9362 26.4944 43.9699 26.4696 44.0001L26.3696 44.0601H26.2496H26.1296H25.9996L20.1796 42.4301C20.0942 42.395 20.0235 42.3314 19.9796 42.2501L8.21962 30.6401C8.1859 30.6053 8.1588 30.5647 8.13962 30.5201C7.58258 29.9068 7.27263 29.1087 7.26962 28.2801ZM20.1696 41.4301L21.1696 39.4301L11.2396 29.5001L9.72962 31.0001L20.1696 41.4301ZM25.1696 41.9801L24.3296 42.8201L25.4996 43.1501L25.1696 41.9801ZM24.1696 38.5001L21.9996 39.6001L20.9096 41.8601L23.4796 42.5801L24.9696 41.0901L24.1696 38.5001ZM23.7496 37.8001L13.3496 27.3701L11.8296 28.8901L21.7596 38.8201L23.7496 37.8001ZM8.09962 28.3101C8.09998 28.6639 8.17396 29.0138 8.31685 29.3375C8.45974 29.6611 8.66842 29.9515 8.92962 30.1901L9.14962 30.4101L12.7696 26.7901L12.5496 26.5701C12.2007 26.1882 11.7443 25.921 11.2405 25.8036C10.7367 25.6862 10.2091 25.7242 9.72733 25.9126C9.24555 26.101 8.83214 26.4309 8.54157 26.8589C8.25101 27.2869 8.09693 27.7929 8.09962 28.3101Z" fill="#C18F36"/>
+<path d="M20.1705 41.45L21.1705 39.42L21.1805 39.41L11.2505 29.48L9.73047 31L20.1705 41.45Z" fill="#F0ECB6"/>
+<path d="M13.3501 27.3801L11.8301 28.9001L21.7601 38.8301L21.7701 38.8201L23.7901 37.8301L13.3501 27.3801Z" fill="#F0ECB6"/>
+<path d="M8.11914 28.2698C8.1258 28.6274 8.20758 28.9795 8.35919 29.3034C8.5108 29.6273 8.72883 29.9157 8.99914 30.1498L9.21914 30.3698L12.8391 26.7498L12.6191 26.5298C12.2708 26.1486 11.8153 25.8815 11.3124 25.7639C10.8096 25.6462 10.2829 25.6834 9.80153 25.8705C9.32019 26.0576 8.90669 26.386 8.61536 26.8124C8.32402 27.2388 8.16848 27.7434 8.16914 28.2598L8.11914 28.2698Z" fill="#F0ECB6"/>
+<path d="M24.2191 38.52L21.9591 39.6L20.8691 41.86L23.4391 42.58L24.9391 41.09L24.2191 38.52Z" fill="#F0ECB6"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_join.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_join.svg
new file mode 100644
index 0000000..93f17b1
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_join.svg
@@ -0,0 +1,39 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.27 41.36C30.9845 41.3581 31.6879 41.1831 32.32 40.8499C32.7654 40.5937 33.1321 40.2201 33.38 39.77C33.6076 39.3355 33.7437 38.859 33.78 38.3699C33.82 37.8699 33.84 37.3833 33.84 36.91V37.2599C33.84 36.5799 33.84 36.01 33.84 35.54C33.8506 35.138 33.8874 34.7371 33.95 34.34C33.9923 34.0513 34.08 33.7711 34.21 33.5099C34.3242 33.288 34.4727 33.0855 34.65 32.91C34.8319 32.7258 35.041 32.5707 35.27 32.45C35.4751 32.3416 35.6892 32.2512 35.91 32.18C36.1058 32.1191 36.3066 32.0756 36.51 32.0499C36.7 32.0499 36.7 31.95 36.51 31.93C36.3066 31.9042 36.1058 31.8607 35.91 31.7999C35.6886 31.7305 35.4743 31.6401 35.27 31.53C35.0409 31.4094 34.8318 31.2542 34.65 31.07C34.4732 30.8939 34.3247 30.6915 34.21 30.4699C34.0802 30.2087 33.9924 29.9286 33.95 29.6399C33.8875 29.2427 33.8507 28.8419 33.84 28.44C33.84 27.9666 33.84 27.3899 33.84 26.7099V27.07C33.84 26.6 33.84 26.07 33.78 25.61C33.744 25.1208 33.6078 24.6443 33.38 24.2099C33.1317 23.7601 32.7651 23.3867 32.32 23.1299C31.6872 22.7986 30.9843 22.6237 30.27 22.62V22.2H30.8C31.026 22.2181 31.2501 22.2549 31.47 22.3099C31.7153 22.3688 31.956 22.4457 32.19 22.54C32.4415 22.643 32.6771 22.7811 32.89 22.95C33.2198 23.1962 33.5012 23.5014 33.72 23.85C33.9271 24.2063 34.0724 24.5951 34.15 25C34.2432 25.4241 34.2968 25.8559 34.31 26.29C34.31 26.76 34.31 28.17 34.31 28.17C34.3022 28.6726 34.3424 29.1749 34.43 29.67C34.4965 30.0567 34.658 30.421 34.9 30.7299C35.171 31.0488 35.5137 31.299 35.9 31.4599C35.9992 31.522 36.081 31.6082 36.1377 31.7106C36.1944 31.8129 36.2241 31.928 36.2241 32.0449C36.2241 32.1619 36.1944 32.277 36.1377 32.3793C36.081 32.4817 35.9992 32.5679 35.9 32.63C35.5139 32.7912 35.1713 33.0413 34.9 33.36C34.6587 33.6693 34.4973 34.0334 34.43 34.4199C34.3424 34.915 34.3022 35.4173 34.31 35.9199C34.31 35.9199 34.22 38.7 34.13 39.09C34.0443 39.4671 33.8991 39.8283 33.7 40.16C33.4817 40.509 33.2002 40.8142 32.87 41.06C32.657 41.2287 32.4214 41.3668 32.17 41.47C31.9357 41.5634 31.6951 41.6402 31.45 41.7C31.2299 41.7541 31.0059 41.7908 30.78 41.81H30.25L30.27 41.36Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M41.1406 49.8801C39.7706 49.8801 39.6406 49.7501 39.6406 48.3801V19.8801H46.9206V49.8801H41.1406Z" fill="#F0ECB6"/>
+<path d="M46.4206 20.3801V49.3801H41.1406C40.8384 49.3955 40.5354 49.3686 40.2406 49.3001C40.1418 49.0042 40.1077 48.6904 40.1406 48.3801V20.3801H46.4206ZM47.4206 19.3801H39.1406V48.3801C39.1406 50.0301 39.4906 50.3801 41.1406 50.3801H47.4206V19.3801Z" fill="#C18F35"/>
+<path d="M46.9004 49.8801V19.8801H54.1804V48.3801C54.1804 49.7501 54.0504 49.8801 52.6804 49.8801H46.9004Z" fill="#D3D4F3"/>
+<path d="M53.6904 20.3801V48.3801C53.7054 48.6824 53.6784 48.9853 53.6104 49.2801C53.3144 49.3789 53.0007 49.413 52.6904 49.3801H47.4004V20.3801H53.6804H53.6904ZM54.6804 19.3801H46.4004V50.3801H52.6804C54.3304 50.3801 54.6804 50.0301 54.6804 48.3801V19.3801Z" fill="#666BD1"/>
+<path d="M39.6406 19.8801V15.3801C39.6406 14.0101 39.7706 13.8801 41.1406 13.8801H46.9206V19.8801H39.6406Z" fill="#ADDFF3"/>
+<path d="M46.4206 14.3801V19.3801H40.1406V15.3801C40.1256 15.0779 40.1526 14.775 40.2206 14.4801C40.5166 14.3813 40.8303 14.3472 41.1406 14.3801H46.4206ZM47.4206 13.3801H41.1406C39.4906 13.3801 39.1406 13.7301 39.1406 15.3801V20.3801H47.4206V13.3801Z" fill="#2980B9"/>
+<path d="M46.9102 19.8801V13.8801H52.6902C54.0602 13.8801 54.1902 14.0101 54.1902 15.3801V19.8801H46.9102Z" fill="#ADDFF3"/>
+<path d="M52.6902 14.3801C52.9924 14.3648 53.2953 14.3917 53.5902 14.4601C53.689 14.7561 53.7231 15.0698 53.6902 15.3801V19.3801H47.4102V14.3801H52.6902ZM52.6902 13.3801H46.4102V20.3801H54.6902V15.3801C54.6902 13.7301 54.3402 13.3801 52.6902 13.3801Z" fill="#2980B9"/>
+<path opacity="0.8" d="M46.6699 26.23H54.1599" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M39.6699 26.23H46.3999" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M46.6699 32.23H54.1599" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M39.6699 32.23H46.3999" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M46.6699 38.2302H54.1599" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M39.6699 38.2302H46.3999" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M46.6699 44.23H54.1599" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M39.6699 44.23H46.3999" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M11.3398 29.3098C9.96984 29.3098 9.83984 29.1798 9.83984 27.8098V16.3098H17.1198V29.3098H11.3398Z" fill="#D3D4F3"/>
+<path d="M16.6198 16.8098V28.8098H11.3398C11.0376 28.8252 10.7347 28.7983 10.4398 28.7298C10.3411 28.4338 10.307 28.1201 10.3398 27.8098V16.8098H16.6198ZM17.6198 15.8098H9.33984V27.8098C9.33984 29.4598 9.68984 29.8098 11.3398 29.8098H17.6198V15.8098Z" fill="#666BD1"/>
+<path d="M17.1094 29.3098V16.3098H24.3894V27.8098C24.3894 29.1798 24.2594 29.3098 22.8894 29.3098H17.1094Z" fill="#D3D4F3"/>
+<path d="M23.8894 16.8098V27.8098C23.9044 28.1121 23.8774 28.4149 23.8094 28.7098C23.5134 28.8086 23.1997 28.8427 22.8894 28.8098H17.6094V16.8098H23.8894ZM24.8894 15.8098H16.6094V29.8098H22.8894C24.5394 29.8098 24.8894 29.4598 24.8894 27.8098V15.8098Z" fill="#666BD1"/>
+<path d="M9.83984 16.3098V11.8098C9.83984 10.4398 9.96984 10.3098 11.3398 10.3098H17.1198V16.3098H9.83984Z" fill="#ADDFF3"/>
+<path d="M16.6198 10.8098V15.8098H10.3398V11.8098C10.3249 11.5076 10.3518 11.2047 10.4198 10.9098C10.7158 10.811 11.0296 10.7769 11.3398 10.8098H16.6198ZM17.6198 9.80981H11.3398C9.68984 9.80981 9.33984 10.1598 9.33984 11.8098V16.8098H17.6198V9.80981Z" fill="#2980B9"/>
+<path d="M17.1094 16.3098V10.3098H22.8894C24.2594 10.3098 24.3894 10.4398 24.3894 11.8098V16.3098H17.1094Z" fill="#ADDFF3"/>
+<path d="M22.8894 10.8098C23.1916 10.7944 23.4946 10.8214 23.7894 10.8898C23.8882 11.1858 23.9223 11.4995 23.8894 11.8098V15.8098H17.6094V10.8098H22.8894ZM22.8894 9.80981H16.6094V16.8098H24.8894V11.8098C24.8894 10.1598 24.5394 9.80981 22.8894 9.80981Z" fill="#2980B9"/>
+<path opacity="0.8" d="M16.8691 22.6602H24.3691" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M9.86914 22.6602H16.6091" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M11.3398 53.46C9.96984 53.46 9.83984 53.33 9.83984 51.96V40.46H17.1198V53.46H11.3398Z" fill="#F0ECB6"/>
+<path d="M16.6198 41V53H11.3398C11.0376 53.0154 10.7347 52.9884 10.4398 52.92C10.3411 52.624 10.307 52.3103 10.3398 52V41H16.6198ZM17.6198 40H9.33984V52C9.33984 53.65 9.68984 54 11.3398 54H17.6198V40Z" fill="#C18F35"/>
+<path d="M17.1094 53.46V40.46H24.3894V52C24.3894 53.37 24.2594 53.5 22.8894 53.5L17.1094 53.46Z" fill="#F0ECB6"/>
+<path d="M23.8894 41V52C23.9044 52.3023 23.8774 52.6051 23.8094 52.9C23.5134 52.9988 23.1997 53.0329 22.8894 53H17.6094V41H23.8894ZM24.8894 40H16.6094V54H22.8894C24.5394 54 24.8894 53.65 24.8894 52V40Z" fill="#C18F35"/>
+<path d="M9.83984 40.46V36C9.83984 34.63 9.96984 34.5 11.3398 34.5H17.1198V40.5L9.83984 40.46Z" fill="#ADDFF3"/>
+<path d="M16.6198 35V40H10.3398V36C10.3249 35.6977 10.3518 35.3949 10.4198 35.1C10.7158 35.0012 11.0296 34.9671 11.3398 35H16.6198ZM17.6198 34H11.3398C9.68984 34 9.33984 34.35 9.33984 36V41H17.6198V34Z" fill="#2980B9"/>
+<path d="M17.1094 40.46V34.46H22.8894C24.2594 34.46 24.3894 34.59 24.3894 35.96V40.46H17.1094Z" fill="#ADDFF3"/>
+<path d="M22.8894 35C23.1916 34.9846 23.4946 35.0116 23.7894 35.08C23.8882 35.376 23.9223 35.6897 23.8894 36V40H17.6094V35H22.8894ZM22.8894 34H16.6094V41H24.8894V36C24.8894 34.35 24.5394 34 22.8894 34Z" fill="#2980B9"/>
+<path opacity="0.8" d="M16.8691 46.8098H24.3691" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M9.86914 46.8098H16.6091" stroke="#C18F35" stroke-linejoin="round"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_limit.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_limit.svg
new file mode 100644
index 0000000..60e23d8
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_limit.svg
@@ -0,0 +1,29 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.7891 53.47C11.4191 53.47 11.2891 53.34 11.2891 51.97V19.53H52.2891V52C52.2891 53.37 52.1591 53.5 50.7891 53.5L12.7891 53.47Z" fill="#F0ECB6"/>
+<path d="M51.7695 20V52C51.7845 52.3023 51.7576 52.6051 51.6895 52.9C51.3935 52.9988 51.0798 53.0329 50.7695 53H12.7695C12.4673 53.0154 12.1643 52.9884 11.8695 52.92C11.7704 52.6241 11.7363 52.3103 11.7695 52V20H51.7695ZM52.7695 19H10.7695V52C10.7695 53.65 11.1195 54 12.7695 54H50.7695C52.4195 54 52.7695 53.65 52.7695 52V19Z" fill="#C18F36"/>
+<g opacity="0.8">
+<path opacity="0.8" d="M19.4785 52.97V19.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M35.8789 52.97V19.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M27.6797 52.97V19.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M44.0801 52.97V19.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M11.7793 27.97H51.7493" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M11.7793 36.3398H51.7493" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M11.7793 44.71H51.7493" stroke="#C18F36" stroke-miterlimit="10"/>
+</g>
+<path d="M44.0898 19.53V10.53H50.7798C52.1498 10.53 52.2798 10.66 52.2798 12.03V19.53H44.0898Z" fill="#ADDFF3"/>
+<path d="M50.7798 11C51.0821 10.9846 51.385 11.0116 51.6798 11.08C51.7786 11.376 51.8127 11.6897 51.7798 12V19H44.5898V11H50.7798ZM50.7798 10H43.5898V20H52.7798V12C52.7798 10.35 52.4298 10 50.7798 10Z" fill="#2980B9"/>
+<path d="M11.2891 19.53V12C11.2891 10.63 11.4191 10.5 12.7891 10.5H19.4791V19.5L11.2891 19.53Z" fill="#ADDFF3"/>
+<path d="M18.9991 11V19H11.7891V12C11.7741 11.6977 11.801 11.3949 11.8691 11.1C12.165 11.0012 12.4788 10.9671 12.7891 11H18.9991ZM19.9991 10H12.7891C11.1391 10 10.7891 10.35 10.7891 12V20H19.9991V10Z" fill="#2980B9"/>
+<path d="M44.0609 10.53H35.8809V19.53H44.0609V10.53Z" fill="#ADDFF3"/>
+<path d="M43.5706 11V19H36.3806V11H43.5606H43.5706ZM44.5606 10H35.3906V20H44.5806V10H44.5606Z" fill="#2980B9"/>
+<path d="M35.8794 10.53H27.6895V19.53H35.8794V10.53Z" fill="#ADDFF3"/>
+<path d="M35.3792 11V19H28.1892V11H35.3692H35.3792ZM36.3692 10H27.1992V20H36.3892V10H36.3692Z" fill="#2980B9"/>
+<path d="M27.67 10.53H19.5V19.53H27.67V10.53Z" fill="#ADDFF3"/>
+<path d="M27.18 11V19H20V11H27.17H27.18ZM28.17 10H19V20H28.18V10H28.17Z" fill="#2980B9"/>
+<path d="M6.31055 19.76L57.7705 19.77" stroke="#CC0000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M6.31055 36.3298L57.7705 36.3398" stroke="#CC0000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M56.2507 34.7098L58.7807 31.3298H53.7207L56.2507 34.7098Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.25 21.1902C56.6642 21.1902 57 21.526 57 21.9402V32.1802C57 32.5944 56.6642 32.9302 56.25 32.9302C55.8358 32.9302 55.5 32.5944 55.5 32.1802V21.9402C55.5 21.526 55.8358 21.1902 56.25 21.1902Z" fill="#528D19"/>
+<path d="M7.7507 34.7098L10.2807 31.3298H5.2207L7.7507 34.7098Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.75 21.1902C8.16421 21.1902 8.5 21.526 8.5 21.9402V32.1802C8.5 32.5944 8.16421 32.9302 7.75 32.9302C7.33579 32.9302 7 32.5944 7 32.1802V21.9402C7 21.526 7.33579 21.1902 7.75 21.1902Z" fill="#528D19"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_lock_rows.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_lock_rows.svg
new file mode 100644
index 0000000..8729550
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_lock_rows.svg
@@ -0,0 +1,36 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.7402 57.47C18.3702 57.47 18.2402 57.34 18.2402 55.97V15.53H59.2402V56C59.2402 57.37 59.1102 57.5 57.7402 57.5L19.7402 57.47Z" fill="#F0ECB6"/>
+<path d="M58.7207 16V56C58.7357 56.3023 58.7088 56.6051 58.6407 56.9C58.3447 56.9988 58.031 57.0329 57.7207 57H19.7207C19.4184 57.0154 19.1155 56.9884 18.8207 56.92C18.7219 56.624 18.6878 56.3103 18.7207 56V16H58.7207ZM59.7207 15H17.7207V56C17.7207 57.65 18.0707 58 19.7207 58H57.7207C59.3707 58 59.7207 57.65 59.7207 56V15Z" fill="#C18F36"/>
+<path d="M25.9407 24.5598H18.7207V31.9998H25.9407V24.5598Z" fill="#FFBD30"/>
+<path d="M42.3509 41.1099H35.1309V48.5498H42.3509V41.1099Z" fill="#FFBD30"/>
+<path d="M34.1399 41.1099H26.9199V48.5498H34.1399V41.1099Z" fill="#FFBD30"/>
+<g opacity="0.8">
+<path opacity="0.8" d="M26.4297 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M42.8301 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M34.6309 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M51.0312 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M18.7305 23.97H58.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M18.7305 32.3398H58.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M18.7305 40.71H58.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M18.7305 49.0798H58.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+</g>
+<path d="M51 15.53V6.53003H57.69C59.06 6.53003 59.19 6.66003 59.19 8.03003V15.53H51Z" fill="#ADDFF3"/>
+<path d="M57.7291 7C58.0313 6.98463 58.3342 7.01156 58.6291 7.08C58.7278 7.37598 58.7619 7.68971 58.7291 8V15H51.5391V7H57.7291ZM57.7291 6H50.5391V16H59.7291V8C59.7291 6.35 59.3791 6 57.7291 6Z" fill="#2980B9"/>
+<path d="M18.2402 15.53V8C18.2402 6.63 18.3702 6.5 19.7402 6.5H26.4302V15.5L18.2402 15.53Z" fill="#ADDFF3"/>
+<path d="M25.9302 7V15H18.7402V8C18.7253 7.69775 18.7522 7.39487 18.8202 7.1C19.1162 7.00121 19.4299 6.96711 19.7402 7H25.9302ZM26.9302 6H19.7402C18.0902 6 17.7402 6.35 17.7402 8V16H26.9302V6Z" fill="#2980B9"/>
+<path d="M51.0201 6.53003H42.8301V15.53H51.0201V6.53003Z" fill="#ADDFF3"/>
+<path d="M50.5198 7V15H43.3298V7H50.5098H50.5198ZM51.5098 6H42.3398V16H51.5298V6H51.5098Z" fill="#2980B9"/>
+<path d="M42.8306 6.53003H34.6406V15.53H42.8306V6.53003Z" fill="#ADDFF3"/>
+<path d="M42.3304 7V15H35.1404V7H42.3204H42.3304ZM43.3204 6H34.1504V16H43.3404V6H43.3204Z" fill="#2980B9"/>
+<path d="M34.6192 6.53003H26.4492V15.53H34.6192V6.53003Z" fill="#ADDFF3"/>
+<path d="M34.13 7V15H26.95V7H34.12H34.13ZM35.12 6H26V16H35.18V6H35.12Z" fill="#2980B9"/>
+<path d="M14.0696 27.1902H5.66957C5.29826 27.1902 4.94217 27.3377 4.67962 27.6002C4.41707 27.8628 4.26957 28.2189 4.26957 28.5902V35.5902C4.26825 35.7749 4.30349 35.958 4.37325 36.129C4.44302 36.3 4.54593 36.4555 4.67606 36.5866C4.8062 36.7177 4.96098 36.8217 5.13149 36.8927C5.302 36.9637 5.48487 37.0002 5.66957 37.0002H14.0696C14.4409 37.0002 14.797 36.8527 15.0595 36.5901C15.3221 36.3276 15.4696 35.9715 15.4696 35.6002V28.6002C15.4696 28.2289 15.3221 27.8728 15.0595 27.6102C14.797 27.3477 14.4409 27.2002 14.0696 27.2002V27.1902ZM14.0696 35.5902H5.66957V28.5902H14.0696V35.5902Z" fill="url(#paint0_linear)"/>
+<path d="M13.3691 27.19V25.79C13.3691 24.8618 13.0004 23.9715 12.344 23.3152C11.6876 22.6588 10.7974 22.29 9.86914 22.29C8.94088 22.29 8.05064 22.6588 7.39427 23.3152C6.73789 23.9715 6.36914 24.8618 6.36914 25.79C6.36914 25.79 6.36914 27.21 6.36914 27.21H7.69914C7.69914 27.21 7.69914 25.8 7.69914 25.79C7.69914 25.2145 7.92777 24.6626 8.33472 24.2556C8.74167 23.8487 9.29362 23.62 9.86914 23.62C10.4447 23.62 10.9966 23.8487 11.4036 24.2556C11.8105 24.6626 12.0391 25.2145 12.0391 25.79V27.19H13.3691Z" fill="#757272"/>
+<path d="M14.0699 28.5898H5.66992V35.5898H14.0699V28.5898Z" fill="#FBF1C3"/>
+<defs>
+<linearGradient id="paint0_linear" x1="5.02957" y1="27.2502" x2="14.7096" y2="36.9302" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CEBA59"/>
+<stop offset="1" stop-color="#B76451"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_materialize.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_materialize.svg
new file mode 100644
index 0000000..9c87409
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_materialize.svg
@@ -0,0 +1,39 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6">
+<path opacity="0.6" d="M10.1699 49.8801C8.79992 49.8801 8.66992 49.7501 8.66992 48.3801V19.8801H15.9999V49.8801H10.1699Z" fill="#F0ECB6"/>
+<path opacity="0.6" d="M15.4499 20.3801V49.3801H10.1699C9.86766 49.3955 9.56473 49.3686 9.26992 49.3001C9.17113 49.0042 9.13703 48.6904 9.16992 48.3801V20.3801H15.4499ZM16.4499 19.3801H8.16992V48.3801C8.16992 50.0301 8.51992 50.3801 10.1699 50.3801H16.4499V19.3801Z" fill="#C18F35"/>
+<path opacity="0.6" d="M15.9395 49.8801V19.8801H23.2194V48.3801C23.2194 49.7501 23.0894 49.8801 21.7194 49.8801H15.9395Z" fill="#F0ECB6"/>
+<path opacity="0.6" d="M22.7194 20.3801V48.3801C22.7344 48.6824 22.7075 48.9853 22.6394 49.2801C22.3435 49.3789 22.0297 49.413 21.7194 49.3801H16.4395V20.3801H22.7194ZM23.7194 19.3801H15.4395V50.3801H21.7194C23.3694 50.3801 23.7194 50.0301 23.7194 48.3801V19.3801Z" fill="#C18F35"/>
+<path opacity="0.6" d="M8.66992 19.8801V15.3801C8.66992 14.0101 8.79992 13.8801 10.1699 13.8801H15.9999V19.8801H8.66992Z" fill="#ADDFF3"/>
+<path opacity="0.6" d="M15.4499 14.3801V19.3801H9.16992V15.3801C9.15494 15.0779 9.18186 14.775 9.24992 14.4801C9.5459 14.3813 9.85963 14.3472 10.1699 14.3801H15.4499ZM16.4499 13.3801H10.1699C8.51992 13.3801 8.16992 13.7301 8.16992 15.3801V20.3801H16.4499V13.3801Z" fill="#2980B9"/>
+<path opacity="0.6" d="M15.9395 19.8801V13.8801H21.7194C23.0894 13.8801 23.2194 14.0101 23.2194 15.3801V19.8801H15.9395Z" fill="#ADDFF3"/>
+<path opacity="0.6" d="M21.7194 14.3801C22.0217 14.3648 22.3246 14.3917 22.6195 14.4601C22.7182 14.7561 22.7523 15.0698 22.7194 15.3801V19.3801H16.4395V14.3801H21.7194ZM21.7194 13.3801H15.4395V20.3801H23.7194V15.3801C23.7194 13.7301 23.3694 13.3801 21.7194 13.3801Z" fill="#2980B9"/>
+<path opacity="0.8" d="M15.6992 26.23H23.1892" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M8.69922 26.23H15.4392" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M15.6992 32.23H23.1892" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M8.69922 32.23H15.4392" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M15.6992 38.23H23.1892" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M8.69922 38.23H15.4392" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M15.6992 44.23H23.1892" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M8.69922 44.23H15.4392" stroke="#C18F35" stroke-linejoin="round"/>
+</g>
+<path d="M42.4492 49.8801C41.0792 49.8801 40.9492 49.7501 40.9492 48.3801V19.8801H48.2292V49.8801H42.4492Z" fill="#F0ECB6"/>
+<path d="M47.7292 20.3801V49.3801H42.4492C42.147 49.3955 41.844 49.3686 41.5492 49.3001C41.4504 49.0042 41.4163 48.6904 41.4492 48.3801V20.3801H47.7292ZM48.7292 19.3801H40.4492V48.3801C40.4492 50.0301 40.7992 50.3801 42.4492 50.3801H48.7292V19.3801Z" fill="#C18F35"/>
+<path d="M48.2207 49.8801V19.8801H55.5007V48.3801C55.5007 49.7501 55.3707 49.8801 54.0007 49.8801H48.2207Z" fill="#F0ECB6"/>
+<path d="M55.0007 20.3801V48.3801C55.0157 48.6824 54.9888 48.9853 54.9207 49.2801C54.6247 49.3789 54.311 49.413 54.0007 49.3801H48.7207V20.3801H55.0007ZM56.0007 19.3801H47.7207V50.3801H54.0007C55.6507 50.3801 56.0007 50.0301 56.0007 48.3801V19.3801Z" fill="#C18F35"/>
+<path d="M41 19.8801V15.3801C41 14.0101 41.13 13.8801 42.5 13.8801H48.28V19.8801H41Z" fill="#ADDFF3"/>
+<path d="M47.7292 14.3801V19.3801H41.4492V15.3801C41.4342 15.0779 41.4612 14.775 41.5292 14.4801C41.8252 14.3813 42.1389 14.3472 42.4492 14.3801H47.7292ZM48.7292 13.3801H42.4492C40.7992 13.3801 40.4492 13.7301 40.4492 15.3801V20.3801H48.7292V13.3801Z" fill="#2980B9"/>
+<path d="M48.2207 19.8801V13.8801H54.0007C55.3707 13.8801 55.5007 14.0101 55.5007 15.3801V19.8801H48.2207Z" fill="#ADDFF3"/>
+<path d="M54.0007 14.3801C54.303 14.3648 54.6059 14.3917 54.9007 14.4601C54.9995 14.7561 55.0336 15.0698 55.0007 15.3801V19.3801H48.7207V14.3801H54.0007ZM54.0007 13.3801H47.7207V20.3801H56.0007V15.3801C56.0007 13.7301 55.6507 13.3801 54.0007 13.3801Z" fill="#2980B9"/>
+<path opacity="0.8" d="M47.9805 26.23H55.4705" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M40.9805 26.23H47.7205" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M47.9805 32.23H55.4705" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M40.9805 32.23H47.7205" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M47.9805 38.23H55.4705" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M40.9805 38.23H47.7205" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M47.9805 44.23H55.4705" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M40.9805 44.23H47.7205" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M37.5499 32L34.1699 29.47V34.53L37.5499 32Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.9461 29.0229C34.1154 28.9381 34.318 28.9563 34.4695 29.0697L37.8495 31.5997C37.9757 31.6941 38.0499 31.8424 38.0499 32C38.0499 32.1575 37.9757 32.3058 37.8495 32.4003L34.4695 34.9303C34.318 35.0437 34.1154 35.0618 33.9461 34.9771C33.7768 34.8923 33.6699 34.7193 33.6699 34.53V29.47C33.6699 29.2807 33.7768 29.1076 33.9461 29.0229ZM34.6699 30.4688V33.5312L36.7155 32L34.6699 30.4688Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.4492 32C25.4492 31.4477 25.8969 31 26.4492 31H33.8892C34.4415 31 34.8892 31.4477 34.8892 32C34.8892 32.5523 34.4415 33 33.8892 33H26.4492C25.8969 33 25.4492 32.5523 25.4492 32Z" fill="#528D19"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge.svg
new file mode 100644
index 0000000..f9829a4
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge.svg
@@ -0,0 +1,26 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 17.48C8.13 17.48 8 17.36 8 16V12C8 10.63 8.13 10.5 9.5 10.5H14V17.5L9.5 17.48Z" fill="#D3D4F3"/>
+<path d="M13.5 11V17H9.5C9.19774 17.0154 8.89481 16.9884 8.6 16.92C8.50121 16.624 8.46711 16.3103 8.5 16V12C8.48502 11.6977 8.51194 11.3949 8.58 11.1C8.87598 11.0012 9.18971 10.9671 9.5 11H13.5ZM14.5 10H9.5C7.85 10 7.5 10.35 7.5 12V16C7.5 17.65 7.85 18 9.5 18H14.5V10Z" fill="#666BD1"/>
+<path d="M14 17.48V10.48H25.19C26.56 10.48 26.69 10.61 26.69 11.98V15.98C26.69 17.35 26.56 17.48 25.19 17.48H14Z" fill="#D3D4F3"/>
+<path d="M25.19 11C25.4923 10.9846 25.7952 11.0116 26.09 11.08C26.1888 11.376 26.2229 11.6897 26.19 12V16C26.205 16.3023 26.1781 16.6051 26.11 16.9C25.814 16.9988 25.5003 17.0329 25.19 17H14.5V11H25.19ZM25.19 10H13.5V18H25.19C26.84 18 27.19 17.65 27.19 16V12C27.19 10.35 26.84 10 25.19 10Z" fill="#666BD1"/>
+<path opacity="0.8" d="M20.2695 17.0999V10.8599" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M32.8906 53.4998C31.5206 53.4998 31.3906 53.3698 31.3906 51.9998V27.5598H56.0006V51.9998C56.0006 53.3698 55.8706 53.4998 54.5006 53.4998H32.8906Z" fill="#F0ECB6"/>
+<path d="M55.4906 28.0598V51.9998C55.5055 52.3021 55.4786 52.6049 55.4106 52.8998C55.1147 52.9986 54.8009 53.0327 54.4906 52.9998H32.8906C32.5884 53.0152 32.2854 52.9882 31.9906 52.9198C31.8918 52.6238 31.8577 52.3101 31.8906 51.9998V28.0598H55.4906ZM56.4906 27.0598H30.8906V51.9998C30.8906 53.6498 31.2406 53.9998 32.8906 53.9998H54.4906C56.1406 53.9998 56.4906 53.6498 56.4906 51.9998V27.0598Z" fill="#C18F36"/>
+<g opacity="0.8">
+<path opacity="0.8" d="M39.5801 52.99V28" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M47.8008 52.99V28" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M31.8809 33.99H55.4709" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M31.8809 40.3599H55.4709" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M31.8809 46.73H55.4709" stroke="#C18F36" stroke-miterlimit="10"/>
+</g>
+<path d="M47.8105 27.55V21.55H54.5005C55.8705 21.55 56.0005 21.68 56.0005 23.05V27.55H47.8105Z" fill="#ADDFF3"/>
+<path d="M54.5005 22.05C54.8028 22.0347 55.1057 22.0616 55.4005 22.13C55.4993 22.426 55.5334 22.7398 55.5005 23.05V27.05H48.3105V22.05H54.5005ZM54.5005 21.05H47.3105V28.05H56.5005V23.05C56.5005 21.4 56.1505 21.05 54.5005 21.05Z" fill="#2980B9"/>
+<path d="M31.3906 27.55V23.05C31.3906 21.68 31.5206 21.55 32.8906 21.55H39.5806V27.55H31.3906Z" fill="#ADDFF3"/>
+<path d="M39.0806 22.05V27.05H31.8906V23.05C31.8756 22.7478 31.9026 22.4449 31.9706 22.15C32.2666 22.0513 32.5803 22.0172 32.8906 22.05H39.0806ZM40.0806 21.05H32.8906C31.2406 21.05 30.8906 21.4 30.8906 23.05V28.05H40.0806V21.05Z" fill="#2980B9"/>
+<path d="M47.7896 21.55H39.5996V27.55H47.7896V21.55Z" fill="#ADDFF3"/>
+<path d="M47.2894 22.05V27.05H40.0994V22.05H47.2794H47.2894ZM48.2794 21.05H39.1094V28.05H48.2994V21.05H48.2794Z" fill="#2980B9"/>
+<path d="M27.8702 44L24.4902 41.47V46.53L27.8702 44Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2664 41.0229C24.4357 40.9381 24.6383 40.9563 24.7899 41.0697L28.1699 43.5997C28.296 43.6941 28.3702 43.8424 28.3702 44C28.3702 44.1575 28.296 44.3058 28.1699 44.4003L24.7899 46.9302C24.6383 47.0437 24.4357 47.0618 24.2664 46.9771C24.0971 46.8923 23.9902 46.7193 23.9902 46.53V41.47C23.9902 41.2807 24.0971 41.1076 24.2664 41.0229ZM24.9902 42.4688V45.5311L27.0359 44L24.9902 42.4688Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0996 44C16.0996 43.4477 16.5473 43 17.0996 43H24.2096C24.7619 43 25.2096 43.4477 25.2096 44C25.2096 44.5523 24.7619 45 24.2096 45H17.0996C16.5473 45 16.0996 44.5523 16.0996 44Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9609 20.5598C17.5132 20.5598 17.9609 21.0075 17.9609 21.5598V43.9998C17.9609 44.5521 17.5132 44.9998 16.9609 44.9998C16.4087 44.9998 15.9609 44.5521 15.9609 43.9998V21.5598C15.9609 21.0075 16.4087 20.5598 16.9609 20.5598Z" fill="#528D19"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_anti_join.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_anti_join.svg
new file mode 100644
index 0000000..b04ba57
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_anti_join.svg
@@ -0,0 +1,35 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1191 18.5898C8.74914 18.5898 8.61914 18.4598 8.61914 17.0898V13.0898C8.61914 11.7198 8.74914 11.5898 10.1191 11.5898H14.6191V18.5898H10.1191Z" fill="#D3D4F3"/>
+<path d="M14.1191 12.1099V18.1099H10.1191C9.81688 18.1252 9.51395 18.0983 9.21914 18.0299C9.12004 17.734 9.08593 17.4202 9.11914 17.1099V13.1099C9.10429 12.8076 9.13121 12.5048 9.19914 12.2099C9.49512 12.1111 9.80885 12.077 10.1191 12.1099H14.1191ZM15.1191 11.1099H10.1191C8.46914 11.1099 8.11914 11.4599 8.11914 13.1099V17.1099C8.11914 18.7599 8.46914 19.1099 10.1191 19.1099H15.1191V11.1099Z" fill="#666BD1"/>
+<path d="M14.6309 18.5898V11.5898H25.8109C27.1809 11.5898 27.3109 11.7198 27.3109 13.0898V17.0898C27.3109 18.4598 27.1809 18.5898 25.8109 18.5898H14.6309Z" fill="#D3D4F3"/>
+<path d="M25.8109 12.1099C26.1131 12.0945 26.416 12.1214 26.7109 12.1899C26.8096 12.4858 26.8437 12.7996 26.8109 13.1099V17.1099C26.8258 17.4121 26.7989 17.715 26.7309 18.0099C26.4349 18.1087 26.1211 18.1428 25.8109 18.1099H15.1309V12.1099H25.8109ZM25.8109 11.1099H14.1309V19.1099H25.8109C27.4609 19.1099 27.8109 18.7599 27.8109 17.1099V13.1099C27.8109 11.4599 27.4609 11.1099 25.8109 11.1099Z" fill="#666BD1"/>
+<path opacity="0.8" d="M20.9004 18.21V11.97" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M28.4894 38.1098L25.1094 35.5798V40.6398L28.4894 38.1098Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8856 35.1327C25.0548 35.048 25.2574 35.0661 25.409 35.1796L28.789 37.7096C28.9151 37.804 28.9894 37.9523 28.9894 38.1098C28.9894 38.2674 28.9151 38.4157 28.789 38.5101L25.409 41.0401C25.2574 41.1536 25.0548 41.1717 24.8856 41.0869C24.7163 41.0022 24.6094 40.8291 24.6094 40.6398V35.5798C24.6094 35.3905 24.7163 35.2175 24.8856 35.1327ZM25.6094 36.5787V39.641L27.655 38.1098L25.6094 36.5787Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7305 38.1099C16.7305 37.5576 17.1782 37.1099 17.7305 37.1099H24.8305C25.3828 37.1099 25.8305 37.5576 25.8305 38.1099C25.8305 38.6621 25.3828 39.1099 24.8305 39.1099H17.7305C17.1782 39.1099 16.7305 38.6621 16.7305 38.1099Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5801 21.6702C18.1324 21.6702 18.5801 22.1179 18.5801 22.6702V38.1102C18.5801 38.6625 18.1324 39.1102 17.5801 39.1102C17.0278 39.1102 16.5801 38.6625 16.5801 38.1102V22.6702C16.5801 22.1179 17.0278 21.6702 17.5801 21.6702Z" fill="#528D19"/>
+<path d="M34.2598 52.1602C32.8898 52.1602 32.7598 52.0302 32.7598 50.6602V28.1602H39.9998V52.1602H34.2598Z" fill="#F0ECB6"/>
+<path d="M39.5398 28.6602V51.6602H34.2598C33.9575 51.6755 33.6546 51.6486 33.3598 51.5802C33.261 51.2842 33.2269 50.9704 33.2598 50.6602V28.6602H39.5398ZM40.5398 27.6602H32.2598V50.6602C32.2598 52.3102 32.6098 52.6602 34.2598 52.6602H40.5398V27.6602Z" fill="#C18F35"/>
+<path d="M32.7598 28.1602V23.6602C32.7598 22.2902 32.8898 22.1602 34.2598 22.1602H39.9998V28.1602H32.7598Z" fill="#ADDFF3"/>
+<path d="M39.5398 22.6602V27.6602H33.2598V23.6602C33.2448 23.3579 33.2717 23.055 33.3398 22.7602C33.6357 22.6614 33.9495 22.6273 34.2598 22.6602H39.5398ZM40.5398 21.6602H34.2598C32.6098 21.6602 32.2598 22.0102 32.2598 23.6602V28.6602H40.5398V21.6602Z" fill="#2980B9"/>
+<path opacity="0.8" d="M32.7891 34.51H39.5291" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M32.7891 40.51H39.5291" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M32.7891 46.51H39.5291" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M47.3405 28.1602H40.0605V52.1602H47.3405V28.1602Z" fill="#F0ECB6"/>
+<path d="M46.8405 28.6602V51.6602H40.5605V28.6602H46.8405ZM47.8405 27.6602H39.5605V52.6602H47.8405V27.6602Z" fill="#C18F35"/>
+<path d="M47.3203 52.1602V28.1602H54.6003V50.6602C54.6003 52.0302 54.4703 52.1602 53.1003 52.1602H47.3203Z" fill="#D3D4F3"/>
+<path d="M54.1103 28.6602V50.6602C54.1253 50.9624 54.0984 51.2653 54.0303 51.5602C53.7343 51.6589 53.4206 51.693 53.1103 51.6602H47.8203V28.6602H54.1003H54.1103ZM55.1003 27.6602H46.8203V52.6602H53.1003C54.7503 52.6602 55.1003 52.3102 55.1003 50.6602V27.6602Z" fill="#666BD1"/>
+<path d="M47.3405 22.1602H40.0605V28.1602H47.3405V22.1602Z" fill="#ADDFF3"/>
+<path d="M46.8405 22.6602V27.6602H40.5605V22.6602H46.8405ZM47.8405 21.6602H39.5605V28.6602H47.8405V21.6602Z" fill="#2980B9"/>
+<path d="M47.3203 28.1602V22.1602H53.1003C54.4703 22.1602 54.6003 22.2902 54.6003 23.6602V28.1602H47.3203Z" fill="#ADDFF3"/>
+<path d="M53.1101 22.6602C53.4123 22.6448 53.7153 22.6717 54.0101 22.7402C54.1092 23.0361 54.1433 23.3499 54.1101 23.6602V27.6602H47.8201V22.6602H53.1001H53.1101ZM53.1001 21.6602H46.8301V28.6602H55.1101V23.6602C55.1101 22.0102 54.7601 21.6602 53.1101 21.6602H53.1001Z" fill="#2980B9"/>
+<path opacity="0.8" d="M47.0898 34.51H54.5798" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M40.0898 34.51H46.8198" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M47.0898 40.51H54.5798" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M40.0898 40.51H46.8198" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M47.0898 46.51H54.5798" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M40.0898 46.51H46.8198" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M50.8291 44.7502C53.1984 44.7502 55.119 42.8295 55.119 40.4602C55.119 38.0909 53.1984 36.1702 50.8291 36.1702C48.4598 36.1702 46.5391 38.0909 46.5391 40.4602C46.5391 42.8295 48.4598 44.7502 50.8291 44.7502Z" fill="#DEF4FD"/>
+<path d="M50.8301 36.9202C51.5302 36.9202 52.2146 37.1278 52.7968 37.5168C53.3789 37.9057 53.8327 38.4586 54.1006 39.1055C54.3685 39.7523 54.4386 40.4641 54.3021 41.1508C54.1655 41.8375 53.8283 42.4682 53.3332 42.9633C52.8382 43.4584 52.2074 43.7956 51.5207 43.9321C50.834 44.0687 50.1222 43.9986 49.4754 43.7307C48.8285 43.4628 48.2757 43.009 47.8867 42.4269C47.4977 41.8447 47.2901 41.1603 47.2901 40.4602C47.2927 39.5221 47.6665 38.6232 48.3298 37.9599C48.9931 37.2966 49.892 36.9228 50.8301 36.9202ZM50.8301 35.4202C49.8412 35.4202 48.8745 35.7134 48.0522 36.2628C47.23 36.8122 46.5891 37.5931 46.2107 38.5068C45.8322 39.4204 45.7332 40.4257 45.9262 41.3956C46.1191 42.3655 46.5953 43.2564 47.2945 43.9557C47.9938 44.655 48.8847 45.1312 49.8546 45.3241C50.8245 45.517 51.8299 45.418 52.7435 45.0396C53.6571 44.6611 54.438 44.0203 54.9874 43.198C55.5368 42.3758 55.8301 41.4091 55.8301 40.4202C55.8301 39.0941 55.3033 37.8223 54.3656 36.8846C53.4279 35.947 52.1562 35.4202 50.8301 35.4202Z" fill="#CC0000"/>
+<path d="M47.5508 42.73L54.0608 38" stroke="#CC0000" stroke-width="1.5" stroke-miterlimit="10"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_append.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_append.svg
new file mode 100644
index 0000000..5974099
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_append.svg
@@ -0,0 +1,55 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.3203 41.36C29.0348 41.3581 29.7382 41.1831 30.3703 40.8499C30.8158 40.5937 31.1824 40.2201 31.4303 39.77C31.6579 39.3355 31.794 38.859 31.8303 38.3699C31.8703 37.8699 31.8903 37.3833 31.8903 36.91V37.2599C31.8903 36.5799 31.8903 36.01 31.8903 35.54C31.9009 35.138 31.9377 34.7371 32.0003 34.34C32.0426 34.0513 32.1303 33.7711 32.2603 33.5099C32.3745 33.288 32.523 33.0855 32.7003 32.91C32.8822 32.7258 33.0913 32.5707 33.3203 32.45C33.5254 32.3416 33.7396 32.2512 33.9603 32.18C34.1561 32.1191 34.3569 32.0756 34.5603 32.0499C34.7503 32.0499 34.7503 31.95 34.5603 31.93C34.3569 31.9042 34.1561 31.8607 33.9603 31.7999C33.7389 31.7305 33.5246 31.6401 33.3203 31.53C33.0912 31.4094 32.8821 31.2542 32.7003 31.07C32.5235 30.8939 32.375 30.6915 32.2603 30.4699C32.1305 30.2087 32.0427 29.9286 32.0003 29.6399C31.9378 29.2427 31.901 28.8419 31.8903 28.44C31.8903 27.9666 31.8903 27.3899 31.8903 26.7099V27.07C31.8903 26.6 31.8903 26.07 31.8303 25.61C31.7943 25.1208 31.6581 24.6443 31.4303 24.2099C31.182 23.7601 30.8154 23.3867 30.3703 23.1299C29.7375 22.7986 29.0346 22.6237 28.3203 22.62V22.2H28.8503C29.0763 22.2181 29.3004 22.2549 29.5203 22.3099C29.7657 22.3688 30.0063 22.4457 30.2403 22.54C30.4918 22.643 30.7274 22.7811 30.9403 22.95C31.2701 23.1962 31.5515 23.5014 31.7703 23.85C31.9774 24.2063 32.1228 24.5951 32.2003 25C32.2935 25.4241 32.3471 25.8559 32.3603 26.29C32.3603 26.76 32.3603 28.17 32.3603 28.17C32.3525 28.6726 32.3927 29.1749 32.4803 29.67C32.5677 30.0473 32.7462 30.3976 33.0003 30.69C33.2713 31.0088 33.614 31.259 34.0003 31.42C34.0995 31.482 34.1813 31.5682 34.238 31.6706C34.2947 31.7729 34.3244 31.888 34.3244 32.005C34.3244 32.1219 34.2947 32.237 34.238 32.3393C34.1813 32.4417 34.0995 32.5279 34.0003 32.59C33.6142 32.7512 33.2716 33.0013 33.0003 33.32C32.759 33.6293 32.5976 33.9934 32.5303 34.38C32.4427 34.875 32.4025 35.3773 32.4103 35.88C32.4103 35.88 32.3203 38.66 32.2303 39.0499C32.1446 39.4271 31.9994 39.7883 31.8003 40.1199C31.582 40.469 31.3005 40.7742 30.9703 41.02C30.7573 41.1887 30.5217 41.3268 30.2703 41.43C30.036 41.5234 29.7954 41.6002 29.5503 41.66C29.3302 41.7141 29.1062 41.7508 28.8803 41.77H28.3503L28.3203 41.36Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M11.3906 53.46C10.0206 53.46 9.89062 53.33 9.89062 51.96V40.46H17.1706V53.46H11.3906Z" fill="#F0ECB6"/>
+<path d="M16.6706 41V53H11.3906C11.0884 53.0154 10.7854 52.9884 10.4906 52.92C10.3918 52.624 10.3577 52.3103 10.3906 52V41H16.6706ZM17.6706 40H9.39062V52C9.39062 53.65 9.74063 54 11.3906 54H17.6706V40Z" fill="#C18F35"/>
+<path d="M17.1602 53.46V40.46H24.4402V52C24.4402 53.37 24.3102 53.5 22.9402 53.5L17.1602 53.46Z" fill="#F0ECB6"/>
+<path d="M23.9402 41V52C23.9551 52.3023 23.9282 52.6051 23.8602 52.9C23.5642 52.9988 23.2504 53.0329 22.9402 53H17.6602V41H23.9402ZM24.9402 40H16.6602V54H22.9402C24.5902 54 24.9402 53.65 24.9402 52V40Z" fill="#C18F35"/>
+<path d="M9.89062 40.46V36C9.89062 34.63 10.0206 34.5 11.3906 34.5H17.1706V40.5L9.89062 40.46Z" fill="#ADDFF3"/>
+<path d="M16.6706 35V40H10.3906V36C10.3756 35.6977 10.4026 35.3949 10.4706 35.1C10.7666 35.0012 11.0803 34.9671 11.3906 35H16.6706ZM17.6706 34H11.3906C9.74063 34 9.39062 34.35 9.39062 36V41H17.6706V34Z" fill="#2980B9"/>
+<path d="M17.1602 40.46V34.46H22.9402C24.3102 34.46 24.4402 34.59 24.4402 35.96V40.46H17.1602Z" fill="#ADDFF3"/>
+<path d="M22.9402 35C23.2424 34.9846 23.5453 35.0116 23.8402 35.08C23.9389 35.376 23.973 35.6897 23.9402 36V40H17.6602V35H22.9402ZM22.9402 34H16.6602V41H24.9402V36C24.9402 34.35 24.5902 34 22.9402 34Z" fill="#2980B9"/>
+<path opacity="0.8" d="M16.9199 46.8098H24.4099" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M9.91992 46.8098H16.6599" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M13.77 42V45.36H13V42H13.77Z" fill="#34495E"/>
+<path d="M12.8891 48.47V51.83H12.1191V48.47H12.8891Z" fill="#34495E"/>
+<path d="M14.9497 48.47V51.83H14.1797V48.47H14.9497Z" fill="#34495E"/>
+<path d="M11.3906 29.3098C10.0206 29.3098 9.89062 29.1798 9.89062 27.8098V16.3098H17.1706V29.3098H11.3906Z" fill="#D3D4F3"/>
+<path d="M16.6706 16.8098V28.8098H11.3906C11.0884 28.8252 10.7854 28.7983 10.4906 28.7298C10.3918 28.4338 10.3577 28.1201 10.3906 27.8098V16.8098H16.6706ZM17.6706 15.8098H9.39062V27.8098C9.39062 29.4598 9.74063 29.8098 11.3906 29.8098H17.6706V15.8098Z" fill="#666BD1"/>
+<path d="M17.1602 29.3098V16.3098H24.4402V27.8098C24.4402 29.1798 24.3102 29.3098 22.9402 29.3098H17.1602Z" fill="#D3D4F3"/>
+<path d="M23.9402 16.8098V27.8098C23.9551 28.1121 23.9282 28.4149 23.8602 28.7098C23.5642 28.8086 23.2504 28.8427 22.9402 28.8098H17.6602V16.8098H23.9402ZM24.9402 15.8098H16.6602V29.8098H22.9402C24.5902 29.8098 24.9402 29.4598 24.9402 27.8098V15.8098Z" fill="#666BD1"/>
+<path d="M9.89062 16.3098V11.8098C9.89062 10.4398 10.0206 10.3098 11.3906 10.3098H17.1706V16.3098H9.89062Z" fill="#ADDFF3"/>
+<path d="M16.6706 10.8098V15.8098H10.3906V11.8098C10.3756 11.5076 10.4026 11.2047 10.4706 10.9098C10.7666 10.811 11.0803 10.7769 11.3906 10.8098H16.6706ZM17.6706 9.80981H11.3906C9.74063 9.80981 9.39062 10.1598 9.39062 11.8098V16.8098H17.6706V9.80981Z" fill="#2980B9"/>
+<path d="M17.1602 16.3098V10.3098H22.9402C24.3102 10.3098 24.4402 10.4398 24.4402 11.8098V16.3098H17.1602Z" fill="#ADDFF3"/>
+<path d="M22.9402 10.8098C23.2424 10.7944 23.5453 10.8214 23.8402 10.8898C23.9389 11.1858 23.973 11.4995 23.9402 11.8098V15.8098H17.6602V10.8098H22.9402ZM22.9402 9.80981H16.6602V16.8098H24.9402V11.8098C24.9402 10.1598 24.5902 9.80981 22.9402 9.80981Z" fill="#2980B9"/>
+<path opacity="0.8" d="M16.9199 22.6602H24.4099" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M9.91992 22.6602H16.6599" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M13.77 17.79V21.15H13V17.79H13.77Z" fill="#34495E"/>
+<path d="M12.8891 24.1702V27.5302H12.1191V24.1702H12.8891Z" fill="#34495E"/>
+<path d="M14.9497 24.1702V27.5302H14.1797V24.1702H14.9497Z" fill="#34495E"/>
+<path d="M40.5391 47.76C39.1691 47.76 39.0391 47.63 39.0391 46.26V41.46H46.3191V47.76H40.5391Z" fill="#F0ECB6"/>
+<path d="M45.8191 42V47.3H40.5391C40.2368 47.3152 39.9339 47.2883 39.6391 47.22C39.5403 46.924 39.5062 46.6103 39.5391 46.3V42H45.8191ZM46.8191 41H38.5391V46.3C38.5391 47.95 38.8891 48.3 40.5391 48.3H46.8191V41Z" fill="#C18F35"/>
+<path d="M46.3105 47.76V41.46H53.5905V46.26C53.5905 47.63 53.4605 47.76 52.0905 47.76H46.3105Z" fill="#F0ECB6"/>
+<path d="M53.0905 42V46.3C53.1055 46.6023 53.0786 46.9051 53.0105 47.2C52.7146 47.2988 52.4008 47.3329 52.0905 47.3H46.8105V42H53.0905ZM54.0905 41H45.8105V48.3H52.0905C53.7405 48.3 54.0905 47.95 54.0905 46.3V41Z" fill="#C18F35"/>
+<path d="M46.3191 35.1602H39.0391V41.4602H46.3191V35.1602Z" fill="#D3D4F3"/>
+<path d="M45.8191 35.66V41H39.5391V35.7H45.8191V35.66ZM46.8191 34.7H38.5391V42H46.8191V34.7Z" fill="#666BD1"/>
+<path d="M53.5905 35.1602H46.3105V41.4602H53.5905V35.1602Z" fill="#D3D4F3"/>
+<path d="M53.0905 35.66V41H46.8105V35.7H53.0905V35.66ZM54.0905 34.7H45.8105V42H54.0905V34.7Z" fill="#666BD1"/>
+<path d="M46.3191 28.8398H39.0391V35.1398H46.3191V28.8398Z" fill="#F0ECB6"/>
+<path d="M45.8191 29.3398V34.6398H39.5391V29.3398H45.8191ZM46.8191 28.3398H38.5391V35.6398H46.8191V28.3398Z" fill="#C18F35"/>
+<path d="M53.5905 28.8398H46.3105V35.1398H53.5905V28.8398Z" fill="#F0ECB6"/>
+<path d="M53.0905 29.3398V34.6398H46.8105V29.3398H53.0905ZM54.0905 28.3398H45.8105V35.6398H54.0905V28.3398Z" fill="#C18F35"/>
+<path d="M46.3191 22.55H39.0391V28.8501H46.3191V22.55Z" fill="#D3D4F3"/>
+<path d="M45.8191 23V28.3H39.5391V23H45.8191ZM46.8191 22H38.5391V29.3H46.8191V22Z" fill="#666BD1"/>
+<path d="M53.5905 22.55H46.3105V28.8501H53.5905V22.55Z" fill="#D3D4F3"/>
+<path d="M53.0905 23V28.3H46.8105V23H53.0905ZM54.0905 22H45.8105V29.3H54.0905V22Z" fill="#666BD1"/>
+<path d="M39 22.54V17.74C39 16.37 39.13 16.24 40.5 16.24H46.28V22.54H39Z" fill="#ADDFF3"/>
+<path d="M45.8191 16.74V22H39.5391V17.7C39.5241 17.3977 39.551 17.0948 39.6191 16.8C39.915 16.7012 40.2288 16.6671 40.5391 16.7H45.8191V16.74ZM46.8191 15.7H40.5391C38.8891 15.7 38.5391 16.05 38.5391 17.7V23H46.8191V15.7Z" fill="#2980B9"/>
+<path d="M46.3105 22.54V16.24H52.0905C53.4605 16.24 53.5905 16.37 53.5905 17.74V22.54H46.3105Z" fill="#ADDFF3"/>
+<path d="M52.0905 16.74C52.3928 16.7246 52.6957 16.7515 52.9905 16.82C53.0893 17.1159 53.1234 17.4297 53.0905 17.74V22H46.8105V16.7H52.0905V16.74ZM52.0905 15.7H45.8105V23H54.0905V17.7C54.0905 16.05 53.7405 15.7 52.0905 15.7Z" fill="#2980B9"/>
+<path d="M43.0005 24.1199V27.4799H42.2305V24.1199H43.0005Z" fill="#34495E"/>
+<path d="M43.0005 30.3298V33.6898H42.2305V30.3298H43.0005Z" fill="#34495E"/>
+<path d="M42.1509 43V46.36H41.3809V43H42.1509Z" fill="#34495E"/>
+<path d="M44.2095 43V46.36H43.4395V43H44.2095Z" fill="#34495E"/>
+<path d="M42.1509 36.78V40.14H41.3809V36.78H42.1509Z" fill="#34495E"/>
+<path d="M44.2095 36.78V40.14H43.4395V36.78H44.2095Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_semi_join.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_semi_join.svg
new file mode 100644
index 0000000..0528ad1
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_merge_semi_join.svg
@@ -0,0 +1,34 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5098 18.1802C9.13977 18.1802 9.00977 18.0502 9.00977 16.6802V12.6802C9.00977 11.3102 9.13977 11.1802 10.5098 11.1802H14.9998V18.1802H10.5098Z" fill="#D3D4F3"/>
+<path d="M14.5098 11.6902V17.6902H10.5098C10.2075 17.7054 9.9046 17.6785 9.60977 17.6102C9.51098 17.3142 9.47687 17.0005 9.50977 16.6902V12.6902C9.49479 12.3879 9.52171 12.0851 9.58977 11.7902C9.88574 11.6914 10.1995 11.6573 10.5098 11.6902H14.5098ZM15.5098 10.6902H10.5098C8.85977 10.6902 8.50977 11.0402 8.50977 12.6902V16.6902C8.50977 18.3402 8.85977 18.6902 10.5098 18.6902H15.5098V10.6902Z" fill="#666BD1"/>
+<path d="M15 18.1802V11.1802H26.2C27.57 11.1802 27.7 11.3102 27.7 12.6802V16.6802C27.7 18.0502 27.57 18.1802 26.2 18.1802H15Z" fill="#D3D4F3"/>
+<path d="M26.1998 11.6902C26.502 11.6748 26.8049 11.7017 27.0998 11.7702C27.1986 12.0662 27.2327 12.3799 27.1998 12.6902V16.6902C27.2146 16.9924 27.1877 17.2953 27.1198 17.5902C26.8238 17.689 26.5101 17.7231 26.1998 17.6902H15.5098V11.6902H26.1998ZM26.1998 10.6902H14.5098V18.6902H26.1998C27.8498 18.6902 28.1998 18.3402 28.1998 16.6902V12.6902C28.1998 11.0402 27.8498 10.6902 26.1998 10.6902Z" fill="#666BD1"/>
+<path opacity="0.8" d="M21.2793 17.79V11.55" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M28.88 37.6902L25.5 35.1602V40.2202L28.88 37.6902Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.2762 34.7131C25.4455 34.6283 25.6481 34.6464 25.7996 34.7599L29.1796 37.2899C29.3057 37.3843 29.38 37.5326 29.38 37.6902C29.38 37.8477 29.3057 37.996 29.1796 38.0904L25.7996 40.6204C25.6481 40.7339 25.4455 40.752 25.2762 40.6673C25.1069 40.5825 25 40.4095 25 40.2202V35.1602C25 34.9709 25.1069 34.7978 25.2762 34.7131ZM26 36.159V39.2213L28.0456 37.6902L26 36.159Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1094 37.6902C17.1094 37.1379 17.5571 36.6902 18.1094 36.6902H25.2094C25.7617 36.6902 26.2094 37.1379 26.2094 37.6902C26.2094 38.2425 25.7617 38.6902 25.2094 38.6902H18.1094C17.5571 38.6902 17.1094 38.2425 17.1094 37.6902Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9707 21.25C18.523 21.25 18.9707 21.6977 18.9707 22.25V37.69C18.9707 38.2423 18.523 38.69 17.9707 38.69C17.4184 38.69 16.9707 38.2423 16.9707 37.69V22.25C16.9707 21.6977 17.4184 21.25 17.9707 21.25Z" fill="#528D19"/>
+<path d="M34.6406 52.5698C33.2706 52.5698 33.1406 52.4398 33.1406 51.0698V28.5698H40.4206V52.5698H34.6406Z" fill="#F0ECB6"/>
+<path d="M39.9206 29.0698V52.0698H34.6406C34.3384 52.0852 34.0354 52.0583 33.7406 51.9898C33.6418 51.6938 33.6077 51.3801 33.6406 51.0698V29.0698H39.9206ZM40.9206 28.0698H32.6406V51.0698C32.6406 52.7198 32.9906 53.0698 34.6406 53.0698H40.9206V28.0698Z" fill="#C18F35"/>
+<path d="M33.1406 28.5698V24.0698C33.1406 22.6998 33.2706 22.5698 34.6406 22.5698H40.4206V28.5698H33.1406Z" fill="#ADDFF3"/>
+<path d="M39.9206 23.0698V28.0698H33.6406V24.0698C33.6256 23.7676 33.6526 23.4647 33.7206 23.1698C34.0166 23.071 34.3303 23.0369 34.6406 23.0698H39.9206ZM40.9206 22.0698H34.6406C32.9906 22.0698 32.6406 22.4198 32.6406 24.0698V29.0698H40.9206V22.0698Z" fill="#2980B9"/>
+<path opacity="0.8" d="M33.1699 34.9202H39.9099" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M33.1699 40.9202H39.9099" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M33.1699 46.9202H39.9099" stroke="#C18F35" stroke-linejoin="round"/>
+<g opacity="0.6">
+<path opacity="0.6" d="M47.7195 28.5698H40.4395V52.5698H47.7195V28.5698Z" fill="#F0ECB6"/>
+<path opacity="0.6" d="M47.2195 29.0698V52.0698H40.9395V29.0698H47.2195ZM48.2195 28.0698H39.9395V53.0698H48.2195V28.0698Z" fill="#C18F35"/>
+<path opacity="0.6" d="M47.709 52.5698V28.5698H54.999V51.0698C54.999 52.4398 54.869 52.5698 53.499 52.5698H47.709Z" fill="#D3D4F3"/>
+<path opacity="0.6" d="M54.489 29.0698V51.0698C54.504 51.3721 54.477 51.675 54.409 51.9698C54.113 52.0686 53.7993 52.1027 53.489 52.0698H48.209V29.0698H54.489ZM55.489 28.0698H47.209V53.0698H53.489C55.139 53.0698 55.489 52.7198 55.489 51.0698V28.0698Z" fill="#666BD1"/>
+<path opacity="0.6" d="M47.7195 22.5698H40.4395V28.5698H47.7195V22.5698Z" fill="#ADDFF3"/>
+<path opacity="0.6" d="M47.2195 23.0698V28.0698H40.9395V23.0698H47.2195ZM48.2195 22.0698H39.9395V29.0698H48.2195V22.0698Z" fill="#2980B9"/>
+<path opacity="0.6" d="M47.709 28.5698V22.5698H53.489C54.859 22.5698 54.989 22.6998 54.989 24.0698V28.5698H47.709Z" fill="#ADDFF3"/>
+<path opacity="0.6" d="M53.489 23.0698C53.7913 23.0545 54.0942 23.0814 54.389 23.1498C54.4878 23.4458 54.5219 23.7595 54.489 24.0698V28.0698H48.209V23.0698H53.489ZM53.489 22.0698H47.209V29.0698H55.489V24.0698C55.489 22.4198 55.139 22.0698 53.489 22.0698Z" fill="#2980B9"/>
+<path opacity="0.8" d="M47.4688 34.9197H54.9587" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M40.4688 34.9197H47.2087" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M47.4688 40.9197H54.9587" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M40.4688 40.9197H47.2087" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M47.4688 46.9197H54.9587" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M40.4688 46.9197H47.2087" stroke="#C18F35" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_named_tuplestore_scan.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_named_tuplestore_scan.svg
new file mode 100644
index 0000000..db2d56d
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_named_tuplestore_scan.svg
@@ -0,0 +1,25 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M52.8606 22.3198H23.8105C23.2583 22.3198 22.8105 22.7675 22.8105 23.3198V28.3598C22.8105 28.9121 23.2583 29.3598 23.8105 29.3598H52.8606C53.4128 29.3598 53.8606 28.9121 53.8606 28.3598V23.3198C53.8606 22.7675 53.4128 22.3198 52.8606 22.3198Z" fill="#F3C7D7" stroke="#D04465" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M34.8906 29.0798V22.8398" stroke="#D04465" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M28.8301 29.0798V22.8398" stroke="#D04465" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M41.2695 29.0798V22.8398" stroke="#D04465" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M47.4004 29.0798V22.8398" stroke="#D04465" stroke-miterlimit="10"/>
+<path d="M52.8606 34.6802H23.8105C23.2583 34.6802 22.8105 35.1279 22.8105 35.6802V40.7202C22.8105 41.2725 23.2583 41.7202 23.8105 41.7202H52.8606C53.4128 41.7202 53.8606 41.2725 53.8606 40.7202V35.6802C53.8606 35.1279 53.4128 34.6802 52.8606 34.6802Z" fill="#ADDFF3" stroke="#2980B9" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M34.8906 41.4399V35.2" stroke="#2980B9" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M28.8301 41.4399V35.2" stroke="#2980B9" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M41.2695 41.4399V35.2" stroke="#2980B9" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M47.4004 41.4399V35.2" stroke="#2980B9" stroke-miterlimit="10"/>
+<path d="M52.8606 47.24H23.8105C23.2583 47.24 22.8105 47.6877 22.8105 48.24V53.28C22.8105 53.8323 23.2583 54.28 23.8105 54.28H52.8606C53.4128 54.28 53.8606 53.8323 53.8606 53.28V48.24C53.8606 47.6877 53.4128 47.24 52.8606 47.24Z" fill="#F0ECB6" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M34.8906 54V47.76" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M28.8301 54V47.76" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M41.2695 54V47.76" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M47.4004 54V47.76" stroke="#C18F36" stroke-miterlimit="10"/>
+<path d="M52.8606 9.71997H23.8105C23.2583 9.71997 22.8105 10.1677 22.8105 10.72V15.76C22.8105 16.3123 23.2583 16.76 23.8105 16.76H52.8606C53.4128 16.76 53.8606 16.3123 53.8606 15.76V10.72C53.8606 10.1677 53.4128 9.71997 52.8606 9.71997Z" fill="#D3D4F3" stroke="#666BD1" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M34.8906 16.47V10.23" stroke="#666BD1" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M28.8301 16.47V10.23" stroke="#666BD1" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M41.2695 16.47V10.23" stroke="#666BD1" stroke-miterlimit="10"/>
+<path opacity="0.5" d="M47.4004 16.47V10.23" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M13.6206 53.9899L10.1406 49.3499H17.0906L13.6206 53.9899Z" fill="#646464"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69341 49.1262C9.77811 48.9569 9.95124 48.8499 10.1406 48.8499H17.0906C17.2799 48.8499 17.4529 48.9567 17.5377 49.1259C17.6224 49.2952 17.6044 49.4977 17.491 49.6493L14.021 54.2893C13.9267 54.4154 13.7785 54.4898 13.621 54.4899C13.4635 54.49 13.3151 54.4159 13.2206 54.2899L9.74063 49.6499C9.627 49.4983 9.60872 49.2956 9.69341 49.1262ZM11.1406 49.8499L13.6201 53.1558L16.0924 49.8499H11.1406Z" fill="#646464"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6191 9.01001C14.1714 9.01001 14.6191 9.45773 14.6191 10.01V49.98C14.6191 50.5323 14.1714 50.98 13.6191 50.98C13.0669 50.98 12.6191 50.5323 12.6191 49.98V10.01C12.6191 9.45773 13.0669 9.01001 13.6191 9.01001Z" fill="#646464"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_nested_loop_anti_join.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_nested_loop_anti_join.svg
new file mode 100644
index 0000000..043a4fb
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_nested_loop_anti_join.svg
@@ -0,0 +1,24 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6793 17.0698C11.2138 17.0696 10.7597 17.2137 10.3796 17.4824C10.0098 17.7437 9.72775 18.1103 9.56982 18.5339C9.56784 18.5479 9.56306 18.5812 9.55708 18.641C9.54641 18.7476 9.53575 18.8931 9.52545 19.07C9.50494 19.4222 9.48737 19.8719 9.47307 20.3283C9.44441 21.2429 9.42969 22.1564 9.42969 22.3198C9.42969 22.734 9.0939 23.0698 8.67969 23.0698C8.26547 23.0698 7.92969 22.734 7.92969 22.3198C7.92969 22.1333 7.94496 21.2017 7.97381 20.2813C7.98825 19.8202 8.00631 19.3549 8.02799 18.9828C8.03878 18.7975 8.05085 18.6284 8.06452 18.4917C8.07432 18.3937 8.09273 18.2108 8.14258 18.0698C8.40119 17.3384 8.88029 16.7051 9.51385 16.2574C10.1473 15.8097 10.904 15.5695 11.6797 15.5698C11.6797 15.5698 11.6796 15.5698 11.6797 15.5698H25.6797C26.6742 15.5698 27.6281 15.9649 28.3313 16.6682C29.0346 17.3714 29.4297 18.3253 29.4297 19.3198V43.3198C29.4297 44.3144 29.0346 45.2682 28.3313 45.9715C27.6281 46.6747 26.6742 47.0698 25.6797 47.0698H11.6797C10.6851 47.0698 9.7313 46.6747 9.02804 45.9715C8.32478 45.2682 7.92969 44.3144 7.92969 43.3198V28.4598C7.92969 28.0456 8.26547 27.7098 8.67969 27.7098C9.0939 27.7098 9.42969 28.0456 9.42969 28.4598V43.3198C9.42969 43.9166 9.66674 44.4889 10.0887 44.9108C10.5107 45.3328 11.083 45.5698 11.6797 45.5698H25.6797C26.2764 45.5698 26.8487 45.3328 27.2707 44.9108C27.6926 44.4889 27.9297 43.9166 27.9297 43.3198V19.3198C27.9297 18.7231 27.6926 18.1508 27.2707 17.7288C26.8487 17.3069 26.2764 17.0698 25.6797 17.0698L11.6793 17.0698Z" fill="#666BD1"/>
+<path d="M8.67922 25.98L6.44922 28.95H10.8992L8.67922 25.98Z" fill="#666BD1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9297 21.1803C12.9754 20.7817 13.0637 20.728 13.0882 20.7131C13.0892 20.7125 13.09 20.712 13.0908 20.7115C13.1953 20.6451 13.4604 20.5698 14.1797 20.5698H23.1797C23.5754 20.5698 23.8419 20.5918 24.0263 20.6326C24.2021 20.6715 24.2535 20.7168 24.2681 20.7314C24.2827 20.746 24.328 20.7974 24.3669 20.9732C24.4077 21.1576 24.4297 21.4241 24.4297 21.8198V40.8198C24.4297 41.2156 24.4077 41.482 24.3669 41.6664C24.328 41.8423 24.2827 41.8936 24.2681 41.9082C24.2535 41.9228 24.2021 41.9682 24.0263 42.0071C23.8419 42.0479 23.5754 42.0698 23.1797 42.0698H14.4197C14.024 42.0698 13.7575 42.0479 13.5731 42.0071C13.3972 41.9682 13.3459 41.9228 13.3313 41.9082C13.3167 41.8936 13.2714 41.8423 13.2324 41.6664C13.1917 41.482 13.1697 41.2156 13.1697 40.8198V29.1798C13.1697 28.7656 12.8339 28.4298 12.4197 28.4298C12.0055 28.4298 11.6697 28.7656 11.6697 29.1798V40.8198C11.6697 41.2491 11.6915 41.6451 11.7679 41.9904C11.8461 42.3442 11.9915 42.6898 12.2706 42.9689C12.5498 43.248 12.8953 43.3934 13.2491 43.4716C13.5944 43.548 13.9904 43.5698 14.4197 43.5698H23.1797C23.609 43.5698 24.005 43.548 24.3503 43.4716C24.7041 43.3934 25.0496 43.248 25.3288 42.9689C25.6079 42.6898 25.7532 42.3442 25.8315 41.9904C25.9079 41.6451 25.9297 41.2491 25.9297 40.8198V21.8198C25.9297 21.3906 25.9079 20.9945 25.8315 20.6492C25.7532 20.2954 25.6079 19.9499 25.3288 19.6707C25.0496 19.3916 24.7041 19.2463 24.3503 19.168C24.005 19.0916 23.609 19.0698 23.1797 19.0698H14.1797C13.479 19.0698 12.7991 19.1195 12.2861 19.4456C11.6895 19.8249 11.4976 20.4408 11.4336 21.0631C11.431 21.0886 11.4297 21.1142 11.4297 21.1398V24.8198C11.4297 25.234 11.7655 25.5698 12.1797 25.5698C12.5939 25.5698 12.9297 25.234 12.9297 24.8198V21.1803Z" fill="#8D8119"/>
+<path d="M12.3999 27.99L10.4199 30.37H14.1799L12.3999 27.99Z" fill="#8D8119"/>
+<path d="M48.8691 46.9402V22.9402H56.1491V45.4402C56.1491 46.8102 56.0191 46.9402 54.6491 46.9402H48.8691Z" fill="#D3D4F3"/>
+<path d="M55.6491 23.4402V45.4402C55.6641 45.7424 55.6372 46.0453 55.5691 46.3402C55.2732 46.439 54.9594 46.4731 54.6491 46.4402H49.3691V23.4402H55.6491ZM56.6491 22.4402H48.3691V47.4402H54.6491C56.2991 47.4402 56.6491 47.0902 56.6491 45.4402V22.4402Z" fill="#666BD1"/>
+<path d="M48.8691 22.9402V16.9402H54.6491C56.0191 16.9402 56.1491 17.0702 56.1491 18.4402V22.9402H48.8691Z" fill="#ADDFF3"/>
+<path d="M54.6491 17.4402C54.9514 17.4248 55.2543 17.4517 55.5491 17.5202C55.6482 17.8161 55.6823 18.1299 55.6491 18.4402V22.4402H49.3691V17.4402H54.6491ZM54.6491 16.4402H48.3691V23.4402H56.6491V18.4402C56.6491 16.7902 56.2991 16.4402 54.6491 16.4402Z" fill="#2980B9"/>
+<path opacity="0.8" d="M48.6309 29.29H56.1209" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M48.6309 35.29H56.1209" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M48.6309 41.29H56.1209" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M43.0996 46.9402C41.7296 46.9402 41.5996 46.8102 41.5996 45.4402V22.9402H48.8796V46.9402H43.0996Z" fill="#F0ECB6"/>
+<path d="M48.3796 23.4402V46.4402H43.0996C42.7973 46.4556 42.4944 46.4286 42.1996 46.3602C42.1008 46.0642 42.0667 45.7505 42.0996 45.4402V23.4402H48.3796ZM49.3796 22.4402H41.0996V45.4402C41.0996 47.0902 41.4496 47.4402 43.0996 47.4402H49.3796V22.4402Z" fill="#C18F35"/>
+<path d="M41.5996 22.9402V18.4402C41.5996 17.0702 41.7296 16.9402 43.0996 16.9402H48.8796V22.9402H41.5996Z" fill="#ADDFF3"/>
+<path d="M48.3796 17.4402V22.4402H42.0996V18.4402C42.0848 18.1379 42.1117 17.8351 42.1796 17.5402C42.4756 17.4414 42.7893 17.4073 43.0996 17.4402H48.3796ZM49.3796 16.4402H43.0996C41.4496 16.4402 41.0996 16.7902 41.0996 18.4402V23.4402H49.3796V16.4402Z" fill="#2980B9"/>
+<path opacity="0.8" d="M41.6309 29.29H48.3709" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M41.6309 35.29H48.3709" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M41.6309 41.29H48.3709" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M33.8697 35.6098C33.8865 35.204 33.9299 34.7998 33.9997 34.3998C34.042 34.1111 34.1297 33.831 34.2597 33.5698C34.3739 33.3479 34.5224 33.1454 34.6997 32.9698C34.8816 32.7856 35.0907 32.6305 35.3197 32.5098C35.5248 32.4014 35.7389 32.3111 35.9597 32.2398C36.1555 32.179 36.3563 32.1355 36.5597 32.1098C36.7497 32.1098 36.7497 32.0098 36.5597 31.9898C36.3563 31.964 36.1555 31.9205 35.9597 31.8598C35.7383 31.7903 35.524 31.6999 35.3197 31.5898C35.0906 31.4692 34.8815 31.3141 34.6997 31.1298C34.5229 30.9538 34.3744 30.7514 34.2597 30.5298C34.1299 30.2685 34.0421 29.9884 33.9997 29.6998C33.9372 29.3026 33.9004 28.9017 33.8897 28.4998C33.8897 28.0298 34.3897 29.2698 34.4697 29.6798C34.5362 30.0666 34.6977 30.4308 34.9397 30.7398C35.2107 31.0587 35.5534 31.3088 35.9397 31.4698C36.0389 31.5318 36.1207 31.6181 36.1774 31.7204C36.2341 31.8227 36.2638 31.9378 36.2638 32.0548C36.2638 32.1718 36.2341 32.2868 36.1774 32.3892C36.1207 32.4915 36.0389 32.5777 35.9397 32.6398C35.5536 32.8011 35.211 33.0512 34.9397 33.3698C34.6984 33.6792 34.537 34.0432 34.4697 34.4298C34.3697 34.8398 33.8497 36.0798 33.8697 35.6098Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M52.5107 39.58C54.88 39.58 56.8007 37.6593 56.8007 35.29C56.8007 32.9207 54.88 31 52.5107 31C50.1414 31 48.2207 32.9207 48.2207 35.29C48.2207 37.6593 50.1414 39.58 52.5107 39.58Z" fill="#DEF4FD"/>
+<path d="M52.5091 31.75C53.2105 31.7441 53.8978 31.9466 54.4839 32.332C55.07 32.7173 55.5284 33.2681 55.8009 33.9144C56.0735 34.5607 56.1479 35.2734 56.0147 35.962C55.8815 36.6507 55.5467 37.2843 55.0529 37.7824C54.559 38.2804 53.9283 38.6206 53.2408 38.7596C52.5533 38.8987 51.84 38.8303 51.1914 38.5633C50.5428 38.2963 49.9881 37.8426 49.5978 37.2598C49.2075 36.677 48.9991 35.9914 48.9991 35.29C49.0017 34.3519 49.3755 33.4531 50.0388 32.7898C50.7021 32.1264 51.601 31.7526 52.5391 31.75H52.5091ZM52.5391 30.25C51.5502 30.25 50.5835 30.5432 49.7612 31.0927C48.939 31.6421 48.2981 32.423 47.9197 33.3366C47.5412 34.2502 47.4422 35.2555 47.6351 36.2255C47.8281 37.1954 48.3043 38.0863 49.0035 38.7855C49.7028 39.4848 50.5937 39.961 51.5636 40.1539C52.5335 40.3469 53.5389 40.2478 54.4525 39.8694C55.3661 39.491 56.147 38.8501 56.6964 38.0279C57.2458 37.2056 57.5391 36.2389 57.5391 35.25C57.5391 33.9239 57.0123 32.6521 56.0746 31.7145C55.1369 30.7768 53.8652 30.25 52.5391 30.25Z" fill="#CC0000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.1722 33.4365L49.6622 38.1765L48.7793 36.9639L55.2893 32.2239L56.1722 33.4365Z" fill="#CC0000"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_nested_loop_semi_join.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_nested_loop_semi_join.svg
new file mode 100644
index 0000000..d335472
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_nested_loop_semi_join.svg
@@ -0,0 +1,23 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6">
+<path opacity="0.6" d="M49.4492 46.8801V22.8801H56.7292V45.3801C56.7292 46.7501 56.5992 46.8801 55.2292 46.8801H49.4492Z" fill="#D3D4F3"/>
+<path opacity="0.6" d="M56.2292 23.3801V45.3801C56.2441 45.6824 56.2171 45.9852 56.1492 46.2801C55.8532 46.3789 55.5395 46.413 55.2292 46.3801H49.9492V23.3801H56.2292ZM57.2292 22.3801H48.9492V47.3801H55.2292C56.8792 47.3801 57.2292 47.0301 57.2292 45.3801V22.3801Z" fill="#666BD1"/>
+<path opacity="0.6" d="M49.4492 22.8801V16.8801H55.2292C56.5992 16.8801 56.7292 17.0101 56.7292 18.3801V22.8801H49.4492Z" fill="#ADDFF3"/>
+<path opacity="0.6" d="M55.23 17.3801C55.5323 17.3648 55.8352 17.3917 56.13 17.4601C56.2288 17.7561 56.2629 18.0698 56.23 18.3801V22.3801H49.95V17.3801H55.23ZM55.23 16.3801H49V23.3801H57.28V18.3801C57.28 16.7301 56.93 16.3801 55.28 16.3801H55.23Z" fill="#2980B9"/>
+<path opacity="0.8" d="M49.209 29.23H56.709" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M49.209 35.23H56.709" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M49.209 41.23H56.709" stroke="#666BD1" stroke-linejoin="round"/>
+</g>
+<path d="M43.6797 46.8801C42.3097 46.8801 42.1797 46.7501 42.1797 45.3801V22.8801H49.4597V46.8801H43.6797Z" fill="#F0ECB6"/>
+<path d="M48.9997 23.3801V46.3801H43.6797C43.3774 46.3955 43.0745 46.3686 42.7797 46.3001C42.6809 46.0042 42.6468 45.6904 42.6797 45.3801V23.3801H48.9997ZM49.9997 22.3801H41.6797V45.3801C41.6797 47.0301 42.0297 47.3801 43.6797 47.3801H49.9997V22.3801Z" fill="#C18F35"/>
+<path d="M42.1797 22.8801V18.3801C42.1797 17.0101 42.3097 16.8801 43.6797 16.8801H49.4597V22.8801H42.1797Z" fill="#ADDFF3"/>
+<path d="M48.9997 17.3801V22.3801H42.6797V18.3801C42.6648 18.0779 42.6918 17.775 42.7597 17.4801C43.0557 17.3813 43.3694 17.3472 43.6797 17.3801H48.9997ZM49.9997 16.3801H43.6797C42.0297 16.3801 41.6797 16.7301 41.6797 18.3801V23.3801H49.9997V16.3801Z" fill="#2980B9"/>
+<path opacity="0.8" d="M42.2109 29.23H48.9509" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M42.2109 35.23H48.9509" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M42.2109 41.23H48.9509" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M34.4494 35.55C34.46 35.148 34.4967 34.7472 34.5594 34.35C34.6016 34.0613 34.6894 33.7812 34.8193 33.52C34.9335 33.2981 35.082 33.0956 35.2593 32.92C35.4413 32.7358 35.6504 32.5807 35.8794 32.46C36.0845 32.3516 36.2986 32.2612 36.5194 32.19C36.7152 32.1292 36.9159 32.0857 37.1193 32.06C37.3093 32.06 37.3093 31.96 37.1193 31.94C36.9159 31.9142 36.7152 31.8707 36.5194 31.81C36.2979 31.7405 36.0836 31.6501 35.8794 31.54C35.6503 31.4194 35.4412 31.2642 35.2593 31.08C35.0825 30.904 34.9341 30.7015 34.8193 30.48C34.6895 30.2187 34.6018 29.9386 34.5594 29.65C34.4968 29.2528 34.4601 28.8519 34.4494 28.45C34.4494 27.98 34.9493 29.22 35.0293 29.63C35.0958 30.0168 35.2573 30.381 35.4994 30.69C35.7704 31.0089 36.1131 31.259 36.4993 31.42C36.5985 31.482 36.6803 31.5683 36.737 31.6706C36.7937 31.7729 36.8235 31.888 36.8235 32.005C36.8235 32.122 36.7937 32.237 36.737 32.3394C36.6803 32.4417 36.5985 32.5279 36.4993 32.59C36.1132 32.7513 35.7706 33.0014 35.4994 33.32C35.2488 33.6235 35.077 33.9841 34.9994 34.37C34.9994 34.78 34.4394 36 34.4494 35.55Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9996 17.8C11.5341 17.7998 11.08 17.9439 10.6999 18.2126C10.3301 18.4739 10.0481 18.8405 9.89014 19.2642C9.88815 19.2782 9.88337 19.3114 9.87739 19.3712C9.86673 19.4779 9.85606 19.6234 9.84576 19.8002C9.82525 20.1524 9.80768 20.6021 9.79338 21.0585C9.76472 21.9731 9.75 22.8866 9.75 23.05C9.75 23.4643 9.41421 23.8 9 23.8C8.58579 23.8 8.25 23.4643 8.25 23.05C8.25 22.8635 8.26528 21.932 8.29412 21.0116C8.30857 20.5505 8.32663 20.0852 8.3483 19.713C8.35909 19.5277 8.37117 19.3586 8.38484 19.2219C8.39464 19.1239 8.41304 18.941 8.46289 18.8C8.7215 18.0686 9.2006 17.4354 9.83417 16.9876C10.4676 16.5399 11.2243 16.2997 12 16.3C12.0001 16.3 11.9999 16.3 12 16.3H26C26.9946 16.3 27.9484 16.6951 28.6517 17.3984C29.3549 18.1017 29.75 19.0555 29.75 20.05V44.05C29.75 45.0446 29.3549 45.9984 28.6517 46.7017C27.9484 47.405 26.9946 47.8 26 47.8H12C11.0054 47.8 10.0516 47.405 9.34835 46.7017C8.64509 45.9984 8.25 45.0446 8.25 44.05V29.1901C8.25 28.7758 8.58579 28.4401 9 28.4401C9.41421 28.4401 9.75 28.7758 9.75 29.1901V44.05C9.75 44.6468 9.98705 45.2191 10.409 45.641C10.831 46.063 11.4033 46.3 12 46.3H26C26.5967 46.3 27.169 46.063 27.591 45.641C28.0129 45.2191 28.25 44.6468 28.25 44.05V20.05C28.25 19.4533 28.0129 18.881 27.591 18.4591C27.169 18.0371 26.5967 17.8 26 17.8L11.9996 17.8Z" fill="#666BD1"/>
+<path d="M8.98953 26.71L6.76953 29.68H11.2195L8.98953 26.71Z" fill="#666BD1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2402 21.9106C13.2859 21.5119 13.3742 21.4582 13.3988 21.4433C13.3997 21.4427 13.4006 21.4422 13.4013 21.4418C13.5058 21.3753 13.7709 21.3 14.4902 21.3H23.4902C23.886 21.3 24.1524 21.322 24.3368 21.3628C24.5127 21.4017 24.5641 21.447 24.5787 21.4616C24.5933 21.4762 24.6386 21.5276 24.6775 21.7035C24.7183 21.8879 24.7402 22.1543 24.7402 22.55V41.55C24.7402 41.9458 24.7183 42.2122 24.6775 42.3966C24.6386 42.5725 24.5933 42.6239 24.5787 42.6385C24.5641 42.6531 24.5127 42.6984 24.3368 42.7373C24.1524 42.7781 23.886 42.8 23.4902 42.8H14.7402C14.3445 42.8 14.078 42.7781 13.8937 42.7373C13.7178 42.6984 13.6664 42.6531 13.6518 42.6385C13.6372 42.6239 13.5919 42.5725 13.553 42.3966C13.5122 42.2122 13.4902 41.9458 13.4902 41.55V29.91C13.4902 29.4958 13.1544 29.16 12.7402 29.16C12.326 29.16 11.9902 29.4958 11.9902 29.91V41.55C11.9902 41.9793 12.012 42.3754 12.0884 42.7207C12.1667 43.0745 12.312 43.42 12.5912 43.6991C12.8703 43.9783 13.2158 44.1236 13.5696 44.2019C13.9149 44.2783 14.311 44.3 14.7402 44.3H23.4902C23.9195 44.3 24.3155 44.2783 24.6608 44.2019C25.0147 44.1236 25.3602 43.9783 25.6393 43.6991C25.9185 43.42 26.0638 43.0745 26.1421 42.7207C26.2185 42.3754 26.2402 41.9793 26.2402 41.55V22.55C26.2402 22.1208 26.2185 21.7247 26.1421 21.3794C26.0638 21.0256 25.9185 20.6801 25.6393 20.401C25.3602 20.1218 25.0147 19.9765 24.6608 19.8982C24.3155 19.8218 23.9195 19.8 23.4902 19.8H14.4902C13.7895 19.8 13.1097 19.8498 12.5967 20.1758C12 20.5551 11.8081 21.171 11.7442 21.7934C11.7415 21.8188 11.7402 21.8444 11.7402 21.8701V25.55C11.7402 25.9643 12.076 26.3 12.4902 26.3C12.9044 26.3 13.2402 25.9643 13.2402 25.55V21.9106Z" fill="#8D8119"/>
+<path d="M12.7102 28.72L10.7402 31.1H14.4902L12.7102 28.72Z" fill="#8D8119"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_projectset.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_projectset.svg
new file mode 100644
index 0000000..337f3e0
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_projectset.svg
@@ -0,0 +1,30 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.8404 17.6567C55.2231 17.8145 55.4055 18.253 55.2477 18.6359L54.3081 20.9159C54.1503 21.2989 53.7121 21.4813 53.3293 21.3234C52.9466 21.1655 52.7642 20.7271 52.922 20.3442L53.8616 18.0642C54.0194 17.6812 54.4576 17.4988 54.8404 17.6567Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.7804 22.6662C53.1633 22.8238 53.346 23.2621 53.1885 23.6451L52.0291 26.4651C51.8716 26.8482 51.4335 27.031 51.0506 26.8734C50.6677 26.7158 50.485 26.2776 50.6425 25.8945L51.802 23.0745C51.9595 22.6914 52.3975 22.5086 52.7804 22.6662Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.5718 28.0363C50.9546 28.1941 51.137 28.6325 50.9793 29.0155L42.0035 50.8055C41.8457 51.1884 41.4075 51.3709 41.0248 51.2131C40.642 51.0553 40.4595 50.6169 40.6173 50.2339L49.5931 28.4439C49.7508 28.061 50.189 27.8784 50.5718 28.0363Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.16203 17.6556C9.54538 17.4992 9.98292 17.6833 10.1393 18.0668L11.0689 20.3468C11.2252 20.7303 11.0412 21.1681 10.6579 21.3245C10.2745 21.4809 9.83697 21.2969 9.6806 20.9133L8.75103 18.6333C8.59466 18.2498 8.77867 17.812 9.16203 17.6556Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2186 22.6662C11.6015 22.5086 12.0395 22.6914 12.197 23.0745L13.3565 25.8945C13.514 26.2776 13.3313 26.7158 12.9484 26.8734C12.5655 27.031 12.1274 26.8482 11.9699 26.4651L10.8105 23.6451C10.653 23.2621 10.8357 22.8238 11.2186 22.6662Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4271 28.0363C13.8099 27.8784 14.2481 28.061 14.4058 28.4439L23.3816 50.2339C23.5394 50.6169 23.357 51.0553 22.9742 51.2131C22.5914 51.3709 22.1532 51.1884 21.9954 50.8055L13.0196 29.0155C12.8619 28.6325 13.0443 28.1941 13.4271 28.0363Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1423 28.8673C19.5247 28.7085 19.9633 28.89 20.1219 29.2726L21.2914 32.0926C21.4501 32.4752 21.2687 32.914 20.8863 33.0728C20.5038 33.2315 20.0652 33.05 19.9066 32.6674L18.7371 29.8474C18.5785 29.4648 18.7598 29.026 19.1423 28.8673Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3629 34.2369C21.7453 34.0782 22.1839 34.2596 22.3426 34.6422L28.8096 50.2322C28.9683 50.6147 28.7869 51.0536 28.4045 51.2124C28.0221 51.3711 27.5835 51.1897 27.4248 50.8071L20.9578 35.2171C20.7991 34.8345 20.9805 34.3957 21.3629 34.2369Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.4595 8.07777C20.8195 7.87315 21.2771 7.99922 21.4816 8.35936L21.9814 9.23936C22.1859 9.5995 22.0599 10.0573 21.7 10.262C21.34 10.4666 20.8824 10.3405 20.6778 9.98038L20.1781 9.10037C19.9735 8.74023 20.0996 8.2824 20.4595 8.07777Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.0887 11.4683C22.4704 11.308 22.9098 11.4877 23.07 11.8696L24.9491 16.3496C25.1093 16.7316 24.9297 17.1712 24.5479 17.3314C24.1662 17.4917 23.7268 17.312 23.5666 16.9301L21.6875 12.4501C21.5273 12.0681 21.7069 11.6286 22.0887 11.4683Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.005 28.8664C45.3879 29.024 45.5706 29.4623 45.4131 29.8453L44.2537 32.6653C44.0962 33.0484 43.6581 33.2312 43.2752 33.0736C42.8923 32.9161 42.7096 32.4778 42.8671 32.0947L44.0266 29.2747C44.1841 28.8916 44.6221 28.7088 45.005 28.8664Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.7977 34.2371C43.18 34.3961 43.3612 34.835 43.2022 35.2175L36.7253 50.8075C36.5664 51.19 36.1276 51.3712 35.7453 51.2122C35.363 51.0532 35.1819 50.6143 35.3408 50.2318L41.8178 34.6418C41.9767 34.2593 42.4154 34.0781 42.7977 34.2371Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.3906 8.95286C44.7695 9.11968 44.9416 9.56227 44.7748 9.9414L44.2251 11.1914C44.0583 11.5705 43.6159 11.7427 43.237 11.5758C42.858 11.409 42.686 10.9664 42.8527 10.5873L43.4025 9.3373C43.5692 8.95816 44.0116 8.78604 44.3906 8.95286Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.7816 12.749C43.163 12.9101 43.3416 13.3501 43.1805 13.7317L41.7412 17.1417C41.5802 17.5232 41.1404 17.7019 40.759 17.5408C40.3776 17.3797 40.199 16.9397 40.36 16.5581L41.7993 13.1481C41.9604 12.7665 42.4002 12.5878 42.7816 12.749Z" fill="#D04465"/>
+<path d="M14.4023 63.53V59.53C14.4023 58.6018 14.7709 57.7115 15.427 57.0552C16.0831 56.3988 16.9729 56.03 17.9007 56.03H46.3874C47.3152 56.03 48.205 56.3988 48.8611 57.0552C49.5171 57.7115 49.8857 58.6018 49.8857 59.53V63.53H14.4023Z" fill="#E6E6E6"/>
+<path d="M46.3871 56.4897C47.1824 56.4897 47.9451 56.8058 48.5074 57.3684C49.0698 57.931 49.3857 58.6941 49.3857 59.4897V62.9997H14.9019V59.4897C14.9019 58.6941 15.2178 57.931 15.7801 57.3684C16.3425 56.8058 17.1052 56.4897 17.9005 56.4897H46.3871ZM46.3871 55.4897H17.9005C16.8401 55.4897 15.8232 55.9112 15.0734 56.6613C14.3236 57.4115 13.9023 58.4289 13.9023 59.4897V63.9997H50.3852V59.4897C50.3852 58.4289 49.964 57.4115 49.2142 56.6613C48.4644 55.9112 47.4475 55.4897 46.3871 55.4897Z" fill="#818181"/>
+<path d="M22.2593 55.8999L20.4102 50.4199C20.4199 50.4048 20.4332 50.3924 20.4489 50.3837C20.4646 50.375 20.4822 50.3702 20.5001 50.3699H43.7892C43.8071 50.3702 43.8247 50.375 43.8404 50.3837C43.8561 50.3924 43.8694 50.4048 43.8792 50.4199L42.03 55.8999H22.2593Z" fill="#E6E6E6"/>
+<path d="M43.1995 50.8699L41.6702 55.3999H22.6191L21.0898 50.8699H43.1995ZM43.7892 49.8699H20.5001C20.3411 49.8699 20.1885 49.9331 20.076 50.0456C19.9636 50.1581 19.9004 50.3107 19.9004 50.4699L21.8995 56.3999H42.3899L44.3889 50.4699C44.3889 50.3107 44.3257 50.1581 44.2133 50.0456C44.1008 49.9331 43.9483 49.8699 43.7892 49.8699Z" fill="#818181"/>
+<path d="M32.0653 61.06C31.7897 61.062 31.5197 60.9819 31.2897 60.8299C31.0597 60.6779 30.8801 60.4609 30.7737 60.2066C30.6673 59.9522 30.6389 59.6719 30.6922 59.4013C30.7455 59.1307 30.878 58.8821 31.0729 58.6872C31.2679 58.4922 31.5163 58.3596 31.7868 58.3063C32.0572 58.2529 32.3374 58.2813 32.5916 58.3878C32.8459 58.4942 33.0628 58.6739 33.2147 58.904C33.3666 59.1341 33.4467 59.4042 33.4447 59.68C33.4447 60.046 33.2994 60.397 33.0407 60.6558C32.782 60.9146 32.4312 61.06 32.0653 61.06Z" fill="#E6E6E6"/>
+<path d="M32.0642 58.7898C32.2401 58.7898 32.4121 58.842 32.5584 58.9398C32.7047 59.0376 32.8187 59.1766 32.8861 59.3392C32.9534 59.5018 32.971 59.6808 32.9367 59.8534C32.9024 60.0261 32.8176 60.1846 32.6932 60.3091C32.5688 60.4336 32.4103 60.5183 32.2378 60.5527C32.0652 60.587 31.8863 60.5694 31.7238 60.502C31.5612 60.4347 31.4223 60.3206 31.3245 60.1742C31.2268 60.0279 31.1746 59.8558 31.1746 59.6798C31.1746 59.5629 31.1976 59.4472 31.2423 59.3392C31.287 59.2312 31.3526 59.1331 31.4352 59.0505C31.5178 58.9678 31.6158 58.9023 31.7238 58.8575C31.8317 58.8128 31.9474 58.7898 32.0642 58.7898ZM32.0642 57.7898C31.6919 57.7957 31.3297 57.9116 31.023 58.1228C30.7163 58.334 30.4788 58.6312 30.3404 58.9771C30.202 59.3229 30.1689 59.7019 30.2451 60.0666C30.3213 60.4312 30.5036 60.7651 30.7689 61.0265C31.0343 61.2878 31.3709 61.4648 31.7365 61.5354C32.1021 61.6059 32.4804 61.5668 32.8239 61.4229C33.1673 61.279 33.4606 61.0368 33.6669 60.7266C33.8732 60.4165 33.9833 60.0523 33.9833 59.6798C33.9833 59.1803 33.7856 58.701 33.4335 58.3469C33.0814 57.9927 32.6035 57.7924 32.1042 57.7898H32.0642Z" fill="#818181"/>
+<path d="M21.1602 52.28H28.2768" stroke="#818181" stroke-miterlimit="10"/>
+<path d="M21.8184 54.0798H34.6723" stroke="#818181" stroke-miterlimit="10"/>
+<path d="M22.0488 23.8701H41.9795V26.8701C41.9795 27.1353 41.8742 27.3897 41.6867 27.5772C41.4993 27.7648 41.2451 27.8701 40.98 27.8701H23.0484C22.7833 27.8701 22.529 27.7648 22.3416 27.5772C22.1541 27.3897 22.0488 27.1353 22.0488 26.8701V23.8701Z" fill="#D3D4F3" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M32.0543 23.8701H27.0566V27.8701H32.0543V23.8701Z" fill="#D3D4F3" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M37.0113 23.8701H32.0137V27.8701H37.0113V23.8701Z" fill="#D3D4F3" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M23.0484 20.1301H40.98C41.2451 20.1301 41.4993 20.2355 41.6867 20.423C41.8742 20.6106 41.9795 20.8649 41.9795 21.1301V24.1301H22.0488V21.1301C22.0488 20.8649 22.1541 20.6106 22.3416 20.423C22.529 20.2355 22.7833 20.1301 23.0484 20.1301Z" fill="#D3D4F3" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M32.0543 20.1301H27.0566V24.1301H32.0543V20.1301Z" fill="#D3D4F3" stroke="#666BD1" stroke-miterlimit="10"/>
+<path d="M37.0113 20.1301H32.0137V24.1301H37.0113V20.1301Z" fill="#D3D4F3" stroke="#666BD1" stroke-miterlimit="10"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_recursive_union.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_recursive_union.svg
new file mode 100644
index 0000000..4e07ce3
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_recursive_union.svg
@@ -0,0 +1,42 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.59031 25.2101C4.60051 24.8048 4.63725 24.4006 4.70031 24.0001C4.75617 23.7126 4.85744 23.4358 5.00031 23.1801C5.11447 22.9582 5.26297 22.7557 5.44031 22.5801C5.60394 22.4007 5.79254 22.2458 6.00031 22.1201C6.20541 22.0117 6.41955 21.9214 6.64031 21.8501C6.83612 21.7893 7.03689 21.7458 7.24031 21.7201C7.43031 21.7201 7.43031 21.6201 7.24031 21.6001C7.03691 21.5744 6.83614 21.5309 6.64031 21.4701C6.41888 21.4007 6.20458 21.3103 6.00031 21.2001C5.77125 21.0796 5.56213 20.9244 5.38031 20.7401C5.20347 20.5641 5.05504 20.3617 4.94031 20.1401C4.81048 19.8789 4.72273 19.5988 4.68031 19.3101C4.61777 18.9129 4.58103 18.5121 4.57031 18.1101C4.57031 17.6401 5.07031 18.8801 5.15031 19.2901C5.21679 19.6769 5.37829 20.0412 5.62031 20.3501C5.89133 20.669 6.23401 20.9192 6.62031 21.0801C6.7195 21.1422 6.80128 21.2284 6.85798 21.3307C6.91468 21.4331 6.94442 21.5481 6.94442 21.6651C6.94442 21.7821 6.91468 21.8972 6.85798 21.9995C6.80128 22.1019 6.7195 22.1881 6.62031 22.2501C6.2342 22.4114 5.89159 22.6615 5.62031 22.9801C5.392 23.2799 5.23781 23.6294 5.17031 24.0001C5.09031 24.4401 4.57031 25.6801 4.59031 25.2101Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M4.59031 49.3598C4.60094 48.9578 4.63769 48.557 4.70031 48.1598C4.75514 47.8688 4.85644 47.5886 5.00031 47.3298C5.11447 47.1079 5.26297 46.9054 5.44031 46.7298C5.60394 46.5504 5.79254 46.3955 6.00031 46.2698C6.20862 46.1609 6.42613 46.0705 6.65031 45.9998C6.84612 45.939 7.04689 45.8955 7.25031 45.8698C7.44031 45.8698 7.44031 45.7698 7.25031 45.7498C7.04691 45.724 6.84614 45.6805 6.65031 45.6198C6.42545 45.5509 6.20777 45.4605 6.00031 45.3498C5.77125 45.2292 5.56213 45.0741 5.38031 44.8898C5.20347 44.7138 5.05504 44.5114 4.94031 44.2898C4.81048 44.0285 4.72273 43.7484 4.68031 43.4598C4.61777 43.0626 4.58103 42.6617 4.57031 42.2598C4.57031 41.7898 5.07031 43.0298 5.15031 43.4398C5.21679 43.8266 5.37829 44.1908 5.62031 44.4998C5.89133 44.8187 6.23401 45.0688 6.62031 45.2298C6.7195 45.2918 6.80128 45.3781 6.85798 45.4804C6.91468 45.5827 6.94442 45.6978 6.94442 45.8148C6.94442 45.9318 6.91468 46.0469 6.85798 46.1492C6.80128 46.2515 6.7195 46.3378 6.62031 46.3998C6.2342 46.5611 5.89159 46.8112 5.62031 47.1298C5.37901 47.4392 5.21759 47.8032 5.15031 48.1898C5.09031 48.5898 4.57031 49.8298 4.59031 49.3598Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M29.1997 41.36C29.9142 41.3582 30.6176 41.1832 31.2497 40.85C31.6951 40.5937 32.0618 40.2201 32.3097 39.77C32.5373 39.3355 32.6734 38.859 32.7097 38.37C32.7497 37.87 32.7697 37.3833 32.7697 36.91V37.26C32.7697 36.58 32.7697 36.01 32.7697 35.54C32.7803 35.138 32.8171 34.7371 32.8797 34.34C32.9219 34.0513 33.0097 33.7711 33.1397 33.51C33.2538 33.288 33.4023 33.0855 33.5797 32.91C33.7616 32.7258 33.9707 32.5707 34.1997 32.45C34.4048 32.3416 34.6189 32.2512 34.8397 32.18C35.0355 32.1191 35.2363 32.0756 35.4397 32.05C35.6297 32.05 35.6297 31.95 35.4397 31.93C35.2363 31.9042 35.0355 31.8607 34.8397 31.8C34.6183 31.7305 34.404 31.6401 34.1997 31.53C33.9706 31.4094 33.7615 31.2542 33.5797 31.07C33.4028 30.8939 33.2544 30.6915 33.1397 30.47C33.0099 30.2087 32.9221 29.9286 32.8797 29.64C32.8171 29.2427 32.7804 28.8419 32.7697 28.44C32.7697 27.9666 32.7697 27.39 32.7697 26.71V27.07C32.7697 26.6 32.7697 26.07 32.7097 25.61C32.6737 25.1208 32.5375 24.6443 32.3097 24.2099C32.0614 23.7601 31.6948 23.3867 31.2497 23.1299C30.6169 22.7986 29.914 22.6237 29.1997 22.62V22.2H29.7297C29.9557 22.2181 30.1798 22.2549 30.3997 22.3099C30.645 22.3688 30.8857 22.4457 31.1197 22.54C31.3711 22.643 31.6068 22.7811 31.8197 22.95C32.1494 23.1962 32.4308 23.5014 32.6497 23.85C32.8568 24.2063 33.0021 24.5951 33.0797 25C33.1729 25.4241 33.2265 25.8559 33.2397 26.29C33.2397 26.76 33.2397 28.17 33.2397 28.17C33.2319 28.6726 33.2721 29.1749 33.3597 29.67C33.4262 30.0568 33.5877 30.421 33.8297 30.73C34.1007 31.0488 34.4434 31.299 34.8297 31.46C34.9289 31.522 35.0107 31.6082 35.0674 31.7106C35.1241 31.8129 35.1538 31.928 35.1538 32.045C35.1538 32.1619 35.1241 32.277 35.0674 32.3793C35.0107 32.4817 34.9289 32.5679 34.8297 32.63C34.4436 32.7912 34.101 33.0414 33.8297 33.36C33.5884 33.6694 33.427 34.0334 33.3597 34.42C33.2721 34.915 33.2319 35.4173 33.2397 35.92C33.2397 35.92 33.1497 38.7 33.0597 39.09C32.974 39.4672 32.8288 39.8283 32.6297 40.16C32.4114 40.509 32.1299 40.8142 31.7997 41.06C31.5867 41.2287 31.3511 41.3668 31.0997 41.47C30.8654 41.5634 30.6248 41.6402 30.3797 41.7C30.1596 41.7541 29.9355 41.7908 29.7097 41.81H29.1797L29.1997 41.36Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M12.2695 29.3098C10.8995 29.3098 10.7695 29.1798 10.7695 27.8098V16.3098H18.0495V29.3098H12.2695Z" fill="#D3D4F3"/>
+<path d="M17.5495 16.8098V28.8098H12.2695C11.9673 28.8252 11.6643 28.7983 11.3695 28.7298C11.2707 28.4338 11.2366 28.1201 11.2695 27.8098V16.8098H17.5495ZM18.5495 15.8098H10.2695V27.8098C10.2695 29.4598 10.6195 29.8098 12.2695 29.8098H18.5495V15.8098Z" fill="#666BD1"/>
+<path d="M18 29.3098V16.3098H25.28V27.8098C25.28 29.1798 25.15 29.3098 23.78 29.3098H18Z" fill="#D3D4F3"/>
+<path d="M24.8191 16.8098V27.8098C24.834 28.1121 24.8071 28.4149 24.7391 28.7098C24.4431 28.8086 24.1294 28.8427 23.8191 28.8098H18.5391V16.8098H24.8191ZM25.8191 15.8098H17.5391V29.8098H23.8191C25.4691 29.8098 25.8191 29.4598 25.8191 27.8098V15.8098Z" fill="#666BD1"/>
+<path d="M10.7695 16.3098V11.8098C10.7695 10.4398 10.8995 10.3098 12.2695 10.3098H18.0495V16.3098H10.7695Z" fill="#ADDFF3"/>
+<path d="M17.5495 10.8098V15.8098H11.2695V11.8098C11.2546 11.5076 11.2815 11.2047 11.3495 10.9098C11.6455 10.811 11.9592 10.7769 12.2695 10.8098H17.5495ZM18.5495 9.80981H12.2695C10.6195 9.80981 10.2695 10.1598 10.2695 11.8098V16.8098H18.5495V9.80981Z" fill="#2980B9"/>
+<path d="M18 16.3098V10.3098H23.78C25.15 10.3098 25.28 10.4398 25.28 11.8098V16.3098H18Z" fill="#ADDFF3"/>
+<path d="M23.8191 10.8098C24.1213 10.7944 24.4242 10.8214 24.7191 10.8898C24.8179 11.1858 24.852 11.4995 24.8191 11.8098V15.8098H18.5391V10.8098H23.8191ZM23.8191 9.80981H17.5391V16.8098H25.8191V11.8098C25.8191 10.1598 25.4691 9.80981 23.8191 9.80981Z" fill="#2980B9"/>
+<path opacity="0.8" d="M17.8008 22.6602H25.2908" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M10.8008 22.6602H17.5408" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M12.2695 53.4602C10.8995 53.4602 10.7695 53.3302 10.7695 51.9602V40.4602H18.0495V53.4602H12.2695Z" fill="#F0ECB6"/>
+<path d="M17.5495 41V53H12.2695C11.9673 53.0154 11.6643 52.9884 11.3695 52.92C11.2707 52.624 11.2366 52.3103 11.2695 52V41H17.5495ZM18.5495 40H10.2695V52C10.2695 53.65 10.6195 54 12.2695 54H18.5495V40Z" fill="#C18F35"/>
+<path d="M18 53.4602V40.4602H25.28V52.0002C25.28 53.3702 25.15 53.5002 23.78 53.5002L18 53.4602Z" fill="#F0ECB6"/>
+<path d="M24.8191 41V52C24.834 52.3023 24.8071 52.6051 24.7391 52.9C24.4431 52.9988 24.1294 53.0329 23.8191 53H18.5391V41H24.8191ZM25.8191 40H17.5391V54H23.8191C25.4691 54 25.8191 53.65 25.8191 52V40Z" fill="#C18F35"/>
+<path d="M10.7695 40.46V36C10.7695 34.63 10.8995 34.5 12.2695 34.5H18.0495V40.5L10.7695 40.46Z" fill="#ADDFF3"/>
+<path d="M17.5495 35V40H11.2695V36C11.2546 35.6977 11.2815 35.3949 11.3495 35.1C11.6455 35.0012 11.9592 34.9671 12.2695 35H17.5495ZM18.5495 34H12.2695C10.6195 34 10.2695 34.35 10.2695 36V41H18.5495V34Z" fill="#2980B9"/>
+<path d="M18 40.4602V34.4602H23.78C25.15 34.4602 25.28 34.5902 25.28 35.9602V40.4602H18Z" fill="#ADDFF3"/>
+<path d="M23.8191 35C24.1213 34.9846 24.4242 35.0116 24.7191 35.08C24.8179 35.376 24.852 35.6897 24.8191 36V40H18.5391V35H23.8191ZM23.8191 34H17.5391V41H25.8191V36C25.8191 34.35 25.4691 34 23.8191 34Z" fill="#2980B9"/>
+<path opacity="0.8" d="M17.8008 46.8098H25.2908" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M10.8008 46.8098H17.5408" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M56.6095 35.55C56.6202 35.148 56.6569 34.7472 56.7195 34.35C56.7618 34.0613 56.8495 33.7812 56.9795 33.52C57.0937 33.2981 57.2422 33.0956 57.4195 32.92C57.6014 32.7358 57.8105 32.5807 58.0395 32.46C58.2446 32.3516 58.4588 32.2612 58.6795 32.19C58.8753 32.1291 59.0761 32.0856 59.2795 32.06C59.4695 32.06 59.4695 31.96 59.2795 31.94C59.0761 31.9142 58.8753 31.8707 58.6795 31.81C58.4581 31.7405 58.2438 31.6501 58.0395 31.54C57.8105 31.4194 57.6013 31.2642 57.4195 31.08C57.2427 30.904 57.0942 30.7015 56.9795 30.48C56.8497 30.2187 56.7619 29.9386 56.7195 29.65C56.657 29.2528 56.6202 28.8519 56.6095 28.45C56.6095 27.98 57.1095 29.22 57.1895 29.63C57.256 30.0168 57.4175 30.381 57.6595 30.69C57.9305 31.0089 58.2732 31.259 58.6595 31.42C58.7587 31.482 58.8405 31.5682 58.8972 31.6706C58.9539 31.7729 58.9836 31.888 58.9836 32.005C58.9836 32.122 58.9539 32.237 58.8972 32.3394C58.8405 32.4417 58.7587 32.5279 58.6595 32.59C58.2734 32.7513 57.9308 33.0014 57.6595 33.32C57.4182 33.6294 57.2568 33.9934 57.1895 34.38C57.1095 34.78 56.5995 36 56.6095 35.55Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M46.4499 21.4001H39.1699V34.4002H46.4499V21.4001Z" fill="#D3D4F3"/>
+<path d="M45.9499 21.9001V33.9002H39.6699V21.9001H45.9499ZM46.9499 20.9001H38.6699V34.9002H46.9499V20.9001Z" fill="#666BD1"/>
+<path d="M53.7195 21.4001H46.4395V34.4002H53.7195V21.4001Z" fill="#D3D4F3"/>
+<path d="M53.2197 21.9001V33.9002H46.9297V21.9001H53.2097H53.2197ZM54.2097 20.9001H45.9297V34.9002H54.2097V20.9001Z" fill="#666BD1"/>
+<path d="M39.1699 21.4001V16.9001C39.1699 15.5301 39.2999 15.4001 40.6699 15.4001H46.4499V21.4001H39.1699Z" fill="#ADDFF3"/>
+<path d="M45.9499 15.9001V20.9001H39.6699V16.9001C39.6549 16.5979 39.6819 16.295 39.7499 16.0001C40.0459 15.9014 40.3596 15.8673 40.6699 15.9001H45.9499ZM46.9499 14.9001H40.6699C39.0199 14.9001 38.6699 15.2501 38.6699 16.9001V21.9001H46.9999V14.9001H46.9499Z" fill="#2980B9"/>
+<path d="M46.4395 21.4001V15.4001H52.2195C53.5895 15.4001 53.7195 15.5301 53.7195 16.9001V21.4001H46.4395Z" fill="#ADDFF3"/>
+<path d="M52.2195 15.9001C52.5217 15.8848 52.8246 15.9117 53.1195 15.9801C53.2182 16.2761 53.2524 16.5899 53.2195 16.9001V20.9001H46.9395V15.9001H52.2195ZM52.2195 14.9001H45.9395V21.9001H54.2195V16.9001C54.2195 15.2501 53.8695 14.9001 52.2195 14.9001Z" fill="#2980B9"/>
+<path opacity="0.8" d="M46.1992 27.75H53.6892" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M39.1992 27.75H45.9292" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M40.6699 47.3801C39.2999 47.3801 39.1699 47.2501 39.1699 45.8801V34.3801H46.4499V47.3801H40.6699Z" fill="#F0ECB6"/>
+<path d="M45.9499 34.8801V46.8801H40.6699C40.3677 46.8955 40.0647 46.8686 39.7699 46.8001C39.6711 46.5042 39.637 46.1904 39.6699 45.8801V34.8801H45.9499ZM46.9499 33.8801H38.6699V45.8801C38.6699 47.5301 39.0199 47.8801 40.6699 47.8801H46.9499V33.8801Z" fill="#C18F35"/>
+<path d="M46.4395 47.3801V34.3801H53.7195V45.8801C53.7195 47.2501 53.5895 47.3801 52.2195 47.3801H46.4395Z" fill="#F0ECB6"/>
+<path d="M53.2197 34.8801V45.8801C53.2347 46.1824 53.2077 46.4853 53.1397 46.7801C52.8437 46.8789 52.53 46.913 52.2197 46.8801H46.9297V34.8801H53.2097H53.2197ZM54.2097 33.8801H45.9297V47.8801H52.2097C53.8597 47.8801 54.2097 47.5301 54.2097 45.8801V33.8801Z" fill="#C18F35"/>
+<path opacity="0.8" d="M46.1992 40.73H53.6892" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M39.1992 40.73H45.9292" stroke="#C18F35" stroke-linejoin="round"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_redistribute_motion.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_redistribute_motion.svg
new file mode 100644
index 0000000..ff13439
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_redistribute_motion.svg
@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.6914 45.4299H47.6914C47.4153 45.4299 47.1914 45.6538 47.1914 45.9299V53.9299C47.1914 54.2061 47.4153 54.4299 47.6914 54.4299H55.6914C55.9676 54.4299 56.1914 54.2061 56.1914 53.9299V45.9299C56.1914 45.6538 55.9676 45.4299 55.6914 45.4299Z" fill="#F3C7D7"/>
+<path d="M55.6914 45.9299V53.9299H47.6914V45.9299H55.6914ZM55.6914 44.9299H47.6914C47.4262 44.9299 47.1718 45.0353 46.9843 45.2228C46.7968 45.4104 46.6914 45.6647 46.6914 45.9299V53.9299C46.6914 54.1951 46.7968 54.4495 46.9843 54.637C47.1718 54.8246 47.4262 54.9299 47.6914 54.9299H55.6914C55.9566 54.9299 56.211 54.8246 56.3985 54.637C56.5861 54.4495 56.6914 54.1951 56.6914 53.9299V45.9299C56.6914 45.6647 56.5861 45.4104 56.3985 45.2228C56.211 45.0353 55.9566 44.9299 55.6914 44.9299Z" fill="#D04465"/>
+<path d="M16.3105 45.4299H8.31055C8.03441 45.4299 7.81055 45.6538 7.81055 45.9299V53.9299C7.81055 54.2061 8.03441 54.4299 8.31055 54.4299H16.3105C16.5867 54.4299 16.8105 54.2061 16.8105 53.9299V45.9299C16.8105 45.6538 16.5867 45.4299 16.3105 45.4299Z" fill="#F3C7D7"/>
+<path d="M16.3105 45.9299V53.9299H8.31055V45.9299H16.3105ZM16.3105 44.9299H8.31055C8.04533 44.9299 7.79098 45.0353 7.60344 45.2228C7.4159 45.4104 7.31055 45.6647 7.31055 45.9299V53.9299C7.31055 54.1951 7.4159 54.4495 7.60344 54.637C7.79098 54.8246 8.04533 54.9299 8.31055 54.9299H16.3105C16.5758 54.9299 16.8301 54.8246 17.0177 54.637C17.2052 54.4495 17.3105 54.1951 17.3105 53.9299V45.9299C17.3105 45.6647 17.2052 45.4104 17.0177 45.2228C16.8301 45.0353 16.5758 44.9299 16.3105 44.9299Z" fill="#D04465"/>
+<path d="M36.0098 9.56982H28.0098C27.7336 9.56982 27.5098 9.79368 27.5098 10.0698V18.0698C27.5098 18.346 27.7336 18.5698 28.0098 18.5698H36.0098C36.2859 18.5698 36.5098 18.346 36.5098 18.0698V10.0698C36.5098 9.79368 36.2859 9.56982 36.0098 9.56982Z" fill="#F3C7D7"/>
+<path d="M36 10.0698V18.0698H28V10.0698H36ZM36 9.06982H28C27.7348 9.06982 27.4804 9.17518 27.2929 9.36272C27.1054 9.55025 27 9.80461 27 10.0698V18.0698C27 18.335 27.1054 18.5894 27.2929 18.7769C27.4804 18.9645 27.7348 19.0698 28 19.0698H36C36.2652 19.0698 36.5196 18.9645 36.7071 18.7769C36.8946 18.5894 37 18.335 37 18.0698V10.0698C37 9.80461 36.8946 9.55025 36.7071 9.36272C36.5196 9.17518 36.2652 9.06982 36 9.06982Z" fill="#D04465"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.4437 40.5701C24.5816 40.8093 24.4996 41.1151 24.2603 41.253L20.4803 43.433C20.2411 43.571 19.9354 43.4889 19.7974 43.2497C19.6595 43.0105 19.7415 42.7047 19.9808 42.5668L23.7608 40.3868C24 40.2488 24.3057 40.3309 24.4437 40.5701Z" fill="#2980B9"/>
+<path d="M18.1406 44.1998C19.4321 43.9678 20.7527 43.9475 22.0506 44.1398L20.5006 42.8398L20.1506 40.8398C19.6678 42.0617 18.9889 43.1966 18.1406 44.1998Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.5276 40.7703C39.6653 40.5309 39.971 40.4485 40.2103 40.5862L44.0003 42.7662C44.2397 42.9039 44.3221 43.2095 44.1844 43.4489C44.0468 43.6883 43.7411 43.7707 43.5017 43.633L39.7117 41.453C39.4724 41.3153 39.3899 41.0097 39.5276 40.7703Z" fill="#2980B9"/>
+<path d="M45.8397 44.3997C44.5482 44.1677 43.2276 44.1474 41.9297 44.3397L43.4697 42.9997L43.8197 40.9998C44.3017 42.2364 44.9841 43.3851 45.8397 44.3997Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0801 21.98C32.3562 21.98 32.5801 22.2038 32.5801 22.48V26.85C32.5801 27.1261 32.3562 27.35 32.0801 27.35C31.8039 27.35 31.5801 27.1261 31.5801 26.85V22.48C31.5801 22.2038 31.8039 21.98 32.0801 21.98Z" fill="#2980B9"/>
+<path d="M32.0897 20.0698C31.6432 21.3061 30.998 22.4612 30.1797 23.4898L32.0797 22.7998L33.9797 23.4898C33.1683 22.4599 32.5299 21.3048 32.0897 20.0698Z" fill="#2980B9"/>
+<path d="M32.0801 43.4297C36.2222 43.4297 39.5801 40.0718 39.5801 35.9297C39.5801 31.7876 36.2222 28.4297 32.0801 28.4297C27.9379 28.4297 24.5801 31.7876 24.5801 35.9297C24.5801 40.0718 27.9379 43.4297 32.0801 43.4297Z" fill="#ADDFF3"/>
+<path d="M32.0801 28.9297C33.4646 28.9297 34.8179 29.3402 35.9691 30.1094C37.1202 30.8786 38.0174 31.9718 38.5472 33.2509C39.077 34.53 39.2157 35.9375 38.9456 37.2953C38.6755 38.6532 38.0088 39.9005 37.0298 40.8794C36.0509 41.8584 34.8036 42.5251 33.4457 42.7952C32.0878 43.0653 30.6804 42.9267 29.4013 42.3968C28.1222 41.867 27.029 40.9698 26.2598 39.8187C25.4906 38.6675 25.0801 37.3142 25.0801 35.9297C25.0801 34.0732 25.8176 32.2927 27.1303 30.9799C28.4431 29.6672 30.2236 28.9297 32.0801 28.9297ZM32.0801 27.9297C30.4978 27.9297 28.9511 28.3989 27.6355 29.2779C26.3199 30.157 25.2945 31.4064 24.689 32.8682C24.0835 34.33 23.9251 35.9386 24.2338 37.4904C24.5425 39.0423 25.3044 40.4677 26.4232 41.5865C27.542 42.7054 28.9675 43.4673 30.5194 43.776C32.0712 44.0847 33.6797 43.9262 35.1415 43.3207C36.6034 42.7152 37.8528 41.6898 38.7318 40.3742C39.6109 39.0587 40.0801 37.5119 40.0801 35.9297C40.0801 33.808 39.2372 31.7731 37.7369 30.2728C36.2366 28.7725 34.2018 27.9297 32.0801 27.9297Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_result.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_result.svg
new file mode 100644
index 0000000..18de8ed
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_result.svg
@@ -0,0 +1,51 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 57.47C8.63 57.47 8.5 57.34 8.5 55.97V15.53H55.5V56C55.5 57.37 55.37 57.5 54 57.5L10 57.47Z" fill="#F0ECB6"/>
+<path d="M55 16V56C55.015 56.3023 54.9881 56.6051 54.92 56.9C54.624 56.9988 54.3103 57.0329 54 57H10C9.69774 57.0154 9.39481 56.9884 9.1 56.92C9.0009 56.6241 8.96679 56.3103 9 56V16H55ZM56 15H8V56C8 57.65 8.35 58 10 58H54C55.65 58 56 57.65 56 56V15Z" fill="#C18F36"/>
+<path d="M8.5 15.53V8C8.5 6.63 8.63 6.5 10 6.5H54C55.37 6.5 55.5 6.63 55.5 8V15.5L8.5 15.53Z" fill="#ADDFF3"/>
+<path d="M54 7C54.3023 6.98463 54.6052 7.01156 54.9 7.08C54.9988 7.37598 55.0329 7.68971 55 8V15H9V8C8.98502 7.69775 9.01194 7.39487 9.08 7.1C9.37598 7.00121 9.68971 6.96711 10 7H54ZM54 6H10C8.35 6 8 6.38 8 8V16H56V8C56 6.35 55.65 6 54 6Z" fill="#2980B9"/>
+<g opacity="0.8">
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.97 26.47H14V25.47H23.97V26.47Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.97 34.8398H14V33.8398H23.97V34.8398Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.97 43.21H14V42.21H23.97V43.21Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.97 51.5801H14V50.5801H23.97V51.5801Z" fill="#34495E"/>
+</g>
+<g opacity="0.8">
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.97 22.47H14V21.47H23.97V22.47Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.97 30.8398H14V29.8398H23.97V30.8398Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.97 39.21H14V38.21H23.97V39.21Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.97 47.5801H14V46.5801H23.97V47.5801Z" fill="#34495E"/>
+</g>
+<g opacity="0.8">
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.97 11.53H14V10.53H23.97V11.53Z" fill="#34495E"/>
+</g>
+<g opacity="0.8">
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M36.97 11.53H27V10.53H36.97V11.53Z" fill="#34495E"/>
+</g>
+<g opacity="0.8">
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M49.97 11.53H40V10.53H49.97V11.53Z" fill="#34495E"/>
+</g>
+<g opacity="0.8">
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M36.97 26.47H27V25.47H36.97V26.47Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M36.97 34.8398H27V33.8398H36.97V34.8398Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M36.97 43.21H27V42.21H36.97V43.21Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M36.97 51.5801H27V50.5801H36.97V51.5801Z" fill="#34495E"/>
+</g>
+<g opacity="0.8">
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M36.97 22.47H27V21.47H36.97V22.47Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M36.97 30.8398H27V29.8398H36.97V30.8398Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M36.97 39.21H27V38.21H36.97V39.21Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M36.97 47.5801H27V46.5801H36.97V47.5801Z" fill="#34495E"/>
+</g>
+<g opacity="0.8">
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M49.97 26.47H40V25.47H49.97V26.47Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M49.97 34.8398H40V33.8398H49.97V34.8398Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M49.97 43.21H40V42.21H49.97V43.21Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M49.97 51.5801H40V50.5801H49.97V51.5801Z" fill="#34495E"/>
+</g>
+<g opacity="0.8">
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M49.97 22.47H40V21.47H49.97V22.47Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M49.97 30.8398H40V29.8398H49.97V30.8398Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M49.97 39.21H40V38.21H49.97V39.21Z" fill="#34495E"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M49.97 47.5801H40V46.5801H49.97V47.5801Z" fill="#34495E"/>
+</g>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_scan.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_scan.svg
new file mode 100644
index 0000000..0b0fab8
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_scan.svg
@@ -0,0 +1,27 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.06008 50.7799L5.58008 46.1399H12.5401L9.06008 50.7799Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.13287 45.9163C5.21756 45.7469 5.39069 45.6399 5.58008 45.6399H12.5401C12.7295 45.6399 12.9026 45.7469 12.9873 45.9163C13.072 46.0857 13.0537 46.2884 12.9401 46.4399L9.46008 51.0799C9.36565 51.2058 9.21746 51.2799 9.06008 51.2799C8.9027 51.2799 8.75451 51.2058 8.66008 51.0799L5.18008 46.4399C5.06645 46.2884 5.04817 46.0857 5.13287 45.9163ZM6.58008 46.6399L9.06008 49.9466L11.5401 46.6399H6.58008Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.06055 14.8C9.61283 14.8 10.0605 15.2478 10.0605 15.8V46.7701C10.0605 47.3223 9.61283 47.7701 9.06055 47.7701C8.50826 47.7701 8.06055 47.3223 8.06055 46.7701V15.8C8.06055 15.2478 8.50826 14.8 9.06055 14.8Z" fill="#2980B9"/>
+<path d="M18.4297 57.47C17.0497 57.47 16.9297 57.35 16.9297 55.97V15.53H57.9297V56C57.9297 57.38 57.8097 57.5 56.4297 57.5L18.4297 57.47Z" fill="#F0ECB6"/>
+<path d="M57.4102 16V56C57.4235 56.3017 57.4 56.604 57.3402 56.9C57.0412 57.0009 56.7237 57.035 56.4102 57H18.4102C18.1084 57.0152 17.8059 56.9916 17.5102 56.93C17.4093 56.631 17.3752 56.3136 17.4102 56V16H57.4102ZM58.4102 15H16.4102V56C16.4102 57.65 16.7602 58 18.4102 58H56.4102C58.0602 58 58.4102 57.65 58.4102 56V15Z" fill="#C18F36"/>
+<g opacity="0.8">
+<path opacity="0.8" d="M25.1309 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M41.5195 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M33.3203 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M49.7207 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M17.4199 23.97H57.3999" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M17.4199 32.3398H57.3999" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M17.4199 40.71H57.3999" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M17.4199 49.0801H57.3999" stroke="#C18F36" stroke-miterlimit="10"/>
+</g>
+<path d="M49.7305 15.53V6.53003H56.4205C57.7905 6.53003 57.9205 6.65003 57.9205 8.03003V15.53H49.7305Z" fill="#ADDFF3"/>
+<path d="M56.4205 7C56.7222 6.98483 57.0247 7.00835 57.3205 7.07C57.4213 7.36898 57.4555 7.68642 57.4205 8V15H50.2305V7H56.4205ZM56.4205 6H49.2305V16H58.4205V8C58.4205 6.35 58.0705 6 56.4205 6Z" fill="#2980B9"/>
+<path d="M16.9199 15.53V8C16.9199 6.62 17.0499 6.5 18.4199 6.5H25.1199V15.5L16.9199 15.53Z" fill="#ADDFF3"/>
+<path d="M24.6199 7V15H17.4199V8C17.4036 7.69772 17.4306 7.39466 17.4999 7.1C17.7952 6.998 18.1096 6.96382 18.4199 7H24.6199ZM25.6199 6H18.4199C16.7699 6 16.4199 6.35 16.4199 8V16H25.6199V6Z" fill="#2980B9"/>
+<path d="M49.7095 6.53003H41.5195V15.53H49.7095V6.53003Z" fill="#ADDFF3"/>
+<path d="M49.21 7V15H42V7H49.19H49.21ZM50.19 6H41V16H50.19V6Z" fill="#2980B9"/>
+<path d="M41.5201 6.53003H33.3301V15.53H41.5201V6.53003Z" fill="#ADDFF3"/>
+<path d="M41.0001 7V15H33.8301V7H41.0001ZM42.0001 6H32.8301V16H42.0001V6Z" fill="#2980B9"/>
+<path d="M33.3106 6.53003H25.1406V15.53H33.3106V6.53003Z" fill="#ADDFF3"/>
+<path d="M32.8106 7V15H25.6406V7H32.8106ZM33.8106 6H24.6406V16H33.8106V6Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_seek.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_seek.svg
new file mode 100644
index 0000000..d9ded8b
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_seek.svg
@@ -0,0 +1,33 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 57.46C16.63 57.46 16.5 57.33 16.5 55.96V15.52H57.5V56C57.5 57.37 57.37 57.5 56 57.5L18 57.46Z" fill="#F0ECB6"/>
+<path d="M57 16V56C57.015 56.3023 56.9881 56.6051 56.92 56.9C56.624 56.9988 56.3103 57.0329 56 57H18C17.6977 57.0154 17.3948 56.9884 17.1 56.92C17.0012 56.624 16.9671 56.3103 17 56V16H57ZM58 15H16V56C16 57.65 16.35 58 18 58H56C57.65 58 58 57.65 58 56V15Z" fill="#C18F36"/>
+<g opacity="0.8">
+<path opacity="0.8" d="M24.6992 56.9502V15.9602" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M41.0996 56.9502V15.9602" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M32.9004 56.9502V15.9602" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M49.3008 56.9502V15.9602" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M17 23.9502H56.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M17 32.3201H56.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M17 40.6902H56.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M17 49.0603H56.97" stroke="#C18F36" stroke-miterlimit="10"/>
+</g>
+<path d="M49.3105 15.51V6.51001H56.0005C57.3705 6.51001 57.5005 6.64001 57.5005 8.01001V15.51H49.3105Z" fill="#ADDFF3"/>
+<path d="M56.0005 7C56.3028 6.98463 56.6057 7.01156 56.9005 7.08C56.9993 7.37598 57.0334 7.68971 57.0005 8V15H49.8105V7H56.0005ZM56.0005 6H48.8105V16H58.0005V8C58.0005 6.35 57.6505 6 56.0005 6Z" fill="#2980B9"/>
+<path d="M16.5098 15.51V8C16.5098 6.63 16.6398 6.5 18.0098 6.5H24.6998V15.5L16.5098 15.51Z" fill="#ADDFF3"/>
+<path d="M24.2 7V15H17V8C16.985 7.69775 17.0119 7.39487 17.08 7.1C17.376 7.00121 17.6897 6.96711 18 7H24.2ZM25.2 6H18C16.35 6 16 6.35 16 8V16H25.2V6Z" fill="#2980B9"/>
+<path d="M49.2896 6.51001H41.0996V15.51H49.2896V6.51001Z" fill="#ADDFF3"/>
+<path d="M48.7894 7V15H41.5994V7H48.7794H48.7894ZM49.7794 6H40.6094V16H49.7994V6H49.7794Z" fill="#2980B9"/>
+<path d="M41.1002 6.51001H32.9102V15.51H41.1002V6.51001Z" fill="#ADDFF3"/>
+<path d="M40.5999 7V15H33.4099V7H40.5999ZM41.5999 6H32.4199V16H41.5999V6Z" fill="#2980B9"/>
+<path d="M32.8907 6.51001H24.7207V15.51H32.8907V6.51001Z" fill="#ADDFF3"/>
+<path d="M32.4007 7V15H25.2207V7H32.4007ZM33.4007 6H24.2207V16H33.4007V6Z" fill="#2980B9"/>
+<path d="M14.9093 53.1001L11.5293 50.5701V55.6301L14.9093 53.1001Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3055 50.123C11.4748 50.0382 11.6774 50.0564 11.8289 50.1698L15.2089 52.6998C15.335 52.7942 15.4093 52.9425 15.4093 53.1001C15.4093 53.2576 15.335 53.4059 15.2089 53.5004L11.8289 56.0304C11.6774 56.1438 11.4748 56.1619 11.3055 56.0772C11.1362 55.9924 11.0293 55.8194 11.0293 55.6301V50.5701C11.0293 50.3808 11.1362 50.2077 11.3055 50.123ZM12.0293 51.5689V54.6313L14.0749 53.1001L12.0293 51.5689Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.14062 53.1001C3.14062 52.5478 3.58834 52.1001 4.14062 52.1001H11.2506C11.8029 52.1001 12.2506 52.5478 12.2506 53.1001C12.2506 53.6524 11.8029 54.1001 11.2506 54.1001H4.14062C3.58834 54.1001 3.14062 53.6524 3.14062 53.1001Z" fill="#528D19"/>
+<path d="M14.9093 36.29L11.5293 33.76V38.82L14.9093 36.29Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3055 33.3129C11.4748 33.2282 11.6774 33.2463 11.8289 33.3597L15.2089 35.8897C15.335 35.9841 15.4093 36.1325 15.4093 36.29C15.4093 36.4476 15.335 36.5959 15.2089 36.6903L11.8289 39.2203C11.6774 39.3337 11.4748 39.3519 11.3055 39.2671C11.1362 39.1824 11.0293 39.0093 11.0293 38.82V33.76C11.0293 33.5707 11.1362 33.3976 11.3055 33.3129ZM12.0293 34.7588V37.8212L14.0749 36.29L12.0293 34.7588Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.14062 36.2898C3.14062 35.7375 3.58834 35.2898 4.14062 35.2898H11.2506C11.8029 35.2898 12.2506 35.7375 12.2506 36.2898C12.2506 36.8421 11.8029 37.2898 11.2506 37.2898H4.14062C3.58834 37.2898 3.14062 36.8421 3.14062 36.2898Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 14.6602C4.55228 14.6602 5 15.1079 5 15.6602V53.1002C5 53.6524 4.55228 54.1002 4 54.1002C3.44772 54.1002 3 53.6524 3 53.1002V15.6602C3 15.1079 3.44772 14.6602 4 14.6602Z" fill="#528D19"/>
+<path d="M23.2102 33.77H17.9902V39.21H23.2102V33.77Z" fill="#34495E"/>
+<path d="M23.2102 50.5701H17.9902V56.0101H23.2102V50.5701Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_setop.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_setop.svg
new file mode 100644
index 0000000..1ddd26e
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_setop.svg
@@ -0,0 +1,62 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<path opacity="0.7" d="M53.0098 35.5803H46.0098V42.5803H53.0098V35.5803Z" fill="#F0ECB6"/>
+<path opacity="0.7" d="M52.5098 36.0803V42.0803H46.5098V36.0803H52.5098ZM53.5098 35.0803H45.5098V43.0803H53.5098V35.0803Z" fill="#C18F35"/>
+<path opacity="0.7" d="M19.5098 49.5603C19.1119 49.5603 18.7304 49.4023 18.4491 49.121C18.1678 48.8397 18.0098 48.4581 18.0098 48.0603V42.5603H25.0098V49.5603H19.5098Z" fill="#F0ECB6"/>
+<path opacity="0.7" d="M24.5098 43.0603V49.0603H19.5098C19.2445 49.0603 18.9902 48.9549 18.8027 48.7674C18.6151 48.5799 18.5098 48.3255 18.5098 48.0603V43.0603H24.5098ZM25.5098 42.0603H17.5098V48.0603C17.5098 48.5907 17.7205 49.0994 18.0956 49.4745C18.4706 49.8496 18.9793 50.0603 19.5098 50.0603H25.5098V42.0603Z" fill="#C18F35"/>
+<path opacity="0.7" d="M32.0391 42.5603H25.0391V49.5603H32.0391V42.5603Z" fill="#F0ECB6"/>
+<path opacity="0.7" d="M31.5391 43.0603V49.0603H25.5391V43.0603H31.5391ZM32.5391 42.0603H24.5391V50.0603H32.5391V42.0603Z" fill="#C18F35"/>
+<path opacity="0.7" d="M39.0098 42.5603H32.0098V49.5603H39.0098V42.5603Z" fill="#F0ECB6"/>
+<path opacity="0.7" d="M38.5098 43.0603V49.0603H32.5098V43.0603H38.5098ZM39.5098 42.0603H31.5098V50.0603H39.5098V42.0603Z" fill="#C18F35"/>
+<path opacity="0.7" d="M46.0391 42.5603H39.0391V49.5603H46.0391V42.5603Z" fill="#F0ECB6"/>
+<path opacity="0.7" d="M45.5391 43.0603V49.0603H39.5391V43.0603H45.5391ZM46.5391 42.0603H38.5391V50.0603H46.5391V42.0603Z" fill="#C18F35"/>
+<path opacity="0.7" d="M46 49.5603V42.5603H53V48.0603C53 48.4581 52.842 48.8397 52.5607 49.121C52.2794 49.4023 51.8978 49.5603 51.5 49.5603H46Z" fill="#F0ECB6"/>
+<path opacity="0.7" d="M52.5098 43.0603V48.0603C52.5098 48.3255 52.4044 48.5799 52.2169 48.7674C52.0293 48.9549 51.775 49.0603 51.5098 49.0603H46.5098V43.0603H52.5098ZM53.5098 42.0603H45.5098V50.0603H51.5098C52.0402 50.0603 52.5489 49.8496 52.924 49.4745C53.2991 49.0994 53.5098 48.5907 53.5098 48.0603V42.0603Z" fill="#C18F35"/>
+<path opacity="0.7" d="M46 28.4302V21.4302H51.5C51.8978 21.4302 52.2794 21.5882 52.5607 21.8695C52.842 22.1508 53 22.5324 53 22.9302V28.4302H46Z" fill="#F0ECB6"/>
+<path opacity="0.7" d="M51.5098 21.9302C51.775 21.9302 52.0293 22.0355 52.2169 22.2231C52.4044 22.4106 52.5098 22.665 52.5098 22.9302V27.9302H46.5098V21.9302H51.5098ZM51.5098 20.9302H45.5098V28.9302H53.5098V22.9302C53.5098 22.3997 53.2991 21.891 52.924 21.516C52.5489 21.1409 52.0402 20.9302 51.5098 20.9302Z" fill="#C18F35"/>
+<path opacity="0.7" d="M53.0098 28.5H46.0098V35.5H53.0098V28.5Z" fill="#F0ECB6"/>
+<path opacity="0.7" d="M52.5098 29V35H46.5098V29H52.5098ZM53.5098 28H45.5098V36H53.5098V28Z" fill="#C18F35"/>
+</g>
+<g opacity="0.7">
+<path opacity="0.7" d="M17.9902 28.3601H10.9902V35.3601H17.9902V28.3601Z" fill="#D3D4F3"/>
+<path opacity="0.7" d="M17.4902 28.8601V34.8601H11.4902V28.8601H17.4902ZM18.4902 27.8601H10.4902V35.8601H18.4902V27.8601Z" fill="#666BD1"/>
+<path opacity="0.7" d="M12.4902 42.3601C12.0924 42.3601 11.7109 42.2021 11.4296 41.9208C11.1483 41.6395 10.9902 41.2579 10.9902 40.8601V35.3601H17.9902V42.3601H12.4902Z" fill="#D3D4F3"/>
+<path opacity="0.7" d="M17.4902 35.8601V41.8601H12.4902C12.225 41.8601 11.9707 41.7548 11.7831 41.5672C11.5956 41.3797 11.4902 41.1253 11.4902 40.8601V35.8601H17.4902ZM18.4902 34.8601H10.4902V40.8601C10.4902 41.3905 10.7009 41.8992 11.076 42.2743C11.4511 42.6494 11.9598 42.8601 12.4902 42.8601H18.4902V34.8601Z" fill="#666BD1"/>
+<path opacity="0.7" d="M17.9902 21.2798H10.9902V28.2798H17.9902V21.2798Z" fill="#D3D4F3"/>
+<path opacity="0.7" d="M17.4902 21.7798V27.7798H11.4902V21.7798H17.4902ZM18.4902 20.7798H10.4902V28.7798H18.4902V20.7798Z" fill="#666BD1"/>
+<path opacity="0.7" d="M11 21.4399V15.9399C11 15.5421 11.158 15.1606 11.4393 14.8793C11.7206 14.598 12.1022 14.4399 12.5 14.4399H18V21.4399H11Z" fill="#D3D4F3"/>
+<path opacity="0.7" d="M17.4902 14.9399V20.9399H11.4902V15.9399C11.4902 15.6747 11.5956 15.4204 11.7831 15.2328C11.9707 15.0453 12.225 14.9399 12.4902 14.9399H17.4902ZM18.4902 13.9399H12.4902C11.9598 13.9399 11.4511 14.1507 11.076 14.5257C10.7009 14.9008 10.4902 15.4095 10.4902 15.9399V21.9399H18.4902V13.9399Z" fill="#666BD1"/>
+<path opacity="0.7" d="M24.9609 14.4399H17.9609V21.4399H24.9609V14.4399Z" fill="#D3D4F3"/>
+<path opacity="0.7" d="M24.4609 14.9399V20.9399H18.4609V14.9399H24.4609ZM25.4609 13.9399H17.4609V21.9399H25.4609V13.9399Z" fill="#666BD1"/>
+<path opacity="0.7" d="M31.9902 14.4399H24.9902V21.4399H31.9902V14.4399Z" fill="#D3D4F3"/>
+<path opacity="0.7" d="M31.4902 14.9399V20.9399H25.4902V14.9399H31.4902ZM32.4902 13.9399H24.4902V21.9399H32.4902V13.9399Z" fill="#666BD1"/>
+<path opacity="0.7" d="M39.0098 14.4399H32.0098V21.4399H39.0098V14.4399Z" fill="#D3D4F3"/>
+<path opacity="0.7" d="M38.5098 14.9399V20.9399H32.5098V14.9399H38.5098ZM39.5098 13.9399H31.5098V21.9399H39.5098V13.9399Z" fill="#666BD1"/>
+<path opacity="0.7" d="M39 21.4399V14.4399H44.5C44.8978 14.4399 45.2794 14.598 45.5607 14.8793C45.842 15.1606 46 15.5421 46 15.9399V21.4399H39Z" fill="#D3D4F3"/>
+<path opacity="0.7" d="M44.4902 14.9399C44.7555 14.9399 45.0098 15.0453 45.1973 15.2328C45.3849 15.4204 45.4902 15.6747 45.4902 15.9399V20.9399H39.4902V14.9399H44.4902ZM44.4902 13.9399H38.4902V21.9399H46.4902V15.9399C46.4902 15.4095 46.2795 14.9008 45.9045 14.5257C45.5294 14.1507 45.0207 13.9399 44.4902 13.9399Z" fill="#666BD1"/>
+</g>
+<path d="M25.0098 21.4302H18.0098V28.4302H25.0098V21.4302Z" fill="#ADDFF3"/>
+<path d="M24.5098 21.9302V27.9302H18.5098V21.9302H24.5098ZM25.5098 20.9302H17.5098V28.9302H25.5098V20.9302Z" fill="#2980B9"/>
+<path d="M32.0391 21.4302H25.0391V28.4302H32.0391V21.4302Z" fill="#ADDFF3"/>
+<path d="M31.5391 21.9302V27.9302H25.5391V21.9302H31.5391ZM32.5391 20.9302H24.5391V28.9302H32.5391V20.9302Z" fill="#2980B9"/>
+<path d="M46.0391 21.4302H39.0391V28.4302H46.0391V21.4302Z" fill="#ADDFF3"/>
+<path d="M45.5391 21.9302V27.9302H39.5391V21.9302H45.5391ZM46.5391 20.9302H38.5391V28.9302H46.5391V20.9302Z" fill="#2980B9"/>
+<path d="M46.0391 28.5H39.0391V35.5H46.0391V28.5Z" fill="#ADDFF3"/>
+<path d="M45.5391 29V35H39.5391V29H45.5391ZM46.5391 28H38.5391V36H46.5391V28Z" fill="#2980B9"/>
+<path d="M25.0098 35.5798H18.0098V42.5798H25.0098V35.5798Z" fill="#ADDFF3"/>
+<path d="M24.5098 36.0798V42.0798H18.5098V36.0798H24.5098ZM25.5098 35.0798H17.5098V43.0798H25.5098V35.0798Z" fill="#2980B9"/>
+<path d="M32.0391 35.5798H25.0391V42.5798H32.0391V35.5798Z" fill="#ADDFF3"/>
+<path d="M31.5391 36.0798V42.0798H25.5391V36.0798H31.5391ZM32.5391 35.0798H24.5391V43.0798H32.5391V35.0798Z" fill="#2980B9"/>
+<path d="M39.0098 35.5798H32.0098V42.5798H39.0098V35.5798Z" fill="#ADDFF3"/>
+<path d="M38.5098 36.0798V42.0798H32.5098V36.0798H38.5098ZM39.5098 35.0798H31.5098V43.0798H39.5098V35.0798Z" fill="#2980B9"/>
+<path d="M46.0391 35.5798H39.0391V42.5798H46.0391V35.5798Z" fill="#ADDFF3"/>
+<path d="M45.5391 36.0798V42.0798H39.5391V36.0798H45.5391ZM46.5391 35.0798H38.5391V43.0798H46.5391V35.0798Z" fill="#2980B9"/>
+<path d="M39.0098 21.4302H32.0098V28.4302H39.0098V21.4302Z" fill="#ADDFF3"/>
+<path d="M38.5098 21.9302V27.9302H32.5098V21.9302H38.5098ZM39.5098 20.9302H31.5098V28.9302H39.5098V20.9302Z" fill="#2980B9"/>
+<path d="M25.0098 28.5H18.0098V35.5H25.0098V28.5Z" fill="#ADDFF3"/>
+<path d="M24.5098 29V35H18.5098V29H24.5098ZM25.5098 28H17.5098V36H25.5098V28Z" fill="#2980B9"/>
+<path d="M32.0391 28.5H25.0391V35.5H32.0391V28.5Z" fill="#ADDFF3"/>
+<path d="M31.5391 29V35H25.5391V29H31.5391ZM32.5391 28H24.5391V36H32.5391V28Z" fill="#2980B9"/>
+<path d="M39.0098 28.5H32.0098V35.5H39.0098V28.5Z" fill="#ADDFF3"/>
+<path d="M38.5098 29V35H32.5098V29H38.5098ZM39.5098 28H31.5098V36H39.5098V28Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_sort.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_sort.svg
new file mode 100644
index 0000000..0e49483
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_sort.svg
@@ -0,0 +1,59 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1895 50.9399C11.8195 50.9399 11.6895 50.8099 11.6895 49.4399V44.6399H22.9995V50.9399H13.1895Z" fill="#D3D4F3"/>
+<path d="M22.4695 45.1399V50.4399H13.1895C12.8872 50.4553 12.5843 50.4283 12.2895 50.3599C12.1907 50.0639 12.1566 49.7502 12.1895 49.4399V45.1399H22.4695ZM23.4695 44.1399H11.1895V49.4399C11.1895 51.0899 11.5395 51.4399 13.1895 51.4399H23.4695V44.1399Z" fill="#666BD1"/>
+<path d="M22.9695 38.3101H11.6895V44.6101H22.9695V38.3101Z" fill="#B6EEFF"/>
+<path d="M22.4695 38.8101V44.1101H12.1895V38.8101H22.4695ZM23.4695 37.8101H11.1895V45.1101H23.4695V37.8101Z" fill="#0CC5FF"/>
+<path d="M22.9695 31.97H11.6895V38.28H22.9695V31.97Z" fill="#C8FFAC"/>
+<path d="M22.4695 32.47V37.77H12.1895V32.47H22.4695ZM23.4695 31.47H11.1895V38.77H23.4695V31.47Z" fill="#48D601"/>
+<path d="M22.9695 25.6802H11.6895V31.9802H22.9695V25.6802Z" fill="#F0ECB6"/>
+<path d="M22.4695 26.1802V31.4802H12.1895V26.1802H22.4695ZM23.4695 25.1802H11.1895V32.4802H23.4695V25.1802Z" fill="#C18F35"/>
+<path d="M22.9695 19.3801H11.6895V25.6801H22.9695V19.3801Z" fill="#FFE7E7"/>
+<path d="M22.4695 19.8801V25.1801H12.1895V19.8801H22.4695ZM23.4695 18.8801H11.1895V26.1801H23.4695V18.8801Z" fill="#FF3D3D"/>
+<path d="M11.6895 19.3598V14.5598C11.6895 13.1898 11.9095 13.1198 12.7595 13.0698H21.8995C22.7495 13.0698 22.9695 13.1898 22.9695 14.5598V19.3598H11.6895Z" fill="#ADDFF3"/>
+<path d="M21.8692 13.5601C22.038 13.5645 22.2057 13.588 22.3692 13.6301C22.4665 13.9264 22.5006 14.2398 22.4692 14.5501V18.8501H12.1892V14.5501C12.1714 14.2478 12.1983 13.9445 12.2692 13.6501C12.4346 13.5848 12.6116 13.5542 12.7892 13.5601H21.8692ZM23.4692 12.5601H12.7392C11.4892 12.6301 11.1992 13.0601 11.1992 14.5601V19.8601H23.4692V14.5601C23.4692 13.0801 23.1792 12.6501 21.9292 12.5601H23.4692Z" fill="#2980B9"/>
+<path d="M17.5102 20.9302V24.2902H16.7402V20.9302H17.5102Z" fill="#34495E"/>
+<path d="M19.3208 20.9302V24.2902H18.5508V20.9302H19.3208Z" fill="#34495E"/>
+<path d="M15.6704 20.9302V24.2902H14.9004V20.9302H15.6704Z" fill="#34495E"/>
+<path d="M17.5102 27.22V30.58H16.7402V27.22H17.5102Z" fill="#34495E"/>
+<path d="M19.3208 27.22V30.58H18.5508V27.22H19.3208Z" fill="#34495E"/>
+<path d="M21.0708 27.22V30.58H20.3008V27.22H21.0708Z" fill="#34495E"/>
+<path d="M14.0005 27.22V30.58H13.2305V27.22H14.0005Z" fill="#34495E"/>
+<path d="M15.6704 27.22V30.58H14.9004V27.22H15.6704Z" fill="#34495E"/>
+<path d="M18.6509 39.78V43.14H17.8809V39.78H18.6509Z" fill="#34495E"/>
+<path d="M20.4009 39.78V43.14H19.6309V39.78H20.4009Z" fill="#34495E"/>
+<path d="M15.2309 39.78V43.14H14.4609V39.78H15.2309Z" fill="#34495E"/>
+<path d="M16.8696 39.78V43.14H16.0996V39.78H16.8696Z" fill="#34495E"/>
+<path d="M17.5102 33.5898V36.9498H16.7402V33.5898H17.5102Z" fill="#34495E"/>
+<path d="M18.6509 46.1101V49.4701H17.8809V46.1101H18.6509Z" fill="#34495E"/>
+<path d="M16.8696 46.1101V49.4701H16.0996V46.1101H16.8696Z" fill="#34495E"/>
+<path d="M42.5293 50.9399C41.1593 50.9399 41.0293 50.8099 41.0293 49.4399V44.6399H52.3093V50.9399H42.5293Z" fill="#F0ECB6"/>
+<path d="M51.8093 45.1399V50.4399H42.5293C42.227 50.4551 41.9241 50.4282 41.6293 50.3599C41.5305 50.0639 41.4964 49.7502 41.5293 49.4399V45.1399H51.8093ZM52.8093 44.1399H40.5293V49.4399C40.5293 51.0899 40.8793 51.4399 42.5293 51.4399H52.8093V44.1399Z" fill="#C18F35"/>
+<path d="M52.3093 38.3101H41.0293V44.6101H52.3093V38.3101Z" fill="#B6EEFF"/>
+<path d="M51.8093 38.8101V44.1101H41.5293V38.8101H51.8093ZM52.8093 37.8101H40.5293V45.1101H52.8093V37.8101Z" fill="#0CC5FF"/>
+<path d="M52.3093 31.97H41.0293V38.28H52.3093V31.97Z" fill="#FFE7E7"/>
+<path d="M51.8093 32.47V37.77H41.5293V32.47H51.8093ZM52.8093 31.47H40.5293V38.77H52.8093V31.47Z" fill="#FF3D3D"/>
+<path d="M52.3093 25.6802H41.0293V31.9802H52.3093V25.6802Z" fill="#D3D4F3"/>
+<path d="M51.8093 26.1802V31.4802H41.5293V26.1802H51.8093ZM52.8093 25.1802H40.5293V32.4802H52.8093V25.1802Z" fill="#666BD1"/>
+<path d="M52.3093 19.3801H41.0293V25.6801H52.3093V19.3801Z" fill="#C8FFAC"/>
+<path d="M51.8093 19.8801V25.1801H41.5293V19.8801H51.8093ZM52.8093 18.8801H40.5293V26.1801H52.8093V18.8801Z" fill="#48D601"/>
+<path d="M41 19.3598V14.5598C41 13.1898 41.22 13.1198 42.07 13.0698H51.21C52.06 13.0698 52.28 13.1898 52.28 14.5598V19.3598H41Z" fill="#ADDFF3"/>
+<path d="M51.2093 13.5601C51.3781 13.5645 51.5458 13.588 51.7093 13.6301C51.8066 13.9264 51.8407 14.2398 51.8093 14.5501V18.8501H41.5293V14.5501C41.5114 14.2478 41.5384 13.9445 41.6093 13.6501C41.7747 13.5848 41.9516 13.5542 42.1293 13.5601H51.2093ZM52.8093 12.5601H42.0693C40.8193 12.6301 40.5293 13.0601 40.5293 14.5601V19.8601H52.8093V14.5601C52.8093 13.0801 52.5193 12.6501 51.2693 12.5601H52.8093Z" fill="#2980B9"/>
+<path d="M46.8403 33.4399V36.7999H46.0703V33.4399H46.8403Z" fill="#34495E"/>
+<path d="M48.6606 33.4399V36.7999H47.8906V33.4399H48.6606Z" fill="#34495E"/>
+<path d="M45.0005 33.4399V36.7999H44.2305V33.4399H45.0005Z" fill="#34495E"/>
+<path d="M46.8403 46.1101V49.4701H46.0703V46.1101H46.8403Z" fill="#34495E"/>
+<path d="M48.6606 46.1101V49.4701H47.8906V46.1101H48.6606Z" fill="#34495E"/>
+<path d="M50.4106 46.1101V49.4701H49.6406V46.1101H50.4106Z" fill="#34495E"/>
+<path d="M43.3598 46.1101V49.4701H42.5898V46.1101H43.3598Z" fill="#34495E"/>
+<path d="M45.0005 46.1101V49.4701H44.2305V46.1101H45.0005Z" fill="#34495E"/>
+<path d="M48.0005 39.78V43.14H47.2305V39.78H48.0005Z" fill="#34495E"/>
+<path d="M49.73 39.78V43.14H49V39.78H49.73Z" fill="#34495E"/>
+<path d="M44.5708 39.78V43.14H43.8008V39.78H44.5708Z" fill="#34495E"/>
+<path d="M46.1997 39.78V43.14H45.4297V39.78H46.1997Z" fill="#34495E"/>
+<path d="M46.8403 20.8499V24.2099H46.0703V20.8499H46.8403Z" fill="#34495E"/>
+<path d="M47.73 27.22V30.58H47V27.22H47.73Z" fill="#34495E"/>
+<path d="M46.0005 27.22V30.58H45.2305V27.22H46.0005Z" fill="#34495E"/>
+<path d="M37.38 32L34 29.47V34.53L37.38 32Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.7762 29.0229C33.9455 28.9381 34.1481 28.9563 34.2996 29.0697L37.6796 31.5997C37.8057 31.6941 37.88 31.8424 37.88 32C37.88 32.1575 37.8057 32.3058 37.6796 32.4003L34.2996 34.9302C34.1481 35.0437 33.9455 35.0618 33.7762 34.9771C33.6069 34.8923 33.5 34.7193 33.5 34.53V29.47C33.5 29.2807 33.6069 29.1076 33.7762 29.0229ZM34.5 30.4688V33.5311L36.5456 32L34.5 30.4688Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.6191 32C25.6191 31.4477 26.0669 31 26.6191 31H33.7191C34.2714 31 34.7191 31.4477 34.7191 32C34.7191 32.5523 34.2714 33 33.7191 33H26.6191C26.0669 33 25.6191 32.5523 25.6191 32Z" fill="#528D19"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_subplan.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_subplan.svg
new file mode 100644
index 0000000..e334255
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_subplan.svg
@@ -0,0 +1,33 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 53.3801C7.63 53.3801 7.5 53.2501 7.5 51.8801V40.3801H14.78V53.3801H9Z" fill="#F0ECB6"/>
+<path d="M14.23 40.8801V52.8801H9C8.69774 52.8955 8.39481 52.8686 8.1 52.8001C8.00121 52.5041 7.96711 52.1904 8 51.8801V40.8801H14.28H14.23ZM15.28 39.8801H7V51.8801C7 53.5301 7.35 53.8801 9 53.8801H15.28V39.8801Z" fill="#C18F35"/>
+<path d="M14.7207 53.3801V40.3801H22.0007V51.8801C22.0007 53.2501 21.8707 53.3801 20.5007 53.3801H14.7207Z" fill="#F0ECB6"/>
+<path d="M21.5007 40.8801V51.8801C21.5157 52.1824 21.4888 52.4853 21.4207 52.7801C21.1247 52.8789 20.811 52.913 20.5007 52.8801H15.2207V40.8801H21.5007ZM22.5007 39.8801H14.2207V53.8801H20.5007C22.1507 53.8801 22.5007 53.5301 22.5007 51.8801V39.8801Z" fill="#C18F35"/>
+<path d="M7.44922 40.3801V35.8801C7.44922 34.5101 7.57922 34.3801 8.94922 34.3801H14.7292V40.3801H7.44922Z" fill="#ADDFF3"/>
+<path d="M14.23 34.8801V39.8801H8V35.8801C7.96047 35.5881 7.96047 35.2921 8 35.0001C8.29598 34.9014 8.60971 34.8673 8.92 34.9001H14.2L14.23 34.8801ZM15.2 33.9001H9C7.35 33.9001 7 34.2501 7 35.9001V40.9001H15.28V33.9001H15.2Z" fill="#2980B9"/>
+<path d="M14.7207 40.3801V34.3801H20.5007C21.8707 34.3801 22.0007 34.5101 22.0007 35.8801V40.3801H14.7207Z" fill="#ADDFF3"/>
+<path d="M20.5007 34.8801C20.803 34.8648 21.1059 34.8917 21.4007 34.9601C21.4995 35.2561 21.5336 35.5698 21.5007 35.8801V39.8801H15.2207V34.8801H20.5007ZM20.5007 33.8801H14.2207V40.8801H22.5007V35.8801C22.5007 34.2301 22.1507 33.8801 20.5007 33.8801Z" fill="#2980B9"/>
+<path opacity="0.8" d="M14.4805 46.73H21.9705" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M7.48047 46.73H14.2205" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M43.5293 53.3801C42.1593 53.3801 42.0293 53.2501 42.0293 51.8801V40.3801H49.3093V53.3801H43.5293Z" fill="#F0ECB6"/>
+<path d="M48.8093 40.8801V52.8801H43.5293C43.227 52.8955 42.9241 52.8686 42.6293 52.8001C42.5305 52.5041 42.4964 52.1904 42.5293 51.8801V40.8801H48.8093ZM49.8093 39.8801H41.5293V51.8801C41.5293 53.5301 41.8793 53.8801 43.5293 53.8801H49.8093V39.8801Z" fill="#C18F35"/>
+<path d="M49.3008 53.3801V40.3801H56.5808V51.8801C56.5808 53.2501 56.4508 53.3801 55.0808 53.3801H49.3008Z" fill="#F0ECB6"/>
+<path d="M56.0808 40.8801V51.8801C56.0958 52.1824 56.0688 52.4853 56.0008 52.7801C55.7048 52.8789 55.3911 52.913 55.0808 52.8801H49.8008V40.8801H56.0808ZM57.0808 39.8801H48.8008V53.8801H55.0808C56.7308 53.8801 57.0808 53.5301 57.0808 51.8801V39.8801Z" fill="#C18F35"/>
+<path d="M42 40.3801V35.8801C42 34.5101 42.13 34.3801 43.5 34.3801H49.28V40.3801H42Z" fill="#ADDFF3"/>
+<path d="M48.8093 34.8801V39.8801H42.5293V35.8801C42.5143 35.5779 42.5412 35.275 42.6093 34.9801C42.9053 34.8813 43.219 34.8472 43.5293 34.8801H48.8093ZM49.8093 33.8801H43.5293C41.8793 33.8801 41.5293 34.2301 41.5293 35.8801V40.8801H49.8093V33.8801Z" fill="#2980B9"/>
+<path d="M49.3008 40.3801V34.3801H55.0808C56.4508 34.3801 56.5808 34.5101 56.5808 35.8801V40.3801H49.3008Z" fill="#ADDFF3"/>
+<path d="M55.0808 34.8802C55.3916 34.876 55.7014 34.9164 56.0008 35.0002C56.0999 35.2961 56.134 35.6099 56.1008 35.9202V39.9202H49.8008V34.9202H55.0808V34.8802ZM55.0808 33.9202H48.8008V40.9202H57.0808V35.9202C57.0808 34.2702 56.7308 33.9202 55.0808 33.9202Z" fill="#2980B9"/>
+<path opacity="0.8" d="M49.0605 46.73H56.5505" stroke="#C18F35" stroke-linejoin="round"/>
+<path opacity="0.8" d="M42.0605 46.73H48.8005" stroke="#C18F35" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5 10.6301C25.9033 10.6301 25.331 10.8672 24.909 11.2891C24.4871 11.7111 24.25 12.2834 24.25 12.8801C24.25 13.2943 23.9142 13.6301 23.5 13.6301C23.0858 13.6301 22.75 13.2943 22.75 12.8801C22.75 11.8856 23.1451 10.9317 23.8483 10.2285C24.5516 9.52521 25.5054 9.13013 26.5 9.13013H37.5C38.4946 9.13013 39.4484 9.52521 40.1516 10.2285C40.8549 10.9317 41.25 11.8856 41.25 12.8801V24.8801C41.25 25.8747 40.8549 26.8285 40.1516 27.5318C39.4484 28.235 38.4946 28.6301 37.5 28.6301H26.5C25.5054 28.6301 24.5516 28.235 23.8483 27.5318C23.1451 26.8285 22.75 25.8747 22.75 24.8801V19.0001C22.75 18.5859 23.0858 18.2501 23.5 18.2501C23.9142 18.2501 24.25 18.5859 24.25 19.0001V24.8801C24.25 25.4769 24.4871 26.0492 24.909 26.4711C25.331 26.8931 25.9033 27.1301 26.5 27.1301H37.5C38.0967 27.1301 38.669 26.8931 39.091 26.4711C39.5129 26.0492 39.75 25.4769 39.75 24.8801V12.8801C39.75 12.2834 39.5129 11.7111 39.091 11.2891C38.669 10.8672 38.0967 10.6301 37.5 10.6301H26.5Z" fill="#666BD1"/>
+<path d="M23.4995 16.54L21.2695 19.51H25.7295L23.4995 16.54Z" fill="#666BD1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.8128 14.5335C27.772 14.7179 27.75 14.9844 27.75 15.3801C27.75 15.7943 27.4142 16.1301 27 16.1301C26.5858 16.1301 26.25 15.7943 26.25 15.3801C26.25 14.9509 26.2718 14.5548 26.3482 14.2095C26.4265 13.8557 26.5718 13.5102 26.8509 13.231C27.1301 12.9519 27.4756 12.8066 27.8294 12.7283C28.1747 12.6519 28.5707 12.6301 29 12.6301H35C35.4293 12.6301 35.8253 12.6519 36.1706 12.7283C36.5244 12.8066 36.8699 12.9519 37.1491 13.231C37.4282 13.5102 37.5735 13.8557 37.6518 14.2095C37.7282 14.5548 37.75 14.9509 37.75 15.3801V22.3801C37.75 22.8094 37.7282 23.2054 37.6518 23.5507C37.5735 23.9045 37.4282 24.2501 37.1491 24.5292C36.8699 24.8083 36.5244 24.9537 36.1706 25.0319C35.8253 25.1083 35.4293 25.1301 35 25.1301H29.25C28.8207 25.1301 28.4247 25.1083 28.0794 25.0319C27.7256 24.9537 27.3801 24.8083 27.1009 24.5292C26.8218 24.2501 26.6765 23.9045 26.5982 23.5507C26.5218 23.2054 26.5 22.8094 26.5 22.3801V19.7401C26.5 19.3259 26.8358 18.9901 27.25 18.9901C27.6642 18.9901 28 19.3259 28 19.7401V22.3801C28 22.7759 28.022 23.0423 28.0628 23.2267C28.1017 23.4026 28.147 23.4539 28.1616 23.4685C28.1762 23.4831 28.2275 23.5285 28.4034 23.5674C28.5878 23.6082 28.8543 23.6301 29.25 23.6301H35C35.3957 23.6301 35.6622 23.6082 35.8466 23.5674C36.0225 23.5285 36.0738 23.4831 36.0884 23.4685C36.103 23.4539 36.1483 23.4026 36.1872 23.2267C36.228 23.0423 36.25 22.7759 36.25 22.3801V15.3801C36.25 14.9844 36.228 14.7179 36.1872 14.5335C36.1483 14.3577 36.103 14.3063 36.0884 14.2917C36.0738 14.2771 36.0225 14.2318 35.8466 14.1929C35.6622 14.1521 35.3957 14.1301 35 14.1301H29C28.6043 14.1301 28.3378 14.1521 28.1534 14.1929C27.9775 14.2318 27.9262 14.2771 27.9116 14.2917C27.897 14.3063 27.8517 14.3577 27.8128 14.5335Z" fill="#8D8119"/>
+<path d="M27.2202 18.55L25.2402 20.93H29.0002L27.2202 18.55Z" fill="#8D8119"/>
+<path d="M40.9093 44.2002L37.5293 41.6702V46.7302L40.9093 44.2002Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.3055 41.2231C37.4748 41.1383 37.6774 41.1564 37.8289 41.2699L41.2089 43.7999C41.335 43.8943 41.4093 44.0426 41.4093 44.2002C41.4093 44.3577 41.335 44.506 41.2089 44.6005L37.8289 47.1305C37.6774 47.2439 37.4748 47.262 37.3055 47.1773C37.1362 47.0925 37.0293 46.9195 37.0293 46.7302V41.6702C37.0293 41.4809 37.1362 41.3078 37.3055 41.2231ZM38.0293 42.669V45.7314L40.0749 44.2002L38.0293 42.669Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.1406 44.2C31.1406 43.6477 31.5883 43.2 32.1406 43.2H39.2506C39.8029 43.2 40.2506 43.6477 40.2506 44.2C40.2506 44.7522 39.8029 45.2 39.2506 45.2H32.1406C31.5883 45.2 31.1406 44.7522 31.1406 44.2Z" fill="#528D19"/>
+<path d="M23.2305 44.2002L26.6105 41.6702V46.7302L23.2305 44.2002Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.8343 41.2231C27.0036 41.3078 27.1105 41.4809 27.1105 41.6702V46.7302C27.1105 46.9195 27.0036 47.0925 26.8343 47.1773C26.665 47.262 26.4624 47.2439 26.3109 47.1305L22.9308 44.6005C22.8047 44.506 22.7305 44.3577 22.7305 44.2002C22.7305 44.0426 22.8047 43.8943 22.9308 43.7999L26.3109 41.2699C26.4624 41.1564 26.665 41.1383 26.8343 41.2231ZM24.0649 44.2002L26.1105 45.7314V42.669L24.0649 44.2002Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9004 44.2C23.9004 43.6477 24.3481 43.2 24.9004 43.2H32.0004C32.5527 43.2 33.0004 43.6477 33.0004 44.2C33.0004 44.7522 32.5527 45.2 32.0004 45.2H24.9004C24.3481 45.2 23.9004 44.7522 23.9004 44.2Z" fill="#528D19"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32 28.77C32.5523 28.77 33 29.2177 33 29.77V44.2C33 44.7523 32.5523 45.2 32 45.2C31.4477 45.2 31 44.7523 31 44.2V29.77C31 29.2177 31.4477 28.77 32 28.77Z" fill="#528D19"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_table_func_scan.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_table_func_scan.svg
new file mode 100644
index 0000000..b39d7f5
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_table_func_scan.svg
@@ -0,0 +1,22 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.8496 49C21.4796 49 21.3496 48.88 21.3496 47.5V24H54.1396V47.47C54.1396 48.85 54.0096 48.97 52.6396 48.97L22.8496 49Z" fill="#F3C7D7"/>
+<path d="M53.6396 24.53V47.47C53.6559 47.7723 53.629 48.0754 53.5596 48.37C53.5596 48.37 53.3696 48.47 52.6396 48.47H22.8496C22.5645 48.4826 22.2789 48.4591 21.9996 48.4C21.9056 48.0996 21.8716 47.7836 21.8996 47.47V24.53H53.6396ZM54.6396 23.53H20.8496V47.47C20.8496 49.12 21.1996 49.47 22.8496 49.47H52.6396C54.2896 49.47 54.6396 49.12 54.6396 47.47V23.53Z" fill="#D04465"/>
+<g opacity="0.5">
+<path opacity="0.5" d="M37.75 48.47V24.47" stroke="#D04465" stroke-linejoin="round"/>
+<path opacity="0.5" d="M29.5488 48.47V24.47" stroke="#D04465" stroke-linejoin="round"/>
+<path opacity="0.5" d="M45.9492 48.47V24.47" stroke="#D04465" stroke-linejoin="round"/>
+<path opacity="0.5" d="M21.8496 32.47H53.6196" stroke="#D04465" stroke-linejoin="round"/>
+<path opacity="0.5" d="M21.8496 40.8398H53.6196" stroke="#D04465" stroke-linejoin="round"/>
+</g>
+<path d="M46 24V15H52.69C54.07 15 54.19 15.12 54.19 16.5V24H46Z" fill="#ADDFF3"/>
+<path d="M52.6392 15.53C52.941 15.5137 53.2436 15.5373 53.5392 15.6C53.6401 15.899 53.6742 16.2164 53.6392 16.53V23.53H46.4492V15.53H52.6392ZM52.6392 14.53H45.4492V24.53H54.6392V16.53C54.6392 14.88 54.2892 14.53 52.6392 14.53Z" fill="#2980B9"/>
+<path d="M21.3496 24V16.5C21.3496 15.12 21.4796 15 22.8496 15H29.5396V24H21.3496Z" fill="#ADDFF3"/>
+<path d="M28.9996 15.53V23.53H21.8496V16.53C21.8255 16.2277 21.8526 15.9234 21.9296 15.63C21.9296 15.63 22.1196 15.53 22.8496 15.53H28.9996ZM29.9996 14.53H22.8496C21.1996 14.53 20.8496 14.88 20.8496 16.53V24.53H29.9996V14.53Z" fill="#2980B9"/>
+<path d="M45.94 15.03H37.75V24.03H45.94V15.03Z" fill="#ADDFF3"/>
+<path d="M45.43 15.53V23.53H38.24V15.53H45.42H45.43ZM46.42 14.53H37.25V24.53H46.44V14.53H46.42Z" fill="#2980B9"/>
+<path d="M37.7505 15.03H29.5605V24.03H37.7505V15.03Z" fill="#ADDFF3"/>
+<path d="M37.2405 15.53V23.53H30.0505V15.53H37.2305H37.2405ZM38.2305 14.53H29.0605V24.53H38.2505V14.53H38.2305Z" fill="#2980B9"/>
+<path d="M12.8294 47.38L9.35938 42.73H16.3094L12.8294 47.38Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.91243 42.5058C8.99724 42.3367 9.17021 42.23 9.35938 42.23H16.3094C16.4987 42.23 16.6717 42.3369 16.7565 42.5061C16.8412 42.6754 16.8231 42.878 16.7097 43.0296L13.2297 47.6796C13.1352 47.8058 12.9867 47.8801 12.829 47.88C12.6714 47.8799 12.523 47.8054 12.4287 47.679L8.95865 43.029C8.84552 42.8774 8.82763 42.6749 8.91243 42.5058ZM10.3564 43.23L12.83 46.5447L15.3107 43.23H10.3564Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8301 15.3901C13.3824 15.3901 13.8301 15.8379 13.8301 16.3901V43.3601C13.8301 43.9124 13.3824 44.3601 12.8301 44.3601C12.2778 44.3601 11.8301 43.9124 11.8301 43.3601V16.3901C11.8301 15.8379 12.2778 15.3901 12.8301 15.3901Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_tid_scan.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_tid_scan.svg
new file mode 100644
index 0000000..fd58dd6
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_tid_scan.svg
@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.4707 50.6902C25.9007 50.6902 19.4707 47.8502 19.4707 45.1902C19.4707 42.5302 25.9007 39.6902 35.4707 39.6902C45.0407 39.6902 51.4707 42.5302 51.4707 45.1902C51.4707 47.8502 45.0007 50.6902 35.4707 50.6902Z" fill="#E6E6E6"/>
+<path d="M35.47 40.1902C44.34 40.1902 50.97 42.8302 50.97 45.1902C50.97 47.5502 44.34 50.1902 35.47 50.1902C26.6 50.1902 20 47.5502 20 45.1902C20 42.8302 26.63 40.1902 35.5 40.1902H35.47ZM35.5 39.1902C26.39 39.1902 19 41.8802 19 45.1902C19 48.5002 26.39 51.1902 35.5 51.1902C44.61 51.1902 52 48.5002 52 45.1902C52 41.8802 44.61 39.1902 35.5 39.1902Z" fill="#818181"/>
+<path d="M35.4707 46.28C25.9007 46.28 19.4707 43.44 19.4707 40.78C19.4707 38.12 25.9007 35.28 35.4707 35.28C45.0407 35.28 51.4707 38.12 51.4707 40.78C51.4707 43.44 45.0007 46.28 35.4707 46.28Z" fill="#E6E6E6"/>
+<path d="M35.47 35.78C44.34 35.78 50.97 38.42 50.97 40.78C50.97 43.14 44.34 45.78 35.47 45.78C26.6 45.78 20 43.14 20 40.78C20 38.42 26.63 35.78 35.5 35.78H35.47ZM35.5 34.78C26.39 34.78 19 37.47 19 40.78C19 44.09 26.39 46.78 35.5 46.78C44.61 46.78 52 44.09 52 40.78C52 37.47 44.61 34.78 35.5 34.78Z" fill="#818181"/>
+<path d="M35.4707 42C25.9007 42 19.4707 39.16 19.4707 36.5C19.4707 33.84 25.9007 31 35.4707 31C45.0407 31 51.4707 33.84 51.4707 36.5C51.4707 39.16 45.0007 42 35.4707 42Z" fill="#E6E6E6"/>
+<path d="M35.47 31.46C44.34 31.46 50.97 34.1 50.97 36.46C50.97 38.82 44.34 41.46 35.47 41.46C26.6 41.46 20 38.83 20 36.46C20 34.09 26.63 31.46 35.5 31.46H35.47ZM35.5 30.46C26.39 30.46 19 33.15 19 36.46C19 39.77 26.39 42.46 35.5 42.46C44.61 42.46 52 39.77 52 36.46C52 33.15 44.61 30.46 35.5 30.46Z" fill="#818181"/>
+<path d="M35.4707 37.52C25.9007 37.52 19.4707 34.68 19.4707 32.02C19.4707 29.36 25.9007 26.52 35.4707 26.52C45.0407 26.52 51.4707 29.36 51.4707 32.02C51.4707 34.68 45.0007 37.52 35.4707 37.52Z" fill="#E6E6E6"/>
+<path d="M35.47 27C44.34 27 51 29.66 51 32C51 34.34 44.37 37 35.5 37C26.63 37 20 34.38 20 32C20 29.62 26.63 27 35.5 27H35.47ZM35.5 26C26.36 26 19 28.7 19 32C19 35.3 26.39 38 35.5 38C44.61 38 52 35.33 52 32C52 28.67 44.61 26 35.5 26Z" fill="#818181"/>
+<path d="M35.4707 32.6902C25.9007 32.6902 19.4707 29.8502 19.4707 27.1902C19.4707 24.5302 25.9007 21.6902 35.4707 21.6902C45.0407 21.6902 51.4707 24.5302 51.4707 27.1902C51.4707 29.8502 45.0007 32.6902 35.4707 32.6902Z" fill="#E6E6E6"/>
+<path d="M35.47 22.1902C44.34 22.1902 50.97 24.8302 50.97 27.1902C50.97 29.5502 44.34 32.1902 35.47 32.1902C26.6 32.1902 20 29.5502 20 27.1902C20 24.8302 26.63 22.1902 35.5 22.1902H35.47ZM35.5 21.1902C26.39 21.1902 19 23.8802 19 27.1902C19 30.5002 26.39 33.1902 35.5 33.1902C44.61 33.1902 52 30.5002 52 27.1902C52 23.8802 44.61 21.1902 35.5 21.1902Z" fill="#818181"/>
+<path d="M19.5508 26.6902C20.2808 24.2402 26.2708 21.7802 34.9808 21.6902V26.6902H19.5508Z" fill="#FBE65A"/>
+<path d="M34.4707 22.2V26.2H20.3507C21.8107 24.2 27.3507 22.37 34.4707 22.2ZM35.4707 21.2C26.3607 21.2 18.9707 23.89 18.9707 27.2H35.4707V21.2Z" fill="#C4953B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8515 16.9121C16.8963 19.1061 13.8403 22.2709 12.7216 26.2052C12.6083 26.6036 12.1935 26.8347 11.7951 26.7214C11.3966 26.6082 11.1655 26.1933 11.2788 25.7949C12.5401 21.3592 15.9441 17.919 20.1239 15.6004C24.3068 13.2802 29.3377 12.04 34.0002 12.04C34.4144 12.04 34.7502 12.3758 34.7502 12.79C34.7502 13.2043 34.4144 13.54 34.0002 13.54C29.5827 13.54 24.8036 14.7199 20.8515 16.9121Z" fill="#2980B9"/>
+<path d="M40.4004 12.8098C37.1482 13.9754 34.1082 15.6643 31.4004 17.8098L33.2104 12.8098L31.4004 7.80981C34.1079 9.95578 37.148 11.6447 40.4004 12.8098Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_unique.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_unique.svg
new file mode 100644
index 0000000..08d2d76
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_unique.svg
@@ -0,0 +1,18 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.7808 17.26H41.8008C40.9724 17.26 40.3008 17.9316 40.3008 18.76V21.45C40.3008 22.2784 40.9724 22.95 41.8008 22.95H48.7808C49.6092 22.95 50.2808 22.2784 50.2808 21.45V18.76C50.2808 17.9316 49.6092 17.26 48.7808 17.26Z" fill="#F0ECB6"/>
+<path d="M48.7891 17.76C49.0913 17.7446 49.3943 17.7716 49.6891 17.84C49.7879 18.136 49.822 18.4497 49.7891 18.76V21.45C49.804 21.7523 49.7771 22.0551 49.7091 22.35C49.4131 22.4488 49.0994 22.4829 48.7891 22.45H41.7891C41.4868 22.4654 41.1839 22.4384 40.8891 22.37C40.7903 22.074 40.7562 21.7603 40.7891 21.45V18.76C40.7741 18.4578 40.801 18.1549 40.8691 17.86C41.165 17.7612 41.4788 17.7271 41.7891 17.76H48.7891ZM48.7891 16.76H41.7891C40.1391 16.76 39.7891 17.11 39.7891 18.76V21.45C39.7891 23.1 40.1391 23.45 41.7891 23.45H48.7891C50.4391 23.45 50.7891 23.1 50.7891 21.45V18.76C50.7891 17.11 50.4391 16.76 48.7891 16.76Z" fill="#C18F35"/>
+<path d="M22.1909 10.76H15.2109C14.3825 10.76 13.7109 11.4316 13.7109 12.26V27.95C13.7109 28.7784 14.3825 29.45 15.2109 29.45H22.1909C23.0194 29.45 23.6909 28.7784 23.6909 27.95V12.26C23.6909 11.4316 23.0194 10.76 22.1909 10.76Z" fill="#F0ECB6"/>
+<path d="M22.1992 11.26C22.5015 11.2446 22.8044 11.2716 23.0992 11.34C23.198 11.636 23.2321 11.9497 23.1992 12.26V27.95C23.2142 28.2523 23.1873 28.5551 23.1192 28.85C22.8232 28.9488 22.5095 28.9829 22.1992 28.95H15.1992C14.897 28.9654 14.594 28.9384 14.2992 28.87C14.2004 28.574 14.1663 28.2603 14.1992 27.95V12.26C14.1842 11.9578 14.2112 11.6549 14.2792 11.36C14.5752 11.2612 14.8889 11.2271 15.1992 11.26H22.1992ZM22.1992 10.26H15.1992C13.5492 10.26 13.1992 10.61 13.1992 12.26V27.95C13.1992 29.6 13.5492 29.95 15.1992 29.95H22.1992C23.8492 29.95 24.1992 29.6 24.1992 27.95V12.26C24.1992 10.61 23.8492 10.26 22.1992 10.26Z" fill="#C18F35"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.3396 17.6702H14.0996V16.6702H23.3396V17.6702Z" fill="#C18F35"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.3396 23.9001H14.0996V22.9001H23.3396V23.9001Z" fill="#C18F35"/>
+<path d="M28.8703 27.47C29.5815 27.4806 30.2848 27.3194 30.9203 27C31.3786 26.7358 31.7529 26.3476 32.0003 25.88C32.2279 25.4456 32.364 24.9691 32.4003 24.48C32.4003 23.98 32.4703 24.12 32.4903 23.65C32.5009 23.2481 32.5377 22.8472 32.6003 22.45C32.6426 22.1614 32.7303 21.8812 32.8603 21.62C32.9745 21.3981 33.123 21.1956 33.3003 21.02C33.4822 20.8359 33.6913 20.6808 33.9203 20.56C34.1254 20.4517 34.3396 20.3613 34.5603 20.29C34.7561 20.2292 34.9569 20.1857 35.1603 20.16C35.3503 20.16 35.3503 20.06 35.1603 20.04C34.9569 20.0143 34.7561 19.9708 34.5603 19.91C34.3389 19.8406 34.1246 19.7502 33.9203 19.64C33.6912 19.5195 33.4821 19.3643 33.3003 19.18C33.1235 19.004 32.975 18.8016 32.8603 18.58C32.7305 18.3188 32.6427 18.0387 32.6003 17.75C32.5378 17.3528 32.501 16.952 32.4903 16.55C32.4903 16.08 32.4903 16.22 32.4003 15.72C32.3643 15.2309 32.2281 14.7544 32.0003 14.32C31.752 13.8702 31.3854 13.4968 30.9403 13.24C30.3075 12.9087 29.6046 12.7338 28.8903 12.73V12.3H29.4203C29.6463 12.3182 29.8704 12.355 30.0903 12.41C30.3357 12.4689 30.5763 12.5457 30.8103 12.64C31.0618 12.7431 31.2974 12.8812 31.5103 13.05C31.8401 13.2963 32.1215 13.6015 32.3403 13.95C32.5393 14.2818 32.6844 14.6429 32.7703 15.02C32.8635 15.4442 32.9171 15.876 32.9303 16.31C32.9303 16.78 32.9303 16.19 32.9303 16.19C32.9225 16.6927 32.9627 17.195 33.0503 17.69C33.1168 18.0768 33.2783 18.4411 33.5203 18.75C33.7913 19.0689 34.134 19.3191 34.5203 19.48C34.6195 19.5421 34.7013 19.6283 34.758 19.7307C34.8147 19.833 34.8444 19.9481 34.8444 20.065C34.8444 20.182 34.8147 20.2971 34.758 20.3994C34.7013 20.5018 34.6195 20.588 34.5203 20.65C34.1342 20.8113 33.7916 21.0614 33.5203 21.38C33.2565 21.6929 33.0775 22.0682 33.0003 22.47C32.9127 22.9651 32.8725 23.4674 32.8803 23.97C32.8803 23.97 32.7903 24.75 32.7003 25.14C32.6146 25.5172 32.4694 25.8784 32.2703 26.21C32.052 26.559 31.7705 26.8643 31.4403 27.11C31.2273 27.2788 30.9917 27.4169 30.7403 27.52C30.506 27.6135 30.2654 27.6903 30.0203 27.75C29.8002 27.8042 29.5762 27.8409 29.3503 27.86H28.8203L28.8703 27.47Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path d="M48.7808 41.05H41.8008C40.9724 41.05 40.3008 41.7216 40.3008 42.55V45.2401C40.3008 46.0685 40.9724 46.7401 41.8008 46.7401H48.7808C49.6092 46.7401 50.2808 46.0685 50.2808 45.2401V42.55C50.2808 41.7216 49.6092 41.05 48.7808 41.05Z" fill="#D3D4F3"/>
+<path d="M48.7891 41.55C49.0913 41.5347 49.3943 41.5616 49.6891 41.6301C49.7882 41.926 49.8223 42.2398 49.7891 42.5501V45.2401C49.804 45.5423 49.7771 45.8452 49.7091 46.1401C49.4131 46.2388 49.0994 46.2729 48.7891 46.2401H41.7891C41.4868 46.2554 41.1839 46.2285 40.8891 46.1601C40.7903 45.8641 40.7562 45.5503 40.7891 45.2401V42.5501C40.7741 42.2478 40.801 41.9449 40.8691 41.6501C41.165 41.5513 41.4788 41.5172 41.7891 41.55H48.7891ZM48.7891 40.55H41.7891C40.1391 40.55 39.7891 40.9 39.7891 42.5501V45.2401C39.7891 46.8901 40.1391 47.2401 41.7891 47.2401H48.7891C50.4391 47.2401 50.7891 46.8901 50.7891 45.2401V42.5501C50.7891 40.9 50.4391 40.55 48.7891 40.55Z" fill="#666BD1"/>
+<path d="M22.2691 34.55H15.2891C14.4606 34.55 13.7891 35.2216 13.7891 36.05V51.7401C13.7891 52.5685 14.4606 53.2401 15.2891 53.2401H22.2691C23.0975 53.2401 23.7691 52.5685 23.7691 51.7401V36.05C23.7691 35.2216 23.0975 34.55 22.2691 34.55Z" fill="#D3D4F3"/>
+<path d="M22.2793 35.05C22.5816 35.0347 22.8845 35.0616 23.1793 35.1301C23.2784 35.426 23.3125 35.7398 23.2793 36.05V51.7401C23.2943 52.0423 23.2674 52.3452 23.1993 52.64C22.9033 52.7388 22.5896 52.7729 22.2793 52.7401H15.2793C14.977 52.7554 14.6741 52.7285 14.3793 52.66C14.2805 52.3641 14.2464 52.0503 14.2793 51.7401V36.05C14.2643 35.7478 14.2912 35.4449 14.3593 35.1501C14.6553 35.0513 14.969 35.0172 15.2793 35.05H22.2793ZM22.2793 34.05H15.2793C13.6293 34.05 13.2793 34.4 13.2793 36.05V51.7401C13.2793 53.3901 13.6293 53.7401 15.2793 53.7401H22.2793C23.9293 53.7401 24.2793 53.3901 24.2793 51.7401V36.05C24.2793 34.4 23.9293 34.05 22.2793 34.05Z" fill="#666BD1"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.4197 41.47H14.1797V40.47H23.4197V41.47Z" fill="#666BD1"/>
+<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M23.4197 47.7H14.1797V46.7H23.4197V47.7Z" fill="#666BD1"/>
+<path d="M28.8691 51.2599C29.5837 51.2581 30.2871 51.0831 30.9191 50.7499C31.3719 50.4965 31.7458 50.1227 31.9991 49.6699C32.2267 49.2354 32.3628 48.759 32.3991 48.2699C32.3991 47.7699 32.4691 47.9099 32.4891 47.4399C32.4998 47.0379 32.5365 46.6371 32.5991 46.2399C32.6414 45.9512 32.7291 45.671 32.8591 45.4099C32.9733 45.1879 33.1218 44.9854 33.2991 44.8099C33.4811 44.6257 33.6902 44.4706 33.9191 44.3499C34.1242 44.2415 34.3384 44.1511 34.5591 44.0799C34.7549 44.019 34.9557 43.9755 35.1591 43.9499C35.3491 43.9499 35.3491 43.8499 35.1591 43.8299C34.9557 43.8041 34.755 43.7606 34.5591 43.6999C34.3377 43.6304 34.1234 43.54 33.9191 43.4299C33.6901 43.3093 33.481 43.1541 33.2991 42.9699C33.1223 42.7938 32.9739 42.5914 32.8591 42.3699C32.7293 42.1086 32.6416 41.8285 32.5991 41.5399C32.5366 41.1427 32.4999 40.7418 32.4891 40.3399C32.4891 39.8699 32.4891 40.0099 32.3991 39.5099C32.3631 39.0207 32.227 38.5442 31.9991 38.1099C31.7498 37.6463 31.3757 37.2618 30.9191 36.9999C30.2864 36.6685 29.5834 36.4936 28.8691 36.4899V36.0999H29.3991C29.6251 36.118 29.8492 36.1548 30.0691 36.2099C30.3145 36.2687 30.5551 36.3456 30.7891 36.4399C31.0406 36.5429 31.2762 36.681 31.4891 36.8499C31.8189 37.0962 32.1003 37.4013 32.3191 37.7499C32.5181 38.0816 32.6632 38.4427 32.7491 38.8199C32.8424 39.244 32.8959 39.6758 32.9091 40.1099C32.9091 40.5799 32.9091 39.9899 32.9091 39.9899C32.9013 40.4925 32.9415 40.9948 33.0291 41.4899C33.0956 41.8767 33.2571 42.2409 33.4991 42.5499C33.7702 42.8687 34.1128 43.1189 34.4991 43.2799C34.5983 43.3419 34.6801 43.4281 34.7368 43.5305C34.7935 43.6328 34.8232 43.7479 34.8232 43.8649C34.8232 43.9819 34.7935 44.0969 34.7368 44.1992C34.6801 44.3016 34.5983 44.3878 34.4991 44.4499C34.113 44.6112 33.7704 44.8613 33.4991 45.1799C33.2425 45.4948 33.0705 45.8699 32.9991 46.2699C32.9115 46.7649 32.8713 47.2672 32.8791 47.7699C32.8791 47.7699 32.7891 48.5499 32.6991 48.9399C32.6281 49.3107 32.4999 49.6683 32.3191 49.9999C32.1008 50.3489 31.8194 50.6541 31.4891 50.8999C31.2762 51.0687 31.0405 51.2067 30.7891 51.3099C30.5548 51.4033 30.3142 51.4801 30.0691 51.5399C29.849 51.594 29.625 51.6307 29.3991 51.6499H28.8691V51.2599Z" fill="#34495E" stroke="#528D19" stroke-miterlimit="10"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M23.6814 10.3225C24.0501 10.5111 24.1961 10.963 24.0075 11.3318L14.7675 29.3918C14.5788 29.7605 14.1269 29.9065 13.7582 29.7178C13.3894 29.5292 13.2434 29.0773 13.4321 28.7085L22.6721 10.6485C22.8607 10.2798 23.3126 10.1338 23.6814 10.3225Z" fill="#CC0000"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M23.7616 34.2024C24.1303 34.3912 24.2762 34.8431 24.0875 35.2118L14.8475 53.2618C14.6587 53.6305 14.2068 53.7764 13.8381 53.5876C13.4694 53.3989 13.3235 52.947 13.5122 52.5783L22.7522 34.5283C22.941 34.1596 23.3929 34.0137 23.7616 34.2024Z" fill="#CC0000"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_update.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_update.svg
new file mode 100644
index 0000000..4a7c2ff
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_update.svg
@@ -0,0 +1,32 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7305 57.47C15.3605 57.47 15.2305 57.34 15.2305 55.97V15.53H56.2305V56C56.2305 57.37 56.1005 57.5 54.7305 57.5L16.7305 57.47Z" fill="#F0ECB6"/>
+<path d="M55.7207 16V56C55.7357 56.3023 55.7088 56.6051 55.6407 56.9C55.3447 56.9988 55.031 57.0329 54.7207 57H16.7207C16.4184 57.0154 16.1155 56.9884 15.8207 56.92C15.7219 56.624 15.6878 56.3103 15.7207 56V16H55.7207ZM56.7207 15H14.7207V56C14.7207 57.65 15.0707 58 16.7207 58H54.7207C56.3707 58 56.7207 57.65 56.7207 56V15Z" fill="#C18F36"/>
+<path d="M39.3391 41.2H32.1191V48.6399H39.3391V41.2Z" fill="#FFBD30"/>
+<path d="M31.1399 41.2H23.9199V48.6399H31.1399V41.2Z" fill="#FFBD30"/>
+<path d="M22.9407 24.48H15.7207V31.92H22.9407V24.48Z" fill="#FFBD30"/>
+<g opacity="0.8">
+<path opacity="0.8" d="M23.4297 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M39.8301 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M31.6309 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M48.0312 56.97V15.97" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M15.7305 23.97H55.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M15.7305 32.3398H55.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M15.7305 40.71H55.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+<path opacity="0.8" d="M15.7305 49.0798H55.7005" stroke="#C18F36" stroke-miterlimit="10"/>
+</g>
+<path d="M48 15.53V6.53003H54.69C56.06 6.53003 56.19 6.66003 56.19 8.03003V15.53H48Z" fill="#ADDFF3"/>
+<path d="M54.7293 7C55.0316 6.98463 55.3345 7.01156 55.6293 7.08C55.7281 7.37598 55.7622 7.68971 55.7293 8V15H48.5293V7H54.7193H54.7293ZM54.7193 6H47.5293V16H56.7193V8C56.7193 6.35 56.3693 6 54.7193 6Z" fill="#2980B9"/>
+<path d="M15.2305 15.53V8C15.2305 6.63 15.3605 6.5 16.7305 6.5H23.4205V15.5L15.2305 15.53Z" fill="#ADDFF3"/>
+<path d="M22.9305 7V15H15.7305V8C15.7155 7.69775 15.7424 7.39487 15.8105 7.1C16.1064 7.00121 16.4202 6.96711 16.7305 7H22.9205H22.9305ZM23.9205 6H16.7305C15.0805 6 14.7305 6.35 14.7305 8V16H23.9205V6Z" fill="#2980B9"/>
+<path d="M48.0201 6.53003H39.8301V15.53H48.0201V6.53003Z" fill="#ADDFF3"/>
+<path d="M47.5201 7V15H40.3301V7H47.5101H47.5201ZM48.5101 6H39.3301V16H48.5201V6H48.5101Z" fill="#2980B9"/>
+<path d="M39.8306 6.53003H31.6406V15.53H39.8306V6.53003Z" fill="#ADDFF3"/>
+<path d="M39.3306 7V15H32.1406V7H39.3206H39.3306ZM40.3206 6H31.1406V16H40.3306V6H40.3206Z" fill="#2980B9"/>
+<path d="M31.6192 6.53003H23.4492V15.53H31.6192V6.53003Z" fill="#ADDFF3"/>
+<path d="M31.12 7V15H23.95V7H31.12ZM32.12 6H23V16H32.18V6H32.12Z" fill="#2980B9"/>
+<path d="M7.26962 28.2801C7.2648 27.6143 7.45733 26.962 7.82293 26.4054C8.18852 25.8489 8.71078 25.4132 9.3238 25.1532C9.93681 24.8932 10.6131 24.8207 11.2673 24.9447C11.9215 25.0688 12.5243 25.3838 12.9996 25.8501L13.1296 25.9801L13.1796 26.0302L24.7196 37.5801C24.8009 37.624 24.8645 37.6947 24.8996 37.7801L26.5296 43.6001V43.6601C26.5349 43.7 26.5349 43.7403 26.5296 43.7801C26.5355 43.8199 26.5355 43.8604 26.5296 43.9001C26.5146 43.9362 26.4944 43.9699 26.4696 44.0001L26.3696 44.0601H26.2496H26.1296H25.9996L20.1796 42.4301C20.0942 42.395 20.0235 42.3314 19.9796 42.2501L8.21962 30.6401C8.1859 30.6053 8.1588 30.5647 8.13962 30.5201C7.58258 29.9068 7.27263 29.1087 7.26962 28.2801ZM20.1696 41.4301L21.1696 39.4301L11.2396 29.5001L9.72962 31.0001L20.1696 41.4301ZM25.1696 41.9801L24.3296 42.8201L25.4996 43.1501L25.1696 41.9801ZM24.1696 38.5001L21.9996 39.6001L20.9096 41.8601L23.4796 42.5801L24.9696 41.0901L24.1696 38.5001ZM23.7496 37.8001L13.3496 27.3701L11.8296 28.8901L21.7596 38.8201L23.7496 37.8001ZM8.09962 28.3101C8.09998 28.6639 8.17396 29.0138 8.31685 29.3375C8.45974 29.6611 8.66842 29.9515 8.92962 30.1901L9.14962 30.4101L12.7696 26.7901L12.5496 26.5701C12.2007 26.1882 11.7443 25.921 11.2405 25.8036C10.7367 25.6862 10.2091 25.7242 9.72733 25.9126C9.24555 26.101 8.83214 26.4309 8.54157 26.8589C8.25101 27.2869 8.09693 27.7929 8.09962 28.3101Z" fill="#C18F36"/>
+<path d="M20.1705 41.45L21.1705 39.42L21.1805 39.41L11.2505 29.48L9.73047 31L20.1705 41.45Z" fill="#F0ECB6"/>
+<path d="M13.3501 27.3801L11.8301 28.9001L21.7601 38.8301L21.7701 38.8201L23.7901 37.8301L13.3501 27.3801Z" fill="#F0ECB6"/>
+<path d="M8.11914 28.2698C8.1258 28.6274 8.20758 28.9795 8.35919 29.3034C8.5108 29.6273 8.72883 29.9157 8.99914 30.1498L9.21914 30.3698L12.8391 26.7498L12.6191 26.5298C12.2708 26.1486 11.8153 25.8815 11.3124 25.7639C10.8096 25.6462 10.2829 25.6834 9.80153 25.8705C9.32019 26.0576 8.90669 26.386 8.61536 26.8124C8.32402 27.2388 8.16848 27.7434 8.16914 28.2598L8.11914 28.2698Z" fill="#F0ECB6"/>
+<path d="M24.2191 38.52L21.9591 39.6L20.8691 41.86L23.4391 42.58L24.9391 41.09L24.2191 38.52Z" fill="#F0ECB6"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_values_scan.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_values_scan.svg
new file mode 100644
index 0000000..171e817
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_values_scan.svg
@@ -0,0 +1,23 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.98 14.1702H22C21.1716 14.1702 20.5 14.8417 20.5 15.6702V18.3602C20.5 19.1886 21.1716 19.8602 22 19.8602H25.98C26.8084 19.8602 27.48 19.1886 27.48 18.3602V15.6702C27.48 14.8417 26.8084 14.1702 25.98 14.1702Z" fill="#F0ECB6"/>
+<path d="M26 14.6702C26.3023 14.6548 26.6052 14.6817 26.9 14.7502C26.9988 15.0461 27.0329 15.3599 27 15.6702V18.3602C27.015 18.6624 26.9881 18.9653 26.92 19.2602C26.624 19.359 26.3103 19.3931 26 19.3602H22C21.6977 19.3755 21.3948 19.3486 21.1 19.2802C21.0012 18.9842 20.9671 18.6705 21 18.3602V15.6702C20.985 15.3679 21.0119 15.065 21.08 14.7702C21.376 14.6714 21.6897 14.6373 22 14.6702H26ZM26 13.6702H22C20.35 13.6702 20 14.0202 20 15.6702V18.3602C20 20.0102 20.35 20.3602 22 20.3602H26C27.65 20.3602 28 20.0102 28 18.3602V15.6702C28 14.0202 27.65 13.6702 26 13.6702Z" fill="#C18F35"/>
+<path d="M38.98 17.1702H35C34.1716 17.1702 33.5 17.8417 33.5 18.6702V21.3602C33.5 22.1886 34.1716 22.8602 35 22.8602H38.98C39.8084 22.8602 40.48 22.1886 40.48 21.3602V18.6702C40.48 17.8417 39.8084 17.1702 38.98 17.1702Z" fill="#F0ECB6"/>
+<path d="M39 17.6702C39.3023 17.6548 39.6052 17.6817 39.9 17.7502C39.9988 18.0461 40.0329 18.3599 40 18.6702V21.3602C40.015 21.6624 39.9881 21.9653 39.92 22.2602C39.624 22.359 39.3103 22.3931 39 22.3602H35C34.6977 22.3755 34.3948 22.3486 34.1 22.2802C34.0012 21.9842 33.9671 21.6705 34 21.3602V18.6702C33.985 18.3679 34.0119 18.065 34.08 17.7702C34.376 17.6714 34.6897 17.6373 35 17.6702H39ZM39 16.6702H35C33.35 16.6702 33 17.0202 33 18.6702V21.3602C33 23.0102 33.35 23.3602 35 23.3602H39C40.65 23.3602 41 23.0102 41 21.3602V18.6702C41 17.0202 40.65 16.6702 39 16.6702Z" fill="#C18F35"/>
+<path d="M51.98 20.1401H48C47.1716 20.1401 46.5 20.8117 46.5 21.6401V24.3301C46.5 25.1586 47.1716 25.8301 48 25.8301H51.98C52.8084 25.8301 53.48 25.1586 53.48 24.3301V21.6401C53.48 20.8117 52.8084 20.1401 51.98 20.1401Z" fill="#F0ECB6"/>
+<path d="M52 20.6401C52.3023 20.6248 52.6052 20.6517 52.9 20.7201C52.9991 21.016 53.0332 21.3298 53 21.6401V24.3301C53.015 24.6324 52.9881 24.9353 52.92 25.2301C52.624 25.3289 52.3103 25.363 52 25.3301H48C47.6977 25.3455 47.3948 25.3186 47.1 25.2501C47.0012 24.9542 46.9671 24.6404 47 24.3301V21.6401C46.985 21.3379 47.0119 21.035 47.08 20.7401C47.376 20.6413 47.6897 20.6072 48 20.6401H52ZM52 19.6401H48C46.35 19.6401 46 19.9901 46 21.6401V24.3301C46 25.9801 46.35 26.3301 48 26.3301H52C53.65 26.3301 54 25.9801 54 24.3301V21.6401C54 19.9901 53.65 19.6401 52 19.6401Z" fill="#C18F35"/>
+<path d="M25.98 26.25H22C21.1716 26.25 20.5 26.9216 20.5 27.75V30.44C20.5 31.2684 21.1716 31.94 22 31.94H25.98C26.8084 31.94 27.48 31.2684 27.48 30.44V27.75C27.48 26.9216 26.8084 26.25 25.98 26.25Z" fill="#F0ECB6"/>
+<path d="M26 26.75C26.3023 26.7346 26.6052 26.7616 26.9 26.83C26.9991 27.1259 27.0332 27.4397 27 27.75V30.44C27.015 30.7423 26.9881 31.0451 26.92 31.34C26.624 31.4388 26.3103 31.4729 26 31.44H22C21.6977 31.4554 21.3948 31.4284 21.1 31.36C21.0012 31.064 20.9671 30.7503 21 30.44V27.75C20.985 27.4477 21.0119 27.1449 21.08 26.85C21.376 26.7512 21.6897 26.7171 22 26.75H26ZM26 25.75H22C20.35 25.75 20 26.1 20 27.75V30.44C20 32.09 20.35 32.44 22 32.44H26C27.65 32.44 28 32.09 28 30.44V27.75C28 26.1 27.65 25.75 26 25.75Z" fill="#C18F35"/>
+<path d="M38.98 29.25H35C34.1716 29.25 33.5 29.9216 33.5 30.75V33.44C33.5 34.2684 34.1716 34.94 35 34.94H38.98C39.8084 34.94 40.48 34.2684 40.48 33.44V30.75C40.48 29.9216 39.8084 29.25 38.98 29.25Z" fill="#F0ECB6"/>
+<path d="M39 29.75C39.3023 29.7346 39.6052 29.7616 39.9 29.83C39.9991 30.1259 40.0332 30.4397 40 30.75V33.44C40.015 33.7423 39.9881 34.0451 39.92 34.34C39.624 34.4388 39.3103 34.4729 39 34.44H35C34.6977 34.4554 34.3948 34.4284 34.1 34.36C34.0012 34.064 33.9671 33.7503 34 33.44V30.75C33.985 30.4477 34.0119 30.1449 34.08 29.85C34.376 29.7512 34.6897 29.7171 35 29.75H39ZM39 28.75H35C33.35 28.75 33 29.1 33 30.75V33.44C33 35.09 33.35 35.44 35 35.44H39C40.65 35.44 41 35.09 41 33.44V30.75C41 29.1 40.65 28.75 39 28.75Z" fill="#C18F35"/>
+<path d="M51.98 32.22H48C47.1716 32.22 46.5 32.8915 46.5 33.72V36.41C46.5 37.2384 47.1716 37.91 48 37.91H51.98C52.8084 37.91 53.48 37.2384 53.48 36.41V33.72C53.48 32.8915 52.8084 32.22 51.98 32.22Z" fill="#F0ECB6"/>
+<path d="M52 32.72C52.3023 32.7046 52.6052 32.7315 52.9 32.8C52.9988 33.0959 53.0329 33.4097 53 33.72V36.41C53.015 36.7122 52.9881 37.0151 52.92 37.31C52.624 37.4088 52.3103 37.4429 52 37.41H48C47.6977 37.4253 47.3948 37.3984 47.1 37.33C47.0012 37.034 46.9671 36.7203 47 36.41V33.72C46.985 33.4177 47.0119 33.1148 47.08 32.82C47.376 32.7212 47.6897 32.6871 48 32.72H52ZM52 31.72H48C46.35 31.72 46 32.07 46 33.72V36.41C46 38.06 46.35 38.41 48 38.41H52C53.65 38.41 54 38.06 54 36.41V33.72C54 32.07 53.65 31.72 52 31.72Z" fill="#C18F35"/>
+<path d="M25.98 38.1702H22C21.1716 38.1702 20.5 38.8417 20.5 39.6702V42.3602C20.5 43.1886 21.1716 43.8602 22 43.8602H25.98C26.8084 43.8602 27.48 43.1886 27.48 42.3602V39.6702C27.48 38.8417 26.8084 38.1702 25.98 38.1702Z" fill="#F0ECB6"/>
+<path d="M26 38.6702C26.3023 38.6548 26.6052 38.6817 26.9 38.7502C26.9988 39.0461 27.0329 39.3599 27 39.6702V42.3602C27.015 42.6624 26.9881 42.9653 26.92 43.2602C26.624 43.359 26.3103 43.3931 26 43.3602H22C21.6977 43.3755 21.3948 43.3486 21.1 43.2802C21.0012 42.9842 20.9671 42.6705 21 42.3602V39.6702C20.985 39.3679 21.0119 39.065 21.08 38.7702C21.376 38.6714 21.6897 38.6373 22 38.6702H26ZM26 37.6702H22C20.35 37.6702 20 38.0202 20 39.6702V42.3602C20 44.0102 20.35 44.3602 22 44.3602H26C27.65 44.3602 28 44.0102 28 42.3602V39.6702C28 38.0202 27.65 37.6702 26 37.6702Z" fill="#C18F35"/>
+<path d="M38.98 41.1702H35C34.1716 41.1702 33.5 41.8417 33.5 42.6702V45.3602C33.5 46.1886 34.1716 46.8602 35 46.8602H38.98C39.8084 46.8602 40.48 46.1886 40.48 45.3602V42.6702C40.48 41.8417 39.8084 41.1702 38.98 41.1702Z" fill="#F0ECB6"/>
+<path d="M39 41.6702C39.3023 41.6548 39.6052 41.6817 39.9 41.7502C39.9988 42.0461 40.0329 42.3599 40 42.6702V45.3602C40.015 45.6624 39.9881 45.9653 39.92 46.2602C39.624 46.359 39.3103 46.3931 39 46.3602H35C34.6977 46.3755 34.3948 46.3486 34.1 46.2802C34.0012 45.9842 33.9671 45.6705 34 45.3602V42.6702C33.985 42.3679 34.0119 42.065 34.08 41.7702C34.376 41.6714 34.6897 41.6373 35 41.6702H39ZM39 40.6702H35C33.35 40.6702 33 41.0202 33 42.6702V45.3602C33 47.0102 33.35 47.3602 35 47.3602H39C40.65 47.3602 41 47.0102 41 45.3602V42.6702C41 41.0202 40.65 40.6702 39 40.6702Z" fill="#C18F35"/>
+<path d="M51.98 44.1401H48C47.1716 44.1401 46.5 44.8117 46.5 45.6401V48.3301C46.5 49.1586 47.1716 49.8301 48 49.8301H51.98C52.8084 49.8301 53.48 49.1586 53.48 48.3301V45.6401C53.48 44.8117 52.8084 44.1401 51.98 44.1401Z" fill="#F0ECB6"/>
+<path d="M52 44.6401C52.3023 44.6248 52.6052 44.6517 52.9 44.7201C52.9991 45.016 53.0332 45.3298 53 45.6401V48.3301C53.015 48.6324 52.9881 48.9353 52.92 49.2301C52.624 49.3289 52.3103 49.363 52 49.3301H48C47.6977 49.3455 47.3948 49.3186 47.1 49.2501C47.0012 48.9542 46.9671 48.6404 47 48.3301V45.6401C46.985 45.3379 47.0119 45.035 47.08 44.7401C47.376 44.6413 47.6897 44.6072 48 44.6401H52ZM52 43.6401H48C46.35 43.6401 46 43.9901 46 45.6401V48.3301C46 49.9801 46.35 50.3301 48 50.3301H52C53.65 50.3301 54 49.9801 54 48.3301V45.6401C54 43.9901 53.65 43.6401 52 43.6401Z" fill="#C18F35"/>
+<path d="M13.4898 49.4899L10.0098 44.8499H16.9698L13.4898 49.4899Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.11534 44.4026C9.28474 44.0639 9.631 43.8499 10.0098 43.8499H16.9698C17.3485 43.8499 17.6948 44.0639 17.8642 44.4026C18.0336 44.7414 17.997 45.1468 17.7698 45.4499L14.2898 50.0899C14.1009 50.3417 13.8045 50.4899 13.4898 50.4899C13.175 50.4899 12.8786 50.3417 12.6898 50.0899L9.20977 45.4499C8.98251 45.1468 8.94595 44.7414 9.11534 44.4026ZM12.0098 45.8499L13.4898 47.8232L14.9698 45.8499H12.0098Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4902 13.51C14.0425 13.51 14.4902 13.9577 14.4902 14.51V45.48C14.4902 46.0323 14.0425 46.48 13.4902 46.48C12.9379 46.48 12.4902 46.0323 12.4902 45.48V14.51C12.4902 13.9577 12.9379 13.51 13.4902 13.51Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_window_aggregate.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_window_aggregate.svg
new file mode 100644
index 0000000..c71a7e7
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_window_aggregate.svg
@@ -0,0 +1,42 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.9499 27.3098H40.6699V36.3098H48.9499V27.3098Z" fill="#F0ECB6"/>
+<path d="M48.4499 27.8098V35.8098H41.1699V27.8098H48.4499ZM49.4499 26.8098H40.1699V36.8098H49.4499V26.8098Z" fill="#C18F35"/>
+<path d="M57.2507 27.3098H48.9707V36.3098H57.2507V27.3098Z" fill="#F0ECB6"/>
+<path d="M56.7507 27.8098V35.8098H49.4707V27.8098H56.7507ZM57.7507 26.8098H48.4707V36.8098H57.7507V26.8098Z" fill="#C18F35"/>
+<path d="M42.1699 45.29C40.7999 45.29 40.6699 45.16 40.6699 43.79V36.29H48.9499V45.29H42.1699Z" fill="#C8FFAC"/>
+<path d="M48.4499 36.79V44.79H42.1699C41.8677 44.8054 41.5647 44.7785 41.2699 44.71C41.1708 44.4141 41.1367 44.1003 41.1699 43.79V36.79H48.4499ZM49.4499 35.79H40.1699V43.79C40.1699 45.44 40.5199 45.79 42.1699 45.79H49.4499V35.79Z" fill="#48D601"/>
+<path d="M49 45.29V36.29H57.28V43.79C57.28 45.16 57.15 45.29 55.78 45.29H49Z" fill="#C8FFAC"/>
+<path d="M56.7507 36.79V43.79C56.7657 44.0923 56.7388 44.3952 56.6707 44.69C56.3747 44.7888 56.061 44.8229 55.7507 44.79H49.4707V36.79H56.7507ZM57.7507 35.79H48.4707V45.79H55.7507C57.4007 45.79 57.7507 45.44 57.7507 43.79V35.79Z" fill="#48D601"/>
+<path d="M40.6699 27.3298V19.8298C40.6699 18.4598 40.7999 18.3298 42.1699 18.3298H48.9499V27.3298H40.6699Z" fill="#D3D4F3"/>
+<path d="M48.4499 18.8298V26.8298H41.1699V19.8298C41.1549 19.5276 41.1819 19.2247 41.2499 18.9298C41.5459 18.831 41.8596 18.7969 42.1699 18.8298H48.4499ZM49.4499 17.8298H42.1699C40.5199 17.8298 40.1699 18.1798 40.1699 19.8298V27.8298H49.4499V17.8298Z" fill="#666BD1"/>
+<path d="M49 27.3298V18.3298H55.78C57.15 18.3298 57.28 18.4598 57.28 19.8298V27.3298H49Z" fill="#D3D4F3"/>
+<path d="M55.7507 18.8298C56.053 18.8145 56.3559 18.8414 56.6507 18.9098C56.7498 19.2057 56.7839 19.5195 56.7507 19.8298V26.8298H49.4707V18.8298H55.7507ZM55.7507 17.8298H48.4707V27.8298H57.7507V19.8298C57.7507 18.1798 57.4007 17.8298 55.7507 17.8298Z" fill="#666BD1"/>
+<path d="M11.2793 25.49V14C11.2793 12.63 11.4093 12.5 12.7793 12.5H18.5593V25.5L11.2793 25.49Z" fill="#D3D4F3"/>
+<path d="M18.0593 13V25H11.7793V14C11.7643 13.6977 11.7912 13.3949 11.8593 13.1C12.1553 13.0012 12.469 12.9671 12.7793 13H18.0593ZM19.0593 12H12.7793C11.1293 12 10.7793 12.35 10.7793 14V26H19.0593V12Z" fill="#666BD1"/>
+<path d="M18.5703 25.49V12.49H24.3503C25.7203 12.49 25.8503 12.62 25.8503 13.99V25.49H18.5703Z" fill="#D3D4F3"/>
+<path d="M24.3503 13C24.6526 12.9846 24.9555 13.0116 25.2503 13.08C25.3491 13.376 25.3832 13.6897 25.3503 14V25H19.0703V13H24.3503ZM24.3503 12H18.0703V26H26.3503V14C26.3503 12.35 26.0003 12 24.3503 12Z" fill="#666BD1"/>
+<path opacity="0.8" d="M11.3105 18.8298H18.0505" stroke="#666BD1" stroke-linejoin="round"/>
+<path opacity="0.8" d="M18.3301 18.8298H25.8201" stroke="#666BD1" stroke-linejoin="round"/>
+<path d="M12.7793 51.51C11.4093 51.51 11.2793 51.38 11.2793 50.01V38.51H18.5593V51.51H12.7793Z" fill="#C8FFAC"/>
+<path d="M18.0593 39V51H12.7793C12.477 51.0154 12.1741 50.9884 11.8793 50.92C11.7805 50.624 11.7464 50.3103 11.7793 50V39H18.0593ZM19.0593 38H10.7793V50C10.7793 51.65 11.1293 52 12.7793 52H19.0593V38Z" fill="#48D601"/>
+<path d="M18.5703 51.51V38.51H25.8503V50C25.8503 51.37 25.7203 51.5 24.3503 51.5L18.5703 51.51Z" fill="#C8FFAC"/>
+<path d="M25.3503 39V50C25.3653 50.3023 25.3384 50.6051 25.2703 50.9C24.9743 50.9988 24.6606 51.0329 24.3503 51H19.0703V39H25.3503ZM26.3503 38H18.0703V52H24.3503C26.0003 52 26.3503 51.65 26.3503 50V38Z" fill="#48D601"/>
+<path opacity="0.7" d="M18.3301 44.8599H25.8201" stroke="#48D601" stroke-miterlimit="10"/>
+<path opacity="0.7" d="M11.3105 44.8599H18.0505" stroke="#48D601" stroke-miterlimit="10"/>
+<path d="M25.8503 25.49H18.5703V38.49H25.8503V25.49Z" fill="#F0ECB6"/>
+<path d="M25.3503 26V38H19.0703V26H25.3503ZM26.3503 25H18.0703V39H26.3503V25Z" fill="#C18F35"/>
+<path opacity="0.8" d="M18.3301 31.8398H25.8201" stroke="#C18F35" stroke-linejoin="round"/>
+<path d="M18.5593 25.49H11.2793V38.49H18.5593V25.49Z" fill="#F0ECB6"/>
+<path d="M18.0593 26V38H11.7793V26H18.0593ZM19.0593 25H10.7793V39H19.0593V25Z" fill="#C18F35"/>
+<path opacity="0.8" d="M11.3105 31.8398H18.0505" stroke="#C18F35" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 19.3398C7.42157 19.3398 6.75 20.0114 6.75 20.8398V42.8298C6.75 43.6583 7.42157 44.3298 8.25 44.3298H29.25C30.0784 44.3298 30.75 43.6583 30.75 42.8298V20.8398C30.75 20.0114 30.0784 19.3398 29.25 19.3398H8.25ZM5.75 20.8398C5.75 19.4591 6.86929 18.3398 8.25 18.3398H29.25C30.6307 18.3398 31.75 19.4591 31.75 20.8398V42.8298C31.75 44.2106 30.6307 45.3298 29.25 45.3298H8.25C6.86929 45.3298 5.75 44.2106 5.75 42.8298V20.8398Z" fill="#34495E"/>
+<path d="M39.3197 22.95L36.6797 24.93V20.98L39.3197 22.95Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4555 20.533C36.6246 20.4482 36.8271 20.4661 36.9787 20.5793L39.6187 22.5493C39.745 22.6435 39.8195 22.7918 39.8197 22.9494C39.8199 23.107 39.7458 23.2554 39.6197 23.35L36.9797 25.33C36.8282 25.4436 36.6255 25.4619 36.4561 25.3772C36.2867 25.2925 36.1797 25.1194 36.1797 24.93V20.98C36.1797 20.7908 36.2864 20.6178 36.4555 20.533ZM37.1797 21.977V23.93L38.485 22.951L37.1797 21.977Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.64 23.0467C37.6419 23.3228 37.4195 23.5482 37.1434 23.55L31.2534 23.59C30.9773 23.5919 30.7519 23.3696 30.75 23.0934C30.7481 22.8173 30.9705 22.5919 31.2466 22.5901L37.1366 22.5501C37.4127 22.5482 37.6381 22.7705 37.64 23.0467Z" fill="#34495E"/>
+<path d="M39.3197 31.8399L36.6797 33.8199V29.8599L39.3197 31.8399Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4561 29.4127C36.6255 29.328 36.8282 29.3462 36.9797 29.4599L39.6197 31.4399C39.7456 31.5343 39.8197 31.6825 39.8197 31.8399C39.8197 31.9972 39.7456 32.1454 39.6197 32.2399L36.9797 34.2199C36.8282 34.3335 36.6255 34.3518 36.4561 34.2671C36.2867 34.1824 36.1797 34.0092 36.1797 33.8199V29.8599C36.1797 29.6705 36.2867 29.4973 36.4561 29.4127ZM37.1797 30.8599V32.8199L38.4863 31.8399L37.1797 30.8599Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.64 31.9368C37.6419 32.2129 37.4195 32.4383 37.1434 32.4402L31.2534 32.4802C30.9773 32.482 30.7519 32.2597 30.75 31.9836C30.7481 31.7074 30.9705 31.4821 31.2466 31.4802L37.1366 31.4402C37.4127 31.4383 37.6381 31.6607 37.64 31.9368Z" fill="#34495E"/>
+<path d="M39.3197 40.6001L36.6797 42.5801V38.6301L39.3197 40.6001Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4555 38.1832C36.6246 38.0984 36.8271 38.1163 36.9787 38.2294L39.6187 40.1994C39.745 40.2936 39.8195 40.4419 39.8197 40.5995C39.8199 40.7571 39.7458 40.9056 39.6197 41.0001L36.9797 42.9801C36.8282 43.0938 36.6255 43.112 36.4561 43.0273C36.2867 42.9427 36.1797 42.7695 36.1797 42.5801V38.6301C36.1797 38.441 36.2864 38.268 36.4555 38.1832ZM37.1797 39.6271V41.5801L38.485 40.6011L37.1797 39.6271Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.64 40.6957C37.6423 40.9718 37.4204 41.1976 37.1442 41.1999L31.2542 41.2499C30.9781 41.2523 30.7524 41.0303 30.75 40.7542C30.7477 40.4781 30.9696 40.2523 31.2458 40.25L37.1358 40.2C37.4119 40.1976 37.6376 40.4196 37.64 40.6957Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/query_explain_icons/ex_worktable_scan.svg b/static/img/style_guide/iconography_assets/query_explain_icons/ex_worktable_scan.svg
new file mode 100644
index 0000000..821669c
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/query_explain_icons/ex_worktable_scan.svg
@@ -0,0 +1,28 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.72 50.7801L6.25 46.1401H13.2L9.72 50.7801Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.80294 45.9162C5.8877 45.747 6.06074 45.6401 6.25 45.6401H13.2C13.3894 45.6401 13.5625 45.7471 13.6472 45.9165C13.7319 46.0859 13.7136 46.2886 13.6 46.4401L10.12 51.0801C10.0255 51.2061 9.87716 51.2802 9.71966 51.2801C9.56216 51.28 9.41392 51.2057 9.31959 51.0796L5.84959 46.4396C5.73624 46.288 5.71819 46.0854 5.80294 45.9162ZM7.24828 46.6401L9.72058 49.946L12.2 46.6401H7.24828Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.7207 14.8C10.273 14.8 10.7207 15.2478 10.7207 15.8V46.7701C10.7207 47.3223 10.273 47.7701 9.7207 47.7701C9.16842 47.7701 8.7207 47.3223 8.7207 46.7701V15.8C8.7207 15.2478 9.16842 14.8 9.7207 14.8Z" fill="#2980B9"/>
+<path d="M17.7598 57.47C16.3898 57.47 16.2598 57.34 16.2598 55.97V15.53H57.2598V56C57.2598 57.37 57.1298 57.5 55.7598 57.5L17.7598 57.47Z" fill="#F3C7D7"/>
+<path d="M56.75 16V56C56.765 56.3023 56.7381 56.6051 56.67 56.9C56.374 56.9988 56.0603 57.0329 55.75 57H17.75C17.4477 57.0154 17.1448 56.9884 16.85 56.92C16.7509 56.6241 16.7168 56.3103 16.75 56V16H56.75ZM57.75 15H15.75V56C15.75 57.65 16.1 58 17.75 58H55.75C57.4 58 57.75 57.65 57.75 56V15Z" fill="#D04465"/>
+<g opacity="0.5">
+<path opacity="0.5" d="M24.459 56.97V15.97" stroke="#D04465" stroke-linejoin="round"/>
+<path opacity="0.5" d="M40.8594 56.97V15.97" stroke="#D04465" stroke-linejoin="round"/>
+<path opacity="0.5" d="M32.6602 56.97V15.97" stroke="#D04465" stroke-linejoin="round"/>
+<path opacity="0.5" d="M49.0605 56.97V15.97" stroke="#D04465" stroke-linejoin="round"/>
+<path opacity="0.5" d="M16.7598 23.97H56.7298" stroke="#D04465" stroke-linejoin="round"/>
+<path opacity="0.8" d="M16.7598 32.3398H56.7298" stroke="#D04465" stroke-linejoin="round"/>
+<path opacity="0.5" d="M16.7598 40.71H56.7298" stroke="#D04465" stroke-linejoin="round"/>
+<path opacity="0.5" d="M16.7598 49.0798H56.7298" stroke="#D04465" stroke-linejoin="round"/>
+</g>
+<path d="M49.0605 15.53V6.53003H55.7505C57.1205 6.53003 57.2505 6.66003 57.2505 8.03003V15.53H49.0605Z" fill="#ADDFF3"/>
+<path d="M55.7605 7C56.0628 6.98463 56.3657 7.01156 56.6605 7.08C56.7593 7.37598 56.7934 7.68971 56.7605 8V15H49.5605V7H55.7505H55.7605ZM55.7505 6H48.5605V16H57.7505V8C57.7505 6.35 57.4005 6 55.7505 6Z" fill="#2980B9"/>
+<path d="M16.2598 15.53V8C16.2598 6.63 16.3898 6.5 17.7598 6.5H24.4498V15.5L16.2598 15.53Z" fill="#ADDFF3"/>
+<path d="M23.9998 7V15H16.7598V8C16.7449 7.69775 16.7718 7.39489 16.8398 7.1C17.1357 7.00121 17.4495 6.96711 17.7598 7H23.9998ZM24.9998 6H17.7598C16.1098 6 15.7598 6.35 15.7598 8V16H24.9998V6Z" fill="#2980B9"/>
+<path d="M49.0494 6.53003H40.8594V15.53H49.0494V6.53003Z" fill="#ADDFF3"/>
+<path d="M48.5394 7V15H41.3594V7H48.5394ZM49.5394 6H40.3594V16H49.5494V6H49.5394Z" fill="#2980B9"/>
+<path d="M40.8599 6.53003H32.6699V15.53H40.8599V6.53003Z" fill="#ADDFF3"/>
+<path d="M40.3599 7V15H33.1699V7H40.3499H40.3599ZM41.3499 6H32.1699V16H41.3599V6H41.3499Z" fill="#2980B9"/>
+<path d="M32.6505 6.53003H24.4805V15.53H32.6505V6.53003Z" fill="#ADDFF3"/>
+<path d="M32.15 7V15H25V7H32.17H32.15ZM33.17 6H24V16H33.18V6H33.17Z" fill="#2980B9"/>
+<path d="M24.7168 26.2122H22.4316V32.55H21.499V26.2122H19.2188V25.4407H24.7168V26.2122Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/cast.svg b/static/img/style_guide/iconography_assets/tree_view_icons/cast.svg
new file mode 100644
index 0000000..8986d6b
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/cast.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5144 3.58459H14.4294C13.9075 3.58459 13.4844 4.00769 13.4844 4.52959V9.61459C13.4844 10.1365 13.9075 10.5596 14.4294 10.5596H19.5144C20.0363 10.5596 20.4594 10.1365 20.4594 9.61459V4.52959C20.4594 4.00769 20.0363 3.58459 19.5144 3.58459Z" fill="#E6E6FF"/>
+<path d="M19.4997 4.155C19.5991 4.155 19.6945 4.19451 19.7649 4.26484C19.8352 4.33516 19.8747 4.43054 19.8747 4.53V9.63C19.8747 9.72946 19.8352 9.82484 19.7649 9.89516C19.6945 9.96549 19.5991 10.005 19.4997 10.005H14.4297C14.3302 10.005 14.2348 9.96549 14.1645 9.89516C14.0942 9.82484 14.0547 9.72946 14.0547 9.63V4.5C14.0547 4.40054 14.0942 4.30516 14.1645 4.23484C14.2348 4.16451 14.3302 4.125 14.4297 4.125H19.4997V4.155ZM19.4997 3H14.4297C14.0319 3 13.6503 3.15804 13.369 3.43934C13.0877 3.72064 12.9297 4.10218 12.9297 4.5V9.6C12.9297 9.99782 13.0877 10.3794 13.369 10.6607C13.6503 10.942 14.0319 11.1 14.4297 11.1H19.4997C19.8975 11.1 20.279 10.942 20.5603 10.6607C20.8417 10.3794 20.9997 9.99782 20.9997 9.6V4.5C20.9997 4.10218 20.8417 3.72064 20.5603 3.43934C20.279 3.15804 19.8975 3 19.4997 3Z" fill="#594FBA"/>
+<path d="M9.57102 13.4398H4.48602C3.96411 13.4398 3.54102 13.8629 3.54102 14.3848V19.4698C3.54102 19.9917 3.96411 20.4148 4.48602 20.4148H9.57102C10.0929 20.4148 10.516 19.9917 10.516 19.4698V14.3848C10.516 13.8629 10.0929 13.4398 9.57102 13.4398Z" fill="#E6E6FF"/>
+<path d="M9.57 13.995C9.66946 13.995 9.76484 14.0345 9.83517 14.1048C9.90549 14.1752 9.945 14.2705 9.945 14.37V19.5C9.945 19.5995 9.90549 19.6948 9.83517 19.7652C9.76484 19.8355 9.66946 19.875 9.57 19.875H4.5C4.44829 19.8791 4.39628 19.8725 4.34727 19.8555C4.29825 19.8386 4.25328 19.8116 4.21522 19.7764C4.17716 19.7411 4.14682 19.6984 4.12613 19.6508C4.10543 19.6032 4.09483 19.5519 4.095 19.5V14.37C4.09483 14.3181 4.10543 14.2668 4.12613 14.2192C4.14682 14.1716 4.17716 14.1289 4.21522 14.0936C4.25328 14.0584 4.29825 14.0314 4.34727 14.0144C4.39628 13.9975 4.44829 13.9908 4.5 13.995H9.6H9.57ZM9.6 12.87H4.5C4.10218 12.87 3.72064 13.028 3.43934 13.3093C3.15804 13.5906 3 13.9722 3 14.37V19.5C3 19.8978 3.15804 20.2793 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H9.6C9.99782 21 10.3794 20.842 10.6607 20.5607C10.942 20.2793 11.1 19.8978 11.1 19.5V14.37C11.1 13.9722 10.942 13.5906 10.6607 13.3093C10.3794 13.028 9.99782 12.87 9.6 12.87Z" fill="#594FBA"/>
+<path d="M7.00516 11.745L5.53516 10.23L8.52016 10.275L7.00516 11.745Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.01879 10.0069C5.10902 9.79806 5.31617 9.66412 5.54365 9.66754L8.52865 9.71254C8.75613 9.71597 8.95915 9.8561 9.04304 10.0676C9.12692 10.2791 9.07516 10.5202 8.91188 10.6787L7.39688 12.1487C7.17392 12.365 6.81781 12.3596 6.60147 12.1367L5.13147 10.6217C4.97304 10.4584 4.92857 10.2158 5.01879 10.0069ZM6.88453 10.8129L7.01716 10.9496L7.15385 10.8169L6.88453 10.8129Z" fill="#594FBA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.26927 7.70042C7.61888 8.26827 7.25201 9.33133 7.69459 10.8361C7.78225 11.1341 7.6117 11.4468 7.31366 11.5345C7.01563 11.6221 6.70296 11.4516 6.6153 11.1535C6.08288 9.3433 6.46602 7.78137 7.52937 6.85297C8.58444 5.9318 10.1632 5.7639 11.7513 6.42559C12.0381 6.54507 12.1737 6.8744 12.0542 7.16116C11.9347 7.44793 11.6054 7.58353 11.3186 7.46405C10.0266 6.92573 8.92795 7.12534 8.26927 7.70042Z" fill="#594FBA"/>
+<path d="M16.8757 12.3451L18.3457 13.8751L15.3457 13.8151L16.8757 12.3451Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.887 11.7827C17.0361 11.7857 17.178 11.8478 17.2813 11.9554L18.7513 13.4854C18.909 13.6494 18.9522 13.8923 18.861 14.1007C18.7697 14.3091 18.5619 14.442 18.3345 14.4375L15.3345 14.3775C15.107 14.3729 14.9047 14.2318 14.8218 14.0199C14.739 13.808 14.7919 13.5671 14.956 13.4095L16.486 11.9395C16.5936 11.8361 16.7378 11.7797 16.887 11.7827ZM16.7147 13.2799L16.9992 13.2856L16.8598 13.1404L16.7147 13.2799Z" fill="#594FBA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5515 12.5704C16.8495 12.4827 17.1622 12.6533 17.2499 12.9513C17.7823 14.7615 17.3992 16.3235 16.3358 17.2519C15.2807 18.173 13.7019 18.3409 12.1139 17.6792C11.8271 17.5598 11.6915 17.2304 11.811 16.9437C11.9305 16.6569 12.2598 16.5213 12.5466 16.6408C13.8385 17.1791 14.9372 16.9795 15.5959 16.4044C16.2463 15.8366 16.6132 14.7735 16.1706 13.2687C16.0829 12.9707 16.2535 12.658 16.5515 12.5704Z" fill="#594FBA"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/catalog.svg b/static/img/style_guide/iconography_assets/tree_view_icons/catalog.svg
new file mode 100644
index 0000000..02623bb
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/catalog.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9936 3.63139L3.625 12L11.9936 20.3686L20.3622 12L11.9936 3.63139Z" fill="#EDE3FF"/>
+<path d="M11.999 4.49959L19.499 11.9996L11.999 19.4996L4.49898 11.9996L11.999 4.49959ZM11.999 2.83459L2.83398 11.9996L11.999 21.1646L21.164 11.9996L11.999 2.83459Z" fill="#7749BD"/>
+<path d="M11.994 8.70135L8.69531 12L11.994 15.2987L15.2926 12L11.994 8.70135Z" fill="#7749BD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/catalog_object.svg b/static/img/style_guide/iconography_assets/tree_view_icons/catalog_object.svg
new file mode 100644
index 0000000..8a0c986
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/catalog_object.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.75 4.5H5.25C4.42157 4.5 3.75 5.17157 3.75 6V18C3.75 18.8284 4.42157 19.5 5.25 19.5H18.75C19.5784 19.5 20.25 18.8284 20.25 18V6C20.25 5.17157 19.5784 4.5 18.75 4.5Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4375 19.5V9H12.5625V19.5H11.4375Z" fill="#C1CBD5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 14.8125H4.5V13.6875H19.5V14.8125Z" fill="#C1CBD5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4375 9.75V4.5H12.5625V9.75H11.4375Z" fill="#2195E7"/>
+<path d="M18.75 5.625C18.8495 5.625 18.9448 5.66451 19.0152 5.73484C19.0855 5.80516 19.125 5.90054 19.125 6V18C19.125 18.0995 19.0855 18.1948 19.0152 18.2652C18.9448 18.3355 18.8495 18.375 18.75 18.375H5.25C5.15054 18.375 5.05516 18.3355 4.98484 18.2652C4.91451 18.1948 4.875 18.0995 4.875 18V6C4.875 5.90054 4.91451 5.80516 4.98484 5.73484C5.05516 5.66451 5.15054 5.625 5.25 5.625H18.75ZM18.75 4.5H5.25C4.85218 4.5 4.47064 4.65804 4.18934 4.93934C3.90804 5.22064 3.75 5.60218 3.75 6V18C3.75 18.3978 3.90804 18.7794 4.18934 19.0607C4.47064 19.342 4.85218 19.5 5.25 19.5H18.75C19.1478 19.5 19.5294 19.342 19.8107 19.0607C20.092 18.7794 20.25 18.3978 20.25 18V6C20.25 5.60218 20.092 5.22064 19.8107 4.93934C19.5294 4.65804 19.1478 4.5 18.75 4.5Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 9.1875H19.5V10.3125H4.5V9.1875Z" fill="#2195E7"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/catalog_object_column.svg b/static/img/style_guide/iconography_assets/tree_view_icons/catalog_object_column.svg
new file mode 100644
index 0000000..33a478b
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/catalog_object_column.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5492 3.22522H9.44922C8.62079 3.22522 7.94922 3.89679 7.94922 4.72522V19.2752C7.94922 20.1036 8.62079 20.7752 9.44922 20.7752H14.5492C15.3776 20.7752 16.0492 20.1036 16.0492 19.2752V4.72522C16.0492 3.89679 15.3776 3.22522 14.5492 3.22522Z" fill="#E1FFF9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.375 12.5625H8.625V11.4375H15.375V12.5625Z" fill="#AECEC8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.375 16.6123H8.625V15.4873H15.375V16.6123Z" fill="#AECEC8"/>
+<path d="M8.99922 8.74499H14.8492V19.5C14.8492 19.5597 14.8255 19.6169 14.7833 19.6591C14.7411 19.7013 14.6839 19.725 14.6242 19.725H9.29922C9.26423 19.7374 9.22672 19.741 9.19001 19.7354C9.1533 19.7298 9.11855 19.7153 9.08884 19.693C9.05914 19.6707 9.03541 19.6414 9.01977 19.6078C9.00413 19.5741 8.99707 19.5371 8.99922 19.5V8.74499ZM7.94922 7.62V19.5C7.94922 19.858 8.09145 20.2014 8.34462 20.4546C8.5978 20.7078 8.94118 20.85 9.29922 20.85H14.6992C15.0573 20.85 15.4006 20.7078 15.6538 20.4546C15.907 20.2014 16.0492 19.858 16.0492 19.5V7.65H7.94922V7.62Z" fill="#16A085"/>
+<path d="M14.6992 4.3499C14.7286 4.33824 14.7602 4.33291 14.7918 4.33428C14.8235 4.33564 14.8544 4.34366 14.8828 4.35782C14.9111 4.37198 14.9361 4.39195 14.9561 4.41643C14.9762 4.44092 14.9909 4.46936 14.9992 4.4999V7.4999H8.99922V4.4999C9.00754 4.46936 9.02222 4.44092 9.04229 4.41643C9.06235 4.39195 9.08736 4.37198 9.11568 4.35782C9.14399 4.34366 9.17498 4.33564 9.2066 4.33428C9.23823 4.33291 9.26979 4.33824 9.29922 4.3499H14.6992ZM14.6992 3.2249H9.29922C8.94118 3.2249 8.5978 3.36713 8.34462 3.62031C8.09145 3.87348 7.94922 4.21686 7.94922 4.5749V8.6249H16.0492V4.4999C16.0492 4.32262 16.0143 4.14707 15.9465 3.98328C15.8786 3.81949 15.7792 3.67067 15.6538 3.54531C15.5285 3.41995 15.3796 3.32051 15.2158 3.25267C15.0521 3.18482 14.8765 3.1499 14.6992 3.1499V3.2249Z" fill="#16A085"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/check-constraint-bad.svg b/static/img/style_guide/iconography_assets/tree_view_icons/check-constraint-bad.svg
new file mode 100644
index 0000000..87d1dfe
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/check-constraint-bad.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.512 5.16549C19.1801 5.6554 19.3245 6.5941 18.8346 7.26215L10.5846 18.5121C10.3258 18.8651 9.92575 19.0874 9.48938 19.1207C9.053 19.1541 8.62381 18.9952 8.31434 18.6858L4.56434 14.9358C3.97855 14.35 3.97855 13.4002 4.56434 12.8144C5.15013 12.2287 6.09987 12.2287 6.68566 12.8144L9.19934 15.3281L16.4154 5.48806C16.9053 4.82001 17.844 4.67559 18.512 5.16549Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1705 9.3295C19.6098 9.76884 19.6098 10.4812 19.1705 10.9205L14.6705 15.4205C14.2312 15.8598 13.5188 15.8598 13.0795 15.4205C12.6402 14.9812 12.6402 14.2688 13.0795 13.8295L17.5795 9.3295C18.0188 8.89017 18.7312 8.89017 19.1705 9.3295Z" fill="#D0021B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0795 9.3295C13.5188 8.89017 14.2312 8.89017 14.6705 9.3295L19.1705 13.8295C19.6098 14.2688 19.6098 14.9812 19.1705 15.4205C18.7312 15.8598 18.0188 15.8598 17.5795 15.4205L13.0795 10.9205C12.6402 10.4812 12.6402 9.76884 13.0795 9.3295Z" fill="#D0021B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/check-constraint.svg b/static/img/style_guide/iconography_assets/tree_view_icons/check-constraint.svg
new file mode 100644
index 0000000..ddf6b8a
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/check-constraint.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.887 5.16549C19.5551 5.6554 19.6995 6.5941 19.2096 7.26215L10.9596 18.5121C10.7008 18.8651 10.3008 19.0874 9.86438 19.1207C9.428 19.1541 8.99881 18.9952 8.68934 18.6858L4.93934 14.9358C4.35355 14.35 4.35355 13.4002 4.93934 12.8144C5.52513 12.2287 6.47487 12.2287 7.06066 12.8144L9.57434 15.3281L16.7904 5.48806C17.2803 4.82001 18.219 4.67559 18.887 5.16549Z" fill="#719317"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-cast.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-cast.svg
new file mode 100644
index 0000000..2fd856e
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-cast.svg
@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.0606 3.375H4.51562C3.8943 3.375 3.39062 3.87868 3.39062 4.5V18.045C3.39062 18.6663 3.8943 19.17 4.51562 19.17H18.0606C18.6819 19.17 19.1856 18.6663 19.1856 18.045V4.5C19.1856 3.87868 18.6819 3.375 18.0606 3.375Z" fill="#E6E6FF"/>
+<path d="M18 3.75C18.1989 3.75 18.3897 3.82902 18.5303 3.96967C18.671 4.11032 18.75 4.30109 18.75 4.5V18C18.75 18.1989 18.671 18.3897 18.5303 18.5303C18.3897 18.671 18.1989 18.75 18 18.75H4.5C4.30109 18.75 4.11032 18.671 3.96967 18.5303C3.82902 18.3897 3.75 18.1989 3.75 18V4.5C3.75 4.30109 3.82902 4.11032 3.96967 3.96967C4.11032 3.82902 4.30109 3.75 4.5 3.75H18ZM18 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V18C3 18.3978 3.15804 18.7794 3.43934 19.0607C3.72064 19.342 4.10218 19.5 4.5 19.5H18C18.3978 19.5 18.7794 19.342 19.0607 19.0607C19.342 18.7794 19.5 18.3978 19.5 18V4.5C19.5 4.10218 19.342 3.72064 19.0607 3.43934C18.7794 3.15804 18.3978 3 18 3Z" fill="#594FBA"/>
+<path d="M19.4845 4.81482H5.93945C5.31813 4.81482 4.81445 5.3185 4.81445 5.93982V19.4848C4.81445 20.1061 5.31813 20.6098 5.93945 20.6098H19.4845C20.1058 20.6098 20.6095 20.1061 20.6095 19.4848V5.93982C20.6095 5.3185 20.1058 4.81482 19.4845 4.81482Z" fill="#E6E6FF"/>
+<path d="M19.5 5.19C19.6989 5.19 19.8897 5.26902 20.0303 5.40967C20.171 5.55032 20.25 5.74109 20.25 5.94V19.44C20.25 19.6389 20.171 19.8297 20.0303 19.9703C19.8897 20.111 19.6989 20.19 19.5 20.19H6C5.80109 20.19 5.61032 20.111 5.46967 19.9703C5.32902 19.8297 5.25 19.6389 5.25 19.44V6C5.25 5.80109 5.32902 5.61032 5.46967 5.46967C5.61032 5.32902 5.80109 5.25 6 5.25H19.5V5.19ZM19.5 4.5H6C5.60218 4.5 5.22064 4.65804 4.93934 4.93934C4.65804 5.22064 4.5 5.60218 4.5 6V19.5C4.5 19.8978 4.65804 20.2794 4.93934 20.5607C5.22064 20.842 5.60218 21 6 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V6C21 5.60218 20.842 5.22064 20.5607 4.93934C20.2794 4.65804 19.8978 4.5 19.5 4.5Z" fill="#594FBA"/>
+<path d="M17.5199 7.005H14.8649C14.343 7.005 13.9199 7.4281 13.9199 7.95001V10.605C13.9199 11.1269 14.343 11.55 14.8649 11.55H17.5199C18.0418 11.55 18.4649 11.1269 18.4649 10.605V7.95001C18.4649 7.4281 18.0418 7.005 17.5199 7.005Z" fill="#E6E6FF"/>
+<path d="M17.5352 7.5C17.6347 7.5 17.7301 7.53951 17.8004 7.60983C17.8707 7.68016 17.9102 7.77554 17.9102 7.875V10.605C17.9102 10.7045 17.8707 10.7998 17.8004 10.8702C17.7301 10.9405 17.6347 10.98 17.5352 10.98H14.8652C14.7658 10.98 14.6704 10.9405 14.6001 10.8702C14.5297 10.7998 14.4902 10.7045 14.4902 10.605V7.935C14.4815 7.88097 14.4846 7.82569 14.4995 7.77302C14.5144 7.72035 14.5406 7.67157 14.5764 7.63012C14.6121 7.58866 14.6565 7.55553 14.7064 7.53305C14.7563 7.51058 14.8105 7.49929 14.8652 7.5H17.5352ZM17.5352 6.375H14.8652C14.4674 6.375 14.0859 6.53304 13.8046 6.81434C13.5233 7.09564 13.3652 7.47718 13.3652 7.875V10.605C13.3652 11.0028 13.5233 11.3844 13.8046 11.6657C14.0859 11.947 14.4674 12.105 14.8652 12.105H17.5352C17.9331 12.105 18.3146 11.947 18.5959 11.6657C18.8772 11.3844 19.0352 11.0028 19.0352 10.605V7.935C19.0352 7.53718 18.8772 7.15564 18.5959 6.87434C18.3146 6.59304 17.9331 6.435 17.5352 6.435V6.375Z" fill="#594FBA"/>
+<path d="M10.559 13.8899H7.90398C7.38208 13.8899 6.95898 14.313 6.95898 14.8349V17.4899C6.95898 18.0118 7.38208 18.4349 7.90398 18.4349H10.559C11.0809 18.4349 11.504 18.0118 11.504 17.4899V14.8349C11.504 14.313 11.0809 13.8899 10.559 13.8899Z" fill="#E6E6FF"/>
+<path d="M10.5006 14.4596C10.6001 14.4596 10.6955 14.4991 10.7658 14.5694C10.8361 14.6398 10.8756 14.7351 10.8756 14.8346V17.5046C10.8756 17.6041 10.8361 17.6994 10.7658 17.7698C10.6955 17.8401 10.6001 17.8796 10.5006 17.8796H7.89063C7.84013 17.8816 7.78975 17.8734 7.74251 17.8555C7.69527 17.8375 7.65214 17.8102 7.61571 17.7752C7.57928 17.7402 7.55031 17.6982 7.53053 17.6517C7.51076 17.6052 7.50058 17.5551 7.50062 17.5046V14.8346C7.50062 14.7351 7.54013 14.6398 7.61046 14.5694C7.68079 14.4991 7.77617 14.4596 7.87563 14.4596H10.5006ZM10.5006 13.3346H7.89063C7.4928 13.3346 7.11127 13.4926 6.82996 13.7739C6.54866 14.0552 6.39062 14.4368 6.39062 14.8346V17.5046C6.39062 17.9024 6.54866 18.284 6.82996 18.5653C7.11127 18.8466 7.4928 19.0046 7.89063 19.0046H10.5006C10.8985 19.0046 11.28 18.8466 11.5613 18.5653C11.8426 18.284 12.0006 17.9024 12.0006 17.5046V14.8346C12.0006 14.4368 11.8426 14.0552 11.5613 13.7739C11.28 13.4926 10.8985 13.3346 10.5006 13.3346Z" fill="#594FBA"/>
+<path d="M9.20945 12.5401L8.18945 11.4901L10.2745 11.5201L9.20945 12.5401Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.67295 11.2674C7.76303 11.0585 7.97008 10.9244 8.19756 10.9277L10.2826 10.9577C10.5108 10.961 10.7144 11.1018 10.7979 11.3142C10.8815 11.5266 10.8284 11.7685 10.6635 11.9264L9.59854 12.9464C9.3753 13.1602 9.02138 13.1538 8.806 12.9321L7.786 11.8821C7.62748 11.7189 7.58286 11.4763 7.67295 11.2674Z" fill="#594FBA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2091 9.81734C9.81937 10.1614 9.56271 10.8338 9.85575 11.8432C9.94237 12.1416 9.77073 12.4536 9.47239 12.5402C9.17404 12.6269 8.86198 12.4552 8.77536 12.1569C8.39341 10.8413 8.66924 9.67616 9.46451 8.97401C10.2538 8.27717 11.4158 8.16124 12.5395 8.64907C12.8245 8.77278 12.9552 9.10407 12.8315 9.38904C12.7078 9.67401 12.3765 9.80474 12.0916 9.68103C11.2803 9.32886 10.6049 9.46793 10.2091 9.81734Z" fill="#594FBA"/>
+<path d="M16.1255 12.9751L17.1455 14.0401L15.0605 13.9951L16.1255 12.9751Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7365 12.5689C15.9609 12.354 16.3169 12.3617 16.5318 12.586L17.5518 13.651C17.7092 13.8153 17.7521 14.0583 17.6605 14.2665C17.5689 14.4748 17.3609 14.6074 17.1334 14.6025L15.0484 14.5575C14.821 14.5526 14.6189 14.4111 14.5364 14.1991C14.4539 13.9871 14.5072 13.7462 14.6715 13.5889L15.7365 12.5689Z" fill="#594FBA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8472 12.9598C16.1456 12.8732 16.4576 13.0449 16.5442 13.3432C16.9262 14.6588 16.6504 15.8239 15.8551 16.5261C15.0658 17.2229 13.9038 17.3388 12.7801 16.851C12.4951 16.7273 12.3644 16.396 12.4881 16.111C12.6118 15.8261 12.9431 15.6953 13.228 15.819C14.0393 16.1712 14.7148 16.0321 15.1105 15.6827C15.5002 15.3386 15.7569 14.6662 15.4639 13.6569C15.3772 13.3585 15.5489 13.0464 15.8472 12.9598Z" fill="#594FBA"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-catalog.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-catalog.svg
new file mode 100644
index 0000000..7f08248
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-catalog.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.49218 3.7898L2.98438 8.29761L7.49218 12.8054L12 8.29761L7.49218 3.7898Z" fill="#EDE3FF"/>
+<path d="M7.49945 4.59L11.2045 8.295L7.49945 12L3.77945 8.295L7.49945 4.59ZM7.49945 3L2.18945 8.295L7.49945 13.605L12.7945 8.295L7.49945 3Z" fill="#7749BD"/>
+<path d="M7.51073 10.2223L9.41992 8.31311L7.51073 6.40392L5.60155 8.31311L7.51073 10.2223Z" fill="#7749BD"/>
+<path d="M16.5078 3.79065L12 8.29846L16.5078 12.8063L21.0156 8.29846L16.5078 3.79065Z" fill="#EDE3FF"/>
+<path d="M16.5001 4.59L20.2051 8.295L16.5001 12L12.7951 8.295L16.5001 4.59ZM16.5001 3L11.2051 8.295L16.5001 13.605L21.8101 8.295L16.5001 3Z" fill="#7749BD"/>
+<path d="M16.5264 10.2221L18.4355 8.31287L16.5264 6.40368L14.6172 8.31287L16.5264 10.2221Z" fill="#7749BD"/>
+<path d="M11.9902 11.1921L7.48242 15.7L11.9902 20.2078L16.498 15.7L11.9902 11.1921Z" fill="#EDE3FF"/>
+<path d="M11.9995 12L15.7045 15.705L11.9995 19.41L8.27945 15.705L11.9995 12ZM11.9995 10.395L6.68945 15.705L11.9995 21L17.3095 15.69L11.9995 10.395Z" fill="#7749BD"/>
+<path d="M12.0185 17.6L13.9277 15.6908L12.0185 13.7816L10.1094 15.6908L12.0185 17.6Z" fill="#7749BD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-catalog_object.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-catalog_object.svg
new file mode 100644
index 0000000..a076ca6
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-catalog_object.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.50085 4.42542H16.6508C16.8617 4.42542 17.0639 4.50917 17.213 4.65827C17.3621 4.80736 17.4458 5.00957 17.4458 5.22041V16.0204C17.4458 16.2273 17.3637 16.4257 17.2174 16.572C17.0711 16.7182 16.8727 16.8004 16.6658 16.8004H4.50085C4.29398 16.8004 4.09558 16.7182 3.9493 16.572C3.80303 16.4257 3.72085 16.2273 3.72085 16.0204V5.22041C3.71885 5.11673 3.73756 5.01369 3.77586 4.91731C3.81416 4.82094 3.8713 4.73318 3.94393 4.65915C4.01656 4.58512 4.10322 4.52632 4.19885 4.48619C4.29447 4.44606 4.39714 4.4254 4.50085 4.42542Z" fill="#F2F2F2"/>
+<path d="M16.6504 4.95032C16.7101 4.95032 16.7673 4.97402 16.8095 5.01622C16.8517 5.05841 16.8754 5.11564 16.8754 5.17532V15.9753C16.8754 16.035 16.8517 16.0922 16.8095 16.1344C16.7673 16.1766 16.7101 16.2003 16.6504 16.2003H4.50039C4.44072 16.2003 4.38349 16.1766 4.34129 16.1344C4.2991 16.0922 4.27539 16.035 4.27539 15.9753V5.17532C4.27539 5.14577 4.28121 5.11651 4.29252 5.08921C4.30383 5.06192 4.3204 5.03711 4.34129 5.01622C4.36218 4.99533 4.38699 4.97875 4.41429 4.96744C4.44159 4.95614 4.47084 4.95032 4.50039 4.95032H16.6504ZM16.6504 3.82532H4.50039C4.14235 3.82532 3.79897 3.96755 3.5458 4.22072C3.29262 4.4739 3.15039 4.81728 3.15039 5.17532V15.9753C3.15039 16.3334 3.29262 16.6767 3.5458 16.9299C3.79897 17.1831 4.14235 17.3253 4.50039 17.3253H16.6504C17.0084 17.3253 17.3518 17.1831 17.605 16.9299C17.8582 16.6767 18.0004 16.3334 18.0004 15.9753V5.17532C18.0004 4.81728 17.8582 4.4739 17.605 4.22072C17.3518 3.96755 17.0084 3.82532 16.6504 3.82532Z" fill="#2195E7"/>
+<path d="M19.35 6.67542H7.5C6.67157 6.67542 6 7.34699 6 8.17542V18.6754C6 19.5038 6.67157 20.1754 7.5 20.1754H19.35C20.1784 20.1754 20.85 19.5038 20.85 18.6754V8.17542C20.85 7.34699 20.1784 6.67542 19.35 6.67542Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8633 20.1752V10.7252H13.9883V20.1752H12.8633Z" fill="#C1CBD5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1758 16.0128H6.67578V14.8878H20.1758V16.0128Z" fill="#C1CBD5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8633 11.4004V6.67542H13.9883V11.4004H12.8633Z" fill="#2195E7"/>
+<path d="M19.5 7.80042C19.5597 7.80042 19.6169 7.82412 19.6591 7.86632C19.7013 7.90851 19.725 7.96574 19.725 8.02542V18.8254C19.725 18.8851 19.7013 18.9423 19.6591 18.9845C19.6169 19.0267 19.5597 19.0504 19.5 19.0504H7.35C7.29033 19.0504 7.2331 19.0267 7.1909 18.9845C7.14871 18.9423 7.125 18.8851 7.125 18.8254V8.02542C7.125 7.96574 7.14871 7.90851 7.1909 7.86632C7.2331 7.82412 7.29033 7.80042 7.35 7.80042H19.5ZM19.5 6.67542H7.35C7.17272 6.67542 6.99717 6.71033 6.83338 6.77818C6.66959 6.84602 6.52076 6.94546 6.39541 7.07082C6.27005 7.19618 6.17061 7.345 6.10276 7.50879C6.03492 7.67258 6 7.84813 6 8.02542V18.8254C6 19.1835 6.14223 19.5268 6.39541 19.78C6.64858 20.0332 6.99196 20.1754 7.35 20.1754H19.5C19.858 20.1754 20.2014 20.0332 20.4546 19.78C20.7078 19.5268 20.85 19.1835 20.85 18.8254V8.02542C20.85 7.66737 20.7078 7.324 20.4546 7.07082C20.2014 6.81765 19.858 6.67542 19.5 6.67542Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.67578 10.8381H20.1758V11.9631H6.67578V10.8381Z" fill="#2195E7"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-column.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-column.svg
new file mode 100644
index 0000000..0d88057
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-column.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9746 2.92542H7.72461C6.89618 2.92542 6.22461 3.59699 6.22461 4.42542V16.2754C6.22461 17.1038 6.89618 17.7754 7.72461 17.7754H12.9746C13.803 17.7754 14.4746 17.1038 14.4746 16.2754V4.42542C14.4746 3.59699 13.803 2.92542 12.9746 2.92542Z" fill="#E1FFF9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6488 10.9126H7.04883V9.7876H13.6488V10.9126Z" fill="#AECEC8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6488 14.2123H7.04883V13.0873H13.6488V14.2123Z" fill="#AECEC8"/>
+<path d="M7.34961 7.7699H13.3496V16.0949C13.3496 16.2341 13.2943 16.3677 13.1958 16.4661C13.0974 16.5646 12.9639 16.6199 12.8246 16.6199H7.87461C7.73537 16.6199 7.60184 16.5646 7.50338 16.4661C7.40492 16.3677 7.34961 16.2341 7.34961 16.0949V7.7699ZM6.22461 6.6449V16.1249C6.22461 16.5625 6.39845 16.9822 6.70788 17.2916C7.01732 17.6011 7.437 17.7749 7.87461 17.7749H12.8246C13.2622 17.7749 13.6819 17.6011 13.9913 17.2916C14.3008 16.9822 14.4746 16.5625 14.4746 16.1249V6.6899H6.22461V6.6449Z" fill="#16A085"/>
+<path d="M12.8246 4.0501C12.9518 4.04879 13.0751 4.0937 13.1717 4.17646C13.2682 4.25923 13.3315 4.37423 13.3496 4.5001V6.7501H7.34961V4.5001C7.34961 4.36086 7.40492 4.22732 7.50338 4.12887C7.60184 4.03041 7.73537 3.9751 7.87461 3.9751H12.8246V4.0501ZM12.8246 2.8501H7.87461C7.437 2.8501 7.01732 3.02394 6.70788 3.33337C6.39845 3.64281 6.22461 4.06249 6.22461 4.5001V7.8001H14.4746V4.5001C14.4371 4.08899 14.2468 3.70688 13.9414 3.42918C13.6359 3.15149 13.2374 2.99839 12.8246 3.0001V2.8501Z" fill="#16A085"/>
+<path d="M16.2754 6.2251H11.0254C10.197 6.2251 9.52539 6.89667 9.52539 7.7251V19.5751C9.52539 20.4035 10.197 21.0751 11.0254 21.0751H16.2754C17.1038 21.0751 17.7754 20.4035 17.7754 19.5751V7.7251C17.7754 6.89667 17.1038 6.2251 16.2754 6.2251Z" fill="#E1FFF9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9496 14.2123H10.3496V13.0873H16.9496V14.2123Z" fill="#AECEC8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9496 17.5127H10.3496V16.3877H16.9496V17.5127Z" fill="#AECEC8"/>
+<path d="M10.6504 11.0702H16.6504V19.5002C16.6504 19.6394 16.5951 19.773 16.4966 19.8714C16.3982 19.9699 16.2646 20.0252 16.1254 20.0252H11.1754C11.1064 20.0252 11.0382 20.0116 10.9745 19.9852C10.9108 19.9588 10.8529 19.9202 10.8042 19.8714C10.7554 19.8227 10.7167 19.7648 10.6904 19.7011C10.664 19.6374 10.6504 19.5691 10.6504 19.5002V11.0702ZM9.52539 9.94519V19.5002C9.56292 19.9113 9.75319 20.2934 10.0586 20.5711C10.3641 20.8488 10.7626 21.0019 11.1754 21.0002H16.1254C16.563 21.0002 16.9827 20.8264 17.2921 20.5169C17.6015 20.2075 17.7754 19.7878 17.7754 19.3502V9.99019H9.52539V9.94519Z" fill="#16A085"/>
+<path d="M16.1254 7.3501C16.2646 7.3501 16.3982 7.40541 16.4966 7.50387C16.5951 7.60232 16.6504 7.73586 16.6504 7.8751V10.0501H10.6504V7.8751C10.6504 7.73586 10.7057 7.60232 10.8042 7.50387C10.9026 7.40541 11.0362 7.3501 11.1754 7.3501H16.1254ZM16.1254 6.2251H11.1754C10.7378 6.2251 10.3181 6.39894 10.0087 6.70837C9.69923 7.01781 9.52539 7.43749 9.52539 7.8751V11.1751H17.7754V7.8751C17.7754 7.43749 17.6015 7.01781 17.2921 6.70837C16.9827 6.39894 16.563 6.2251 16.1254 6.2251Z" fill="#16A085"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-compound_trigger.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-compound_trigger.svg
new file mode 100644
index 0000000..29ee3dd
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-compound_trigger.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.12541 18.7501H7.23041V21.3001C7.23016 21.4503 7.27412 21.5972 7.35681 21.7226C7.4395 21.848 7.55726 21.9462 7.69541 22.0051C7.7899 22.0191 7.88592 22.0191 7.98041 22.0051C8.17611 22.0063 8.36451 21.9309 8.50541 21.7951L12.2704 18.1651C12.4149 18.0165 12.4956 17.8174 12.4954 17.6101H3.00041C2.99635 17.7597 3.02256 17.9085 3.07747 18.0476C3.13238 18.1868 3.21485 18.3134 3.31993 18.4199C3.42501 18.5264 3.55053 18.6105 3.68895 18.6673C3.82736 18.724 3.97582 18.7522 4.12541 18.7501Z" fill="#EFA539"/>
+<path d="M12.4507 17.2801C12.4521 17.0916 12.3825 16.9095 12.2557 16.7701L8.62573 13.0201C8.52106 12.9124 8.38702 12.8379 8.24031 12.8059C8.09361 12.7739 7.94073 12.7858 7.80073 12.8401C7.66614 12.891 7.5499 12.9811 7.46702 13.0987C7.38413 13.2164 7.3384 13.3562 7.33573 13.5001V16.0801H4.14073C3.99243 16.078 3.84524 16.1058 3.70783 16.1616C3.57043 16.2174 3.44561 16.3002 3.34074 16.4051C3.23587 16.5099 3.15307 16.6348 3.09725 16.7722C3.04143 16.9096 3.01371 17.0568 3.01573 17.2051L12.4507 17.2801Z" fill="#2F91A3"/>
+<path d="M4.125 7.8903H7.23L7.185 10.5003C7.18574 10.6484 7.23029 10.7929 7.31304 10.9157C7.39579 11.0385 7.51304 11.134 7.65 11.1903C7.73832 11.236 7.83564 11.2616 7.935 11.2653C8.1307 11.2665 8.3191 11.1911 8.46 11.0553L12.225 7.3653C12.2979 7.29268 12.3554 7.2061 12.3941 7.11074C12.4327 7.01537 12.4518 6.91319 12.45 6.8103H3C3.00786 7.10208 3.13033 7.37901 3.34089 7.58115C3.55145 7.78329 3.83315 7.89435 4.125 7.8903Z" fill="#EFA539"/>
+<path d="M12.4501 6.43516C12.4364 6.27223 12.3676 6.11881 12.2551 6.00016L8.62511 2.16016C8.51877 2.05504 8.38395 1.98339 8.23733 1.95407C8.0907 1.92474 7.9387 1.93903 7.80011 1.99516C7.66315 2.04703 7.54526 2.13943 7.46218 2.26004C7.3791 2.38064 7.33477 2.52371 7.33511 2.67016V5.26516H4.14011C3.99056 5.26111 3.84174 5.28732 3.70259 5.34223C3.56343 5.39714 3.43681 5.47961 3.33033 5.58469C3.22385 5.68977 3.13971 5.81528 3.08296 5.9537C3.02621 6.09212 2.99803 6.24058 3.00011 6.39016L12.4501 6.43516Z" fill="#2F91A3"/>
+<path d="M12.6608 12.9601H15.7808V15.5251C15.774 15.6728 15.8138 15.8189 15.8945 15.9427C15.9753 16.0665 16.0929 16.1618 16.2308 16.2151C16.3296 16.2371 16.432 16.2371 16.5308 16.2151C16.7216 16.214 16.9045 16.1387 17.0408 16.0051L20.7608 12.4501C20.8383 12.3771 20.8996 12.2886 20.941 12.1905C20.9823 12.0923 21.0027 11.9866 21.0008 11.8801H11.5508C11.5623 12.1681 11.6838 12.4406 11.8904 12.6415C12.0969 12.8425 12.3726 12.9565 12.6608 12.9601Z" fill="#EFA539"/>
+<path d="M21.0009 11.505C21.0023 11.3165 20.9327 11.1344 20.8059 10.995L17.1609 7.22999C17.0545 7.12487 16.9197 7.05321 16.7731 7.02389C16.6265 6.99456 16.4745 7.00885 16.3359 7.06499C16.2001 7.1186 16.0834 7.21143 16.0006 7.33165C15.9177 7.45186 15.8726 7.59402 15.8709 7.73999V10.335H12.6759C12.5276 10.333 12.3804 10.3607 12.243 10.4165C12.1056 10.4723 11.9808 10.5551 11.8759 10.66C11.771 10.7649 11.6882 10.8897 11.6324 11.0271C11.5766 11.1645 11.5489 11.3117 11.5509 11.46L21.0009 11.505Z" fill="#2F91A3"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-constraints.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-constraints.svg
new file mode 100644
index 0000000..2c2a64d
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-constraints.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.62899 12.0747L4.70898 16.8297L4.87398 7.16968L9.62899 12.0747Z" fill="#BF3C14" stroke="#BF3C14" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.3691 11.9247L19.2891 7.16968L19.1241 16.8297L14.3691 11.9247Z" fill="#BF3C14" stroke="#BF3C14" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-database.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-database.svg
new file mode 100644
index 0000000..8836a61
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-database.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.98 8.25C20.1461 8.03428 20.2405 7.77204 20.25 7.5C20.25 5.85 16.5 4.5 12 4.5C7.50005 4.5 3.75005 5.85 3.75005 7.5C3.75963 7.77204 3.85403 8.03428 4.02005 8.25C3.84431 8.46041 3.74805 8.72585 3.74805 9C3.74805 9.27415 3.84431 9.53959 4.02005 9.75C3.84431 9.96041 3.74805 10.2259 3.74805 10.5C3.74805 10.7741 3.84431 11.0396 4.02005 11.25C3.84431 11.4604 3.74805 11.7259 3.74805 12C3.74805 12.2741 3.84431 12.5396 4.02005 12.75C3.84431 12.9604 3.74805 13.2259 3.74805 13.5C3.74805 13.7741 3.84431 14.0396 4.02005 14.25C3.84431 14.4604 3.74805 14.7259 3.74805 15C3.74805 15.2741 3.84431 15.5396 4.02005 15.75C3.85403 15.9657 3.75963 16.228 3.75005 16.5C3.75005 18.15 7.50005 19.5 12 19.5C16.5 19.5 20.25 18.15 20.25 16.5C20.2405 16.228 20.1461 15.9657 19.98 15.75C20.1558 15.5396 20.2521 15.2741 20.2521 15C20.2521 14.7259 20.1558 14.4604 19.98 14.25C20.1558 14.0396 20.2521 13.7741 20.2521 13.5C20.2521 13.2259 20.1558 12.9604 19.98 12.75C20.1558 12.5396 20.2521 12.2741 20.2521 12C20.2521 11.7259 20.1558 11.4604 19.98 11.25C20.1558 11.0396 20.2521 10.7741 20.2521 10.5C20.2521 10.2259 20.1558 9.96041 19.98 9.75C20.1558 9.53959 20.2521 9.27415 20.2521 9C20.2521 8.72585 20.1558 8.46041 19.98 8.25Z" fill="#F9F9D1"/>
+<path d="M12 10.5C16.5563 10.5 20.25 9.15685 20.25 7.5C20.25 5.84315 16.5563 4.5 12 4.5C7.44365 4.5 3.75 5.84315 3.75 7.5C3.75 9.15685 7.44365 10.5 12 10.5Z" fill="#AC9230"/>
+<path d="M12 18C8.16 18 4.935 17.04 4.02 15.75C3.85398 15.9657 3.75958 16.228 3.75 16.5C3.75 18.15 7.5 19.5 12 19.5C16.5 19.5 20.25 18.15 20.25 16.5C20.2404 16.228 20.146 15.9657 19.98 15.75C19.065 17.04 15.84 18 12 18Z" fill="#AC9230"/>
+<path d="M12 12C8.16 12 4.935 11.04 4.02 9.75C3.85398 9.96572 3.75958 10.228 3.75 10.5C3.75 12.15 7.5 13.5 12 13.5C16.5 13.5 20.25 12.15 20.25 10.5C20.2404 10.228 20.146 9.96572 19.98 9.75C19.065 11.04 15.84 12 12 12Z" fill="#AC9230"/>
+<path d="M12 15C8.16 15 4.935 14.04 4.02 12.75C3.85398 12.9657 3.75958 13.228 3.75 13.5C3.75 15.15 7.5 16.5 12 16.5C16.5 16.5 20.25 15.15 20.25 13.5C20.2404 13.228 20.146 12.9657 19.98 12.75C19.065 14.04 15.84 15 12 15Z" fill="#AC9230"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-domain.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-domain.svg
new file mode 100644
index 0000000..c7a3b79
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-domain.svg
@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0815 14.9397H5.52148V8.32468L9.30148 4.54468L13.0815 8.32468V14.9397Z" fill="#CBDFF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.05664 8.22729C5.3673 8.22729 5.61914 8.47913 5.61914 8.78979V15.4048C5.61914 15.7155 5.3673 15.9673 5.05664 15.9673C4.74598 15.9673 4.49414 15.7155 4.49414 15.4048V8.78979C4.49414 8.47913 4.74598 8.22729 5.05664 8.22729Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.49414 15.4048C4.49414 15.0941 4.74598 14.8423 5.05664 14.8423H13.5616C13.8723 14.8423 14.1241 15.0941 14.1241 15.4048C14.1241 15.7154 13.8723 15.9673 13.5616 15.9673H5.05664C4.74598 15.9673 4.49414 15.7154 4.49414 15.4048Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5605 8.22729C13.8712 8.22729 14.123 8.47913 14.123 8.78979V15.4048C14.123 15.7155 13.8712 15.9673 13.5605 15.9673C13.2499 15.9673 12.998 15.7155 12.998 15.4048V8.78979C12.998 8.47913 13.2499 8.22729 13.5605 8.22729Z" fill="#6F6F6F"/>
+<path d="M11.1902 10.2144H7.41016V14.9394H11.1902V10.2144Z" fill="#81602B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69861 4.14693C9.91828 4.3666 9.91828 4.72276 9.69861 4.94243L4.02861 10.6124C3.80894 10.8321 3.45278 10.8321 3.23311 10.6124C3.01344 10.3928 3.01344 10.0366 3.23311 9.81693L8.90311 4.14693C9.12278 3.92726 9.47894 3.92726 9.69861 4.14693Z" fill="#C42E2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.90303 4.14693C9.1227 3.92726 9.47886 3.92726 9.69853 4.14693L15.3685 9.81693C15.5882 10.0366 15.5882 10.3928 15.3685 10.6124C15.1489 10.8321 14.7927 10.8321 14.573 10.6124L8.90303 4.94243C8.68336 4.72276 8.68336 4.3666 8.90303 4.14693Z" fill="#C42E2E"/>
+<path d="M18.4819 18.9895H10.9219V12.3745L14.7019 8.59448L18.4819 12.3745V18.9895Z" fill="#CBDFF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4551 12.2769C10.7657 12.2769 11.0176 12.5287 11.0176 12.8394V19.4544C11.0176 19.765 10.7657 20.0169 10.4551 20.0169C10.1444 20.0169 9.89258 19.765 9.89258 19.4544V12.8394C9.89258 12.5287 10.1444 12.2769 10.4551 12.2769Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.89258 19.4546C9.89258 19.1439 10.1444 18.8921 10.4551 18.8921H18.9601C19.2707 18.8921 19.5226 19.1439 19.5226 19.4546C19.5226 19.7653 19.2707 20.0171 18.9601 20.0171H10.4551C10.1444 20.0171 9.89258 19.7653 9.89258 19.4546Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9609 12.2769C19.2716 12.2769 19.5234 12.5287 19.5234 12.8394V19.4544C19.5234 19.765 19.2716 20.0169 18.9609 20.0169C18.6503 20.0169 18.3984 19.765 18.3984 19.4544V12.8394C18.3984 12.5287 18.6503 12.2769 18.9609 12.2769Z" fill="#6F6F6F"/>
+<path d="M16.5905 14.2646H12.8105V18.9896H16.5905V14.2646Z" fill="#81602B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.099 8.19673C15.3187 8.4164 15.3187 8.77256 15.099 8.99223L9.429 14.6622C9.20933 14.8819 8.85317 14.8819 8.6335 14.6622C8.41383 14.4426 8.41383 14.0864 8.6335 13.8667L14.3035 8.19673C14.5232 7.97706 14.8793 7.97706 15.099 8.19673Z" fill="#C42E2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3034 8.19673C14.5231 7.97706 14.8792 7.97706 15.0989 8.19673L20.7689 13.8667C20.9886 14.0864 20.9886 14.4426 20.7689 14.6622C20.5492 14.8819 20.1931 14.8819 19.9734 14.6622L14.3034 8.99223C14.0838 8.77256 14.0838 8.4164 14.3034 8.19673Z" fill="#C42E2E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-domain_constraints.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-domain_constraints.svg
new file mode 100644
index 0000000..5d84b2c
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-domain_constraints.svg
@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7948 18.1199L4.96484 18.2249V9.92989L10.4248 4.25989L15.8998 9.71989L15.7948 18.1199Z" fill="#CBDFF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.96484 9.15698C5.2755 9.15698 5.52734 9.40882 5.52734 9.71948V18.2245C5.52734 18.5351 5.2755 18.787 4.96484 18.787C4.65418 18.787 4.40234 18.5351 4.40234 18.2245V9.71948C4.40234 9.40882 4.65418 9.15698 4.96484 9.15698Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.40234 18.225C4.40234 17.9143 4.65418 17.6625 4.96484 17.6625H15.8998C16.2105 17.6625 16.4623 17.9143 16.4623 18.225C16.4623 18.5356 16.2105 18.7875 15.8998 18.7875H4.96484C4.65418 18.7875 4.40234 18.5356 4.40234 18.225Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9004 9.15698C16.2111 9.15698 16.4629 9.40882 16.4629 9.71948V18.2245C16.4629 18.5351 16.2111 18.787 15.9004 18.787C15.5897 18.787 15.3379 18.5351 15.3379 18.2245V9.71948C15.3379 9.40882 15.5897 9.15698 15.9004 9.15698Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8225 3.86214C11.0422 4.08181 11.0422 4.43797 10.8225 4.65764L3.53251 11.9476C3.31284 12.1673 2.95669 12.1673 2.73702 11.9476C2.51735 11.728 2.51735 11.3718 2.73702 11.1521L10.027 3.86214C10.2467 3.64247 10.6028 3.64247 10.8225 3.86214Z" fill="#C42E2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.028 3.86214C10.2477 3.64247 10.6039 3.64247 10.8235 3.86214L18.1135 11.1521C18.3332 11.3718 18.3332 11.728 18.1135 11.9476C17.8939 12.1673 17.5377 12.1673 17.318 11.9476L10.028 4.65764C9.80836 4.43797 9.80836 4.08181 10.028 3.86214Z" fill="#C42E2E"/>
+<path d="M18.9446 19.6348L8.09961 19.7398V11.4448L13.5746 5.77478L19.0346 11.2348L18.9446 19.6348Z" fill="#CBDFF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.09961 10.6725C8.41027 10.6725 8.66211 10.9243 8.66211 11.235V19.74C8.66211 20.0506 8.41027 20.3025 8.09961 20.3025C7.78895 20.3025 7.53711 20.0506 7.53711 19.74V11.235C7.53711 10.9243 7.78895 10.6725 8.09961 10.6725Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.53711 19.7399C7.53711 19.4292 7.78895 19.1774 8.09961 19.1774H19.0346C19.3453 19.1774 19.5971 19.4292 19.5971 19.7399C19.5971 20.0505 19.3453 20.3024 19.0346 20.3024H8.09961C7.78895 20.3024 7.53711 20.0505 7.53711 19.7399Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0352 10.6725C19.3458 10.6725 19.5977 10.9243 19.5977 11.235V19.74C19.5977 20.0506 19.3458 20.3025 19.0352 20.3025C18.7245 20.3025 18.4727 20.0506 18.4727 19.74V11.235C18.4727 10.9243 18.7245 10.6725 19.0352 10.6725Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9729 5.37703C14.1926 5.5967 14.1926 5.95286 13.9729 6.17253L6.6829 13.4625C6.46323 13.6822 6.10708 13.6822 5.88741 13.4625C5.66774 13.2429 5.66774 12.8867 5.88741 12.667L13.1774 5.37703C13.3971 5.15736 13.7532 5.15736 13.9729 5.37703Z" fill="#C42E2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1765 5.37703C13.3961 5.15736 13.7523 5.15736 13.972 5.37703L21.262 12.667C21.4816 12.8867 21.4816 13.2429 21.262 13.4625C21.0423 13.6822 20.6861 13.6822 20.4665 13.4625L13.1765 6.17253C12.9568 5.95286 12.9568 5.5967 13.1765 5.37703Z" fill="#C42E2E"/>
+<path d="M13.5755 18.1948C15.6549 18.1948 17.3405 16.5091 17.3405 14.4298C17.3405 12.3504 15.6549 10.6648 13.5755 10.6648C11.4962 10.6648 9.81055 12.3504 9.81055 14.4298C9.81055 16.5091 11.4962 18.1948 13.5755 18.1948Z" fill="#81602B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8266 12.5363C16.0771 12.72 16.1312 13.072 15.9475 13.3225L13.4725 16.6975C13.3801 16.8236 13.2394 16.9055 13.0842 16.9236C12.929 16.9417 12.7732 16.8945 12.6542 16.7932L11.1392 15.5032C10.9027 15.3018 10.8742 14.9468 11.0756 14.7102C11.277 14.4737 11.6321 14.4452 11.8686 14.6466L12.923 15.5445L15.0403 12.6573C15.224 12.4067 15.576 12.3526 15.8266 12.5363Z" fill="#DEF4FD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbfunc.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbfunc.svg
new file mode 100644
index 0000000..77ab3c3
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbfunc.svg
@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.53906 8.22001V13.92L8.45906 16.755L13.3941 13.92V8.22001L8.45906 5.38501L3.53906 8.22001Z" fill="#FEFABF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.46094 10.5222C8.7716 10.5222 9.02344 10.7741 9.02344 11.0847V16.9797C9.02344 17.2904 8.7716 17.5422 8.46094 17.5422C8.15028 17.5422 7.89844 17.2904 7.89844 16.9797V11.0847C7.89844 10.7741 8.15028 10.5222 8.46094 10.5222Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5898 7.56763C13.9005 7.56763 14.1523 7.81947 14.1523 8.13013V14.0251C14.1523 14.3358 13.9005 14.5876 13.5898 14.5876C13.2792 14.5876 13.0273 14.3358 13.0273 14.0251V8.13013C13.0273 7.81947 13.2792 7.56763 13.5898 7.56763Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.33008 7.56763C3.64074 7.56763 3.89258 7.81947 3.89258 8.13013V14.0251C3.89258 14.3358 3.64074 14.5876 3.33008 14.5876C3.01942 14.5876 2.76758 14.3358 2.76758 14.0251V8.13013C2.76758 7.81947 3.01942 7.56763 3.33008 7.56763Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0614 7.84797C14.2171 8.11677 14.1255 8.46093 13.8567 8.61668L8.7567 11.5717C8.4879 11.7274 8.14374 11.6358 7.988 11.367C7.83225 11.0982 7.9239 10.754 8.1927 10.5983L13.2927 7.64327C13.5615 7.48753 13.9057 7.57917 14.0614 7.84797Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.94653 4.8797C9.10134 5.14904 9.00849 5.49288 8.73915 5.64769L3.62415 8.58769C3.35482 8.7425 3.01097 8.64966 2.85616 8.38032C2.70135 8.11098 2.7942 7.76714 3.06354 7.61233L8.17854 4.67233C8.44787 4.51752 8.79172 4.61036 8.94653 4.8797Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0614 13.7432C14.2172 14.012 14.1255 14.3562 13.8567 14.5119L8.7567 17.4669C8.48791 17.6227 8.14374 17.531 7.988 17.2622C7.83225 16.9934 7.9239 16.6493 8.1927 16.4935L13.2927 13.5385C13.5615 13.3828 13.9057 13.4744 14.0614 13.7432Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.85678 7.84859C3.01218 7.5796 3.35623 7.48751 3.62523 7.64291L8.74023 10.5979C9.00922 10.7533 9.10131 11.0974 8.94591 11.3664C8.7905 11.6354 8.44646 11.7274 8.17746 11.572L3.06246 8.61704C2.79346 8.46164 2.70138 8.11759 2.85678 7.84859Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.98738 4.87908C8.14253 4.60994 8.48649 4.51753 8.75563 4.67268L13.8556 7.61268C14.1248 7.76784 14.2172 8.11179 14.062 8.38094C13.9069 8.65008 13.5629 8.74249 13.2938 8.58733L8.19378 5.64733C7.92463 5.49218 7.83223 5.14822 7.98738 4.87908Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.85678 13.7439C3.01218 13.4749 3.35623 13.3828 3.62523 13.5382L8.74023 16.4932C9.00922 16.6486 9.10131 16.9926 8.94591 17.2616C8.7905 17.5306 8.44646 17.6227 8.17746 17.4673L3.06246 14.5123C2.79346 14.3569 2.70138 14.0129 2.85678 13.7439Z" fill="#B9871B"/>
+<path d="M5.6543 9.41972V15.1047L10.5743 17.9547L15.4943 15.1047V9.41972L10.5743 6.58472L5.6543 9.41972Z" fill="#FEFABF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5742 11.7224C10.8849 11.7224 11.1367 11.9743 11.1367 12.2849V18.1799C11.1367 18.4906 10.8849 18.7424 10.5742 18.7424C10.2636 18.7424 10.0117 18.4906 10.0117 18.1799V12.2849C10.0117 11.9743 10.2636 11.7224 10.5742 11.7224Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7051 8.76733C16.0157 8.76733 16.2676 9.01917 16.2676 9.32983V15.2248C16.2676 15.5355 16.0157 15.7873 15.7051 15.7873C15.3944 15.7873 15.1426 15.5355 15.1426 15.2248V9.32983C15.1426 9.01917 15.3944 8.76733 15.7051 8.76733Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.44531 8.76733C5.75597 8.76733 6.00781 9.01917 6.00781 9.32983V15.2248C6.00781 15.5355 5.75597 15.7873 5.44531 15.7873C5.13465 15.7873 4.88281 15.5355 4.88281 15.2248V9.32983C4.88281 9.01917 5.13465 8.76733 5.44531 8.76733Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1766 9.04768C16.3324 9.31648 16.2407 9.66064 15.9719 9.81639L10.8719 12.7714C10.6031 12.9271 10.259 12.8355 10.1032 12.5667C9.94749 12.2979 10.0391 11.9537 10.3079 11.798L15.4079 8.84298C15.6767 8.68723 16.0209 8.77888 16.1766 9.04768Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0637 6.07989C11.2185 6.34923 11.1257 6.69307 10.8563 6.84788L5.74134 9.78788C5.472 9.94269 5.12816 9.84985 4.97335 9.58051C4.81854 9.31117 4.91138 8.96733 5.18072 8.81252L10.2957 5.87252C10.5651 5.71771 10.9089 5.81055 11.0637 6.07989Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1766 14.9427C16.3324 15.2115 16.2407 15.5557 15.9719 15.7114L10.8719 18.6664C10.6031 18.8222 10.259 18.7305 10.1032 18.4617C9.94749 18.1929 10.0391 17.8487 10.3079 17.693L15.4079 14.738C15.6767 14.5823 16.0209 14.6739 16.1766 14.9427Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.97397 9.0483C5.12937 8.7793 5.47342 8.68722 5.74241 8.84262L10.8574 11.7976C11.1264 11.953 11.2185 12.2971 11.0631 12.5661C10.9077 12.8351 10.5636 12.9271 10.2946 12.7717L5.17965 9.81675C4.91065 9.66134 4.81857 9.3173 4.97397 9.0483Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 6.07927C10.2578 5.81013 10.6017 5.71772 10.8709 5.87288L15.9709 8.81288C16.24 8.96803 16.3324 9.31199 16.1773 9.58113C16.0221 9.85027 15.6782 9.94268 15.409 9.78753L10.309 6.84753C10.0399 6.69237 9.94746 6.34842 10.1026 6.07927Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.97397 14.9433C5.12937 14.6743 5.47342 14.5822 5.74241 14.7376L10.8574 17.6926C11.1264 17.848 11.2185 18.1921 11.0631 18.4611C10.9077 18.7301 10.5636 18.8222 10.2946 18.6668L5.17965 15.7118C4.91065 15.5564 4.81857 15.2123 4.97397 14.9433Z" fill="#B9871B"/>
+<path d="M18.4202 18.8247L19.2602 18.3747L19.5002 17.3697V16.9047L19.6202 15.9147L19.9202 15.5397L20.6702 15.1647H19.9202L20.4302 15.0597L19.6502 14.4897L19.6052 14.0997V13.3797L19.5002 12.3897L19.1852 12.0297L18.6902 11.8197L18.4202 11.7897L14.3852 11.6997L13.8002 12.1047L13.4402 12.4047V12.8097L13.5152 12.6897L13.3802 14.0397L13.4402 14.5047L12.4352 15.1647L12.2852 15.2847L12.4352 15.1647L13.0802 15.6447L13.1852 15.9147L13.5752 16.9197L13.5452 17.3547L13.5302 17.6697L13.5452 17.1297V17.3847L13.6952 18.0297L13.9352 18.3597L14.3402 18.5997L14.6852 18.8247H18.4202Z" fill="#FEFABF"/>
+<path d="M18.1348 18.6747C18.4019 18.6732 18.6645 18.6062 18.8998 18.4797C19.0646 18.3833 19.1996 18.2431 19.2898 18.0747C19.3738 17.9167 19.4249 17.7431 19.4398 17.5647C19.4398 17.3747 19.4398 17.1947 19.4398 17.0247V17.1597C19.4398 16.9047 19.4398 16.6947 19.4398 16.5297C19.4299 16.3799 19.4299 16.2296 19.4398 16.0797C19.4541 15.9757 19.4845 15.8745 19.5298 15.7797C19.5723 15.6963 19.628 15.6204 19.6948 15.5547C19.761 15.4887 19.8369 15.4331 19.9198 15.3897L20.1598 15.2847H20.3848H20.1598L19.9948 14.9997C19.9119 14.9564 19.836 14.9007 19.7698 14.8347C19.7032 14.7689 19.6475 14.693 19.6048 14.6097C19.5595 14.515 19.5291 14.4138 19.5148 14.3097C19.5049 14.1599 19.5049 14.0096 19.5148 13.8597C19.5148 13.6897 19.5148 13.4747 19.5148 13.2147V13.3497C19.5148 13.1697 19.5148 12.9897 19.5148 12.8097C19.4999 12.6313 19.4488 12.4578 19.3648 12.2997C19.2394 12.1599 19.0788 12.0563 18.8998 11.9997C18.6643 11.8738 18.4018 11.8069 18.1348 11.8047V11.5947H18.3298H18.5698L18.8398 11.6847C18.9313 11.7226 19.0172 11.7731 19.0948 11.8347C19.214 11.9255 19.3157 12.0374 19.3948 12.1647C19.4647 12.2862 19.5153 12.4177 19.5448 12.5547C19.5597 12.7144 19.5597 12.8751 19.5448 13.0347C19.5448 13.2147 19.5448 13.7247 19.5448 13.7247C19.5276 13.9093 19.5276 14.0951 19.5448 14.2797C19.5712 14.4227 19.6331 14.5568 19.7248 14.6697C19.8263 14.7885 19.9549 14.8811 20.0998 14.9397C20.137 14.9625 20.1678 14.9945 20.1891 15.0326C20.2104 15.0706 20.2217 15.1136 20.2217 15.1572C20.2217 15.2009 20.2104 15.2438 20.1891 15.2819C20.1678 15.32 20.137 15.3519 20.0998 15.3747C19.9552 15.4339 19.8267 15.5264 19.7248 15.6447C19.6336 15.758 19.5718 15.8919 19.5448 16.0347C19.5276 16.2193 19.5276 16.4051 19.5448 16.5897C19.5448 16.5897 19.5448 17.6097 19.5448 17.7597C19.5153 17.8967 19.4647 18.0283 19.3948 18.1497C19.3157 18.2771 19.214 18.3889 19.0948 18.4797C19.0172 18.5413 18.9313 18.5918 18.8398 18.6297L18.5698 18.7197H18.3298H18.1348V18.6747Z" fill="#34495E" stroke="#B9871B" stroke-width="1.3" stroke-miterlimit="10"/>
+<path d="M14.8647 11.7597C14.5989 11.7774 14.3414 11.8598 14.1147 11.9997C13.9498 12.0961 13.8148 12.2363 13.7247 12.4047C13.6406 12.5628 13.5896 12.7363 13.5747 12.9147C13.5747 13.1047 13.5747 13.2847 13.5747 13.4547V13.2747C13.4997 13.4997 13.4997 13.7397 13.4997 13.9047C13.5095 14.0545 13.5095 14.2049 13.4997 14.3547C13.4853 14.4587 13.455 14.5599 13.4097 14.6547C13.3671 14.7381 13.3114 14.8141 13.2447 14.8797C13.1784 14.9457 13.1026 15.0013 13.0197 15.0447L12.7797 15.1497H12.5547H12.7797L13.0197 15.2547C13.1026 15.2981 13.1784 15.3537 13.2447 15.4197C13.3112 15.4855 13.3669 15.5615 13.4097 15.6447C13.455 15.7395 13.4853 15.8407 13.4997 15.9447C13.5147 16.1294 13.5147 16.315 13.4997 16.4997C13.4997 16.6697 13.4997 16.8847 13.4997 17.1447V17.0097C13.4997 17.1897 13.4997 17.3697 13.4997 17.5497C13.5146 17.7281 13.5656 17.9016 13.6497 18.0597C13.7405 18.2276 13.8753 18.3677 14.0397 18.4647C14.2752 18.5907 14.5377 18.6576 14.8047 18.6597V18.8247H14.6697H14.4297L14.1597 18.7347C14.0681 18.6968 13.9823 18.6463 13.9047 18.5847C13.7854 18.4939 13.6837 18.3821 13.6047 18.2547C13.5347 18.1333 13.4841 18.0017 13.4547 17.8647C13.4398 17.7051 13.4398 17.5444 13.4547 17.3847C13.4547 17.2047 13.4547 16.6947 13.4547 16.6947C13.4718 16.5101 13.4718 16.3243 13.4547 16.1397C13.4282 15.9967 13.3663 15.8626 13.2747 15.7497C13.1731 15.631 13.0445 15.5384 12.8997 15.4797C12.8625 15.4569 12.8317 15.425 12.8103 15.3869C12.789 15.3488 12.7778 15.3059 12.7778 15.2622C12.7778 15.2186 12.789 15.1756 12.8103 15.1375C12.8317 15.0995 12.8625 15.0675 12.8997 15.0447C13.0442 14.9855 13.1727 14.893 13.2747 14.7747C13.3658 14.6615 13.4276 14.5275 13.4547 14.3847C13.4718 14.2001 13.4718 14.0143 13.4547 13.8297C13.4547 13.8297 13.4547 12.8097 13.4547 12.6597C13.4841 12.5227 13.5347 12.3911 13.6047 12.2697C13.6837 12.1423 13.7854 12.0305 13.9047 11.9397C13.9823 11.8781 14.0681 11.8276 14.1597 11.7897L14.4297 11.6997H14.6697H14.8647V11.7597Z" fill="#34495E" stroke="#B9871B" stroke-width="1.3" stroke-miterlimit="10"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6328 14.2048C14.6328 13.8942 14.8847 13.6423 15.1953 13.6423H17.7603C18.071 13.6423 18.3228 13.8942 18.3228 14.2048C18.3228 14.5155 18.071 14.7673 17.7603 14.7673H15.1953C14.8847 14.7673 14.6328 14.5155 14.6328 14.2048Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6328 16.3347C14.6328 16.0241 14.8847 15.7722 15.1953 15.7722H17.7603C18.071 15.7722 18.3228 16.0241 18.3228 16.3347C18.3228 16.6454 18.071 16.8972 17.7603 16.8972H15.1953C14.8847 16.8972 14.6328 16.6454 14.6328 16.3347Z" fill="#B9871B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbproc.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbproc.svg
new file mode 100644
index 0000000..0df78f1
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbproc.svg
@@ -0,0 +1,25 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.53906 8.22001V13.92L8.45906 16.755L13.3941 13.92V8.22001L8.45906 5.38501L3.53906 8.22001Z" fill="#FEFABF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.46094 10.5222C8.7716 10.5222 9.02344 10.7741 9.02344 11.0847V16.9797C9.02344 17.2904 8.7716 17.5422 8.46094 17.5422C8.15028 17.5422 7.89844 17.2904 7.89844 16.9797V11.0847C7.89844 10.7741 8.15028 10.5222 8.46094 10.5222Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5898 7.56763C13.9005 7.56763 14.1523 7.81947 14.1523 8.13013V14.0251C14.1523 14.3358 13.9005 14.5876 13.5898 14.5876C13.2792 14.5876 13.0273 14.3358 13.0273 14.0251V8.13013C13.0273 7.81947 13.2792 7.56763 13.5898 7.56763Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.33008 7.56763C3.64074 7.56763 3.89258 7.81947 3.89258 8.13013V14.0251C3.89258 14.3358 3.64074 14.5876 3.33008 14.5876C3.01942 14.5876 2.76758 14.3358 2.76758 14.0251V8.13013C2.76758 7.81947 3.01942 7.56763 3.33008 7.56763Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0614 7.84797C14.2171 8.11677 14.1255 8.46093 13.8567 8.61668L8.7567 11.5717C8.4879 11.7274 8.14374 11.6358 7.988 11.367C7.83225 11.0982 7.9239 10.754 8.1927 10.5983L13.2927 7.64327C13.5615 7.48753 13.9057 7.57917 14.0614 7.84797Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.94653 4.8797C9.10134 5.14904 9.00849 5.49288 8.73915 5.64769L3.62415 8.58769C3.35482 8.7425 3.01097 8.64966 2.85616 8.38032C2.70135 8.11098 2.7942 7.76714 3.06354 7.61233L8.17854 4.67233C8.44787 4.51752 8.79172 4.61036 8.94653 4.8797Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0614 13.7432C14.2172 14.012 14.1255 14.3562 13.8567 14.5119L8.7567 17.4669C8.48791 17.6227 8.14374 17.531 7.988 17.2622C7.83225 16.9934 7.9239 16.6493 8.1927 16.4935L13.2927 13.5385C13.5615 13.3828 13.9057 13.4744 14.0614 13.7432Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.85678 7.84859C3.01218 7.5796 3.35623 7.48751 3.62523 7.64291L8.74023 10.5979C9.00922 10.7533 9.10131 11.0974 8.94591 11.3664C8.7905 11.6354 8.44646 11.7274 8.17746 11.572L3.06246 8.61704C2.79346 8.46164 2.70138 8.11759 2.85678 7.84859Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.98738 4.87908C8.14253 4.60994 8.48649 4.51753 8.75563 4.67268L13.8556 7.61268C14.1248 7.76784 14.2172 8.11179 14.062 8.38094C13.9069 8.65008 13.5629 8.74249 13.2938 8.58733L8.19378 5.64733C7.92463 5.49218 7.83223 5.14822 7.98738 4.87908Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.85678 13.7439C3.01218 13.4749 3.35623 13.3828 3.62523 13.5382L8.74023 16.4932C9.00922 16.6486 9.10131 16.9926 8.94591 17.2616C8.7905 17.5306 8.44646 17.6227 8.17746 17.4673L3.06246 14.5123C2.79346 14.3569 2.70138 14.0129 2.85678 13.7439Z" fill="#B9871B"/>
+<path d="M5.6543 9.41972V15.1047L10.5743 17.9547L15.4943 15.1047V9.41972L10.5743 6.58472L5.6543 9.41972Z" fill="#FEFABF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5742 11.7224C10.8849 11.7224 11.1367 11.9743 11.1367 12.2849V18.1799C11.1367 18.4906 10.8849 18.7424 10.5742 18.7424C10.2636 18.7424 10.0117 18.4906 10.0117 18.1799V12.2849C10.0117 11.9743 10.2636 11.7224 10.5742 11.7224Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7051 8.76733C16.0157 8.76733 16.2676 9.01917 16.2676 9.32983V15.2248C16.2676 15.5355 16.0157 15.7873 15.7051 15.7873C15.3944 15.7873 15.1426 15.5355 15.1426 15.2248V9.32983C15.1426 9.01917 15.3944 8.76733 15.7051 8.76733Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.44531 8.76733C5.75597 8.76733 6.00781 9.01917 6.00781 9.32983V15.2248C6.00781 15.5355 5.75597 15.7873 5.44531 15.7873C5.13465 15.7873 4.88281 15.5355 4.88281 15.2248V9.32983C4.88281 9.01917 5.13465 8.76733 5.44531 8.76733Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1766 9.04768C16.3324 9.31648 16.2407 9.66064 15.9719 9.81639L10.8719 12.7714C10.6031 12.9271 10.259 12.8355 10.1032 12.5667C9.94749 12.2979 10.0391 11.9537 10.3079 11.798L15.4079 8.84298C15.6767 8.68723 16.0209 8.77888 16.1766 9.04768Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0637 6.07989C11.2185 6.34923 11.1257 6.69307 10.8563 6.84788L5.74134 9.78788C5.472 9.94269 5.12816 9.84985 4.97335 9.58051C4.81854 9.31117 4.91138 8.96733 5.18072 8.81252L10.2957 5.87252C10.5651 5.71771 10.9089 5.81055 11.0637 6.07989Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1766 14.9427C16.3324 15.2115 16.2407 15.5557 15.9719 15.7114L10.8719 18.6664C10.6031 18.8222 10.259 18.7305 10.1032 18.4617C9.94749 18.1929 10.0391 17.8487 10.3079 17.693L15.4079 14.738C15.6767 14.5823 16.0209 14.6739 16.1766 14.9427Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.97397 9.0483C5.12937 8.7793 5.47342 8.68722 5.74241 8.84262L10.8574 11.7976C11.1264 11.953 11.2185 12.2971 11.0631 12.5661C10.9077 12.8351 10.5636 12.9271 10.2946 12.7717L5.17965 9.81675C4.91065 9.66134 4.81857 9.3173 4.97397 9.0483Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1026 6.07927C10.2578 5.81013 10.6017 5.71772 10.8709 5.87288L15.9709 8.81288C16.24 8.96803 16.3324 9.31199 16.1773 9.58113C16.0221 9.85027 15.6782 9.94268 15.409 9.78753L10.309 6.84753C10.0399 6.69237 9.94746 6.34842 10.1026 6.07927Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.97397 14.9433C5.12937 14.6743 5.47342 14.5822 5.74241 14.7376L10.8574 17.6926C11.1264 17.848 11.2185 18.1921 11.0631 18.4611C10.9077 18.7301 10.5636 18.8222 10.2946 18.6668L5.17965 15.7118C4.91065 15.5564 4.81857 15.2123 4.97397 14.9433Z" fill="#B9871B"/>
+<path d="M18.4202 18.8247L19.2602 18.3747L19.5002 17.3697V16.9047L19.6202 15.9147L19.9202 15.5397L20.6702 15.1647H19.9202L20.4302 15.0597L19.6502 14.4897L19.6052 14.0997V13.3797L19.5002 12.3897L19.1852 12.0297L18.6902 11.8197L18.4202 11.7897L14.3852 11.6997L13.8002 12.1047L13.4402 12.4047V12.8097L13.5152 12.6897L13.3802 14.0397L13.4402 14.5047L12.4352 15.1647L12.2852 15.2847L12.4352 15.1647L13.0802 15.6447L13.1852 15.9147L13.5752 16.9197L13.5452 17.3547L13.5302 17.6697L13.5452 17.1297V17.3847L13.6952 18.0297L13.9352 18.3597L14.3402 18.5997L14.6852 18.8247H18.4202Z" fill="#FEFABF"/>
+<path d="M18.1348 18.6747C18.4019 18.6732 18.6645 18.6062 18.8998 18.4797C19.0646 18.3833 19.1996 18.2431 19.2898 18.0747C19.3738 17.9167 19.4249 17.7431 19.4398 17.5647C19.4398 17.3747 19.4398 17.1947 19.4398 17.0247V17.1597C19.4398 16.9047 19.4398 16.6947 19.4398 16.5297C19.4299 16.3799 19.4299 16.2296 19.4398 16.0797C19.4541 15.9757 19.4845 15.8745 19.5298 15.7797C19.5723 15.6963 19.628 15.6204 19.6948 15.5547C19.761 15.4887 19.8369 15.4331 19.9198 15.3897L20.1598 15.2847H20.3848H20.1598L19.9948 14.9997C19.9119 14.9564 19.836 14.9007 19.7698 14.8347C19.7032 14.7689 19.6475 14.693 19.6048 14.6097C19.5595 14.515 19.5291 14.4138 19.5148 14.3097C19.5049 14.1599 19.5049 14.0096 19.5148 13.8597C19.5148 13.6897 19.5148 13.4747 19.5148 13.2147V13.3497C19.5148 13.1697 19.5148 12.9897 19.5148 12.8097C19.4999 12.6313 19.4488 12.4578 19.3648 12.2997C19.2394 12.1599 19.0788 12.0563 18.8998 11.9997C18.6643 11.8738 18.4018 11.8069 18.1348 11.8047V11.5947H18.3298H18.5698L18.8398 11.6847C18.9313 11.7226 19.0172 11.7731 19.0948 11.8347C19.214 11.9255 19.3157 12.0374 19.3948 12.1647C19.4647 12.2862 19.5153 12.4177 19.5448 12.5547C19.5597 12.7144 19.5597 12.8751 19.5448 13.0347C19.5448 13.2147 19.5448 13.7247 19.5448 13.7247C19.5276 13.9093 19.5276 14.0951 19.5448 14.2797C19.5712 14.4227 19.6331 14.5568 19.7248 14.6697C19.8263 14.7885 19.9549 14.8811 20.0998 14.9397C20.137 14.9625 20.1678 14.9945 20.1891 15.0326C20.2104 15.0706 20.2217 15.1136 20.2217 15.1572C20.2217 15.2009 20.2104 15.2438 20.1891 15.2819C20.1678 15.32 20.137 15.3519 20.0998 15.3747C19.9552 15.4339 19.8267 15.5264 19.7248 15.6447C19.6336 15.758 19.5718 15.8919 19.5448 16.0347C19.5276 16.2193 19.5276 16.4051 19.5448 16.5897C19.5448 16.5897 19.5448 17.6097 19.5448 17.7597C19.5153 17.8967 19.4647 18.0283 19.3948 18.1497C19.3157 18.2771 19.214 18.3889 19.0948 18.4797C19.0172 18.5413 18.9313 18.5918 18.8398 18.6297L18.5698 18.7197H18.3298H18.1348V18.6747Z" fill="#34495E" stroke="#B9871B" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M14.8647 11.7597C14.5989 11.7774 14.3414 11.8598 14.1147 11.9997C13.9498 12.0961 13.8148 12.2363 13.7247 12.4047C13.6406 12.5628 13.5896 12.7363 13.5747 12.9147C13.5747 13.1047 13.5747 13.2847 13.5747 13.4547V13.2747C13.4997 13.4997 13.4997 13.7397 13.4997 13.9047C13.5095 14.0545 13.5095 14.2049 13.4997 14.3547C13.4853 14.4587 13.455 14.5599 13.4097 14.6547C13.3671 14.7381 13.3114 14.8141 13.2447 14.8797C13.1784 14.9457 13.1026 15.0013 13.0197 15.0447L12.7797 15.1497H12.5547H12.7797L13.0197 15.2547C13.1026 15.2981 13.1784 15.3537 13.2447 15.4197C13.3112 15.4855 13.3669 15.5615 13.4097 15.6447C13.455 15.7395 13.4853 15.8407 13.4997 15.9447C13.5147 16.1294 13.5147 16.315 13.4997 16.4997C13.4997 16.6697 13.4997 16.8847 13.4997 17.1447V17.0097C13.4997 17.1897 13.4997 17.3697 13.4997 17.5497C13.5146 17.7281 13.5656 17.9016 13.6497 18.0597C13.7405 18.2276 13.8753 18.3677 14.0397 18.4647C14.2752 18.5907 14.5377 18.6576 14.8047 18.6597V18.8247H14.6697H14.4297L14.1597 18.7347C14.0681 18.6968 13.9823 18.6463 13.9047 18.5847C13.7854 18.4939 13.6837 18.3821 13.6047 18.2547C13.5347 18.1333 13.4841 18.0017 13.4547 17.8647C13.4398 17.7051 13.4398 17.5444 13.4547 17.3847C13.4547 17.2047 13.4547 16.6947 13.4547 16.6947C13.4718 16.5101 13.4718 16.3243 13.4547 16.1397C13.4282 15.9967 13.3663 15.8626 13.2747 15.7497C13.1731 15.631 13.0445 15.5384 12.8997 15.4797C12.8625 15.4569 12.8317 15.425 12.8103 15.3869C12.789 15.3488 12.7778 15.3059 12.7778 15.2622C12.7778 15.2186 12.789 15.1756 12.8103 15.1375C12.8317 15.0995 12.8625 15.0675 12.8997 15.0447C13.0442 14.9855 13.1727 14.893 13.2747 14.7747C13.3658 14.6615 13.4276 14.5275 13.4547 14.3847C13.4718 14.2001 13.4718 14.0143 13.4547 13.8297C13.4547 13.8297 13.4547 12.8097 13.4547 12.6597C13.4841 12.5227 13.5347 12.3911 13.6047 12.2697C13.6837 12.1423 13.7854 12.0305 13.9047 11.9397C13.9823 11.8781 14.0681 11.8276 14.1597 11.7897L14.4297 11.6997H14.6697H14.8647V11.7597Z" fill="#34495E" stroke="#B9871B" stroke-width="0.8" stroke-miterlimit="10"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbvar.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbvar.svg
new file mode 100644
index 0000000..4086d7a
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-edbvar.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.50031 17.5199C4.25487 17.516 4.02056 17.4168 3.84698 17.2432C3.6734 17.0697 3.57418 16.8353 3.57031 16.5899V4.5899C3.57028 4.34185 3.66778 4.10373 3.84177 3.92693C4.01576 3.75014 4.25229 3.64884 4.50031 3.6449L16.5003 3.5249C16.6237 3.52489 16.7459 3.54943 16.8597 3.5971C16.9735 3.64477 17.0767 3.71462 17.1633 3.80257C17.2498 3.89053 17.318 3.99483 17.3639 4.1094C17.4097 4.22397 17.4323 4.34652 17.4303 4.4699V16.4699C17.4303 16.718 17.3328 16.9561 17.1589 17.1329C16.9849 17.3097 16.7483 17.411 16.5003 17.4149L4.50031 17.5199Z" fill="#FFEFD6"/>
+<path d="M16.5 4.08C16.5995 4.08 16.6948 4.11951 16.7652 4.18984C16.8355 4.26016 16.875 4.35554 16.875 4.455V16.455C16.8711 16.5558 16.8283 16.6512 16.7556 16.7211C16.6829 16.7911 16.5859 16.8301 16.485 16.83L4.5 16.95C4.40054 16.95 4.30516 16.9105 4.23484 16.8402C4.16451 16.7698 4.125 16.6745 4.125 16.575V4.575C4.12871 4.47673 4.16941 4.38349 4.23895 4.31395C4.30849 4.24441 4.40173 4.20371 4.5 4.2L16.5 4.08ZM16.5 3L4.5 3.075C4.10218 3.075 3.72064 3.23304 3.43934 3.51434C3.15804 3.79564 3 4.17718 3 4.575V16.575C3 16.9728 3.15804 17.3544 3.43934 17.6357C3.72064 17.917 4.10218 18.075 4.5 18.075L16.5 18C16.8978 18 17.2794 17.842 17.5607 17.5607C17.842 17.2794 18 16.8978 18 16.5V4.5C18 4.10218 17.842 3.72064 17.5607 3.43934C17.2794 3.15804 16.8978 3 16.5 3Z" fill="#EFA539"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6326 7.45014C17.6355 7.76079 17.386 8.01494 17.0753 8.0178L4.04033 8.1378C3.72969 8.14066 3.47554 7.89115 3.47268 7.5805C3.46982 7.26985 3.71933 7.01571 4.02998 7.01285L17.065 6.89285C17.3756 6.88999 17.6298 7.1395 17.6326 7.45014Z" fill="#EFA539"/>
+<path d="M19.5153 6.13477H7.50031C6.98669 6.13477 6.57031 6.55114 6.57031 7.06477V19.5448C6.57031 20.0584 6.98669 20.4748 7.50031 20.4748H19.5153C20.0289 20.4748 20.4453 20.0584 20.4453 19.5448V7.06477C20.4453 6.55114 20.0289 6.13477 19.5153 6.13477Z" fill="#FFEFD6"/>
+<path d="M19.5 6.70532C19.5995 6.70532 19.6948 6.74483 19.7652 6.81516C19.8355 6.88548 19.875 6.98087 19.875 7.08032V19.5003C19.875 19.5998 19.8355 19.6952 19.7652 19.7655C19.6948 19.8358 19.5995 19.8753 19.5 19.8753H7.5C7.40054 19.8753 7.30516 19.8358 7.23483 19.7655C7.16451 19.6952 7.125 19.5998 7.125 19.5003V7.08032C7.125 6.98087 7.16451 6.88548 7.23483 6.81516C7.30516 6.74483 7.40054 6.70532 7.5 6.70532H19.5ZM19.5 5.58032H7.5C7.10218 5.58032 6.72064 5.73836 6.43934 6.01966C6.15804 6.30097 6 6.6825 6 7.08032V19.5003C6 19.8981 6.15804 20.2797 6.43934 20.561C6.72064 20.8423 7.10218 21.0003 7.5 21.0003H19.5C19.8978 21.0003 20.2794 20.8423 20.5607 20.561C20.842 20.2797 21 19.8981 21 19.5003V7.08032C21 6.6825 20.842 6.30097 20.5607 6.01966C20.2794 5.73836 19.8978 5.58032 19.5 5.58032Z" fill="#EFA539"/>
+<path d="M10.8606 18.81H10.1706C9.81988 18.2904 9.54229 17.7252 9.34556 17.13C9.16288 16.5833 9.06672 16.0114 9.06056 15.435C9.05893 14.7732 9.18103 14.1169 9.42056 13.5C9.61196 12.97 9.86895 12.4661 10.1856 12H10.8606C10.5836 12.5983 10.3627 13.221 10.2006 13.86C10.0122 14.7704 10.0122 15.7096 10.2006 16.62C10.2697 17.0124 10.37 17.3986 10.5006 17.775C10.5006 18.015 10.6206 18.36 10.8606 18.81Z" fill="#AB6A0C"/>
+<path d="M11.0996 18L12.8546 15.315L11.2646 12.855H12.4796L13.4996 14.505L14.5046 12.855H15.7046L14.1296 15.345L15.8846 18H14.6396L13.4996 16.215L12.3446 18H11.0996Z" fill="#AB6A0C"/>
+<path d="M16.1406 18.81C16.3306 18.39 16.4656 18.07 16.5456 17.85C16.6349 17.5994 16.71 17.344 16.7706 17.085C16.8349 16.8128 16.885 16.5374 16.9206 16.26C16.9376 15.9903 16.9376 15.7197 16.9206 15.45C16.9237 14.9147 16.8633 14.381 16.7406 13.86C16.5989 13.2227 16.398 12.6 16.1406 12H16.8156C17.1638 12.4941 17.4415 13.0343 17.6406 13.605C17.8365 14.1592 17.9379 14.7423 17.9406 15.33C17.9359 15.8627 17.8602 16.3923 17.7156 16.905C17.524 17.5664 17.2305 18.1939 16.8456 18.765L16.1406 18.81Z" fill="#AB6A0C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0252 10.4473H7.03516V9.32227H20.0252V10.4473Z" fill="#EFA539"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-event_trigger.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-event_trigger.svg
new file mode 100644
index 0000000..f0e46ab
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-event_trigger.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6992 4.0647H5.69922C4.87079 4.0647 4.19922 4.73627 4.19922 5.5647V14.5647C4.19922 15.3931 4.87079 16.0647 5.69922 16.0647H14.6992C15.5276 16.0647 16.1992 15.3931 16.1992 14.5647V5.5647C16.1992 4.73627 15.5276 4.0647 14.6992 4.0647Z" fill="#EDFFFD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.69922 4.6272C5.45058 4.6272 5.21212 4.72597 5.03631 4.90178C4.86049 5.0776 4.76172 5.31606 4.76172 5.5647V14.5647C4.76172 14.8133 4.86049 15.0518 5.03631 15.2276C5.21212 15.4034 5.45058 15.5022 5.69922 15.5022H14.6992C15.0099 15.5022 15.2617 15.754 15.2617 16.0647C15.2617 16.3754 15.0099 16.6272 14.6992 16.6272H5.69922C5.15221 16.6272 4.6276 16.4099 4.24081 16.0231C3.85402 15.6363 3.63672 15.1117 3.63672 14.5647V5.5647C3.63672 5.01769 3.85402 4.49308 4.24081 4.10629C4.6276 3.7195 5.15221 3.5022 5.69922 3.5022H14.6992C15.2462 3.5022 15.7708 3.7195 16.1576 4.10629C16.5444 4.49308 16.7617 5.01769 16.7617 5.5647V8.5647C16.7617 8.87536 16.5099 9.1272 16.1992 9.1272C15.8886 9.1272 15.6367 8.87536 15.6367 8.5647V5.5647C15.6367 5.31606 15.5379 5.0776 15.3621 4.90178C15.1863 4.72597 14.9479 4.6272 14.6992 4.6272H5.69922Z" fill="#2F91A3"/>
+<path d="M17.5488 6.6145H8.54883C7.7204 6.6145 7.04883 7.28607 7.04883 8.1145V17.1145C7.04883 17.9429 7.7204 18.6145 8.54883 18.6145H17.5488C18.3773 18.6145 19.0488 17.9429 19.0488 17.1145V8.1145C19.0488 7.28607 18.3773 6.6145 17.5488 6.6145Z" fill="#EDFFFD"/>
+<path d="M19.7982 18.66L17.5332 20.835L17.6082 16.395L19.7982 18.66Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4017 15.8718C17.6134 15.7883 17.8545 15.8405 18.0126 16.004L20.2026 18.269C20.3065 18.3765 20.3634 18.521 20.3606 18.6705C20.3578 18.82 20.2957 18.9622 20.1878 19.0658L17.9228 21.2408C17.759 21.3981 17.5165 21.4414 17.3083 21.3506C17.1001 21.2598 16.9669 21.0527 16.9708 20.8255L17.0458 16.3855C17.0496 16.1581 17.1901 15.9553 17.4017 15.8718ZM18.1477 17.7622L18.1184 19.4932L19.0015 18.6453L18.1477 17.7622Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.54883 7.177C8.30019 7.177 8.06173 7.27577 7.88592 7.45159C7.7101 7.62741 7.61133 7.86586 7.61133 8.1145V17.1145C7.61133 17.3631 7.7101 17.6016 7.88592 17.7774C8.06173 17.9532 8.30019 18.052 8.54883 18.052H17.5488C17.8595 18.052 18.1113 18.3038 18.1113 18.6145C18.1113 18.9252 17.8595 19.177 17.5488 19.177H8.54883C8.00182 19.177 7.47721 18.9597 7.09042 18.5729C6.70363 18.1861 6.48633 17.6615 6.48633 17.1145V8.1145C6.48633 7.56749 6.70363 7.04289 7.09042 6.65609C7.47721 6.2693 8.00182 6.052 8.54883 6.052H17.5488C18.0958 6.052 18.6204 6.2693 19.0072 6.65609C19.394 7.04289 19.6113 7.56749 19.6113 8.1145V11.1145C19.6113 11.4252 19.3595 11.677 19.0488 11.677C18.7382 11.677 18.4863 11.4252 18.4863 11.1145V8.1145C18.4863 7.86586 18.3876 7.62741 18.2117 7.45159C18.0359 7.27577 17.7975 7.177 17.5488 7.177H8.54883Z" fill="#2F91A3"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-extension.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-extension.svg
new file mode 100644
index 0000000..4272032
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-extension.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.67879 17.4448C7.55666 17.4429 7.43611 17.4169 7.32402 17.3683C7.21193 17.3198 7.11051 17.2496 7.02554 17.1619C6.94057 17.0741 6.87372 16.9705 6.82881 16.8569C6.7839 16.7433 6.76181 16.622 6.76379 16.4998V4.49982C6.76379 4.25317 6.86178 4.01662 7.03618 3.84221C7.21059 3.66781 7.44714 3.56982 7.69379 3.56982H16.1088C16.3554 3.56982 16.592 3.66781 16.7664 3.84221C16.9408 4.01662 17.0388 4.25317 17.0388 4.49982V12.9748L12.5388 17.4748L7.67879 17.4448Z" fill="#C9EDD2"/>
+<path d="M16.0947 4.125C16.1469 4.11836 16.1999 4.12324 16.25 4.1393C16.3001 4.15536 16.3461 4.18222 16.3847 4.21797C16.4233 4.25372 16.4536 4.2975 16.4735 4.34623C16.4934 4.39495 16.5023 4.44744 16.4997 4.5V12.75L12.3297 16.875H7.67969C7.63112 16.875 7.58305 16.8653 7.53837 16.8462C7.49368 16.8272 7.45331 16.7993 7.41968 16.7643C7.38604 16.7293 7.35985 16.6878 7.34266 16.6424C7.32548 16.597 7.31766 16.5485 7.31969 16.5V4.5C7.31969 4.40452 7.35762 4.31295 7.42513 4.24544C7.49264 4.17793 7.58421 4.14 7.67969 4.14H16.0947V4.125ZM16.0947 3.015H7.67969C7.28186 3.015 6.90033 3.17304 6.61903 3.45434C6.33772 3.73564 6.17969 4.11718 6.17969 4.515V16.515C6.17969 16.9128 6.33772 17.2944 6.61903 17.5757C6.90033 17.857 7.28186 18.015 7.67969 18.015H12.7947L17.5797 13.23V4.5C17.5797 4.10218 17.4217 3.72064 17.1403 3.43934C16.859 3.15804 16.4775 3 16.0797 3L16.0947 3.015Z" fill="#1A6016"/>
+<path d="M17.2494 12.03L11.9844 12.06V18" stroke="#1A6016" stroke-width="0.75" stroke-linejoin="round"/>
+<path d="M12.4349 6.94482H3.41992V9.95982H12.4349V6.94482Z" fill="#C9EDD2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.85742 6.94482C2.85742 6.63416 3.10926 6.38232 3.41992 6.38232H12.4349C12.7456 6.38232 12.9974 6.63416 12.9974 6.94482V9.95982C12.9974 10.2705 12.7456 10.5223 12.4349 10.5223H3.41992C3.10926 10.5223 2.85742 10.2705 2.85742 9.95982V6.94482ZM3.98242 7.50732V9.39732H11.8724V7.50732H3.98242Z" fill="#1A6016"/>
+<path d="M10.6788 20.4448C10.5567 20.4429 10.4361 20.4169 10.324 20.3683C10.2119 20.3198 10.1105 20.2496 10.0255 20.1619C9.94057 20.0741 9.87372 19.9705 9.82881 19.8569C9.7839 19.7433 9.76181 19.622 9.76379 19.4998V7.49982C9.76379 7.25317 9.86178 7.01662 10.0362 6.84222C10.2106 6.66781 10.4471 6.56982 10.6938 6.56982H19.1088C19.3554 6.56982 19.592 6.66781 19.7664 6.84222C19.9408 7.01662 20.0388 7.25317 20.0388 7.49982V15.9898L15.5388 20.4898L10.6788 20.4448Z" fill="#C9EDD2"/>
+<path d="M19.0947 7.125C19.1469 7.11836 19.1999 7.12324 19.25 7.1393C19.3001 7.15536 19.3461 7.18221 19.3847 7.21797C19.4233 7.25372 19.4536 7.2975 19.4735 7.34623C19.4934 7.39495 19.5023 7.44744 19.4997 7.5V15.75L15.3747 19.875H10.6797C10.6311 19.875 10.5831 19.8653 10.5384 19.8462C10.4937 19.8272 10.4533 19.7993 10.4197 19.7643C10.386 19.7293 10.3598 19.6878 10.3427 19.6424C10.3255 19.597 10.3177 19.5485 10.3197 19.5V7.5C10.3197 7.40452 10.3576 7.31295 10.4251 7.24544C10.4926 7.17793 10.5842 7.14 10.6797 7.14H19.0947V7.125ZM19.0947 6.015H10.6797C10.2819 6.015 9.90033 6.17304 9.61903 6.45434C9.33772 6.73564 9.17969 7.11718 9.17969 7.515V19.515C9.17969 19.9128 9.33772 20.2944 9.61903 20.5757C9.90033 20.857 10.2819 21.015 10.6797 21.015H15.7947L20.5797 16.23V7.5C20.5797 7.10218 20.4217 6.72064 20.1403 6.43934C19.859 6.15804 19.4775 6 19.0797 6L19.0947 6.015Z" fill="#1A6016"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9801 14.31L20.2451 14.28L20.2536 15.78L15.7344 15.8058V21H14.2344V15.06C14.2344 14.6475 14.5676 14.3124 14.9801 14.31Z" fill="#1A6016"/>
+<path d="M15.4349 9.94482H6.41992V12.9598H15.4349V9.94482Z" fill="#C9EDD2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.85742 9.94482C5.85742 9.63416 6.10926 9.38232 6.41992 9.38232H15.4349C15.7456 9.38232 15.9974 9.63416 15.9974 9.94482V12.9598C15.9974 13.2705 15.7456 13.5223 15.4349 13.5223H6.41992C6.10926 13.5223 5.85742 13.2705 5.85742 12.9598V9.94482ZM6.98242 10.5073V12.3973H14.8724V10.5073H6.98242Z" fill="#1A6016"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_data_wrapper-1.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_data_wrapper-1.svg
new file mode 100644
index 0000000..55ba0bb
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_data_wrapper-1.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7803 2.84467C21.0732 3.13756 21.0732 3.61244 20.7803 3.90533L17.7803 6.90533C17.4874 7.19822 17.0126 7.19822 16.7197 6.90533C16.4268 6.61244 16.4268 6.13756 16.7197 5.84467L19.7197 2.84467C20.0126 2.55178 20.4874 2.55178 20.7803 2.84467Z" fill="#AC9230"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 3.375C16.5 2.96079 16.8358 2.625 17.25 2.625H20.25C20.6642 2.625 21 2.96079 21 3.375C21 3.78921 20.6642 4.125 20.25 4.125H17.25C16.8358 4.125 16.5 3.78921 16.5 3.375Z" fill="#AC9230"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.25 2.625C20.6642 2.625 21 2.96079 21 3.375V6.375C21 6.78921 20.6642 7.125 20.25 7.125C19.8358 7.125 19.5 6.78921 19.5 6.375V3.375C19.5 2.96079 19.8358 2.625 20.25 2.625Z" fill="#AC9230"/>
+<path d="M19.23 9.375C19.3961 9.15928 19.4905 8.89704 19.5 8.625C19.5 6.975 15.81 5.625 11.25 5.625C6.69005 5.625 3.00005 6.975 3.00005 8.625C3.00963 8.89704 3.10403 9.15928 3.27005 9.375C3.09431 9.58541 2.99805 9.85085 2.99805 10.125C2.99805 10.3991 3.09431 10.6646 3.27005 10.875C3.09431 11.0854 2.99805 11.3509 2.99805 11.625C2.99805 11.8991 3.09431 12.1646 3.27005 12.375C3.09431 12.5854 2.99805 12.8509 2.99805 13.125C2.99805 13.3991 3.09431 13.6646 3.27005 13.875C3.09431 14.0854 2.99805 14.3509 2.99805 14.625C2.99805 14.8991 3.09431 15.1646 3.27005 15.375C3.09431 15.5854 2.99805 15.8509 2.99805 16.125C2.99805 16.3991 3.09431 16.6646 3.27005 16.875C3.10403 17.0907 3.00963 17.353 3.00005 17.625C3.00005 19.275 6.69005 20.625 11.25 20.625C15.81 20.625 19.5 19.275 19.5 17.625C19.4905 17.353 19.3961 17.0907 19.23 16.875C19.4058 16.6646 19.5021 16.3991 19.5021 16.125C19.5021 15.8509 19.4058 15.5854 19.23 15.375C19.4058 15.1646 19.5021 14.8991 19.5021 14.625C19.5021 14.3509 19.4058 14.0854 19.23 13.875C19.4058 13.6646 19.5021 13.3991 19.5021 13.125C19.5021 12.8509 19.4058 12.5854 19.23 12.375C19.4058 12.1646 19.5021 11.8991 19.5021 11.625C19.5021 11.3509 19.4058 11.0854 19.23 10.875C19.4058 10.6646 19.5021 10.3991 19.5021 10.125C19.5021 9.85085 19.4058 9.58541 19.23 9.375Z" fill="#F2F2F2"/>
+<path d="M11.25 11.625C15.8063 11.625 19.5 10.2819 19.5 8.625C19.5 6.96815 15.8063 5.625 11.25 5.625C6.69365 5.625 3 6.96815 3 8.625C3 10.2819 6.69365 11.625 11.25 11.625Z" fill="#AC9230"/>
+<path d="M11.25 19.125C7.41 19.125 4.185 18.165 3.27 16.875C3.10398 17.0907 3.00958 17.353 3 17.625C3 19.275 6.69 20.625 11.25 20.625C15.81 20.625 19.5 19.275 19.5 17.625C19.4904 17.353 19.396 17.0907 19.23 16.875C18.315 18.165 15.105 19.125 11.25 19.125Z" fill="#AC9230"/>
+<path d="M11.25 13.125C7.41 13.125 4.185 12.165 3.27 10.875C3.10398 11.0907 3.00958 11.353 3 11.625C3 13.275 6.69 14.625 11.25 14.625C15.81 14.625 19.5 13.275 19.5 11.625C19.4904 11.353 19.396 11.0907 19.23 10.875C18.315 12.165 15.105 13.125 11.25 13.125Z" fill="#AC9230"/>
+<path d="M11.25 16.125C7.41 16.125 4.185 15.165 3.27 13.875C3.10398 14.0907 3.00958 14.353 3 14.625C3 16.275 6.69 17.625 11.25 17.625C15.81 17.625 19.5 16.275 19.5 14.625C19.4904 14.353 19.396 14.0907 19.23 13.875C18.315 15.165 15.105 16.125 11.25 16.125Z" fill="#AC9230"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_server.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_server.svg
new file mode 100644
index 0000000..e9573e2
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_server.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8749 4.72485H5.48992C4.5538 4.72485 3.79492 5.48373 3.79492 6.41985V7.67985C3.79492 8.61598 4.5538 9.37485 5.48992 9.37485H16.8749C17.811 9.37485 18.5699 8.61598 18.5699 7.67985V6.41985C18.5699 5.48373 17.811 4.72485 16.8749 4.72485Z" fill="#F2F2F2"/>
+<path d="M16.8902 5.29517C17.1886 5.29517 17.4747 5.41369 17.6857 5.62467C17.8967 5.83565 18.0152 6.1218 18.0152 6.42017V7.69517C18.0152 7.99354 17.8967 8.27968 17.6857 8.49066C17.4747 8.70164 17.1886 8.82017 16.8902 8.82017H5.49023C5.19187 8.82017 4.90572 8.70164 4.69474 8.49066C4.48376 8.27968 4.36523 7.99354 4.36523 7.69517V6.42017C4.36523 6.1218 4.48376 5.83565 4.69474 5.62467C4.90572 5.41369 5.19187 5.29517 5.49023 5.29517H16.8902ZM16.8902 4.17017H5.49023C4.8935 4.17017 4.3212 4.40722 3.89924 4.82918C3.47729 5.25113 3.24023 5.82343 3.24023 6.42017V7.69517C3.24023 8.2919 3.47729 8.8642 3.89924 9.28616C4.3212 9.70811 4.8935 9.94517 5.49023 9.94517H16.8902C17.487 9.94517 18.0593 9.70811 18.4812 9.28616C18.9032 8.8642 19.1402 8.2919 19.1402 7.69517V6.42017C19.1402 5.82343 18.9032 5.25113 18.4812 4.82918C18.0593 4.40722 17.487 4.17017 16.8902 4.17017Z" fill="#7B7B97"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5957 6.48706H8.7457V7.61206H5.5957V6.48706Z" fill="#7B7B97"/>
+<path d="M16.8749 10.5H5.48992C4.5538 10.5 3.79492 11.2589 3.79492 12.195V13.455C3.79492 14.3911 4.5538 15.15 5.48992 15.15H16.8749C17.811 15.15 18.5699 14.3911 18.5699 13.455V12.195C18.5699 11.2589 17.811 10.5 16.8749 10.5Z" fill="#F2F2F2"/>
+<path d="M16.8902 11.0696C17.1886 11.0696 17.4747 11.1881 17.6857 11.3991C17.8967 11.6101 18.0152 11.8962 18.0152 12.1946V13.4996C18.0152 13.798 17.8967 14.0841 17.6857 14.2951C17.4747 14.5061 17.1886 14.6246 16.8902 14.6246H5.49023C5.19187 14.6246 4.90572 14.5061 4.69474 14.2951C4.48376 14.0841 4.36523 13.798 4.36523 13.4996V12.1946C4.36523 11.8962 4.48376 11.6101 4.69474 11.3991C4.90572 11.1881 5.19187 11.0696 5.49023 11.0696H16.8902ZM16.8902 9.94458H5.49023C4.8935 9.94458 4.3212 10.1816 3.89924 10.6036C3.47729 11.0255 3.24023 11.5978 3.24023 12.1946V13.4996C3.24023 14.0963 3.47729 14.6686 3.89924 15.0906C4.3212 15.5125 4.8935 15.7496 5.49023 15.7496H16.8902C17.487 15.7496 18.0593 15.5125 18.4812 15.0906C18.9032 14.6686 19.1402 14.0963 19.1402 13.4996V12.1946C19.1402 11.5978 18.9032 11.0255 18.4812 10.6036C18.0593 10.1816 17.487 9.94458 16.8902 9.94458Z" fill="#7B7B97"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5957 12.2622H8.7457V13.3872H5.5957V12.2622Z" fill="#7B7B97"/>
+<path d="M5.49081 16.2749H16.8908C17.1147 16.2768 17.336 16.3231 17.5418 16.4111C17.7477 16.499 17.9342 16.6268 18.0904 16.7872C18.2466 16.9476 18.3694 17.1374 18.4519 17.3455C18.5344 17.5536 18.5748 17.7761 18.5708 17.9999V19.2749C18.5768 19.4993 18.5378 19.7226 18.4561 19.9316C18.3743 20.1407 18.2516 20.3312 18.0949 20.492C17.9383 20.6528 17.7511 20.7806 17.5443 20.8679C17.3375 20.9551 17.1153 21 16.8908 20.9999H5.49081C5.27019 20.9999 5.05173 20.9564 4.84791 20.872C4.64408 20.7876 4.45888 20.6638 4.30287 20.5078C4.14687 20.3518 4.02312 20.1666 3.9387 19.9628C3.85427 19.759 3.81081 19.5405 3.81081 19.3199V17.9999C3.80684 17.7761 3.84726 17.5536 3.92972 17.3455C4.01218 17.1374 4.13507 16.9476 4.29127 16.7872C4.44747 16.6268 4.6339 16.499 4.83978 16.4111C5.04567 16.3231 5.26694 16.2768 5.49081 16.2749Z" fill="#F2F2F2"/>
+<path d="M16.8902 16.845C17.0393 16.8469 17.1864 16.8785 17.3232 16.9377C17.4599 16.997 17.5835 17.0829 17.6868 17.1904C17.79 17.2978 17.8709 17.4247 17.9248 17.5637C17.9786 17.7027 18.0042 17.851 18.0002 18V19.275C18.0002 19.5734 17.8817 19.8595 17.6707 20.0705C17.4597 20.2815 17.1736 20.4 16.8752 20.4H5.49023C5.19187 20.4 4.90572 20.2815 4.69474 20.0705C4.48376 19.8595 4.36523 19.5734 4.36523 19.275V18C4.36523 17.7016 4.48376 17.4155 4.69474 17.2045C4.90572 16.9935 5.19187 16.875 5.49023 16.875H16.8902V16.845ZM16.8902 15.75H5.49023C4.8935 15.75 4.3212 15.9871 3.89924 16.409C3.47729 16.831 3.24023 17.4033 3.24023 18V19.275C3.24023 19.8717 3.47729 20.444 3.89924 20.866C4.3212 21.2879 4.8935 21.525 5.49023 21.525H16.8902C17.487 21.525 18.0593 21.2879 18.4812 20.866C18.9032 20.444 19.1402 19.8717 19.1402 19.275V18C19.1402 17.4033 18.9032 16.831 18.4812 16.409C18.0593 15.9871 17.487 15.75 16.8902 15.75Z" fill="#7B7B97"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5957 18.0374H8.7457V19.1624H5.5957V18.0374Z" fill="#7B7B97"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.6924 2.57222C20.912 2.79189 20.912 3.14805 20.6924 3.36772L18.6224 5.43772C18.4027 5.65739 18.0465 5.65739 17.8269 5.43772C17.6072 5.21805 17.6072 4.86189 17.8269 4.64222L19.8969 2.57222C20.1165 2.35255 20.4727 2.35255 20.6924 2.57222Z" fill="#7B7B97"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1973 2.50488C17.1973 2.19422 17.4491 1.94238 17.7598 1.94238H20.7598C21.0704 1.94238 21.3223 2.19422 21.3223 2.50488C21.3223 2.81554 21.0704 3.06738 20.7598 3.06738H17.7598C17.4491 3.06738 17.1973 2.81554 17.1973 2.50488Z" fill="#7B7B97"/>
+<path d="M20.7598 5.50488V2.50488" stroke="#7B7B97" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_table.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_table.svg
new file mode 100644
index 0000000..ea8450f
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-foreign_table.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5441 4.97974H5.39914C4.96836 4.97974 4.61914 5.32895 4.61914 5.75974V15.5397C4.61914 15.9705 4.96836 16.3197 5.39914 16.3197H13.5441C13.9749 16.3197 14.3241 15.9705 14.3241 15.5397V5.75974C14.3241 5.32895 13.9749 4.97974 13.5441 4.97974Z" fill="#F2F2F2"/>
+<path d="M13.4995 5.53491C13.5591 5.53491 13.6164 5.55862 13.6586 5.60081C13.7007 5.64301 13.7245 5.70024 13.7245 5.75991V15.5249C13.7245 15.5846 13.7007 15.6418 13.6586 15.684C13.6164 15.7262 13.5591 15.7499 13.4995 15.7499H5.41445C5.35478 15.7499 5.29755 15.7262 5.25535 15.684C5.21316 15.6418 5.18945 15.5846 5.18945 15.5249V5.75991C5.18945 5.70024 5.21316 5.64301 5.25535 5.60081C5.29755 5.55862 5.35478 5.53491 5.41445 5.53491H13.4995ZM13.4995 4.40991H5.41445C5.05641 4.40991 4.71303 4.55214 4.45986 4.80532C4.20668 5.05849 4.06445 5.40187 4.06445 5.75991V15.5249C4.06445 15.883 4.20668 16.2263 4.45986 16.4795C4.71303 16.7327 5.05641 16.8749 5.41445 16.8749H13.4995C13.8575 16.8749 14.2009 16.7327 14.454 16.4795C14.7072 16.2263 14.8495 15.883 14.8495 15.5249V5.75991C14.8495 5.40187 14.7072 5.05849 14.454 4.80532C14.2009 4.55214 13.8575 4.40991 13.4995 4.40991Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3322 4.92745C20.5519 5.14712 20.5519 5.50327 20.3322 5.72294L17.9622 8.09294C17.7425 8.31261 17.3864 8.31261 17.1667 8.09294C16.947 7.87327 16.947 7.51712 17.1667 7.29745L19.5367 4.92745C19.7564 4.70778 20.1125 4.70778 20.3322 4.92745Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3711 5.3252C16.3711 5.01454 16.6229 4.7627 16.9336 4.7627H19.9336C20.2443 4.7627 20.4961 5.01454 20.4961 5.3252C20.4961 5.63586 20.2443 5.8877 19.9336 5.8877H16.9336C16.6229 5.8877 16.3711 5.63586 16.3711 5.3252Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9336 4.7627C20.2443 4.7627 20.4961 5.01454 20.4961 5.3252V8.3252C20.4961 8.63586 20.2443 8.8877 19.9336 8.8877C19.6229 8.8877 19.3711 8.63586 19.3711 8.3252V5.3252C19.3711 5.01454 19.6229 4.7627 19.9336 4.7627Z" fill="#2195E7"/>
+<path d="M8.655 19.0198C8.44933 19.0159 8.25316 18.9325 8.10771 18.7871C7.96226 18.6416 7.87885 18.4455 7.875 18.2398V11.7898H17.58V18.2398C17.5762 18.4455 17.4927 18.6416 17.3473 18.7871C17.2018 18.9325 17.0057 19.0159 16.8 19.0198H8.655Z" fill="#F2F2F2"/>
+<path d="M17.0097 12.3452V18.2252C17.0097 18.2849 16.986 18.3421 16.9438 18.3843C16.9016 18.4265 16.8444 18.4502 16.7847 18.4502H8.65469C8.59501 18.4502 8.53778 18.4265 8.49559 18.3843C8.45339 18.3421 8.42969 18.2849 8.42969 18.2252V12.3452H17.0097ZM18.1347 11.2202H7.30469V18.2252C7.30469 18.4025 7.33961 18.578 7.40745 18.7418C7.47529 18.9056 7.57473 19.0544 7.70009 19.1798C7.82545 19.3052 7.97428 19.4046 8.13806 19.4725C8.30185 19.5403 8.4774 19.5752 8.65469 19.5752H16.7847C17.1427 19.5752 17.4861 19.433 17.7393 19.1798C17.9925 18.9266 18.1347 18.5833 18.1347 18.2252V11.2202Z" fill="#2195E7"/>
+<path d="M7.875 11.7748V8.47482C7.87885 8.26916 7.96226 8.07299 8.10771 7.92754C8.25316 7.78208 8.44933 7.69867 8.655 7.69482H16.785C16.9907 7.69867 17.1868 7.78208 17.3323 7.92754C17.4777 8.07299 17.5612 8.26916 17.565 8.47482V11.7748H7.875Z" fill="#F2F2F2"/>
+<path d="M16.7847 8.25C16.8444 8.25 16.9016 8.27371 16.9438 8.3159C16.986 8.3581 17.0097 8.41533 17.0097 8.475V11.22H8.42969V8.475C8.42969 8.41533 8.45339 8.3581 8.49559 8.3159C8.53778 8.27371 8.59501 8.25 8.65469 8.25H16.7847ZM16.7847 7.125H8.65469C8.29665 7.125 7.95327 7.26723 7.70009 7.52041C7.44692 7.77358 7.30469 8.11696 7.30469 8.475V12.345H18.1347V8.475C18.1347 8.11696 17.9925 7.77358 17.7393 7.52041C17.4861 7.26723 17.1427 7.125 16.7847 7.125Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.994 15.8921H8.45898V14.7671H16.994V15.8921Z" fill="#C1CBD5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2617 18.4485L12.2767 12.3735L13.4017 12.3763L13.3867 18.4513L12.2617 18.4485Z" fill="#C1CBD5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2617 11.2172L12.2767 8.1272L13.4017 8.13266L13.3867 11.2227L12.2617 11.2172Z" fill="#2195E7"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_configuration.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_configuration.svg
new file mode 100644
index 0000000..9fe6858
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_configuration.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.69 18.1952C6.40754 18.1952 6.13666 18.083 5.93693 17.8832C5.7372 17.6835 5.625 17.4126 5.625 17.1302V3.87018C5.625 3.58772 5.7372 3.31683 5.93693 3.11711C6.13666 2.91738 6.40754 2.80518 6.69 2.80518H12L16.89 7.69518V17.1152C16.89 17.395 16.7799 17.6637 16.5834 17.863C16.3869 18.0623 16.1198 18.1762 15.84 18.1802L6.69 18.1952Z" fill="#F2F2F2"/>
+<path d="M11.8053 3.375L16.3053 7.875V17.07C16.3053 17.135 16.2925 17.1994 16.2676 17.2594C16.2428 17.3195 16.2063 17.3741 16.1603 17.42C16.1144 17.466 16.0598 17.5024 15.9997 17.5273C15.9397 17.5522 15.8753 17.565 15.8103 17.565H6.69031C6.55903 17.565 6.43312 17.5128 6.34029 17.42C6.24746 17.3272 6.19531 17.2013 6.19531 17.07V3.87C6.19531 3.73872 6.24746 3.61281 6.34029 3.51998C6.43312 3.42715 6.55903 3.375 6.69031 3.375H11.8053ZM12.2703 2.25H6.69031C6.26066 2.25 5.84861 2.42068 5.5448 2.72449C5.24099 3.0283 5.07031 3.44035 5.07031 3.87V17.13C5.07031 17.5597 5.24099 17.9717 5.5448 18.2755C5.84861 18.5793 6.26066 18.75 6.69031 18.75H15.8703C16.3 18.75 16.712 18.5793 17.0158 18.2755C17.3196 17.9717 17.4903 17.5597 17.4903 17.13V7.5L12.2703 2.25Z" fill="#737373"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9473 8.1675V2.25H10.8223V8.73C10.8223 9.04066 11.0741 9.2925 11.3848 9.2925H16.8748V8.1675H11.9473Z" fill="#737373"/>
+<path d="M9.69 21.1952C9.40754 21.1952 9.13666 21.083 8.93693 20.8832C8.73721 20.6835 8.625 20.4126 8.625 20.1302V6.87018C8.625 6.58772 8.73721 6.31683 8.93693 6.11711C9.13666 5.91738 9.40754 5.80518 9.69 5.80518H15L19.89 10.6952V20.1152C19.89 20.395 19.7799 20.6637 19.5834 20.863C19.3869 21.0623 19.1198 21.1762 18.84 21.1802L9.69 21.1952Z" fill="#F2F2F2"/>
+<path d="M14.8053 6.375L19.3053 10.875V20.07C19.3053 20.2013 19.2532 20.3272 19.1603 20.42C19.0675 20.5128 18.9416 20.565 18.8103 20.565H9.69031C9.55903 20.565 9.43312 20.5128 9.34029 20.42C9.24746 20.3272 9.19531 20.2013 9.19531 20.07V6.87C9.19531 6.73872 9.24746 6.61281 9.34029 6.51998C9.43312 6.42715 9.55903 6.375 9.69031 6.375H14.8053ZM15.2703 5.25H9.69031C9.26066 5.25 8.84861 5.42068 8.5448 5.72449C8.24099 6.0283 8.07031 6.44035 8.07031 6.87V20.13C8.07031 20.5597 8.24099 20.9717 8.5448 21.2755C8.84861 21.5793 9.26066 21.75 9.69031 21.75H18.8703C19.3 21.75 19.712 21.5793 20.0158 21.2755C20.3196 20.9717 20.4903 20.5597 20.4903 20.13V10.5L15.2703 5.25Z" fill="#737373"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9473 11.1675V5.25H13.8223V11.73C13.8223 12.0407 14.0741 12.2925 14.3848 12.2925H19.8748V11.1675H14.9473Z" fill="#737373"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.82 16.5003C14.823 16.3834 14.7908 16.2683 14.7277 16.1698C14.6646 16.0713 14.5734 15.994 14.4659 15.9479C14.3584 15.9018 14.2396 15.8889 14.1247 15.911C14.0099 15.9331 13.9043 15.9891 13.8216 16.0719C13.7388 16.1546 13.6828 16.2602 13.6607 16.375C13.6386 16.4899 13.6515 16.6087 13.6976 16.7162C13.7437 16.8237 13.821 16.9149 13.9195 16.978C14.018 17.0411 14.1331 17.0733 14.25 17.0703C14.3988 17.063 14.5396 17.0007 14.645 16.8953C14.7504 16.7899 14.8127 16.6491 14.82 16.5003ZM17.49 15.9153L16.68 15.7653C16.6338 15.5912 16.5631 15.4246 16.47 15.2703L16.95 14.5653C16.9744 14.5358 16.9877 14.4986 16.9877 14.4603C16.9877 14.422 16.9744 14.3849 16.95 14.3553L16.38 13.7853C16.3505 13.7609 16.3133 13.7476 16.275 13.7476C16.2367 13.7476 16.1996 13.7609 16.17 13.7853L15.48 14.2653C15.3298 14.1671 15.1687 14.0865 15 14.0253L14.85 13.2153C14.8376 13.177 14.8137 13.1434 14.7815 13.1192C14.7492 13.0951 14.7103 13.0815 14.67 13.0803H13.815C13.7767 13.0823 13.7401 13.0965 13.7104 13.1208C13.6807 13.1451 13.6596 13.1782 13.65 13.2153L13.5 14.0553C13.3319 14.0983 13.1705 14.1639 13.02 14.2503L12.33 13.7853C12.302 13.7578 12.2643 13.7424 12.225 13.7424C12.1858 13.7424 12.1481 13.7578 12.12 13.7853L11.55 14.3553C11.5256 14.3849 11.5123 14.422 11.5123 14.4603C11.5123 14.4986 11.5256 14.5358 11.55 14.5653L12.015 15.2403C11.935 15.399 11.8697 15.5647 11.82 15.7353L11.01 15.8853C10.9716 15.8924 10.937 15.9129 10.9123 15.9431C10.8876 15.9733 10.8744 16.0113 10.875 16.0503V16.8903C10.8748 16.9276 10.8886 16.9637 10.9135 16.9914C10.9385 17.0192 10.9729 17.0366 11.01 17.0403L11.82 17.2053C11.8613 17.3764 11.9324 17.5389 12.03 17.6853L11.565 18.3603C11.5375 18.3884 11.5221 18.4261 11.5221 18.4653C11.5221 18.5046 11.5375 18.5423 11.565 18.5703L12.135 19.1553C12.1646 19.1797 12.2017 19.193 12.24 19.193C12.2783 19.193 12.3155 19.1797 12.345 19.1553L13.02 18.6903C13.1689 18.7834 13.3306 18.8541 13.5 18.9003L13.65 19.7403C13.6571 19.7787 13.6776 19.8133 13.7078 19.838C13.738 19.8628 13.776 19.876 13.815 19.8753H14.64C14.6809 19.8766 14.721 19.8639 14.7537 19.8394C14.7864 19.8149 14.8098 19.7799 14.82 19.7403L14.97 18.9303L15.465 18.7503L16.14 19.2003C16.1696 19.2247 16.2067 19.238 16.245 19.238C16.2833 19.238 16.3205 19.2247 16.35 19.2003L16.92 18.6153C16.9475 18.5873 16.9629 18.5496 16.9629 18.5103C16.9629 18.4711 16.9475 18.4334 16.92 18.4053L16.5 17.6853C16.5976 17.5389 16.6687 17.3764 16.71 17.2053L17.52 17.0403C17.5571 17.0366 17.5916 17.0192 17.6165 16.9914C17.6415 16.9637 17.6552 16.9276 17.655 16.8903V16.0503C17.6557 16.0113 17.6425 15.9733 17.6177 15.9431C17.593 15.9129 17.5584 15.8924 17.52 15.8853L17.49 15.9153ZM14.25 17.8953C13.9669 17.8983 13.6894 17.8169 13.4527 17.6614C13.2161 17.506 13.0312 17.2836 12.9214 17.0226C12.8117 16.7616 12.7823 16.4739 12.8368 16.1961C12.8913 15.9182 13.0273 15.663 13.2275 15.4628C13.4277 15.2626 13.6829 15.1266 13.9608 15.0721C14.2386 15.0176 14.5263 15.047 14.7873 15.1567C15.0483 15.2665 15.2707 15.4514 15.4261 15.688C15.5816 15.9247 15.663 16.2022 15.66 16.4853C15.6561 16.8581 15.5063 17.2144 15.2427 17.478C14.9791 17.7416 14.6228 17.8914 14.25 17.8953Z" fill="#737373"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_dictionary.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_dictionary.svg
new file mode 100644
index 0000000..a2286c9
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_dictionary.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.29898 3.73511H4.33398V20.2501H9.29898V3.73511Z" fill="#DEF4FD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.77148 3.73511C3.77148 3.42445 4.02332 3.17261 4.33398 3.17261H9.29899C9.60964 3.17261 9.86148 3.42445 9.86148 3.73511V20.2501C9.86148 20.5608 9.60964 20.8126 9.29899 20.8126H4.33398C4.02332 20.8126 3.77148 20.5608 3.77148 20.2501V3.73511ZM4.89648 4.29761V19.6876H8.73648V4.29761H4.89648Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.97461 16.7551C3.97461 16.548 4.1425 16.3801 4.34961 16.3801H9.29961C9.50672 16.3801 9.67461 16.548 9.67461 16.7551C9.67461 16.9622 9.50672 17.1301 9.29961 17.1301H4.34961C4.1425 17.1301 3.97461 16.9622 3.97461 16.7551Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.97461 6.85522C3.97461 6.64812 4.1425 6.48022 4.34961 6.48022H9.29961C9.50672 6.48022 9.67461 6.64812 9.67461 6.85522C9.67461 7.06233 9.50672 7.23022 9.29961 7.23022H4.34961C4.1425 7.23022 3.97461 7.06233 3.97461 6.85522Z" fill="#34495E"/>
+<path d="M15.0043 20.2597L19.6699 18.5615L15.1501 6.14349L10.4846 7.84162L15.0043 20.2597Z" fill="#DEF4FD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.2002 18.3689C20.3064 18.6608 20.1559 18.9836 19.864 19.0898L15.1984 20.788C14.9065 20.8942 14.5837 20.7437 14.4775 20.4518L9.95767 8.03375C9.85141 7.74182 10.0019 7.41904 10.2939 7.31278L14.9594 5.61465C15.2514 5.5084 15.5741 5.65892 15.6804 5.95084L20.2002 18.3689ZM18.9507 18.2251L14.8156 6.86419L11.2072 8.17755L15.3422 19.5384L18.9507 18.2251Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.686 9.30698C16.7569 9.50156 16.6567 9.7168 16.4621 9.78773L11.8121 11.4827C11.6175 11.5537 11.4023 11.4534 11.3314 11.2588C11.2604 11.0642 11.3607 10.849 11.5553 10.7781L16.2053 9.08308C16.3999 9.01215 16.6151 9.11239 16.686 9.30698Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9512 15.5171C19.0219 15.7117 18.9214 15.9269 18.7268 15.9976L14.0618 17.6926C13.8671 17.7633 13.652 17.6628 13.5812 17.4682C13.5105 17.2735 13.611 17.0584 13.8056 16.9877L18.4706 15.2927C18.6653 15.2219 18.8804 15.3224 18.9512 15.5171Z" fill="#2980B9"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_parser.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_parser.svg
new file mode 100644
index 0000000..da340fa
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_parser.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.38501 11.2683H8.85034L7.63745 7.44507L6.38501 11.2683ZM6.51025 5.22363H8.8042L12.2451 14.9399H10.0435L9.41724 12.9426H5.83789L5.16553 14.9399H3.04297L6.51025 5.22363Z" fill="#609404"/>
+<path d="M17.2944 11.4463C17.1758 11.521 17.0549 11.5825 16.9319 11.6309C16.8132 11.6748 16.6484 11.7166 16.4375 11.7561L16.0156 11.8352C15.6201 11.9055 15.3367 11.9912 15.1653 12.0923C14.8752 12.2637 14.7302 12.5295 14.7302 12.8899C14.7302 13.2107 14.8181 13.4436 14.9939 13.5886C15.1741 13.7292 15.3916 13.7996 15.6465 13.7996C16.0508 13.7996 16.4221 13.6809 16.7605 13.4436C17.1033 13.2063 17.2812 12.7734 17.2944 12.145V11.4463ZM16.1541 10.5696C16.5012 10.5256 16.7495 10.4707 16.8989 10.4048C17.167 10.2905 17.301 10.1125 17.301 9.87085C17.301 9.57642 17.1978 9.37427 16.9912 9.2644C16.7891 9.15015 16.4902 9.09302 16.0947 9.09302C15.6509 9.09302 15.3367 9.20288 15.1521 9.42261C15.0203 9.58521 14.9324 9.80493 14.8884 10.0818H13.0757C13.1152 9.45337 13.291 8.93701 13.603 8.53271C14.0996 7.8999 14.9521 7.5835 16.1606 7.5835C16.9473 7.5835 17.646 7.7395 18.2568 8.05151C18.8677 8.36353 19.1731 8.95239 19.1731 9.81812V13.114C19.1731 13.3425 19.1775 13.6194 19.1863 13.9446C19.1995 14.1907 19.2368 14.3577 19.2983 14.4456C19.3599 14.5334 19.4521 14.606 19.5752 14.6631V14.9399H17.5317C17.4746 14.7949 17.4351 14.6587 17.4131 14.5312C17.3911 14.4038 17.3735 14.2588 17.3604 14.0962C17.1011 14.3774 16.8022 14.6169 16.4639 14.8147C16.0596 15.0476 15.6025 15.1641 15.0928 15.1641C14.4424 15.1641 13.9041 14.9795 13.4778 14.6104C13.0559 14.2368 12.845 13.7095 12.845 13.0283C12.845 12.145 13.1855 11.5056 13.8667 11.1101C14.2402 10.8948 14.7896 10.741 15.5146 10.6487L16.1541 10.5696Z" fill="#609404"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_template.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_template.svg
new file mode 100644
index 0000000..a4a1cdc
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-fts_template.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3447 4.30518H5.80469C4.97626 4.30518 4.30469 4.97675 4.30469 5.80518V15.3452C4.30469 16.1736 4.97626 16.8452 5.80469 16.8452H15.3447C16.1731 16.8452 16.8447 16.1736 16.8447 15.3452V5.80518C16.8447 4.97675 16.1731 4.30518 15.3447 4.30518Z" fill="#FFFFD6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.80469 4.86768C5.28692 4.86768 4.86719 5.28741 4.86719 5.80518V15.3452C4.86719 15.8629 5.28692 16.2827 5.80469 16.2827H15.3447C15.8625 16.2827 16.2822 15.8629 16.2822 15.3452V5.80518C16.2822 5.28741 15.8625 4.86768 15.3447 4.86768H5.80469ZM3.74219 5.80518C3.74219 4.66609 4.6656 3.74268 5.80469 3.74268H15.3447C16.4838 3.74268 17.4072 4.66609 17.4072 5.80518V15.3452C17.4072 16.4843 16.4838 17.4077 15.3447 17.4077H5.80469C4.6656 17.4077 3.74219 16.4843 3.74219 15.3452V5.80518Z" fill="#CEBD39"/>
+<path d="M18.1943 7.15527H8.6543C7.82587 7.15527 7.1543 7.82685 7.1543 8.65527V18.1953C7.1543 19.0237 7.82587 19.6953 8.6543 19.6953H18.1943C19.0227 19.6953 19.6943 19.0237 19.6943 18.1953V8.65527C19.6943 7.82685 19.0227 7.15527 18.1943 7.15527Z" fill="#FFFFD6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.6543 7.71777C8.13653 7.71777 7.7168 8.13751 7.7168 8.65527V18.1953C7.7168 18.713 8.13653 19.1328 8.6543 19.1328H18.1943C18.7121 19.1328 19.1318 18.713 19.1318 18.1953V8.65527C19.1318 8.13751 18.7121 7.71777 18.1943 7.71777H8.6543ZM6.5918 8.65527C6.5918 7.51619 7.51521 6.59277 8.6543 6.59277H18.1943C19.3334 6.59277 20.2568 7.51619 20.2568 8.65527V18.1953C20.2568 19.3344 19.3334 20.2578 18.1943 20.2578H8.6543C7.51521 20.2578 6.5918 19.3344 6.5918 18.1953V8.65527Z" fill="#CEBD39"/>
+<path d="M12.9301 15.4051C14.297 15.4051 15.4051 14.297 15.4051 12.9301C15.4051 11.5632 14.297 10.4551 12.9301 10.4551C11.5632 10.4551 10.4551 11.5632 10.4551 12.9301C10.4551 14.297 11.5632 15.4051 12.9301 15.4051Z" fill="#FFFFD6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9301 11.0176C11.8738 11.0176 11.0176 11.8738 11.0176 12.9301C11.0176 13.9863 11.8738 14.8426 12.9301 14.8426C13.9863 14.8426 14.8426 13.9863 14.8426 12.9301C14.8426 11.8738 13.9863 11.0176 12.9301 11.0176ZM9.89258 12.9301C9.89258 11.2525 11.2525 9.89258 12.9301 9.89258C14.6076 9.89258 15.9676 11.2525 15.9676 12.9301C15.9676 14.6076 14.6076 15.9676 12.9301 15.9676C11.2525 15.9676 9.89258 14.6076 9.89258 12.9301Z" fill="#CEBD39"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3776 14.3774C14.5973 14.1577 14.9535 14.1577 15.1731 14.3774L17.2731 16.4774C17.4928 16.6971 17.4928 17.0532 17.2731 17.2729C17.0535 17.4926 16.6973 17.4926 16.4776 17.2729L14.3776 15.1729C14.158 14.9532 14.158 14.5971 14.3776 14.3774Z" fill="#CEBD39"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-function.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-function.svg
new file mode 100644
index 0000000..f4b9484
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-function.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5609 17.22L15.0759 16.41L15.4959 14.61V13.785L15.7209 11.985L16.2609 11.31L17.6109 10.62H16.2609L17.1909 10.455L15.7809 9.42002L15.6909 8.71502V7.42502L15.4959 5.64002L14.9409 4.98002L14.0409 4.59002L13.5609 4.54502L6.28586 4.39502L5.23586 5.13002L4.59086 5.65502V6.39002L4.69586 6.18002L4.47086 8.61002L4.59086 9.45002L2.76086 10.62L2.50586 10.86L2.76086 10.62L3.94586 11.49L4.11086 11.985L4.81586 13.8L4.77086 14.595L4.74086 15.15L4.77086 14.19V14.655L5.02586 15.81L5.46086 16.38L6.21086 16.83L6.81086 17.22H13.5609Z" fill="#EDFFFD"/>
+<path d="M16.8158 10.6052C16.6653 10.5594 16.5196 10.4991 16.3808 10.4252C16.2262 10.3474 16.0845 10.2462 15.9608 10.1252C15.8467 10.0103 15.7506 9.87883 15.6758 9.7352C15.5919 9.56003 15.5362 9.37273 15.5108 9.1802C15.4938 8.91547 15.4938 8.64992 15.5108 8.3852C15.5108 8.0752 15.5108 7.6902 15.5108 7.2302V7.5002C15.5108 7.1852 15.5108 6.8702 15.5108 6.5252C15.4853 6.19999 15.3934 5.88347 15.2408 5.5952C15.0759 5.29536 14.8321 5.04637 14.5358 4.8752C14.0816 4.62381 13.5699 4.4946 13.0508 4.5002V4.2002H13.4108H13.8608L14.3408 4.3502C14.5077 4.41794 14.6642 4.50883 14.8058 4.6202C15.0263 4.78412 15.2145 4.98757 15.3608 5.2202C15.4934 5.44353 15.5896 5.68658 15.6458 5.9402C15.7072 6.22133 15.7423 6.50756 15.7508 6.7952C15.7508 7.1102 15.7508 8.0552 15.7508 8.0552C15.7445 8.38682 15.7697 8.7183 15.8258 9.0452C15.8707 9.30269 15.9789 9.54497 16.1408 9.7502C16.3204 9.95942 16.5464 10.1238 16.8008 10.2302C17.1008 10.5002 16.9658 10.6352 16.8158 10.6052Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M7.15516 4.5001C6.67923 4.50519 6.21135 4.62345 5.79016 4.8451C5.49386 5.01627 5.25005 5.26526 5.08516 5.5651C4.9329 5.85353 4.84103 6.16997 4.81516 6.4951C4.81516 6.8251 4.81516 7.1501 4.81516 7.4701V7.2151C4.81516 7.6651 4.81516 8.0551 4.81516 8.3701C4.83222 8.63482 4.83222 8.90037 4.81516 9.1651C4.74347 9.36712 4.63685 9.55498 4.50016 9.7201C4.42578 9.86398 4.32964 9.99553 4.21516 10.1101C4.09253 10.2365 3.9508 10.3428 3.79516 10.4251L3.36016 10.6051L3.00016 10.6951C2.88016 10.6951 2.88016 10.6951 3.00016 10.7701L3.39016 10.8601C3.54064 10.9059 3.68632 10.9662 3.82516 11.0401C3.97977 11.1179 4.12145 11.2191 4.24516 11.3401C4.34992 11.4616 4.43588 11.5981 4.50016 11.7451C4.58402 11.9203 4.63971 12.1076 4.66516 12.3001C4.68214 12.5648 4.68214 12.8304 4.66516 13.0951C4.66516 13.4051 4.66516 13.7901 4.66516 14.2501V14.0101C4.66516 14.3251 4.66516 14.6401 4.66516 14.9851C4.69061 15.3103 4.78251 15.6268 4.93516 15.9151C5.10005 16.2149 5.34386 16.4639 5.64016 16.6351C6.06135 16.8568 6.52923 16.975 7.00516 16.9801V17.2651H6.64516H6.19516L5.71516 17.1151C5.54826 17.0474 5.39172 16.9565 5.25016 16.8451C5.02962 16.6812 4.84143 16.4777 4.69516 16.2451C4.58261 15.9836 4.51662 15.7044 4.50016 15.4201C4.4739 15.1357 4.4739 14.8495 4.50016 14.5651C4.50016 14.2501 4.50016 13.3051 4.50016 13.3051C4.5064 12.9735 4.48128 12.642 4.42516 12.3151C4.38028 12.0576 4.27203 11.8153 4.11016 11.6101C3.93055 11.4009 3.70454 11.2365 3.45016 11.1301C3.38515 11.0879 3.33173 11.0301 3.29474 10.962C3.25776 10.8939 3.23839 10.8176 3.23839 10.7401C3.23839 10.6626 3.25776 10.5863 3.29474 10.5182C3.33173 10.4501 3.38515 10.3923 3.45016 10.3501C3.70454 10.2437 3.93055 10.0793 4.11016 9.8701C4.27149 9.66455 4.37968 9.42241 4.42516 9.1651C4.48223 8.83327 4.50735 8.49673 4.50016 8.1601C4.50016 8.1601 4.50016 6.3001 4.50016 6.0001C4.55757 5.7516 4.65375 5.51369 4.78516 5.2951C4.93115 5.06226 5.11938 4.85876 5.34016 4.6951C5.50946 4.60361 5.69146 4.53788 5.88016 4.5001L6.36016 4.3501H6.81016H7.17016L7.15516 4.5001Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M17.4456 19.7703L18.9606 18.9603L19.3956 17.1603V16.3203L19.6206 14.5203L20.1456 13.8453L21.4956 13.1703H20.1456L21.0756 13.0053L19.6656 11.9553L19.5906 11.2503V9.96031L19.3956 8.17531L18.8256 7.53031L17.9256 7.12531L17.4456 7.08031L10.1706 6.94531L9.12062 7.66531L8.47562 8.20531V8.92531L8.59562 8.73031L8.37062 11.1453L8.47562 11.9853L6.64562 13.1703L6.39062 13.3953L6.64562 13.1703L7.83062 14.0403L7.99562 14.5203L8.70062 16.3353L8.65562 17.1303L8.64062 17.6853L8.65562 16.7253V17.1903L8.92562 18.3453L9.34562 18.9303L10.0956 19.3653L10.6956 19.7703H17.4456Z" fill="#EDFFFD"/>
+<path d="M16.9369 19.5001C17.4128 19.495 17.8807 19.3768 18.3019 19.1551C18.5982 18.9839 18.842 18.7349 19.0069 18.4351C19.1591 18.1467 19.251 17.8302 19.2769 17.5051C19.2769 17.1751 19.2769 16.8501 19.2769 16.5301V16.7701C19.2769 16.3201 19.2769 15.9301 19.2769 15.6151C19.2598 15.3504 19.2598 15.0848 19.2769 14.8201C19.3021 14.6275 19.3578 14.4402 19.4419 14.2651C19.5163 14.1212 19.6124 13.9897 19.7269 13.8751C19.8495 13.7487 19.9912 13.6424 20.1469 13.5601L20.5819 13.3801L20.9719 13.2901C21.0919 13.2901 21.0919 13.2901 20.9719 13.2151L20.5819 13.1251C20.4314 13.0793 20.2857 13.019 20.1469 12.9451C19.9923 12.8673 19.8506 12.7661 19.7269 12.6451C19.6127 12.5302 19.5167 12.3987 19.4419 12.2551C19.358 12.0799 19.3023 11.8926 19.2769 11.7001C19.2599 11.4354 19.2599 11.1698 19.2769 10.9051C19.2769 10.5951 19.2769 10.2101 19.2769 9.75011V9.99011C19.2769 9.67511 19.2769 9.36011 19.2769 9.01511C19.2514 8.68991 19.1595 8.37338 19.0069 8.08511C18.842 7.78527 18.5982 7.53628 18.3019 7.36511C17.8807 7.14346 17.4128 7.0252 16.9369 7.02011V6.73511H17.2969H17.7469L18.2269 6.88511C18.3938 6.95285 18.5503 7.04374 18.6919 7.15511C18.9124 7.31904 19.1006 7.52248 19.2469 7.75511C19.3795 7.97844 19.4757 8.22149 19.5319 8.47511C19.5933 8.75625 19.6284 9.04247 19.6369 9.33011C19.6369 9.64511 19.6369 10.5901 19.6369 10.5901C19.6306 10.9217 19.6557 11.2532 19.7119 11.5801C19.7568 11.8376 19.865 12.0799 20.0269 12.2851C20.2065 12.4943 20.4325 12.6587 20.6869 12.7651C20.7519 12.8073 20.8053 12.8651 20.8423 12.9332C20.8793 13.0013 20.8986 13.0776 20.8986 13.1551C20.8986 13.2326 20.8793 13.3089 20.8423 13.377C20.8053 13.4451 20.7519 13.5029 20.6869 13.5451C20.4325 13.6515 20.2065 13.8159 20.0269 14.0251C19.8655 14.2307 19.7574 14.4728 19.7119 14.7301C19.6557 15.057 19.6306 15.3885 19.6369 15.7201C19.6369 15.7201 19.6369 17.5801 19.5169 17.8351C19.4595 18.0836 19.3633 18.3215 19.2319 18.5401C19.0859 18.7729 18.8976 18.9764 18.6769 19.1401C18.5352 19.2513 18.3787 19.3422 18.2119 19.4101L17.7319 19.5601H17.2819H16.9219L16.9369 19.5001Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M11.041 7.03528C10.5651 7.04038 10.0972 7.15863 9.67601 7.38028C9.39272 7.55157 9.15983 7.79481 9.00102 8.08528C8.84023 8.36688 8.73817 8.67815 8.70102 9.00028C8.70102 9.33028 8.70102 9.65528 8.70102 9.97528V9.75028C8.70102 10.2003 8.70102 10.5903 8.70102 10.9053C8.71808 11.17 8.71808 11.4356 8.70102 11.7003C8.67582 11.8929 8.62012 12.0802 8.53602 12.2553C8.46163 12.3992 8.3655 12.5307 8.25102 12.6453C8.12839 12.7716 7.98666 12.8779 7.83102 12.9603L7.39602 13.1403L7.00602 13.2303C6.88602 13.2303 6.88602 13.2303 7.00602 13.3053L7.39602 13.3953C7.5465 13.4411 7.69218 13.5013 7.83102 13.5753C7.98563 13.6531 8.1273 13.7542 8.25102 13.8753C8.36515 13.9902 8.46123 14.1217 8.53602 14.2653C8.61988 14.4404 8.67557 14.6278 8.70102 14.8203C8.718 15.085 8.718 15.3506 8.70102 15.6153C8.70102 15.9253 8.70102 16.3103 8.70102 16.7703V16.5003C8.70102 16.8153 8.70102 17.1303 8.70102 17.4753C8.72953 17.8181 8.83187 18.1507 9.00102 18.4503C9.16591 18.7501 9.40972 18.9991 9.70601 19.1703C10.1272 19.3919 10.5951 19.5102 11.071 19.5153V19.8003H10.711H10.261L9.76602 19.5003C9.59912 19.4325 9.44258 19.3416 9.30101 19.2303C9.08048 19.0664 8.89229 18.8629 8.74602 18.6303C8.62165 18.4348 8.52569 18.2227 8.46101 18.0003C8.39964 17.7191 8.36448 17.4329 8.35602 17.1453C8.35602 16.8303 8.35602 15.8853 8.35602 15.8853C8.36226 15.5537 8.33714 15.2222 8.28102 14.8953C8.23614 14.6378 8.12789 14.3955 7.96602 14.1903C7.78641 13.9811 7.5604 13.8167 7.30602 13.7103C7.24101 13.6681 7.18759 13.6103 7.1506 13.5422C7.11362 13.4741 7.09424 13.3978 7.09424 13.3203C7.09424 13.2428 7.11362 13.1665 7.1506 13.0984C7.18759 13.0303 7.24101 12.9725 7.30602 12.9303C7.5604 12.8239 7.78641 12.6595 7.96602 12.4503C8.12735 12.2447 8.23554 12.0026 8.28102 11.7453C8.33714 11.4184 8.36226 11.0869 8.35602 10.7553C8.35602 10.7553 8.35602 8.89528 8.47602 8.64028C8.53343 8.39178 8.62961 8.15387 8.76102 7.93528C8.90701 7.70244 9.09524 7.49895 9.31602 7.33528C9.45769 7.22408 9.6142 7.1332 9.78101 7.06528L10.261 6.91528H10.711H11.071L11.041 7.03528Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2734 10.1702C11.2734 9.85951 11.5253 9.60767 11.8359 9.60767H16.3359C16.6466 9.60767 16.8984 9.85951 16.8984 10.1702C16.8984 10.4808 16.6466 10.7327 16.3359 10.7327H11.8359C11.5253 10.7327 11.2734 10.4808 11.2734 10.1702Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2734 13.1702C11.2734 12.8595 11.5253 12.6077 11.8359 12.6077H16.3359C16.6466 12.6077 16.8984 12.8595 16.8984 13.1702C16.8984 13.4808 16.6466 13.7327 16.3359 13.7327H11.8359C11.5253 13.7327 11.2734 13.4808 11.2734 13.1702Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2734 16.1702C11.2734 15.8595 11.5253 15.6077 11.8359 15.6077H14.8359C15.1466 15.6077 15.3984 15.8595 15.3984 16.1702C15.3984 16.4808 15.1466 16.7327 14.8359 16.7327H11.8359C11.5253 16.7327 11.2734 16.4808 11.2734 16.1702Z" fill="#2F91A3"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-index.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-index.svg
new file mode 100644
index 0000000..e87105c
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-index.svg
@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.60001 4.05029H13.185C13.36 4.05029 13.5279 4.11983 13.6517 4.2436C13.7755 4.36738 13.845 4.53525 13.845 4.71029V7.23029C13.845 7.40534 13.7755 7.57321 13.6517 7.69699C13.5279 7.82076 13.36 7.8903 13.185 7.8903H6.60001C6.43686 7.87889 6.28414 7.80592 6.17274 7.68618C6.06135 7.56643 5.99961 7.40884 6.00001 7.24529V4.71029C5.99932 4.54517 6.06056 4.38578 6.17164 4.2636C6.28272 4.14141 6.43556 4.0653 6.60001 4.05029Z" fill="#DEF4FD"/>
+<path d="M13.1848 4.62012C13.2086 4.62012 13.2315 4.6296 13.2484 4.64648C13.2653 4.66336 13.2748 4.68625 13.2748 4.71012V7.24512C13.2748 7.26899 13.2653 7.29188 13.2484 7.30876C13.2315 7.32564 13.2086 7.33512 13.1848 7.33512H6.59977C6.5759 7.33512 6.553 7.32564 6.53613 7.30876C6.51925 7.29188 6.50977 7.26899 6.50977 7.24512V4.71012C6.50977 4.68625 6.51925 4.66336 6.53613 4.64648C6.553 4.6296 6.5759 4.62012 6.59977 4.62012H13.1848ZM13.1848 3.49512H6.59977C6.27753 3.49512 5.96849 3.62313 5.74063 3.85098C5.51277 4.07884 5.38477 4.38788 5.38477 4.71012V7.24512C5.38477 7.40467 5.41619 7.56267 5.47725 7.71008C5.53831 7.85749 5.62781 7.99143 5.74063 8.10425C5.85345 8.21708 5.98739 8.30657 6.13481 8.36763C6.28222 8.42869 6.44021 8.46012 6.59977 8.46012H13.1848C13.3443 8.46012 13.5023 8.42869 13.6497 8.36763C13.7971 8.30657 13.9311 8.21708 14.0439 8.10425C14.1567 7.99143 14.2462 7.85749 14.3073 7.71008C14.3683 7.56267 14.3998 7.40467 14.3998 7.24512V4.71012C14.3998 4.55056 14.3683 4.39257 14.3073 4.24516C14.2462 4.09775 14.1567 3.96381 14.0439 3.85098C13.9311 3.73816 13.7971 3.64866 13.6497 3.5876C13.5023 3.52654 13.3443 3.49512 13.1848 3.49512Z" fill="#357FD3"/>
+<path d="M8.71547 6.00001H15.3005C15.4755 6.00001 15.6434 6.06954 15.7672 6.19331C15.8909 6.31709 15.9605 6.48496 15.9605 6.66001V9.24001C15.9605 9.41505 15.8909 9.58292 15.7672 9.7067C15.6434 9.83047 15.4755 9.90001 15.3005 9.90001H8.70047C8.5294 9.90001 8.36534 9.83205 8.24438 9.71109C8.12342 9.59013 8.05547 9.42607 8.05547 9.25501V6.72001C8.04711 6.62842 8.05798 6.53611 8.08738 6.44897C8.11678 6.36184 8.16407 6.28181 8.22621 6.21402C8.28835 6.14623 8.36397 6.09218 8.44823 6.05532C8.53248 6.01847 8.62351 5.99962 8.71547 6.00001Z" fill="#DEF4FD"/>
+<path d="M15.2989 6.62988C15.3228 6.62988 15.3456 6.63936 15.3625 6.65624C15.3794 6.67312 15.3889 6.69601 15.3889 6.71988V9.23988C15.3889 9.26375 15.3794 9.28664 15.3625 9.30352C15.3456 9.3204 15.3228 9.32988 15.2989 9.32988H8.69888C8.67501 9.32988 8.65212 9.3204 8.63524 9.30352C8.61837 9.28664 8.60888 9.26375 8.60888 9.23988V6.71988C8.60888 6.69601 8.61837 6.67312 8.63524 6.65624C8.65212 6.63936 8.67501 6.62988 8.69888 6.62988H15.2989ZM15.2989 5.50488H8.69888C8.37925 5.50883 8.07405 5.63858 7.84943 5.86601C7.62481 6.09344 7.49886 6.40023 7.49888 6.71988V9.23988C7.49287 9.40193 7.51935 9.56354 7.57677 9.71519C7.63419 9.86685 7.72139 10.0055 7.83322 10.1229C7.94505 10.2403 8.07926 10.3342 8.22793 10.3989C8.37661 10.4637 8.53674 10.498 8.69888 10.4999H15.2989C15.461 10.498 15.6212 10.4637 15.7698 10.3989C15.9185 10.3342 16.0527 10.2403 16.1645 10.1229C16.2764 10.0055 16.3636 9.86685 16.421 9.71519C16.4784 9.56354 16.5049 9.40193 16.4989 9.23988V6.71988C16.4989 6.56033 16.4675 6.40233 16.4064 6.25492C16.3453 6.10751 16.2558 5.97357 16.143 5.86075C16.0302 5.74792 15.8963 5.65843 15.7488 5.59737C15.6014 5.53631 15.4434 5.50488 15.2839 5.50488H15.2989Z" fill="#357FD3"/>
+<path d="M19.7703 16.8604H17.7303C17.3658 16.8604 17.0703 17.1558 17.0703 17.5204V19.2904C17.0703 19.6549 17.3658 19.9504 17.7303 19.9504H19.7703C20.1348 19.9504 20.4303 19.6549 20.4303 19.2904V17.5204C20.4303 17.1558 20.1348 16.8604 19.7703 16.8604Z" fill="#DEF4FD"/>
+<path d="M19.785 17.4148C19.8089 17.4148 19.8318 17.4243 19.8486 17.4412C19.8655 17.458 19.875 17.4809 19.875 17.5048V19.2898C19.875 19.3137 19.8655 19.3366 19.8486 19.3534C19.8318 19.3703 19.8089 19.3798 19.785 19.3798H17.715C17.6911 19.3798 17.6682 19.3703 17.6514 19.3534C17.6345 19.3366 17.625 19.3137 17.625 19.2898V17.5048C17.625 17.4809 17.6345 17.458 17.6514 17.4412C17.6682 17.4243 17.6911 17.4148 17.715 17.4148H19.77H19.785ZM19.77 16.2898H17.715C17.3928 16.2898 17.0837 16.4178 16.8559 16.6457C16.628 16.8735 16.5 17.1826 16.5 17.5048V19.2898C16.5 19.612 16.628 19.9211 16.8559 20.1489C17.0837 20.3768 17.3928 20.5048 17.715 20.5048H19.77C20.0922 20.5048 20.4013 20.3768 20.6291 20.1489C20.857 19.9211 20.985 19.612 20.985 19.2898V17.5048C20.985 17.1826 20.857 16.8735 20.6291 16.6457C20.4013 16.4178 20.0922 16.2898 19.77 16.2898Z" fill="#357FD3"/>
+<path d="M6.27031 16.8604H4.23031C3.8658 16.8604 3.57031 17.1558 3.57031 17.5204V19.2904C3.57031 19.6549 3.8658 19.9504 4.23031 19.9504H6.27031C6.63482 19.9504 6.93031 19.6549 6.93031 19.2904V17.5204C6.93031 17.1558 6.63482 16.8604 6.27031 16.8604Z" fill="#DEF4FD"/>
+<path d="M6.285 17.4148C6.30887 17.4148 6.33176 17.4243 6.34864 17.4412C6.36552 17.458 6.375 17.4809 6.375 17.5048V19.2898C6.375 19.3137 6.36552 19.3366 6.34864 19.3534C6.33176 19.3703 6.30887 19.3798 6.285 19.3798H4.215C4.19113 19.3798 4.16824 19.3703 4.15136 19.3534C4.13448 19.3366 4.125 19.3137 4.125 19.2898V17.5048C4.125 17.4809 4.13448 17.458 4.15136 17.4412C4.16824 17.4243 4.19113 17.4148 4.215 17.4148H6.285ZM6.285 16.2898H4.215C3.89276 16.2898 3.58372 16.4178 3.35587 16.6457C3.12801 16.8735 3 17.1826 3 17.5048V19.2898C3 19.612 3.12801 19.9211 3.35587 20.1489C3.58372 20.3768 3.89276 20.5048 4.215 20.5048H6.285C6.60724 20.5048 6.91628 20.3768 7.14413 20.1489C7.37199 19.9211 7.5 19.612 7.5 19.2898V17.5048C7.5 17.1826 7.37199 16.8735 7.14413 16.6457C6.91628 16.4178 6.60724 16.2898 6.285 16.2898Z" fill="#357FD3"/>
+<path d="M13.0203 16.8604H10.9803C10.6158 16.8604 10.3203 17.1558 10.3203 17.5204V19.2904C10.3203 19.6549 10.6158 19.9504 10.9803 19.9504H13.0203C13.3848 19.9504 13.6803 19.6549 13.6803 19.2904V17.5204C13.6803 17.1558 13.3848 16.8604 13.0203 16.8604Z" fill="#DEF4FD"/>
+<path d="M13.0356 17.4148C13.0595 17.4148 13.0824 17.4243 13.0993 17.4412C13.1161 17.458 13.1256 17.4809 13.1256 17.5048V19.2898C13.1256 19.3137 13.1161 19.3366 13.0993 19.3534C13.0824 19.3703 13.0595 19.3798 13.0356 19.3798H10.9806C10.9568 19.3798 10.9339 19.3703 10.917 19.3534C10.9001 19.3366 10.8906 19.3137 10.8906 19.2898V17.5048C10.8906 17.4809 10.9001 17.458 10.917 17.4412C10.9339 17.4243 10.9568 17.4148 10.9806 17.4148H13.0356ZM13.0356 16.2898H10.9806C10.6584 16.2898 10.3493 16.4178 10.1215 16.6457C9.89363 16.8735 9.76563 17.1826 9.76562 17.5048V19.2898C9.76563 19.612 9.89363 19.9211 10.1215 20.1489C10.3493 20.3768 10.6584 20.5048 10.9806 20.5048H13.0356C13.3579 20.5048 13.6669 20.3768 13.8948 20.1489C14.1226 19.9211 14.2506 19.612 14.2506 19.2898V17.5048C14.2506 17.1826 14.1226 16.8735 13.8948 16.6457C13.6669 16.4178 13.3579 16.2898 13.0356 16.2898Z" fill="#357FD3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4082 13.8148V10.4548H12.5332V13.8148H11.4082Z" fill="#357FD3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4082 16.2899V13.8149H12.5332V16.2899H11.4082Z" fill="#357FD3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.6875 13.26C4.6875 12.9493 4.93934 12.6975 5.25 12.6975H18.75C19.0607 12.6975 19.3125 12.9493 19.3125 13.26V16.29H18.1875V13.8225H5.8125V16.29H4.6875V13.26Z" fill="#357FD3"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-language.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-language.svg
new file mode 100644
index 0000000..46ae8c0
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-language.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0007 12C16.7807 12 20.6557 10.3815 20.6557 8.38502C20.6557 6.38851 16.7807 4.77002 12.0007 4.77002C7.22068 4.77002 3.3457 6.38851 3.3457 8.38502C3.3457 10.3815 7.22068 12 12.0007 12Z" fill="#FBFB6E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.42109 7.37814C4.05317 7.74147 3.9082 8.08134 3.9082 8.38502C3.9082 8.6887 4.05317 9.02857 4.42109 9.3919C4.79104 9.75722 5.35513 10.1121 6.09749 10.4222C7.57978 11.0413 9.66655 11.4375 12.0007 11.4375C14.3349 11.4375 16.4216 11.0413 17.9039 10.4222C18.6463 10.1121 19.2104 9.75722 19.5803 9.3919C19.9482 9.02857 20.0932 8.6887 20.0932 8.38502C20.0932 8.08134 19.9482 7.74147 19.5803 7.37814C19.2104 7.01282 18.6463 6.65794 17.9039 6.34787C16.4216 5.72875 14.3349 5.33252 12.0007 5.33252C9.66655 5.33252 7.57978 5.72875 6.09749 6.34787C5.35513 6.65794 4.79104 7.01282 4.42109 7.37814ZM5.6639 5.30978C7.31411 4.62053 9.55484 4.20752 12.0007 4.20752C14.4466 4.20752 16.6873 4.62053 18.3375 5.30978C19.1614 5.65391 19.8648 6.07799 20.3708 6.57766C20.8788 7.07932 21.2182 7.69044 21.2182 8.38502C21.2182 9.0796 20.8788 9.69072 20.3708 10.1924C19.8648 10.692 19.1614 11.1161 18.3375 11.4603C16.6873 12.1495 14.4466 12.5625 12.0007 12.5625C9.55484 12.5625 7.31411 12.1495 5.6639 11.4603C4.84001 11.1161 4.13661 10.692 3.63062 10.1924C3.12261 9.69072 2.7832 9.0796 2.7832 8.38502C2.7832 7.69044 3.12261 7.07932 3.63062 6.57766C4.13661 6.07799 4.84001 5.65391 5.6639 5.30978Z" fill="#D4AA16"/>
+<path d="M20.6713 12.7197C20.6713 13.6497 19.8163 14.5047 18.4363 15.1347C17.8513 15.4047 18.5413 19.0197 17.7913 19.2147C17.0413 19.4097 14.7913 16.2147 13.9963 16.2147C13.3663 16.2147 12.7063 16.3047 12.0163 16.3047C7.23133 16.3047 3.36133 14.6847 3.36133 12.6897C3.36133 10.6947 7.21633 9.10474 12.0013 9.10474C16.7863 9.10474 20.6713 10.7247 20.6713 12.7197Z" fill="#FBFB6E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.43316 11.6887C4.06791 12.0484 3.92383 12.3861 3.92383 12.6897C3.92383 12.9932 4.06861 13.3329 4.43616 13.6961C4.80574 14.0613 5.36937 14.4162 6.11137 14.7264C7.59297 15.3456 9.67969 15.7422 12.0163 15.7422C12.3394 15.7422 12.6586 15.7212 12.9906 15.6985L13.0207 15.6965C13.3371 15.6749 13.669 15.6522 13.9963 15.6522C14.2602 15.6522 14.4953 15.7748 14.6552 15.8747C14.8326 15.9857 15.0153 16.133 15.1924 16.29C15.5151 16.5761 15.8738 16.9441 16.2158 17.2951C16.2485 17.3286 16.281 17.3619 16.3133 17.395C16.6955 17.7867 17.0508 18.1453 17.3524 18.3949C17.4288 18.4581 17.4962 18.5096 17.5546 18.5504C17.5595 18.5224 17.5642 18.4916 17.5688 18.4578C17.6126 18.133 17.6161 17.6942 17.6132 17.2062C17.6129 17.1482 17.6124 17.0895 17.612 17.0303C17.6089 16.6137 17.6057 16.1742 17.6334 15.8155C17.6491 15.6116 17.6769 15.3985 17.7339 15.2138C17.7818 15.0587 17.8969 14.7642 18.2006 14.624L18.2027 14.623C18.8507 14.3272 19.3414 13.9932 19.6625 13.6534C19.9815 13.3158 20.1088 13.001 20.1088 12.7197C20.1088 12.4171 19.9638 12.0775 19.5948 11.714C19.2238 11.3486 18.6583 10.9935 17.9142 10.6833C16.4286 10.0638 14.338 9.66724 12.0013 9.66724C9.6634 9.66724 7.58002 10.0567 6.10219 10.6688C5.36207 10.9753 4.80082 11.3266 4.43316 11.6887ZM17.7579 18.6647C17.758 18.6649 17.7564 18.6645 17.753 18.6635C17.7562 18.6641 17.7579 18.6646 17.7579 18.6647ZM5.67172 9.62942C7.31764 8.94774 9.55426 8.54224 12.0013 8.54224C14.4497 8.54224 16.694 8.95563 18.3472 9.64494C19.1725 9.98908 19.8773 10.4131 20.3843 10.9125C20.8932 11.4138 21.2338 12.0249 21.2338 12.7197C21.2338 13.3684 20.9337 13.9462 20.4802 14.4261C20.0553 14.8757 19.475 15.264 18.7978 15.5868C18.7815 15.6554 18.7661 15.7585 18.7551 15.902C18.7313 16.2095 18.734 16.5952 18.737 17.0205C18.7374 17.0794 18.7378 17.1392 18.7382 17.1996C18.741 17.6734 18.7398 18.1918 18.6837 18.608C18.6559 18.8142 18.6099 19.0363 18.5218 19.2287C18.4358 19.4166 18.2625 19.6734 17.9329 19.7591C17.6345 19.8367 17.3601 19.7296 17.1902 19.643C17.0017 19.547 16.8125 19.4084 16.6351 19.2616C16.2791 18.967 15.8815 18.5634 15.5081 18.1807C15.4774 18.1492 15.4468 18.1179 15.4164 18.0867C15.0658 17.7271 14.7363 17.3891 14.4461 17.1318C14.2887 16.9923 14.1594 16.8916 14.0586 16.8285C14.008 16.7969 13.9774 16.7829 13.964 16.7773C13.6856 16.7788 13.3972 16.7984 13.08 16.8201L13.0671 16.8209C12.7391 16.8433 12.3832 16.8672 12.0163 16.8672C9.56797 16.8672 7.32718 16.4538 5.67753 15.7644C4.85391 15.4201 4.15098 14.9959 3.6454 14.4963C3.1378 13.9947 2.79883 13.3838 2.79883 12.6897C2.79883 11.9959 3.13662 11.3867 3.64372 10.8872C4.1484 10.3901 4.84996 9.96976 5.67172 9.62942ZM18.8222 15.5107C18.8223 15.5111 18.8207 15.5153 18.8168 15.5223C18.8201 15.5138 18.822 15.5103 18.8222 15.5107Z" fill="#D4AA16"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-mview.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-mview.svg
new file mode 100644
index 0000000..9895b32
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-mview.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2796 17.0252V3.8252H3.59961V17.0252" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.03711 3.8252C3.03711 3.51454 3.28895 3.2627 3.59961 3.2627H17.2796C17.5903 3.2627 17.8421 3.51454 17.8421 3.8252V17.0252C17.8421 17.3359 17.5903 17.5877 17.2796 17.5877C16.9689 17.5877 16.7171 17.3359 16.7171 17.0252V4.3877H4.16211V17.0252C4.16211 17.3359 3.91027 17.5877 3.59961 17.5877C3.28895 17.5877 3.03711 17.3359 3.03711 17.0252V3.8252Z" fill="#9CC71C"/>
+<path d="M3.59961 17.0254H17.2796" stroke="#9CC71C" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.4002 6.61548H6.61523V20.1755H20.4002V6.61548Z" fill="#E3FF8D"/>
+<path d="M20.4002 13.4255V6.61548H6.61523V20.1755" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.05273 6.61548C6.05273 6.30482 6.30457 6.05298 6.61523 6.05298H20.4002C20.7109 6.05298 20.9627 6.30482 20.9627 6.61548V13.4255C20.9627 13.7361 20.7109 13.988 20.4002 13.988C20.0896 13.988 19.8377 13.7361 19.8377 13.4255V7.17798H7.17773V20.1755C7.17773 20.4861 6.92589 20.738 6.61523 20.738C6.30457 20.738 6.05273 20.4861 6.05273 20.1755V6.61548Z" fill="#9CC71C"/>
+<path d="M17.6995 13.4254V9.31543H9.31445V17.4754H12.0145" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75195 9.31543C8.75195 9.00477 9.00379 8.75293 9.31445 8.75293H17.6995C18.0101 8.75293 18.262 9.00477 18.262 9.31543V13.4254C18.262 13.7361 18.0101 13.9879 17.6995 13.9879C17.3888 13.9879 17.137 13.7361 17.137 13.4254V9.87793H9.87695V16.9129H12.0145C12.3251 16.9129 12.577 17.1648 12.577 17.4754C12.577 17.7861 12.3251 18.0379 12.0145 18.0379H9.31445C9.00379 18.0379 8.75195 17.7861 8.75195 17.4754V9.31543Z" fill="#9CC71C"/>
+<path d="M15.0006 12.0149H12.0156V14.7749H15.0006V12.0149Z" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4531 12.0149C11.4531 11.7042 11.705 11.4524 12.0156 11.4524H15.0006C15.3113 11.4524 15.5631 11.7042 15.5631 12.0149V14.7749C15.5631 15.0856 15.3113 15.3374 15.0006 15.3374H12.0156C11.705 15.3374 11.4531 15.0856 11.4531 14.7749V12.0149ZM12.5781 12.5774V14.2124H14.4381V12.5774H12.5781Z" fill="#9CC71C"/>
+<path d="M6.61523 20.175H15.0002V16.125L17.7002 17.475L20.4002 16.125V20.175" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7045 15.6465C14.8703 15.544 15.0774 15.5347 15.2518 15.6219L17.7002 16.8461L20.1487 15.6219C20.323 15.5347 20.5301 15.544 20.696 15.6465C20.8618 15.749 20.9627 15.9301 20.9627 16.125V20.175C20.9627 20.4857 20.7109 20.7375 20.4002 20.7375C20.0896 20.7375 19.8377 20.4857 19.8377 20.175V17.0351L17.9518 17.9781C17.7934 18.0573 17.607 18.0573 17.4487 17.9781L15.5627 17.0351V20.175C15.5627 20.4857 15.3109 20.7375 15.0002 20.7375H6.61523C6.30457 20.7375 6.05273 20.4857 6.05273 20.175C6.05273 19.8643 6.30457 19.6125 6.61523 19.6125H14.4377V16.125C14.4377 15.9301 14.5387 15.749 14.7045 15.6465Z" fill="#9CC71C"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-package.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-package.svg
new file mode 100644
index 0000000..d732a2b
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-package.svg
@@ -0,0 +1,32 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.50977 5.87981V9.98981L7.07977 12.0598L10.6498 9.98981V5.87981L7.07977 3.80981L3.50977 5.87981Z" fill="#FEFABF"/>
+<path d="M13.334 5.84968V9.97468L16.904 12.0297L20.474 9.97468V5.84968L16.904 3.79468L13.334 5.84968Z" fill="#FEFABF"/>
+<path d="M8.44531 14.0544V18.1644L12.0153 20.2344L15.5853 18.1644V14.0544L12.0153 11.9844L8.44531 14.0544Z" fill="#FEFABF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 15.532C12.3107 15.532 12.5625 15.7838 12.5625 16.0945V20.8045C12.5625 21.1151 12.3107 21.367 12 21.367C11.6893 21.367 11.4375 21.1151 11.4375 20.8045V16.0945C11.4375 15.7838 11.6893 15.532 12 15.532Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0957 13.1919C16.4064 13.1919 16.6582 13.4437 16.6582 13.7544V18.4494C16.6582 18.7601 16.4064 19.0119 16.0957 19.0119C15.785 19.0119 15.5332 18.7601 15.5332 18.4494V13.7544C15.5332 13.4437 15.785 13.1919 16.0957 13.1919Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.9043 13.1919C8.21496 13.1919 8.4668 13.4437 8.4668 13.7544V18.4494C8.4668 18.7601 8.21496 19.0119 7.9043 19.0119C7.59364 19.0119 7.3418 18.7601 7.3418 18.4494V13.7544C7.3418 13.4437 7.59364 13.1919 7.9043 13.1919Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.568 13.4751C16.7226 13.7446 16.6294 14.0884 16.3599 14.2429L12.2799 16.5829C12.0105 16.7375 11.6667 16.6443 11.5122 16.3748C11.3576 16.1053 11.4508 15.7616 11.7202 15.607L15.8002 13.267C16.0697 13.1125 16.4135 13.2056 16.568 13.4751Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4872 11.0883C12.6425 11.3573 12.5503 11.7013 12.2812 11.8566L8.20121 14.2116C7.93216 14.3669 7.58815 14.2747 7.43285 14.0057C7.27755 13.7366 7.36976 13.3926 7.63882 13.2373L11.7188 10.8823C11.9879 10.727 12.3319 10.8192 12.4872 11.0883Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5673 18.1684C16.7226 18.4374 16.6303 18.7814 16.3613 18.9367L12.2813 21.2917C12.0122 21.447 11.6682 21.3548 11.5129 21.0858C11.3576 20.8167 11.4498 20.4727 11.7189 20.3174L15.7989 17.9624C16.068 17.8071 16.412 17.8993 16.5673 18.1684Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.43207 13.4751C7.58663 13.2056 7.93038 13.1125 8.19987 13.267L12.2799 15.607C12.5494 15.7616 12.6425 16.1053 12.488 16.3748C12.3334 16.6443 11.9897 16.7375 11.7202 16.5829L7.64017 14.2429C7.37068 14.0884 7.27752 13.7446 7.43207 13.4751Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5129 11.0883C11.6682 10.8192 12.0122 10.727 12.2813 10.8823L16.3613 13.2373C16.6303 13.3926 16.7226 13.7366 16.5673 14.0057C16.412 14.2747 16.068 14.3669 15.7989 14.2116L11.7189 11.8566C11.4498 11.7013 11.3576 11.3573 11.5129 11.0883Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.43285 18.1684C7.58815 17.8993 7.93216 17.8071 8.20121 17.9624L12.2812 20.3174C12.5503 20.4727 12.6425 20.8167 12.4872 21.0858C12.3319 21.3548 11.9879 21.447 11.7188 21.2917L7.63882 18.9367C7.36976 18.7814 7.27755 18.4374 7.43285 18.1684Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9043 7.35718C17.215 7.35718 17.4668 7.60902 17.4668 7.91968V12.6297C17.4668 12.9403 17.215 13.1922 16.9043 13.1922C16.5936 13.1922 16.3418 12.9403 16.3418 12.6297V7.91968C16.3418 7.60902 16.5936 7.35718 16.9043 7.35718Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 5.01709C21.3107 5.01709 21.5625 5.26893 21.5625 5.57959V10.2746C21.5625 10.5852 21.3107 10.8371 21 10.8371C20.6893 10.8371 20.4375 10.5852 20.4375 10.2746V5.57959C20.4375 5.26893 20.6893 5.01709 21 5.01709Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8105 5.01709C13.1212 5.01709 13.373 5.26893 13.373 5.57959V10.2746C13.373 10.5852 13.1212 10.8371 12.8105 10.8371C12.4999 10.8371 12.248 10.5852 12.248 10.2746V5.57959C12.248 5.26893 12.4999 5.01709 12.8105 5.01709Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4723 5.29959C21.6269 5.56907 21.5337 5.91283 21.2642 6.06739L17.1842 8.40739C16.9148 8.56194 16.571 8.46878 16.4164 8.19929C16.2619 7.92981 16.3551 7.58605 16.6245 7.4315L20.7045 5.0915C20.974 4.93694 21.3178 5.03011 21.4723 5.29959Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3915 2.91348C17.5468 3.18253 17.4546 3.52654 17.1855 3.68184L13.1055 6.03684C12.8365 6.19214 12.4924 6.09993 12.3371 5.83087C12.1818 5.56181 12.2741 5.2178 12.5431 5.0625L16.6231 2.7075C16.8922 2.5522 17.2362 2.64442 17.3915 2.91348Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4716 9.9938C21.6269 10.2629 21.5346 10.6069 21.2656 10.7622L17.1856 13.1172C16.9165 13.2725 16.5725 13.1803 16.4172 12.9112C16.2619 12.6421 16.3541 12.2981 16.6232 12.1428L20.7032 9.78783C20.9723 9.63253 21.3163 9.72474 21.4716 9.9938Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3364 5.29959C12.4909 5.03011 12.8347 4.93694 13.1042 5.0915L17.1842 7.4315C17.4537 7.58605 17.5468 7.92981 17.3923 8.19929C17.2377 8.46878 16.894 8.56194 16.6245 8.40739L12.5445 6.06739C12.275 5.91283 12.1818 5.56907 12.3364 5.29959Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4172 2.91348C16.5725 2.64442 16.9165 2.5522 17.1856 2.7075L21.2656 5.0625C21.5346 5.2178 21.6269 5.56181 21.4716 5.83087C21.3163 6.09993 20.9723 6.19214 20.7032 6.03684L16.6232 3.68184C16.3541 3.52654 16.2619 3.18253 16.4172 2.91348Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3371 9.9938C12.4924 9.72474 12.8365 9.63253 13.1055 9.78783L17.1855 12.1428C17.4546 12.2981 17.5468 12.6421 17.3915 12.9112C17.2362 13.1803 16.8922 13.2725 16.6231 13.1172L12.5431 10.7622C12.2741 10.6069 12.1818 10.2629 12.3371 9.9938Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.0957 7.35718C7.40636 7.35718 7.6582 7.60902 7.6582 7.91968V12.6297C7.6582 12.9403 7.40636 13.1922 7.0957 13.1922C6.78504 13.1922 6.5332 12.9403 6.5332 12.6297V7.91968C6.5332 7.60902 6.78504 7.35718 7.0957 7.35718Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1895 5.01709C11.5001 5.01709 11.752 5.26893 11.752 5.57959V10.2746C11.752 10.5852 11.5001 10.8371 11.1895 10.8371C10.8788 10.8371 10.627 10.5852 10.627 10.2746V5.57959C10.627 5.26893 10.8788 5.01709 11.1895 5.01709Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 5.01709C3.31066 5.01709 3.5625 5.26893 3.5625 5.57959V10.2746C3.5625 10.5852 3.31066 10.8371 3 10.8371C2.68934 10.8371 2.4375 10.5852 2.4375 10.2746V5.57959C2.4375 5.26893 2.68934 5.01709 3 5.01709Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6618 5.29959C11.8163 5.56907 11.7232 5.91283 11.4537 6.06739L7.3737 8.40739C7.10421 8.56194 6.76046 8.46878 6.6059 8.19929C6.45134 7.92981 6.54451 7.58605 6.81399 7.4315L10.894 5.0915C11.1635 4.93694 11.5072 5.03011 11.6618 5.29959Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.58094 2.91348C7.73624 3.18253 7.64402 3.52654 7.37496 3.68184L3.29496 6.03684C3.02591 6.19214 2.6819 6.09993 2.5266 5.83087C2.3713 5.56181 2.46351 5.2178 2.73257 5.0625L6.81257 2.7075C7.08162 2.5522 7.42563 2.64442 7.58094 2.91348Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.661 9.9938C11.8163 10.2629 11.7241 10.6069 11.455 10.7622L7.37504 13.1172C7.10598 13.2725 6.76198 13.1803 6.60667 12.9112C6.45137 12.6421 6.54359 12.2981 6.81265 12.1428L10.8926 9.78783C11.1617 9.63253 11.5057 9.72474 11.661 9.9938Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.52582 5.29959C2.68038 5.03011 3.02413 4.93694 3.29362 5.0915L7.37362 7.4315C7.6431 7.58605 7.73627 7.92981 7.58171 8.19929C7.42715 8.46878 7.0834 8.56194 6.81392 8.40739L2.73392 6.06739C2.46443 5.91283 2.37127 5.56907 2.52582 5.29959Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.60667 2.91348C6.76198 2.64442 7.10598 2.5522 7.37504 2.7075L11.455 5.0625C11.7241 5.2178 11.8163 5.56181 11.661 5.83087C11.5057 6.09993 11.1617 6.19214 10.8926 6.03684L6.81265 3.68184C6.54359 3.52654 6.45137 3.18253 6.60667 2.91348Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5266 9.9938C2.6819 9.72474 3.02591 9.63253 3.29496 9.78783L7.37496 12.1428C7.64402 12.2981 7.73624 12.6421 7.58094 12.9112C7.42563 13.1803 7.08162 13.2725 6.81257 13.1172L2.73257 10.7622C2.46351 10.6069 2.3713 10.2629 2.5266 9.9938Z" fill="#B9871B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-partition.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-partition.svg
new file mode 100644
index 0000000..a7b60f3
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-partition.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 10.5V1.5C0.75 0.6 1.35 0 2.25 0H15.75C16.65 0 17.25 0.6 17.25 1.5V10.5H0.75Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.4375 9.75V6H9.5625V9.75H8.4375Z" fill="#C1CBD5"/>
+<path d="M15.75 0H9.6H8.4H2.25C1.35 0 0.75 0.6 0.75 1.5V4.8V6V10.5H17.25V6V4.95V1.5C17.25 0.6 16.65 0 15.75 0ZM15.75 1.2C15.9 1.2 16.05 1.35 16.05 1.5V4.8H9.6V1.2H15.75ZM1.8 1.5C1.8 1.35 1.95 1.2 2.1 1.2H8.25V4.95H1.8V1.5ZM16.2 9.3H1.8V6H8.4H9.6H16.2V9.3Z" fill="#2195E7"/>
+<path d="M3.75 13.5V4.5C3.75 3.6 4.35 3 5.25 3H18.75C19.65 3 20.25 3.6 20.25 4.5V13.5H3.75Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4375 12.75V9H12.5625V12.75H11.4375Z" fill="#C1CBD5"/>
+<path d="M18.75 21H5.25C4.35 21 3.75 20.4 3.75 19.5V16.5H20.25V19.5C20.25 20.4 19.65 21 18.75 21Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4375 20.25V15.75H12.5625V20.25H11.4375Z" fill="#C1CBD5"/>
+<path d="M18.75 3H12.6H11.4H5.25C4.35 3 3.75 3.6 3.75 4.5V7.8V9V13.5H20.25V9V7.95V4.5C20.25 3.6 19.65 3 18.75 3ZM18.75 4.2C18.9 4.2 19.05 4.35 19.05 4.5V7.8H12.6V4.2H18.75ZM4.8 4.5C4.8 4.35 4.95 4.2 5.1 4.2H11.25V7.95H4.8V4.5ZM19.2 12.3H4.8V9H11.4H12.6H19.2V12.3Z" fill="#2195E7"/>
+<path d="M3.75 19.5002C3.75 20.4002 4.35 21.0002 5.25 21.0002H18.75C19.65 21.0002 20.25 20.4002 20.25 19.5002V15.4502H3.75V19.5002ZM4.8 16.5002H19.05V19.5002C19.05 19.6502 18.9 19.8002 18.75 19.8002H5.25C5.1 19.8002 4.95 19.6502 4.95 19.5002L4.8 16.5002Z" fill="#2195E7"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_job.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_job.svg
new file mode 100644
index 0000000..9a1d225
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_job.svg
@@ -0,0 +1,22 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8152 4.86011H5.31023C4.78833 4.86011 4.36523 5.2832 4.36523 5.80511V16.9051C4.36523 17.427 4.78833 17.8501 5.31023 17.8501H13.8152C14.3371 17.8501 14.7602 17.427 14.7602 16.9051V5.80511C14.7602 5.2832 14.3371 4.86011 13.8152 4.86011Z" fill="#DEF4FD"/>
+<path d="M13.8149 5.43018C13.9144 5.43018 14.0098 5.46968 14.0801 5.54001C14.1504 5.61034 14.1899 5.70572 14.1899 5.80518V16.9202C14.1899 17.0196 14.1504 17.115 14.0801 17.1853C14.0098 17.2557 13.9144 17.2952 13.8149 17.2952H5.29492C5.19547 17.2952 5.10008 17.2557 5.02976 17.1853C4.95943 17.115 4.91992 17.0196 4.91992 16.9202V5.80518C4.91992 5.70572 4.95943 5.61034 5.02976 5.54001C5.10008 5.46968 5.19547 5.43018 5.29492 5.43018H13.8149ZM13.8149 4.30518H5.29492C4.8971 4.30518 4.51557 4.46321 4.23426 4.74452C3.95296 5.02582 3.79492 5.40735 3.79492 5.80518V16.9202C3.79492 17.318 3.95296 17.6995 4.23426 17.9808C4.51557 18.2621 4.8971 18.4202 5.29492 18.4202H13.8149C14.2127 18.4202 14.5943 18.2621 14.8756 17.9808C15.1569 17.6995 15.3149 17.318 15.3149 16.9202V5.80518C15.3149 5.40735 15.1569 5.02582 14.8756 4.74452C14.5943 4.46321 14.2127 4.30518 13.8149 4.30518Z" fill="#34495E"/>
+<path d="M7.5 5.02472V4.30472C7.5 4.11376 7.57586 3.93063 7.71088 3.7956C7.84591 3.66057 8.02904 3.58472 8.22 3.58472H10.83C11.021 3.58472 11.2041 3.66057 11.3391 3.7956C11.4741 3.93063 11.55 4.11376 11.55 4.30472V5.02472H7.5Z" fill="#DEF4FD"/>
+<path d="M10.8296 4.14C10.8683 4.14338 10.9045 4.16027 10.9319 4.1877C10.9593 4.21513 10.9762 4.25135 10.9796 4.29V4.5H8.11461V4.305C8.11836 4.26389 8.13739 4.22568 8.16793 4.19791C8.19848 4.17014 8.23833 4.15483 8.27961 4.155H10.8296V4.14ZM10.8296 3.03H8.26461C7.92506 3.02998 7.5992 3.16383 7.3577 3.40251C7.11621 3.6412 6.97856 3.96548 6.97461 4.305V5.595H12.1196V4.305C12.1216 4.13434 12.0897 3.96498 12.0258 3.80673C11.9618 3.64849 11.8671 3.5045 11.7471 3.38312C11.6271 3.26174 11.4843 3.16538 11.3268 3.09961C11.1693 3.03385 11.0003 2.99999 10.8296 3V3.03Z" fill="#34495E"/>
+<path d="M8.84961 9.00018V8.05518H12.9596V9.00018H8.84961Z" fill="#2195E7"/>
+<path d="M6.28516 9.09012V7.99512H7.38016V9.09012H6.28516Z" fill="#2195E7"/>
+<path d="M8.84961 11.9998V11.0698H12.9596V11.9998H8.84961Z" fill="#2195E7"/>
+<path d="M6.28516 12.1198V11.0098H7.38016V12.1048L6.28516 12.1198Z" fill="#2195E7"/>
+<path d="M8.84961 14.9998V14.0698H12.9596V14.9998H8.84961Z" fill="#2195E7"/>
+<path d="M6.28516 15.0001V13.9651H7.38016V15.0001H6.28516Z" fill="#2195E7"/>
+<path d="M18.7039 7.4397H10.1989C9.677 7.4397 9.25391 7.86279 9.25391 8.3847V19.4847C9.25391 20.0066 9.677 20.4297 10.1989 20.4297H18.7039C19.2258 20.4297 19.6489 20.0066 19.6489 19.4847V8.3847C19.6489 7.86279 19.2258 7.4397 18.7039 7.4397Z" fill="#DEF4FD"/>
+<path d="M18.7055 8.00977C18.805 8.00977 18.9004 8.04927 18.9707 8.1196C19.041 8.18993 19.0805 8.28531 19.0805 8.38477V19.4998C19.0805 19.5992 19.041 19.6946 18.9707 19.7649C18.9004 19.8353 18.805 19.8748 18.7055 19.8748H10.1855C10.0861 19.8748 9.99071 19.8353 9.92038 19.7649C9.85006 19.6946 9.81055 19.5992 9.81055 19.4998V8.38477C9.81055 8.28531 9.85006 8.18993 9.92038 8.1196C9.99071 8.04927 10.0861 8.00977 10.1855 8.00977H18.7055ZM18.7055 6.88477H10.1855C9.78772 6.88477 9.40619 7.0428 9.12489 7.32411C8.84358 7.60541 8.68555 7.98694 8.68555 8.38477V19.4998C8.68555 19.8976 8.84358 20.2791 9.12489 20.5604C9.40619 20.8417 9.78772 20.9998 10.1855 20.9998H18.7055C19.1034 20.9998 19.4849 20.8417 19.7662 20.5604C20.0475 20.2791 20.2055 19.8976 20.2055 19.4998V8.38477C20.2055 7.98694 20.0475 7.60541 19.7662 7.32411C19.4849 7.0428 19.1034 6.88477 18.7055 6.88477Z" fill="#34495E"/>
+<path d="M12.4492 7.60528V6.88528C12.4492 6.69433 12.5251 6.51119 12.6601 6.37617C12.7951 6.24114 12.9783 6.16528 13.1692 6.16528H15.7342C15.9252 6.16528 16.1083 6.24114 16.2433 6.37617C16.3784 6.51119 16.4542 6.69433 16.4542 6.88528V7.60528H12.4492Z" fill="#DEF4FD"/>
+<path d="M15.7345 6.72011C15.7758 6.71994 15.8157 6.73525 15.8462 6.76302C15.8768 6.79079 15.8958 6.829 15.8995 6.87011V7.03511H13.0045V6.88511C13.0079 6.84646 13.0248 6.81024 13.0522 6.78281C13.0797 6.75538 13.1159 6.73849 13.1545 6.73511H15.7195L15.7345 6.72011ZM15.7195 5.61011H13.1695C12.8326 5.614 12.5105 5.74958 12.2723 5.98785C12.034 6.22612 11.8984 6.54817 11.8945 6.88511V8.17511H17.0245V6.88511C17.0206 6.54558 16.8829 6.22131 16.6414 5.98262C16.3999 5.74393 16.0741 5.61008 15.7345 5.61011H15.7195Z" fill="#34495E"/>
+<path d="M13.7539 11.5198V10.6348H17.8489V11.5198H13.7539Z" fill="#2195E7"/>
+<path d="M11.1758 11.6851V10.5901H12.2708V11.6851H11.1758Z" fill="#2195E7"/>
+<path d="M13.7539 14.5349V13.6499H17.8489V14.5349H13.7539Z" fill="#2195E7"/>
+<path d="M11.1758 14.7V13.605H12.2708V14.7H11.1758Z" fill="#2195E7"/>
+<path d="M13.7539 17.5349V16.6499H17.8489V17.5349H13.7539Z" fill="#2195E7"/>
+<path d="M11.1758 17.64V16.5H12.2708V17.595L11.1758 17.64Z" fill="#2195E7"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_jobstep.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_jobstep.svg
new file mode 100644
index 0000000..55fae61
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_jobstep.svg
@@ -0,0 +1,22 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.34922 4.05029H13.6492C14.0992 4.05029 14.5492 4.50029 14.5492 4.95029V16.9503C14.5492 17.4003 14.0992 17.8503 13.6492 17.8503H4.34922C3.89922 17.8503 3.44922 17.4003 3.44922 16.9503V4.95029C3.59922 4.50029 3.89922 4.05029 4.34922 4.05029Z" fill="#DEF4FD"/>
+<path d="M13.65 4.6501C13.8 4.6501 13.95 4.8001 13.95 4.9501V16.9501C13.95 17.1001 13.8 17.2501 13.65 17.2501H4.35C4.2 17.2501 4.05 17.1001 4.05 16.9501V4.9501C4.05 4.8001 4.2 4.6501 4.35 4.6501H13.65ZM13.8 3.6001H4.35C3.6 3.6001 3 4.2001 3 4.9501V16.9501C3 17.7001 3.6 18.3001 4.35 18.3001H13.65C14.4 18.3001 15 17.7001 15 16.9501V4.9501C15 4.2001 14.4 3.6001 13.8 3.6001Z" fill="#34495E"/>
+<path d="M6.90039 4.5002V3.6002C6.90039 3.1502 7.20039 2.8502 7.80039 2.7002H10.5004C10.9504 2.7002 11.4004 3.0002 11.4004 3.6002V4.5002H6.90039Z" fill="#DEF4FD"/>
+<path d="M10.3508 3.0002C10.5008 3.0002 10.6508 3.1502 10.6508 3.3002V3.6002H7.35078V3.3002C7.35078 3.1502 7.50078 3.0002 7.65078 3.0002H10.3508ZM10.3508 1.9502H7.65078C6.90078 1.9502 6.30078 2.5502 6.30078 3.3002V4.6502H11.7008V3.3002C11.7008 2.5502 11.1008 1.9502 10.3508 1.9502Z" fill="#34495E"/>
+<path d="M12.9 7.5H9V8.4H12.9V7.5Z" fill="#2195E7"/>
+<path d="M12.9 10.9502H9V11.8502H12.9V10.9502Z" fill="#2195E7"/>
+<path d="M12.9 14.7002H9V15.6002H12.9V14.7002Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.2216 6.32972C8.4539 6.47905 8.52115 6.78843 8.37182 7.02072L7.02182 9.12072C6.94431 9.2413 6.81878 9.32281 6.6771 9.34456C6.53542 9.36632 6.39122 9.32622 6.2811 9.23446L5.3811 8.48446C5.16895 8.30767 5.14029 7.99237 5.31708 7.78022C5.49387 7.56807 5.80917 7.53941 6.02132 7.7162L6.4866 8.10394L7.5306 6.47994C7.67993 6.24764 7.98931 6.18039 8.2216 6.32972Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.23583 10.0892C8.46288 10.2464 8.51952 10.5579 8.36233 10.7849L7.01233 12.7349C6.93243 12.8503 6.80771 12.9268 6.66863 12.9458C6.52956 12.9647 6.38893 12.9243 6.2811 12.8344L5.3811 12.0844C5.16895 11.9077 5.14029 11.5924 5.31708 11.3802C5.49387 11.1681 5.80917 11.1394 6.02132 11.3162L6.5013 11.7162L7.54009 10.2157C7.69728 9.98864 8.00877 9.93201 8.23583 10.0892Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.2216 13.2296C8.4539 13.379 8.52115 13.6883 8.37182 13.9206L7.02182 16.0206C6.94431 16.1412 6.81878 16.2227 6.6771 16.2445C6.53542 16.2662 6.39122 16.2261 6.2811 16.1344L5.3811 15.3844C5.16895 15.2076 5.14029 14.8923 5.31708 14.6801C5.49387 14.468 5.80917 14.4393 6.02132 14.6161L6.4866 15.0038L7.5306 13.3798C7.67993 13.1475 7.98931 13.0803 8.2216 13.2296Z" fill="#2195E7"/>
+<path d="M10.3492 7.9502H19.6492C20.0992 7.9502 20.5492 8.4002 20.5492 8.8502V20.8502C20.5492 21.3002 20.0992 21.7502 19.6492 21.7502H10.3492C9.89922 21.7502 9.44922 21.3002 9.44922 20.8502V8.8502C9.44922 8.2502 9.74922 7.9502 10.3492 7.9502Z" fill="#DEF4FD"/>
+<path d="M19.65 8.4001C19.8 8.4001 19.95 8.5501 19.95 8.7001V20.7001C19.95 20.8501 19.8 21.0001 19.65 21.0001H10.2C10.05 21.0001 9.9 20.8501 9.9 20.7001V8.7001C9.9 8.5501 10.05 8.4001 10.2 8.4001H19.65ZM19.65 7.3501H10.2C9.6 7.3501 9 7.9501 9 8.7001V20.7001C9 21.4501 9.6 22.0501 10.35 22.0501H19.65C20.4 22.0501 21 21.4501 21 20.7001V8.7001C21 7.9501 20.4 7.3501 19.65 7.3501Z" fill="#34495E"/>
+<path d="M12.75 8.25019V7.35019C12.75 6.9002 13.05 6.6002 13.65 6.4502H16.35C16.8 6.4502 17.25 6.7502 17.25 7.35019V8.25019H12.75Z" fill="#DEF4FD"/>
+<path d="M16.2008 6.75019C16.3508 6.75019 16.5008 6.90019 16.5008 7.05019V7.35019H13.2008V7.05019C13.2008 6.90019 13.3508 6.75019 13.5008 6.75019H16.2008ZM16.2008 5.7002H13.6508C12.9008 5.7002 12.3008 6.30019 12.3008 7.05019V8.40019H17.7008V7.05019C17.5508 6.30019 16.9508 5.7002 16.2008 5.7002Z" fill="#34495E"/>
+<path d="M18.8996 11.4004H14.8496V12.3004H18.8996V11.4004Z" fill="#2195E7"/>
+<path d="M18.8996 14.8501H14.8496V15.7501H18.8996V14.8501Z" fill="#2195E7"/>
+<path d="M18.8996 18.4502H14.8496V19.3502H18.8996V18.4502Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2537 10.2541C14.4726 10.4225 14.5136 10.7364 14.3452 10.9553L12.8452 12.9053C12.7623 13.0131 12.639 13.0825 12.5038 13.0974C12.3687 13.1124 12.2332 13.0716 12.1288 12.9846L11.2288 12.2346C11.0166 12.0578 10.9879 11.7425 11.1647 11.5303C11.3415 11.3182 11.6568 11.2895 11.869 11.4663L12.3695 11.8835L13.5525 10.3456C13.7209 10.1267 14.0348 10.0857 14.2537 10.2541Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2537 13.854C14.4726 14.0223 14.5136 14.3363 14.3452 14.5552L12.8452 16.5052C12.7623 16.613 12.639 16.6823 12.5038 16.6973C12.3687 16.7122 12.2332 16.6715 12.1288 16.5844L11.2288 15.8344C11.0166 15.6576 10.9879 15.3423 11.1647 15.1302C11.3415 14.918 11.6568 14.8894 11.869 15.0662L12.3695 15.4833L13.5525 13.9454C13.7209 13.7265 14.0348 13.6856 14.2537 13.854Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2537 17.1538C14.4726 17.3221 14.5136 17.6361 14.3452 17.855L12.8452 19.805C12.7623 19.9128 12.639 19.9821 12.5038 19.9971C12.3687 20.012 12.2332 19.9713 12.1288 19.8842L11.2288 19.1342C11.0166 18.9574 10.9879 18.6421 11.1647 18.43C11.3415 18.2178 11.6568 18.1892 11.869 18.366L12.3695 18.7831L13.5525 17.2452C13.7209 17.0263 14.0348 16.9854 14.2537 17.1538Z" fill="#2195E7"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_schedule.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_schedule.svg
new file mode 100644
index 0000000..4fa6697
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-pga_schedule.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6055 17.4902C14.3334 17.4902 17.3555 14.4682 17.3555 10.7402C17.3555 7.01231 14.3334 3.99023 10.6055 3.99023C6.87755 3.99023 3.85547 7.01231 3.85547 10.7402C3.85547 14.4682 6.87755 17.4902 10.6055 17.4902Z" fill="#E3F3F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6055 4.55273C7.18821 4.55273 4.41797 7.32297 4.41797 10.7402C4.41797 14.1575 7.18821 16.9277 10.6055 16.9277C14.0227 16.9277 16.793 14.1575 16.793 10.7402C16.793 7.32297 14.0227 4.55273 10.6055 4.55273ZM3.29297 10.7402C3.29297 6.70165 6.56689 3.42773 10.6055 3.42773C14.6441 3.42773 17.918 6.70165 17.918 10.7402C17.918 14.7788 14.6441 18.0527 10.6055 18.0527C6.56689 18.0527 3.29297 14.7788 3.29297 10.7402Z" fill="#BD4949"/>
+<path d="M13.3965 20.0103C17.1244 20.0103 20.1465 16.9882 20.1465 13.2603C20.1465 9.53233 17.1244 6.51025 13.3965 6.51025C9.66856 6.51025 6.64648 9.53233 6.64648 13.2603C6.64648 16.9882 9.66856 20.0103 13.3965 20.0103Z" fill="#E3F3F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3965 7.07275C9.97922 7.07275 7.20898 9.84299 7.20898 13.2603C7.20898 16.6775 9.97922 19.4478 13.3965 19.4478C16.8137 19.4478 19.584 16.6775 19.584 13.2603C19.584 9.84299 16.8137 7.07275 13.3965 7.07275ZM6.08398 13.2603C6.08398 9.22167 9.3579 5.94775 13.3965 5.94775C17.4351 5.94775 20.709 9.22167 20.709 13.2603C20.709 17.2988 17.4351 20.5728 13.3965 20.5728C9.3579 20.5728 6.08398 17.2988 6.08398 13.2603Z" fill="#BD4949"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3965 8.46021C13.8107 8.46021 14.1465 8.79599 14.1465 9.21021V13.2602C14.1465 13.6744 13.8107 14.0102 13.3965 14.0102C12.9823 14.0102 12.6465 13.6744 12.6465 13.2602V9.21021C12.6465 8.79599 12.9823 8.46021 13.3965 8.46021Z" fill="#1E50AD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6465 13.2603C12.6465 12.846 12.9823 12.5103 13.3965 12.5103H17.4465C17.8607 12.5103 18.1965 12.846 18.1965 13.2603C18.1965 13.6745 17.8607 14.0103 17.4465 14.0103H13.3965C12.9823 14.0103 12.6465 13.6745 12.6465 13.2603Z" fill="#1E50AD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-procedure.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-procedure.svg
new file mode 100644
index 0000000..b7f6a3b
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-procedure.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5609 17.22L15.0759 16.41L15.4959 14.61V13.785L15.7209 11.985L16.2609 11.31L17.6109 10.62H16.2609L17.1909 10.455L15.7809 9.42002L15.6909 8.71502V7.42502L15.4959 5.64002L14.9409 4.98002L14.0409 4.59002L13.5609 4.54502L6.28586 4.39502L5.23586 5.13002L4.59086 5.65502V6.39002L4.69586 6.18002L4.47086 8.61002L4.59086 9.45002L2.76086 10.62L2.50586 10.86L2.76086 10.62L3.94586 11.49L4.11086 11.985L4.81586 13.8L4.77086 14.595L4.74086 15.15L4.77086 14.19V14.655L5.02586 15.81L5.46086 16.38L6.21086 16.83L6.81086 17.22H13.5609Z" fill="#EDFFFD"/>
+<path d="M16.8158 10.6052C16.6653 10.5594 16.5196 10.4991 16.3808 10.4252C16.2262 10.3474 16.0845 10.2462 15.9608 10.1252C15.8467 10.0103 15.7506 9.87883 15.6758 9.7352C15.5919 9.56003 15.5362 9.37273 15.5108 9.1802C15.4938 8.91547 15.4938 8.64992 15.5108 8.3852C15.5108 8.0752 15.5108 7.6902 15.5108 7.2302V7.5002C15.5108 7.1852 15.5108 6.8702 15.5108 6.5252C15.4853 6.19999 15.3934 5.88347 15.2408 5.5952C15.0759 5.29536 14.8321 5.04637 14.5358 4.8752C14.0816 4.62381 13.5699 4.4946 13.0508 4.5002V4.2002H13.4108H13.8608L14.3408 4.3502C14.5077 4.41794 14.6642 4.50883 14.8058 4.6202C15.0263 4.78412 15.2145 4.98757 15.3608 5.2202C15.4934 5.44353 15.5896 5.68658 15.6458 5.9402C15.7072 6.22133 15.7423 6.50756 15.7508 6.7952C15.7508 7.1102 15.7508 8.0552 15.7508 8.0552C15.7445 8.38682 15.7697 8.7183 15.8258 9.0452C15.8707 9.30269 15.9789 9.54497 16.1408 9.7502C16.3204 9.95942 16.5464 10.1238 16.8008 10.2302C17.1008 10.5002 16.9658 10.6352 16.8158 10.6052Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M7.15516 4.5001C6.67923 4.50519 6.21135 4.62345 5.79016 4.8451C5.49386 5.01627 5.25005 5.26526 5.08516 5.5651C4.9329 5.85353 4.84103 6.16997 4.81516 6.4951C4.81516 6.8251 4.81516 7.1501 4.81516 7.4701V7.2151C4.81516 7.6651 4.81516 8.0551 4.81516 8.3701C4.83222 8.63482 4.83222 8.90037 4.81516 9.1651C4.74347 9.36712 4.63685 9.55498 4.50016 9.7201C4.42578 9.86398 4.32964 9.99553 4.21516 10.1101C4.09253 10.2365 3.9508 10.3428 3.79516 10.4251L3.36016 10.6051L3.00016 10.6951C2.88016 10.6951 2.88016 10.6951 3.00016 10.7701L3.39016 10.8601C3.54064 10.9059 3.68632 10.9662 3.82516 11.0401C3.97977 11.1179 4.12145 11.2191 4.24516 11.3401C4.34992 11.4616 4.43588 11.5981 4.50016 11.7451C4.58402 11.9203 4.63971 12.1076 4.66516 12.3001C4.68214 12.5648 4.68214 12.8304 4.66516 13.0951C4.66516 13.4051 4.66516 13.7901 4.66516 14.2501V14.0101C4.66516 14.3251 4.66516 14.6401 4.66516 14.9851C4.69061 15.3103 4.78251 15.6268 4.93516 15.9151C5.10005 16.2149 5.34386 16.4639 5.64016 16.6351C6.06135 16.8568 6.52923 16.975 7.00516 16.9801V17.2651H6.64516H6.19516L5.71516 17.1151C5.54826 17.0474 5.39172 16.9565 5.25016 16.8451C5.02962 16.6812 4.84143 16.4777 4.69516 16.2451C4.58261 15.9836 4.51662 15.7044 4.50016 15.4201C4.4739 15.1357 4.4739 14.8495 4.50016 14.5651C4.50016 14.2501 4.50016 13.3051 4.50016 13.3051C4.5064 12.9735 4.48128 12.642 4.42516 12.3151C4.38028 12.0576 4.27203 11.8153 4.11016 11.6101C3.93055 11.4009 3.70454 11.2365 3.45016 11.1301C3.38515 11.0879 3.33173 11.0301 3.29474 10.962C3.25776 10.8939 3.23839 10.8176 3.23839 10.7401C3.23839 10.6626 3.25776 10.5863 3.29474 10.5182C3.33173 10.4501 3.38515 10.3923 3.45016 10.3501C3.70454 10.2437 3.93055 10.0793 4.11016 9.8701C4.27149 9.66455 4.37968 9.42241 4.42516 9.1651C4.48223 8.83327 4.50735 8.49673 4.50016 8.1601C4.50016 8.1601 4.50016 6.3001 4.50016 6.0001C4.55757 5.7516 4.65375 5.51369 4.78516 5.2951C4.93115 5.06226 5.11938 4.85876 5.34016 4.6951C5.50946 4.60361 5.69146 4.53788 5.88016 4.5001L6.36016 4.3501H6.81016H7.17016L7.15516 4.5001Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M17.4456 19.7703L18.9606 18.9603L19.3956 17.1603V16.3203L19.6206 14.5203L20.1456 13.8453L21.4956 13.1703H20.1456L21.0756 13.0053L19.6656 11.9553L19.5906 11.2503V9.96031L19.3956 8.17531L18.8256 7.53031L17.9256 7.12531L17.4456 7.08031L10.1706 6.94531L9.12062 7.66531L8.47562 8.20531V8.92531L8.59562 8.73031L8.37062 11.1453L8.47562 11.9853L6.64562 13.1703L6.39062 13.3953L6.64562 13.1703L7.83062 14.0403L7.99562 14.5203L8.70062 16.3353L8.65562 17.1303L8.64062 17.6853L8.65562 16.7253V17.1903L8.92562 18.3453L9.34562 18.9303L10.0956 19.3653L10.6956 19.7703H17.4456Z" fill="#EDFFFD"/>
+<path d="M16.9369 19.5001C17.4128 19.495 17.8807 19.3768 18.3019 19.1551C18.5982 18.9839 18.842 18.7349 19.0069 18.4351C19.1591 18.1467 19.251 17.8302 19.2769 17.5051C19.2769 17.1751 19.2769 16.8501 19.2769 16.5301V16.7701C19.2769 16.3201 19.2769 15.9301 19.2769 15.6151C19.2598 15.3504 19.2598 15.0848 19.2769 14.8201C19.3021 14.6275 19.3578 14.4402 19.4419 14.2651C19.5163 14.1212 19.6124 13.9897 19.7269 13.8751C19.8495 13.7487 19.9912 13.6424 20.1469 13.5601L20.5819 13.3801L20.9719 13.2901C21.0919 13.2901 21.0919 13.2901 20.9719 13.2151L20.5819 13.1251C20.4314 13.0793 20.2857 13.019 20.1469 12.9451C19.9923 12.8673 19.8506 12.7661 19.7269 12.6451C19.6127 12.5302 19.5167 12.3987 19.4419 12.2551C19.358 12.0799 19.3023 11.8926 19.2769 11.7001C19.2599 11.4354 19.2599 11.1698 19.2769 10.9051C19.2769 10.5951 19.2769 10.2101 19.2769 9.75011V9.99011C19.2769 9.67511 19.2769 9.36011 19.2769 9.01511C19.2514 8.68991 19.1595 8.37338 19.0069 8.08511C18.842 7.78527 18.5982 7.53628 18.3019 7.36511C17.8807 7.14346 17.4128 7.0252 16.9369 7.02011V6.73511H17.2969H17.7469L18.2269 6.88511C18.3938 6.95285 18.5503 7.04374 18.6919 7.15511C18.9124 7.31904 19.1006 7.52248 19.2469 7.75511C19.3795 7.97844 19.4757 8.22149 19.5319 8.47511C19.5933 8.75625 19.6284 9.04247 19.6369 9.33011C19.6369 9.64511 19.6369 10.5901 19.6369 10.5901C19.6306 10.9217 19.6557 11.2532 19.7119 11.5801C19.7568 11.8376 19.865 12.0799 20.0269 12.2851C20.2065 12.4943 20.4325 12.6587 20.6869 12.7651C20.7519 12.8073 20.8053 12.8651 20.8423 12.9332C20.8793 13.0013 20.8986 13.0776 20.8986 13.1551C20.8986 13.2326 20.8793 13.3089 20.8423 13.377C20.8053 13.4451 20.7519 13.5029 20.6869 13.5451C20.4325 13.6515 20.2065 13.8159 20.0269 14.0251C19.8655 14.2307 19.7574 14.4728 19.7119 14.7301C19.6557 15.057 19.6306 15.3885 19.6369 15.7201C19.6369 15.7201 19.6369 17.5801 19.5169 17.8351C19.4595 18.0836 19.3633 18.3215 19.2319 18.5401C19.0859 18.7729 18.8976 18.9764 18.6769 19.1401C18.5352 19.2513 18.3787 19.3422 18.2119 19.4101L17.7319 19.5601H17.2819H16.9219L16.9369 19.5001Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M11.041 7.03528C10.5651 7.04038 10.0972 7.15863 9.67601 7.38028C9.39272 7.55157 9.15983 7.79481 9.00102 8.08528C8.84023 8.36688 8.73817 8.67815 8.70102 9.00028C8.70102 9.33028 8.70102 9.65528 8.70102 9.97528V9.75028C8.70102 10.2003 8.70102 10.5903 8.70102 10.9053C8.71808 11.17 8.71808 11.4356 8.70102 11.7003C8.67582 11.8929 8.62012 12.0802 8.53602 12.2553C8.46163 12.3992 8.3655 12.5307 8.25102 12.6453C8.12839 12.7716 7.98666 12.8779 7.83102 12.9603L7.39602 13.1403L7.00602 13.2303C6.88602 13.2303 6.88602 13.2303 7.00602 13.3053L7.39602 13.3953C7.5465 13.4411 7.69218 13.5013 7.83102 13.5753C7.98563 13.6531 8.1273 13.7542 8.25102 13.8753C8.36515 13.9902 8.46123 14.1217 8.53602 14.2653C8.61988 14.4404 8.67557 14.6278 8.70102 14.8203C8.718 15.085 8.718 15.3506 8.70102 15.6153C8.70102 15.9253 8.70102 16.3103 8.70102 16.7703V16.5003C8.70102 16.8153 8.70102 17.1303 8.70102 17.4753C8.72953 17.8181 8.83187 18.1507 9.00102 18.4503C9.16591 18.7501 9.40972 18.9991 9.70601 19.1703C10.1272 19.3919 10.5951 19.5102 11.071 19.5153V19.8003H10.711H10.261L9.76602 19.5003C9.59912 19.4325 9.44258 19.3416 9.30101 19.2303C9.08048 19.0664 8.89229 18.8629 8.74602 18.6303C8.62165 18.4348 8.52569 18.2227 8.46101 18.0003C8.39964 17.7191 8.36448 17.4329 8.35602 17.1453C8.35602 16.8303 8.35602 15.8853 8.35602 15.8853C8.36226 15.5537 8.33714 15.2222 8.28102 14.8953C8.23614 14.6378 8.12789 14.3955 7.96602 14.1903C7.78641 13.9811 7.5604 13.8167 7.30602 13.7103C7.24101 13.6681 7.18759 13.6103 7.1506 13.5422C7.11362 13.4741 7.09424 13.3978 7.09424 13.3203C7.09424 13.2428 7.11362 13.1665 7.1506 13.0984C7.18759 13.0303 7.24101 12.9725 7.30602 12.9303C7.5604 12.8239 7.78641 12.6595 7.96602 12.4503C8.12735 12.2447 8.23554 12.0026 8.28102 11.7453C8.33714 11.4184 8.36226 11.0869 8.35602 10.7553C8.35602 10.7553 8.35602 8.89528 8.47602 8.64028C8.53343 8.39178 8.62961 8.15387 8.76102 7.93528C8.90701 7.70244 9.09524 7.49895 9.31602 7.33528C9.45769 7.22408 9.6142 7.1332 9.78101 7.06528L10.261 6.91528H10.711H11.071L11.041 7.03528Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-resource_group.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-resource_group.svg
new file mode 100644
index 0000000..55bea3e
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-resource_group.svg
@@ -0,0 +1,20 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4146 3.6001H5.09961C4.27118 3.6001 3.59961 4.27167 3.59961 5.1001V14.4151C3.59961 15.2435 4.27118 15.9151 5.09961 15.9151H14.4146C15.243 15.9151 15.9146 15.2435 15.9146 14.4151V5.1001C15.9146 4.27167 15.243 3.6001 14.4146 3.6001Z" fill="#DEF4FD"/>
+<path d="M7.88969 10.6804H5.62469C5.10278 10.6804 4.67969 11.1035 4.67969 11.6254V13.8904C4.67969 14.4123 5.10278 14.8354 5.62469 14.8354H7.88969C8.4116 14.8354 8.83469 14.4123 8.83469 13.8904V11.6254C8.83469 11.1035 8.4116 10.6804 7.88969 10.6804Z" fill="#DEF4FD"/>
+<path d="M7.88938 11.2349C7.98883 11.2349 8.08421 11.2744 8.15454 11.3447C8.22487 11.415 8.26438 11.5104 8.26438 11.6099V13.8899C8.26438 13.9893 8.22487 14.0847 8.15454 14.155C8.08421 14.2254 7.98883 14.2649 7.88938 14.2649H5.60938C5.50992 14.2649 5.41454 14.2254 5.34421 14.155C5.27388 14.0847 5.23438 13.9893 5.23438 13.8899V11.6099C5.23438 11.5104 5.27388 11.415 5.34421 11.3447C5.41454 11.2744 5.50992 11.2349 5.60938 11.2349H7.88938ZM7.88938 10.1099H5.60938C5.21155 10.1099 4.83002 10.2679 4.54871 10.5492C4.26741 10.8305 4.10938 11.212 4.10938 11.6099V13.8899C4.10938 14.2877 4.26741 14.6692 4.54871 14.9505C4.83002 15.2318 5.21155 15.3899 5.60938 15.3899H7.88938C8.2872 15.3899 8.66873 15.2318 8.95004 14.9505C9.23134 14.6692 9.38938 14.2877 9.38938 13.8899V11.6099C9.38938 11.212 9.23134 10.8305 8.95004 10.5492C8.66873 10.2679 8.2872 10.1099 7.88938 10.1099Z" fill="#2195E7"/>
+<path d="M7.88969 4.68042H5.62469C5.10278 4.68042 4.67969 5.10351 4.67969 5.62542V7.89042C4.67969 8.41233 5.10278 8.83542 5.62469 8.83542H7.88969C8.4116 8.83542 8.83469 8.41233 8.83469 7.89042V5.62542C8.83469 5.10351 8.4116 4.68042 7.88969 4.68042Z" fill="#DEF4FD"/>
+<path d="M7.88938 5.23486C7.98883 5.23486 8.08421 5.27437 8.15454 5.3447C8.22487 5.41502 8.26438 5.51041 8.26438 5.60986V7.88986C8.26438 7.98932 8.22487 8.0847 8.15454 8.15503C8.08421 8.22535 7.98883 8.26486 7.88938 8.26486H5.60938C5.50992 8.26486 5.41454 8.22535 5.34421 8.15503C5.27388 8.0847 5.23438 7.98932 5.23438 7.88986V5.60986C5.23438 5.51041 5.27388 5.41502 5.34421 5.3447C5.41454 5.27437 5.50992 5.23486 5.60938 5.23486H7.88938ZM7.88938 4.10986H5.60938C5.21155 4.10986 4.83002 4.2679 4.54871 4.5492C4.26741 4.83051 4.10938 5.21204 4.10938 5.60986V7.88986C4.10938 8.28769 4.26741 8.66922 4.54871 8.95052C4.83002 9.23183 5.21155 9.38986 5.60938 9.38986H7.88938C8.2872 9.38986 8.66873 9.23183 8.95004 8.95052C9.23134 8.66922 9.38938 8.28769 9.38938 7.88986V5.60986C9.38938 5.21204 9.23134 4.83051 8.95004 4.5492C8.66873 4.2679 8.2872 4.10986 7.88938 4.10986Z" fill="#2195E7"/>
+<path d="M13.8897 10.6804H11.6247C11.1028 10.6804 10.6797 11.1035 10.6797 11.6254V13.8904C10.6797 14.4123 11.1028 14.8354 11.6247 14.8354H13.8897C14.4116 14.8354 14.8347 14.4123 14.8347 13.8904V11.6254C14.8347 11.1035 14.4116 10.6804 13.8897 10.6804Z" fill="#DEF4FD"/>
+<path d="M13.8894 11.2349C13.9888 11.2349 14.0842 11.2744 14.1545 11.3447C14.2249 11.415 14.2644 11.5104 14.2644 11.6099V13.8899C14.2644 13.9893 14.2249 14.0847 14.1545 14.155C14.0842 14.2254 13.9888 14.2649 13.8894 14.2649H11.6094C11.5099 14.2649 11.4145 14.2254 11.3442 14.155C11.2739 14.0847 11.2344 13.9893 11.2344 13.8899V11.6099C11.2344 11.5104 11.2739 11.415 11.3442 11.3447C11.4145 11.2744 11.5099 11.2349 11.6094 11.2349H13.8894ZM13.8894 10.1099H11.6094C11.2115 10.1099 10.83 10.2679 10.5487 10.5492C10.2674 10.8305 10.1094 11.212 10.1094 11.6099V13.8899C10.1094 14.2877 10.2674 14.6692 10.5487 14.9505C10.83 15.2318 11.2115 15.3899 11.6094 15.3899H13.8894C14.2872 15.3899 14.6687 15.2318 14.95 14.9505C15.2313 14.6692 15.3894 14.2877 15.3894 13.8899V11.6099C15.3894 11.212 15.2313 10.8305 14.95 10.5492C14.6687 10.2679 14.2872 10.1099 13.8894 10.1099Z" fill="#2195E7"/>
+<path d="M13.8897 4.68042H11.6247C11.1028 4.68042 10.6797 5.10351 10.6797 5.62542V7.89042C10.6797 8.41233 11.1028 8.83542 11.6247 8.83542H13.8897C14.4116 8.83542 14.8347 8.41233 14.8347 7.89042V5.62542C14.8347 5.10351 14.4116 4.68042 13.8897 4.68042Z" fill="#DEF4FD"/>
+<path d="M13.8894 5.23486C13.9888 5.23486 14.0842 5.27437 14.1545 5.3447C14.2249 5.41502 14.2644 5.51041 14.2644 5.60986V7.88986C14.2644 7.98932 14.2249 8.0847 14.1545 8.15503C14.0842 8.22535 13.9888 8.26486 13.8894 8.26486H11.6094C11.5099 8.26486 11.4145 8.22535 11.3442 8.15503C11.2739 8.0847 11.2344 7.98932 11.2344 7.88986V5.60986C11.2344 5.51041 11.2739 5.41502 11.3442 5.3447C11.4145 5.27437 11.5099 5.23486 11.6094 5.23486H13.8894ZM13.8894 4.10986H11.6094C11.2115 4.10986 10.83 4.2679 10.5487 4.5492C10.2674 4.83051 10.1094 5.21204 10.1094 5.60986V7.88986C10.1094 8.28769 10.2674 8.66922 10.5487 8.95052C10.83 9.23183 11.2115 9.38986 11.6094 9.38986H13.8894C14.2872 9.38986 14.6687 9.23183 14.95 8.95052C15.2313 8.66922 15.3894 8.28769 15.3894 7.88986V5.60986C15.3894 5.21204 15.2313 4.83051 14.95 4.5492C14.6687 4.2679 14.2872 4.10986 13.8894 4.10986Z" fill="#2195E7"/>
+<path d="M18.9146 8.1001H9.59961C8.77118 8.1001 8.09961 8.77167 8.09961 9.6001V18.9151C8.09961 19.7435 8.77118 20.4151 9.59961 20.4151H18.9146C19.743 20.4151 20.4146 19.7435 20.4146 18.9151V9.6001C20.4146 8.77167 19.743 8.1001 18.9146 8.1001Z" fill="#DEF4FD"/>
+<path d="M12.3897 15.1804H10.1247C9.60278 15.1804 9.17969 15.6035 9.17969 16.1254V18.3904C9.17969 18.9123 9.60278 19.3354 10.1247 19.3354H12.3897C12.9116 19.3354 13.3347 18.9123 13.3347 18.3904V16.1254C13.3347 15.6035 12.9116 15.1804 12.3897 15.1804Z" fill="#DEF4FD"/>
+<path d="M12.3894 15.7349C12.4888 15.7349 12.5842 15.7744 12.6545 15.8447C12.7249 15.915 12.7644 16.0104 12.7644 16.1099V18.3899C12.7644 18.4893 12.7249 18.5847 12.6545 18.655C12.5842 18.7254 12.4888 18.7649 12.3894 18.7649H10.1094C10.0099 18.7649 9.91454 18.7254 9.84421 18.655C9.77388 18.5847 9.73437 18.4893 9.73437 18.3899V16.1099C9.73437 16.0104 9.77388 15.915 9.84421 15.8447C9.91454 15.7744 10.0099 15.7349 10.1094 15.7349H12.3894ZM12.3894 14.6099H10.1094C9.71155 14.6099 9.33002 14.7679 9.04871 15.0492C8.76741 15.3305 8.60938 15.712 8.60938 16.1099V18.3899C8.60938 18.7877 8.76741 19.1692 9.04871 19.4505C9.33002 19.7318 9.71155 19.8899 10.1094 19.8899H12.3894C12.7872 19.8899 13.1687 19.7318 13.45 19.4505C13.7313 19.1692 13.8894 18.7877 13.8894 18.3899V16.1099C13.8894 15.712 13.7313 15.3305 13.45 15.0492C13.1687 14.7679 12.7872 14.6099 12.3894 14.6099Z" fill="#2195E7"/>
+<path d="M12.3897 9.18042H10.1247C9.60278 9.18042 9.17969 9.60351 9.17969 10.1254V12.3904C9.17969 12.9123 9.60278 13.3354 10.1247 13.3354H12.3897C12.9116 13.3354 13.3347 12.9123 13.3347 12.3904V10.1254C13.3347 9.60351 12.9116 9.18042 12.3897 9.18042Z" fill="#DEF4FD"/>
+<path d="M12.3894 9.73486C12.4888 9.73486 12.5842 9.77437 12.6545 9.8447C12.7249 9.91503 12.7644 10.0104 12.7644 10.1099V12.3899C12.7644 12.4893 12.7249 12.5847 12.6545 12.655C12.5842 12.7254 12.4888 12.7649 12.3894 12.7649H10.1094C10.0099 12.7649 9.91454 12.7254 9.84421 12.655C9.77388 12.5847 9.73437 12.4893 9.73437 12.3899V10.1099C9.73437 10.0104 9.77388 9.91503 9.84421 9.8447C9.91454 9.77437 10.0099 9.73486 10.1094 9.73486H12.3894ZM12.3894 8.60986H10.1094C9.71155 8.60986 9.33002 8.7679 9.04871 9.0492C8.76741 9.33051 8.60938 9.71204 8.60938 10.1099V12.3899C8.60938 12.7877 8.76741 13.1692 9.04871 13.4505C9.33002 13.7318 9.71155 13.8899 10.1094 13.8899H12.3894C12.7872 13.8899 13.1687 13.7318 13.45 13.4505C13.7313 13.1692 13.8894 12.7877 13.8894 12.3899V10.1099C13.8894 9.71204 13.7313 9.33051 13.45 9.0492C13.1687 8.7679 12.7872 8.60986 12.3894 8.60986Z" fill="#2195E7"/>
+<path d="M18.3897 15.1804H16.1247C15.6028 15.1804 15.1797 15.6035 15.1797 16.1254V18.3904C15.1797 18.9123 15.6028 19.3354 16.1247 19.3354H18.3897C18.9116 19.3354 19.3347 18.9123 19.3347 18.3904V16.1254C19.3347 15.6035 18.9116 15.1804 18.3897 15.1804Z" fill="#DEF4FD"/>
+<path d="M18.3894 15.7349C18.4888 15.7349 18.5842 15.7744 18.6545 15.8447C18.7249 15.915 18.7644 16.0104 18.7644 16.1099V18.3899C18.7644 18.4893 18.7249 18.5847 18.6545 18.655C18.5842 18.7254 18.4888 18.7649 18.3894 18.7649H16.1094C16.0099 18.7649 15.9145 18.7254 15.8442 18.655C15.7739 18.5847 15.7344 18.4893 15.7344 18.3899V16.1099C15.7344 16.0104 15.7739 15.915 15.8442 15.8447C15.9145 15.7744 16.0099 15.7349 16.1094 15.7349H18.3894ZM18.3894 14.6099H16.1094C15.7116 14.6099 15.33 14.7679 15.0487 15.0492C14.7674 15.3305 14.6094 15.712 14.6094 16.1099V18.3899C14.6094 18.7877 14.7674 19.1692 15.0487 19.4505C15.33 19.7318 15.7116 19.8899 16.1094 19.8899H18.3894C18.7872 19.8899 19.1687 19.7318 19.45 19.4505C19.7313 19.1692 19.8894 18.7877 19.8894 18.3899V16.1099C19.8894 15.712 19.7313 15.3305 19.45 15.0492C19.1687 14.7679 18.7872 14.6099 18.3894 14.6099Z" fill="#2195E7"/>
+<path d="M18.3897 9.18042H16.1247C15.6028 9.18042 15.1797 9.60351 15.1797 10.1254V12.3904C15.1797 12.9123 15.6028 13.3354 16.1247 13.3354H18.3897C18.9116 13.3354 19.3347 12.9123 19.3347 12.3904V10.1254C19.3347 9.60351 18.9116 9.18042 18.3897 9.18042Z" fill="#DEF4FD"/>
+<path d="M18.3894 9.73486C18.4888 9.73486 18.5842 9.77437 18.6545 9.8447C18.7249 9.91503 18.7644 10.0104 18.7644 10.1099V12.3899C18.7644 12.4893 18.7249 12.5847 18.6545 12.655C18.5842 12.7254 18.4888 12.7649 18.3894 12.7649H16.1094C16.0099 12.7649 15.9145 12.7254 15.8442 12.655C15.7739 12.5847 15.7344 12.4893 15.7344 12.3899V10.1099C15.7344 10.0104 15.7739 9.91503 15.8442 9.8447C15.9145 9.77437 16.0099 9.73486 16.1094 9.73486H18.3894ZM18.3894 8.60986H16.1094C15.7116 8.60986 15.33 8.7679 15.0487 9.0492C14.7674 9.33051 14.6094 9.71204 14.6094 10.1099V12.3899C14.6094 12.7877 14.7674 13.1692 15.0487 13.4505C15.33 13.7318 15.7116 13.8899 16.1094 13.8899H18.3894C18.7872 13.8899 19.1687 13.7318 19.45 13.4505C19.7313 13.1692 19.8894 12.7877 19.8894 12.3899V10.1099C19.8894 9.71204 19.7313 9.33051 19.45 9.0492C19.1687 8.7679 18.7872 8.60986 18.3894 8.60986Z" fill="#2195E7"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-role.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-role.svg
new file mode 100644
index 0000000..ea30b19
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-role.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.44531 14.4445C2.44531 14.4445 2.44531 14.3245 2.44531 14.2645C2.49631 12.5749 3.21475 10.9743 4.44332 9.81318C5.67189 8.65209 7.31048 8.02511 9.00031 8.06953C10.6902 8.02102 12.3304 8.64414 13.5618 9.80245C14.7932 10.9608 15.5154 12.5598 15.5703 14.2495C15.5703 14.2495 15.5703 14.3695 15.5703 14.4445H2.44531Z" fill="#FFEEEE"/>
+<path d="M9 8.62496C10.4777 8.58285 11.9167 9.10028 13.0292 10.0737C14.1417 11.0472 14.8456 12.4048 15 13.875H3C3.15441 12.4048 3.85829 11.0472 4.97079 10.0737C6.08329 9.10028 7.52235 8.58285 9 8.62496ZM9 7.49996C7.16043 7.45156 5.37685 8.13523 4.04094 9.40082C2.70504 10.6664 1.92603 12.4105 1.875 14.25C1.88501 14.5012 1.91005 14.7517 1.95 15H16.05C16.0899 14.7517 16.115 14.5012 16.125 14.25C16.074 12.4105 15.295 10.6664 13.9591 9.40082C12.6232 8.13523 10.8396 7.45156 9 7.49996Z" fill="#BD4949"/>
+<path d="M8.99969 9.94518C10.7642 9.94518 12.1947 8.51473 12.1947 6.75018C12.1947 4.98563 10.7642 3.55518 8.99969 3.55518C7.23514 3.55518 5.80469 4.98563 5.80469 6.75018C5.80469 8.51473 7.23514 9.94518 8.99969 9.94518Z" fill="#FFEEEE"/>
+<path d="M9 4.125C9.51918 4.125 10.0267 4.27895 10.4584 4.56739C10.8901 4.85583 11.2265 5.2658 11.4252 5.74546C11.6239 6.22511 11.6758 6.75291 11.5746 7.26211C11.4733 7.77131 11.2233 8.23904 10.8562 8.60616C10.489 8.97327 10.0213 9.22328 9.51211 9.32456C9.00291 9.42585 8.47511 9.37386 7.99546 9.17518C7.5158 8.9765 7.10583 8.64005 6.81739 8.20837C6.52896 7.77669 6.375 7.26918 6.375 6.75C6.375 6.05381 6.65156 5.38613 7.14385 4.89384C7.63613 4.40156 8.30381 4.125 9 4.125ZM9 3C8.25832 3 7.5333 3.21993 6.91661 3.63199C6.29993 4.04404 5.81928 4.62971 5.53545 5.31494C5.25162 6.00016 5.17736 6.75416 5.32206 7.48159C5.46675 8.20902 5.8239 8.8772 6.34835 9.40165C6.8728 9.9261 7.54098 10.2833 8.26841 10.4279C8.99584 10.5726 9.74984 10.4984 10.4351 10.2145C11.1203 9.93072 11.706 9.45007 12.118 8.83339C12.5301 8.2167 12.75 7.49168 12.75 6.75C12.75 5.75544 12.3549 4.80161 11.6517 4.09835C10.9484 3.39509 9.99456 3 9 3Z" fill="#BD4949"/>
+<path d="M8.44531 20.4445C8.44531 20.4445 8.44531 20.3245 8.44531 20.2645C8.49631 18.5749 9.21475 16.9743 10.4433 15.8132C11.6719 14.6521 13.3105 14.0251 15.0003 14.0695C16.6927 14.0211 18.3352 14.6462 19.567 15.8078C20.7988 16.9693 21.5193 18.5722 21.5703 20.2645C21.5703 20.2645 21.5703 20.3845 21.5703 20.4595L8.44531 20.4445Z" fill="#BFE1F1"/>
+<path d="M15 14.625C16.4777 14.5829 17.9167 15.1003 19.0292 16.0737C20.1417 17.0472 20.8456 18.4048 21 19.875H9C9.15441 18.4048 9.85829 17.0472 10.9708 16.0737C12.0833 15.1003 13.5223 14.5829 15 14.625ZM15 13.5C13.1604 13.4516 11.3768 14.1352 10.0409 15.4008C8.70504 16.6664 7.92603 18.4105 7.875 20.25C7.88501 20.5012 7.91005 20.7517 7.95 21H22.05C22.0899 20.7517 22.115 20.5012 22.125 20.25C22.074 18.4105 21.295 16.6664 19.9591 15.4008C18.6232 14.1352 16.8396 13.4516 15 13.5Z" fill="#2C66BD"/>
+<path d="M14.9997 15.9452C16.7642 15.9452 18.1947 14.5147 18.1947 12.7502C18.1947 10.9856 16.7642 9.55518 14.9997 9.55518C13.2351 9.55518 11.8047 10.9856 11.8047 12.7502C11.8047 14.5147 13.2351 15.9452 14.9997 15.9452Z" fill="#BFE1F1"/>
+<path d="M15 10.125C15.5192 10.125 16.0267 10.279 16.4584 10.5674C16.8901 10.8558 17.2265 11.2658 17.4252 11.7455C17.6239 12.2251 17.6758 12.7529 17.5746 13.2621C17.4733 13.7713 17.2233 14.239 16.8562 14.6062C16.489 14.9733 16.0213 15.2233 15.5121 15.3246C15.0029 15.4258 14.4751 15.3739 13.9955 15.1752C13.5158 14.9765 13.1058 14.6401 12.8174 14.2084C12.529 13.7767 12.375 13.2692 12.375 12.75C12.375 12.0538 12.6516 11.3861 13.1438 10.8938C13.6361 10.4016 14.3038 10.125 15 10.125ZM15 9C14.2583 9 13.5333 9.21993 12.9166 9.63199C12.2999 10.044 11.8193 10.6297 11.5355 11.3149C11.2516 12.0002 11.1774 12.7542 11.3221 13.4816C11.4668 14.209 11.8239 14.8772 12.3484 15.4017C12.8728 15.9261 13.541 16.2833 14.2684 16.4279C14.9958 16.5726 15.7498 16.4984 16.4351 16.2146C17.1203 15.9307 17.706 15.4501 18.118 14.8334C18.5301 14.2167 18.75 13.4917 18.75 12.75C18.75 11.7554 18.3549 10.8016 17.6517 10.0983C16.9484 9.39509 15.9946 9 15 9Z" fill="#2C66BD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-rule.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-rule.svg
new file mode 100644
index 0000000..07adb5e
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-rule.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9704 6.28491H3.52539V15.2999H17.9704V6.28491Z" fill="#FEE07B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.96289 6.28491C2.96289 5.97425 3.21473 5.72241 3.52539 5.72241H17.9704C18.2811 5.72241 18.5329 5.97425 18.5329 6.28491V15.2999C18.5329 15.6106 18.2811 15.8624 17.9704 15.8624H3.52539C3.21473 15.8624 2.96289 15.6106 2.96289 15.2999V6.28491ZM4.08789 6.84741V14.7374H17.4079V6.84741H4.08789Z" fill="#DDA91D"/>
+<path d="M20.4762 8.7002H6.03125V17.7152H20.4762V8.7002Z" fill="#FEE07B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.46875 8.7002C5.46875 8.38954 5.72059 8.1377 6.03125 8.1377H20.4762C20.7869 8.1377 21.0387 8.38954 21.0387 8.7002V17.7152C21.0387 18.0259 20.7869 18.2777 20.4762 18.2777H6.03125C5.72059 18.2777 5.46875 18.0259 5.46875 17.7152V8.7002ZM6.59375 9.2627V17.1527H19.9137V9.2627H6.59375Z" fill="#DDA91D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.6855 8.69238C17.9962 8.69238 18.248 8.94422 18.248 9.25488V14.5199C18.248 14.8305 17.9962 15.0824 17.6855 15.0824C17.3749 15.0824 17.123 14.8305 17.123 14.5199V9.25488C17.123 8.94422 17.3749 8.69238 17.6855 8.69238Z" fill="#DDA91D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6855 8.69238C11.9962 8.69238 12.248 8.94422 12.248 9.25488V14.5199C12.248 14.8305 11.9962 15.0824 11.6855 15.0824C11.3749 15.0824 11.123 14.8305 11.123 14.5199V9.25488C11.123 8.94422 11.3749 8.69238 11.6855 8.69238Z" fill="#DDA91D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6855 8.69238C14.9962 8.69238 15.248 8.94422 15.248 9.25488V13.0199C15.248 13.3305 14.9962 13.5824 14.6855 13.5824C14.3749 13.5824 14.123 13.3305 14.123 13.0199V9.25488C14.123 8.94422 14.3749 8.69238 14.6855 8.69238Z" fill="#DDA91D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.68555 8.69238C8.99621 8.69238 9.24805 8.94422 9.24805 9.25488V13.0199C9.24805 13.3305 8.99621 13.5824 8.68555 13.5824C8.37489 13.5824 8.12305 13.3305 8.12305 13.0199V9.25488C8.12305 8.94422 8.37489 8.69238 8.68555 8.69238Z" fill="#DDA91D"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-schema.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-schema.svg
new file mode 100644
index 0000000..86e837a
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-schema.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.49218 3.7898L2.98438 8.29761L7.49218 12.8054L12 8.29761L7.49218 3.7898Z" fill="#FFEEEE"/>
+<path d="M7.49945 4.59L11.2045 8.295L7.49945 12L3.77945 8.295L7.49945 4.59ZM7.49945 3L2.18945 8.295L7.49945 13.605L12.7945 8.295L7.49945 3Z" fill="#BD4949"/>
+<path d="M7.51073 10.2222L9.41992 8.31299L7.51073 6.4038L5.60155 8.31299L7.51073 10.2222Z" fill="#BD4949"/>
+<path d="M16.5078 3.79053L12 8.29834L16.5078 12.8061L21.0156 8.29834L16.5078 3.79053Z" fill="#FFEEEE"/>
+<path d="M16.5001 4.59L20.2051 8.295L16.5001 12L12.7951 8.295L16.5001 4.59ZM16.5001 3L11.2051 8.295L16.5001 13.605L21.8101 8.295L16.5001 3Z" fill="#BD4949"/>
+<path d="M16.5264 10.2219L18.4355 8.31274L16.5264 6.40356L14.6172 8.31274L16.5264 10.2219Z" fill="#BD4949"/>
+<path d="M11.9902 11.1921L7.48242 15.7L11.9902 20.2078L16.498 15.7L11.9902 11.1921Z" fill="#FFEEEE"/>
+<path d="M11.9995 12L15.7045 15.705L11.9995 19.41L8.27945 15.705L11.9995 12ZM11.9995 10.395L6.68945 15.705L11.9995 21L17.3095 15.69L11.9995 10.395Z" fill="#BD4949"/>
+<path d="M12.0185 17.6001L13.9277 15.6909L12.0185 13.7817L10.1094 15.6909L12.0185 17.6001Z" fill="#BD4949"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-sequence.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-sequence.svg
new file mode 100644
index 0000000..778f4cf
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-sequence.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.93164 8.82593V7.68921C3.45898 7.66577 3.82812 7.63062 4.03906 7.58374C4.375 7.50952 4.64844 7.36108 4.85938 7.13843C5.00391 6.98608 5.11328 6.78296 5.1875 6.52905C5.23047 6.37671 5.25195 6.26343 5.25195 6.18921H6.64062V14.6853H4.92969V8.82593H2.93164Z" fill="#7749BD"/>
+<path d="M16.7617 12.0779C16.7617 12.4177 16.8164 12.699 16.9258 12.9216C17.1289 13.3318 17.498 13.5369 18.0332 13.5369C18.3613 13.5369 18.6465 13.4255 18.8887 13.2029C19.1348 12.9763 19.2578 12.6521 19.2578 12.2302C19.2578 11.6716 19.0312 11.2986 18.5781 11.1111C18.3203 11.0056 17.9141 10.9529 17.3594 10.9529V9.75757C17.9023 9.74976 18.2812 9.69702 18.4961 9.59937C18.8672 9.4353 19.0527 9.10327 19.0527 8.60327C19.0527 8.27905 18.957 8.01538 18.7656 7.81226C18.5781 7.60913 18.3125 7.50757 17.9688 7.50757C17.5742 7.50757 17.2832 7.63257 17.0957 7.88257C16.9121 8.13257 16.8242 8.46655 16.832 8.88452H15.2734C15.2891 8.46265 15.3613 8.06226 15.4902 7.68335C15.627 7.35132 15.8418 7.04468 16.1348 6.76343C16.3535 6.56421 16.6133 6.41187 16.9141 6.3064C17.2148 6.20093 17.584 6.14819 18.0215 6.14819C18.834 6.14819 19.4883 6.35913 19.9844 6.78101C20.4844 7.19897 20.7344 7.76147 20.7344 8.46851C20.7344 8.96851 20.5859 9.39038 20.2891 9.73413C20.1016 9.94897 19.9062 10.0955 19.7031 10.1736C19.8555 10.1736 20.0742 10.3044 20.3594 10.5662C20.7852 10.9607 20.998 11.4998 20.998 12.1833C20.998 12.9021 20.748 13.5349 20.248 14.0818C19.752 14.6248 19.0156 14.8962 18.0391 14.8962C16.8359 14.8962 16 14.5037 15.5312 13.7185C15.2852 13.3005 15.1484 12.7537 15.1211 12.0779H16.7617Z" fill="#7749BD"/>
+<path d="M8.59375 12.9392H10.3691V14.6853H8.59375V12.9392Z" fill="#7749BD"/>
+<path d="M11.9336 12.9392H13.709V14.6853H11.9336V12.9392Z" fill="#7749BD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-synonym.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-synonym.svg
new file mode 100644
index 0000000..0412442
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-synonym.svg
@@ -0,0 +1,17 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.26563 11.3401H4.51562C3.6872 11.3401 3.01562 12.0117 3.01562 12.8401V17.0251C3.01562 17.8535 3.6872 18.5251 4.51562 18.5251H8.26563C9.09405 18.5251 9.76562 17.8535 9.76562 17.0251V12.8401C9.76562 12.0117 9.09405 11.3401 8.26563 11.3401Z" fill="#5997AB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.7826 13.5713C8.00009 13.7931 7.99656 14.1493 7.77473 14.3668L5.47973 16.6168C5.25789 16.8342 4.90176 16.8307 4.68427 16.6089C4.46679 16.387 4.47031 16.0309 4.69215 15.8134L6.98715 13.5634C7.20898 13.3459 7.56512 13.3495 7.7826 13.5713Z" fill="#C8FAFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.38086 13.4026C7.69152 13.4026 7.94336 13.6544 7.94336 13.9651V16.1701C7.94336 16.4807 7.69152 16.7326 7.38086 16.7326C7.0702 16.7326 6.81836 16.4807 6.81836 16.1701V13.9651C6.81836 13.6544 7.0702 13.4026 7.38086 13.4026Z" fill="#C8FAFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.56856 13.89C4.57684 13.5795 4.83531 13.3345 5.14586 13.3427L7.39586 13.4027C7.70641 13.411 7.95145 13.6695 7.94317 13.98C7.93488 14.2906 7.67642 14.5356 7.36587 14.5273L5.11587 14.4673C4.80532 14.4591 4.56028 14.2006 4.56856 13.89Z" fill="#C8FAFF"/>
+<path d="M17.0262 3.55518H9.60125C9.07934 3.55518 8.65625 3.97827 8.65625 4.50018V11.0252C8.65625 11.5471 9.07934 11.9702 9.60125 11.9702H17.0262C17.5482 11.9702 17.9712 11.5471 17.9712 11.0252V4.50018C17.9712 3.97827 17.5482 3.55518 17.0262 3.55518Z" fill="#C8FAFF"/>
+<path d="M17.0254 4.125C17.1248 4.125 17.2202 4.16451 17.2906 4.23483C17.3609 4.30516 17.4004 4.40054 17.4004 4.5V11.04C17.4004 11.1395 17.3609 11.2348 17.2906 11.3052C17.2202 11.3755 17.1248 11.415 17.0254 11.415H9.52539C9.42593 11.415 9.33055 11.3755 9.26023 11.3052C9.1899 11.2348 9.15039 11.1395 9.15039 11.04V4.5C9.15039 4.40054 9.1899 4.30516 9.26023 4.23483C9.33055 4.16451 9.42593 4.125 9.52539 4.125H17.0254ZM17.0254 3H9.52539C9.12757 3 8.74604 3.15804 8.46473 3.43934C8.18343 3.72064 8.02539 4.10218 8.02539 4.5V11.04C8.02539 11.4378 8.18343 11.8194 8.46473 12.1007C8.74604 12.382 9.12757 12.54 9.52539 12.54H17.0254C17.4232 12.54 17.8047 12.382 18.086 12.1007C18.3674 11.8194 18.5254 11.4378 18.5254 11.04V4.5C18.5254 4.10218 18.3674 3.72064 18.086 3.43934C17.8047 3.15804 17.4232 3 17.0254 3Z" fill="#5997AB"/>
+<path d="M10.7246 13.8147H6.97461C6.14618 13.8147 5.47461 14.4863 5.47461 15.3147V19.4997C5.47461 20.3281 6.14618 20.9997 6.97461 20.9997H10.7246C11.553 20.9997 12.2246 20.3281 12.2246 19.4997V15.3147C12.2246 14.4863 11.553 13.8147 10.7246 13.8147Z" fill="#5997AB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2279 16.0459C10.4454 16.2677 10.4419 16.6239 10.22 16.8414L7.92504 19.0914C7.70321 19.3088 7.34707 19.3053 7.12958 19.0835C6.9121 18.8617 6.91563 18.5055 7.13746 18.288L9.43246 16.038C9.65429 15.8205 10.0104 15.8241 10.2279 16.0459Z" fill="#C8FAFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.82617 15.8772C10.1368 15.8772 10.3887 16.129 10.3887 16.4397V18.6447C10.3887 18.9554 10.1368 19.2072 9.82617 19.2072C9.51551 19.2072 9.26367 18.9554 9.26367 18.6447V16.4397C9.26367 16.129 9.51551 15.8772 9.82617 15.8772Z" fill="#C8FAFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.01399 16.3465C7.02434 16.036 7.28443 15.7927 7.59492 15.8031L9.84492 15.8781C10.1554 15.8884 10.3987 16.1485 10.3884 16.459C10.378 16.7695 10.1179 17.0128 9.80744 17.0024L7.55744 16.9274C7.24695 16.9171 7.00364 16.657 7.01399 16.3465Z" fill="#C8FAFF"/>
+<path d="M19.4696 6.03003H12.0446C11.5227 6.03003 11.0996 6.45312 11.0996 6.97503V13.5C11.0996 14.0219 11.5227 14.445 12.0446 14.445H19.4696C19.9915 14.445 20.4146 14.0219 20.4146 13.5V6.97503C20.4146 6.45312 19.9915 6.03003 19.4696 6.03003Z" fill="#C8FAFF"/>
+<path d="M19.5 6.58472C19.5995 6.58472 19.6948 6.62423 19.7652 6.69455C19.8355 6.76488 19.875 6.86026 19.875 6.95972V13.4997C19.875 13.5992 19.8355 13.6946 19.7652 13.7649C19.6948 13.8352 19.5995 13.8747 19.5 13.8747H12C11.9085 13.8637 11.8243 13.8193 11.7635 13.7502C11.7026 13.681 11.6693 13.5918 11.67 13.4997V6.95972C11.6693 6.86759 11.7026 6.77844 11.7635 6.70927C11.8243 6.64011 11.9085 6.59577 12 6.58472H19.5ZM19.5 5.45972H12C11.6022 5.45972 11.2206 5.61775 10.9393 5.89906C10.658 6.18036 10.5 6.56189 10.5 6.95972V13.4997C10.5 13.8975 10.658 14.2791 10.9393 14.5604C11.2206 14.8417 11.6022 14.9997 12 14.9997H19.5C19.8978 14.9997 20.2794 14.8417 20.5607 14.5604C20.842 14.2791 21 13.8975 21 13.4997V6.95972C21 6.56189 20.842 6.18036 20.5607 5.89906C20.2794 5.61775 19.8978 5.45972 19.5 5.45972Z" fill="#5997AB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2031 13.8752V9.93018H16.3281V13.8752H15.2031Z" fill="#9EC3CC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2031 8.95472V6.58472H16.3281V8.95472H15.2031Z" fill="#5997AB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0996 8.90259H20.4296V10.0276H11.0996V8.90259Z" fill="#5997AB"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-tablespace.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-tablespace.svg
new file mode 100644
index 0000000..107b406
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-tablespace.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.75 6.75H3.75V3.75H8.445L9.75 4.68V6.75Z" fill="#F5F47E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.1875 3.75C3.1875 3.43934 3.43934 3.1875 3.75 3.1875H8.445C8.56203 3.1875 8.67614 3.224 8.77145 3.29192L10.0764 4.22192C10.2246 4.32747 10.3125 4.49812 10.3125 4.68V6.75C10.3125 7.06066 10.0607 7.3125 9.75 7.3125H3.75C3.43934 7.3125 3.1875 7.06066 3.1875 6.75V3.75ZM4.3125 4.3125V6.1875H9.1875V4.96986L8.26508 4.3125H4.3125Z" fill="#CAA524"/>
+<path d="M17.25 6.75H3.75V14.25H17.25V6.75Z" fill="#F5F47E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.1875 6.75C3.1875 6.43934 3.43934 6.1875 3.75 6.1875H17.25C17.5607 6.1875 17.8125 6.43934 17.8125 6.75V14.25C17.8125 14.5607 17.5607 14.8125 17.25 14.8125H3.75C3.43934 14.8125 3.1875 14.5607 3.1875 14.25V6.75ZM4.3125 7.3125V13.6875H16.6875V7.3125H4.3125Z" fill="#CAA524"/>
+<path d="M20.25 12.75H6.75V20.25H20.25V12.75Z" fill="#F5F47E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1875 12.75C6.1875 12.4393 6.43934 12.1875 6.75 12.1875H20.25C20.5607 12.1875 20.8125 12.4393 20.8125 12.75V20.25C20.8125 20.5607 20.5607 20.8125 20.25 20.8125H6.75C6.43934 20.8125 6.1875 20.5607 6.1875 20.25V12.75ZM7.3125 13.3125V19.6875H19.6875V13.3125H7.3125Z" fill="#CAA524"/>
+<path d="M12.75 12.75H6.75V9.75H11.445L12.75 10.68V12.75Z" fill="#F5F47E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1875 9.75C6.1875 9.43934 6.43934 9.1875 6.75 9.1875H11.445C11.562 9.1875 11.6761 9.224 11.7714 9.29192L13.0764 10.2219C13.2246 10.3275 13.3125 10.4981 13.3125 10.68V12.75C13.3125 13.0607 13.0607 13.3125 12.75 13.3125H6.75C6.43934 13.3125 6.1875 13.0607 6.1875 12.75V9.75ZM7.3125 10.3125V12.1875H12.1875V10.9699L11.2651 10.3125H7.3125Z" fill="#CAA524"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-trigger.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-trigger.svg
new file mode 100644
index 0000000..9fa6b75
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-trigger.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.95508 6.89917C2.95508 6.27785 3.45876 5.77417 4.08008 5.77417H7.96508C8.5864 5.77417 9.09008 6.27785 9.09008 6.89917C9.09008 7.52049 8.5864 8.02417 7.96508 8.02417H4.08008C3.45876 8.02417 2.95508 7.52049 2.95508 6.89917Z" fill="#2F91A3"/>
+<path d="M11.6693 6.95947L7.9043 10.5895L8.0393 3.20947L11.6693 6.95947Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.7643 2.51173C8.04626 2.40061 8.36739 2.4701 8.57818 2.68786L12.2082 6.43786C12.3467 6.58097 12.4226 6.7733 12.4192 6.97244C12.4157 7.17158 12.3332 7.36118 12.1899 7.49942L8.42486 11.1294C8.20648 11.34 7.88277 11.3982 7.60467 11.277C7.32658 11.1559 7.14887 10.8791 7.15442 10.5758L7.28942 3.19578C7.29497 2.89276 7.48234 2.62286 7.7643 2.51173ZM8.75615 5.02838L8.68729 8.79276L10.6077 6.94118L8.75615 5.02838Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5352 12C11.5352 11.3787 12.0388 10.875 12.6602 10.875H16.5452C17.1665 10.875 17.6702 11.3787 17.6702 12C17.6702 12.6213 17.1665 13.125 16.5452 13.125H12.6602C12.0388 13.125 11.5352 12.6213 11.5352 12Z" fill="#2F91A3"/>
+<path d="M20.2344 12.0596L16.4844 15.6896L16.6044 8.30957L20.2344 12.0596Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3287 7.61211C16.6108 7.5006 16.9323 7.57 17.1433 7.78796L20.7733 11.538C21.0614 11.8356 21.0536 12.3104 20.756 12.5985L17.006 16.2285C16.7881 16.4395 16.4645 16.4984 16.1861 16.3777C15.9078 16.2571 15.7295 15.9807 15.7345 15.6774L15.8545 8.2974C15.8594 7.99409 16.0466 7.72362 16.3287 7.61211ZM17.3248 10.1322L17.2637 13.8914L19.1739 12.0423L17.3248 10.1322Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.95508 17.0994C2.95508 16.478 3.45876 15.9744 4.08008 15.9744H7.96508C8.5864 15.9744 9.09008 16.478 9.09008 17.0994C9.09008 17.7207 8.5864 18.2244 7.96508 18.2244H4.08008C3.45876 18.2244 2.95508 17.7207 2.95508 17.0994Z" fill="#2F91A3"/>
+<path d="M11.6693 17.1597L7.9043 20.7897L8.0393 13.4097L11.6693 17.1597Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.7643 12.7119C8.04626 12.6008 8.36739 12.6703 8.57818 12.8881L12.2082 16.6381C12.3467 16.7812 12.4226 16.9735 12.4192 17.1726C12.4157 17.3718 12.3332 17.5614 12.1899 17.6996L8.42486 21.3296C8.20648 21.5402 7.88277 21.5984 7.60467 21.4772C7.32658 21.3561 7.14887 21.0793 7.15442 20.776L7.28942 13.396C7.29497 13.093 7.48234 12.8231 7.7643 12.7119ZM8.75615 15.2286L8.68729 18.993L10.6077 17.1414L8.75615 15.2286Z" fill="#2F91A3"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-trigger_function.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-trigger_function.svg
new file mode 100644
index 0000000..6fe36a1
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-trigger_function.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8005 16.5147L15.3155 15.7047L15.7355 13.9047V13.0647L15.9605 11.2647L16.5005 10.5897L17.8505 9.9147H16.5005L17.4305 9.7497L16.0205 8.6997L15.9305 8.0097V6.7047L15.7355 4.9197L15.1805 4.2747L14.2805 3.8847L13.8005 3.8247L6.51047 3.6897L5.47547 4.4097L4.83047 4.9497V5.6847L4.93547 5.4747L4.71047 7.8897L4.83047 8.7297L3.00047 9.9147L2.73047 10.1397L3.00047 9.9147L4.17047 10.7847L4.35047 11.2647L5.04047 13.0797L4.99547 13.8897L4.98047 14.4297L4.99547 13.4697V13.9347L5.26547 15.0897L5.68547 15.6747L6.43547 16.1247L7.05047 16.5147H13.8005Z" fill="#E0FFFB"/>
+<path d="M17.0552 9.88498C16.9047 9.8392 16.759 9.77892 16.6202 9.70498C16.4655 9.62721 16.3239 9.52602 16.2002 9.40498C16.0848 9.28554 15.9886 9.14891 15.9152 8.99998C15.8313 8.82482 15.7756 8.63751 15.7502 8.44498C15.7332 8.18025 15.7332 7.91471 15.7502 7.64998C15.7502 7.33998 15.7502 6.95498 15.7502 6.49498V6.73498C15.7502 6.41998 15.7502 6.10498 15.7502 5.75998C15.7247 5.43478 15.6328 5.11825 15.4802 4.82998C15.3153 4.53015 15.0715 4.28115 14.7752 4.10998C14.354 3.88833 13.8861 3.77007 13.4102 3.76498V3.47998H13.7702H14.2202L14.7002 3.62998C14.8671 3.69772 15.0236 3.78861 15.1652 3.89998C15.3857 4.06391 15.5739 4.26736 15.7202 4.49998C15.8528 4.72332 15.949 4.96637 16.0052 5.21998C16.0665 5.50112 16.1017 5.78735 16.1102 6.07498C16.1102 6.38998 16.1102 7.33498 16.1102 7.33498C16.1039 7.66661 16.129 7.99808 16.1852 8.32498C16.23 8.58248 16.3383 8.82476 16.5002 9.02998C16.6798 9.23921 16.9058 9.40357 17.1602 9.50998C17.3402 9.76498 17.1902 9.92998 17.0552 9.88498Z" fill="#2F91A3" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M7.39602 3.78016C6.91118 3.77581 6.43252 3.88904 6.00102 4.11016C5.70472 4.28133 5.46091 4.53032 5.29602 4.83016C5.14376 5.11859 5.05189 5.43503 5.02602 5.76016C5.02602 6.09016 5.02602 6.41516 5.02602 6.73516V6.51016C5.02602 6.96016 5.02602 7.35016 5.02602 7.66516C5.04308 7.92988 5.04308 8.19543 5.02602 8.46016C4.96653 8.65386 4.87529 8.83635 4.75602 9.00016C4.69214 9.14736 4.60615 9.28393 4.50102 9.40516C4.37839 9.53152 4.23666 9.63781 4.08102 9.72016L3.64602 9.90016L3.25602 9.99016C3.13602 9.99016 3.13602 9.99016 3.25602 10.0652L3.64602 10.1552C3.7965 10.2009 3.94218 10.2612 4.08102 10.3352C4.23563 10.4129 4.3773 10.5141 4.50102 10.6352C4.61515 10.75 4.71123 10.8815 4.78602 11.0252C4.86988 11.2003 4.92557 11.3876 4.95102 11.5802C4.968 11.8449 4.968 12.1104 4.95102 12.3752C4.95102 12.6852 4.95102 13.0702 4.95102 13.5302V13.2902C4.95102 13.6052 4.95102 13.9202 4.95102 14.2652C4.97647 14.5904 5.06836 14.9069 5.22102 15.1952C5.38591 15.495 5.62972 15.744 5.92602 15.9152C6.34721 16.1368 6.81509 16.2551 7.29102 16.2602V16.5002H6.93102H6.48102L6.00102 16.3502C5.83412 16.2824 5.67758 16.1915 5.53602 16.0802C5.31548 15.9162 5.12729 15.7128 4.98102 15.4802C4.87857 15.2318 4.81776 14.9683 4.80102 14.7002C4.73964 14.419 4.70448 14.1328 4.69602 13.8452C4.69602 13.5302 4.69602 12.5852 4.69602 12.5852C4.70226 12.2535 4.67714 11.9221 4.62102 11.5952C4.57614 11.3377 4.46789 11.0954 4.30602 10.8902C4.12641 10.6809 3.9004 10.5166 3.64602 10.4102C3.58101 10.3679 3.52759 10.3102 3.4906 10.242C3.45362 10.1739 3.43424 10.0977 3.43424 10.0202C3.43424 9.94265 3.45362 9.86637 3.4906 9.79826C3.52759 9.73015 3.58101 9.67236 3.64602 9.63016C3.9004 9.52375 4.12641 9.35938 4.30602 9.15016C4.46735 8.94461 4.57554 8.70247 4.62102 8.44516C4.66936 8.1326 4.68944 7.81632 4.68102 7.50016C4.68102 7.50016 4.68102 5.64016 4.80102 5.38516C4.85843 5.13666 4.95461 4.89874 5.08602 4.68016C5.23201 4.44732 5.42024 4.24382 5.64102 4.08016C5.78269 3.96895 5.93921 3.87808 6.10602 3.81016L6.58602 3.66016H7.03602H7.39602V3.78016Z" fill="#2F91A3" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M17.2204 18.825L18.7354 18.015L19.1554 16.215V15.375L19.3804 13.575L19.9204 12.9L21.2704 12.225H19.9204L20.8354 12.06L19.4404 11.025L19.3504 10.32V9.015L19.1554 7.245L18.5854 6.585L17.6854 6.195L17.2204 6.135L9.93039 6L8.89539 6.72L8.23539 7.26V7.995L8.35539 7.785L8.13039 10.2L8.23539 11.055L6.42039 12.225L6.15039 12.45L6.42039 12.225L7.59039 13.095L7.77039 13.575L8.46039 15.405L8.41539 16.2L8.40039 16.74L8.41539 15.78V16.245L8.68539 17.4L9.10539 17.985L9.85539 18.435L10.4704 18.825H17.2204Z" fill="#E0FFFB"/>
+<path d="M19.6348 12.9453C19.7574 12.8189 19.8991 12.7126 20.0548 12.6303L20.4898 12.4503L20.8798 12.3603C20.9998 12.3603 20.9998 12.3603 20.8798 12.2853L20.4898 12.1953C20.3336 12.1456 20.1828 12.0803 20.0398 12.0003C19.8851 11.9225 19.7435 11.8213 19.6198 11.7003C19.5056 11.5854 19.4095 11.4539 19.3348 11.3103C19.2509 11.1351 19.1952 10.9478 19.1698 10.7553C19.1528 10.4906 19.1528 10.225 19.1698 9.96028C19.1698 9.65028 19.1698 9.26528 19.1698 8.80528V9.00028C19.1698 8.68528 19.1698 8.37028 19.1698 8.02528C19.1443 7.70008 19.0524 7.38356 18.8998 7.09528C18.6759 6.78347 18.3618 6.54786 17.9998 6.42028C17.5786 6.19863 17.1107 6.08038 16.6348 6.07528V5.79028H16.9948H17.4448L17.9998 6.00028C18.1667 6.06803 18.3232 6.15892 18.4648 6.27028C18.6853 6.43421 18.8735 6.63766 19.0198 6.87028C19.1524 7.09362 19.2486 7.33667 19.3048 7.59028C19.3661 7.87142 19.4013 8.15765 19.4098 8.44528C19.4098 8.76028 19.4098 9.70528 19.4098 9.70528C19.4035 10.0369 19.4286 10.3684 19.4848 10.6953C19.5296 10.9528 19.6379 11.1951 19.7998 11.4003C19.9794 11.6095 20.2054 11.7739 20.4598 11.8803C20.5248 11.9225 20.5782 11.9803 20.6152 12.0484C20.6522 12.1165 20.6715 12.1928 20.6715 12.2703C20.6715 12.3478 20.6522 12.4241 20.6152 12.4922C20.5782 12.5603 20.5248 12.6181 20.4598 12.6603C20.1748 12.8553 19.4998 13.0653 19.6348 12.9453Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M10.8159 6.0901C10.34 6.09519 9.87213 6.21345 9.45094 6.4351C9.15464 6.60627 8.91084 6.85526 8.74594 7.1551C8.59368 7.44353 8.50181 7.75997 8.47594 8.0851C8.47594 8.4151 8.47594 8.7401 8.47594 9.0601V8.8201C8.47594 9.2701 8.47594 9.6601 8.47594 9.9751C8.493 10.2398 8.493 10.5054 8.47594 10.7701C8.45074 10.9627 8.39504 11.15 8.31094 11.3251C8.23656 11.469 8.14043 11.6005 8.02594 11.7151C7.86937 11.8407 7.69156 11.9372 7.50094 12.0001L7.06594 12.1801L6.67594 12.2701C6.55594 12.2701 6.55594 12.2701 6.67594 12.3451L7.06594 12.4351C7.21755 12.4905 7.36327 12.5608 7.50094 12.6451C7.65556 12.7229 7.79723 12.8241 7.92094 12.9451C8.03507 13.06 8.13116 13.1915 8.20594 13.3351C8.2898 13.5103 8.34549 13.6976 8.37094 13.8901C8.38792 14.1548 8.38792 14.4204 8.37094 14.6851C8.37094 14.9951 8.37094 15.3801 8.37094 15.8401V15.6001C8.37094 15.9151 8.37094 16.2301 8.37094 16.5751C8.39639 16.9003 8.48829 17.2168 8.64094 17.5051C8.80584 17.8049 9.04964 18.0539 9.34594 18.2251C9.76713 18.4467 10.235 18.565 10.7109 18.5701V18.8551H10.3509H9.90094L9.42094 18.7051C9.26327 18.6014 9.12175 18.4751 9.00094 18.3301C8.7804 18.1662 8.59221 17.9627 8.44594 17.7301C8.31329 17.5068 8.21709 17.2637 8.16094 17.0101C8.09956 16.729 8.06441 16.4427 8.05594 16.1551C8.05594 15.8401 8.05594 14.8951 8.05594 14.8951C8.06218 14.5635 8.03707 14.232 7.98094 13.9051C7.93606 13.6476 7.82781 13.4053 7.66594 13.2001C7.48633 12.9909 7.26032 12.8265 7.00594 12.7201C6.94093 12.6779 6.88751 12.6201 6.85053 12.552C6.81354 12.4839 6.79417 12.4076 6.79417 12.3301C6.79417 12.2526 6.81354 12.1763 6.85053 12.1082C6.88751 12.0401 6.94093 11.9823 7.00594 11.9401C7.26032 11.8337 7.48633 11.6693 7.66594 11.4601C7.82727 11.2546 7.93546 11.0124 7.98094 10.7551C8.05312 10.4247 8.09331 10.0882 8.10094 9.7501C8.10094 9.7501 8.10094 7.8901 8.22094 7.6351C8.27835 7.3866 8.37453 7.14868 8.50594 6.9301C8.63408 6.70234 8.80169 6.49918 9.00094 6.3301C9.15706 6.19259 9.33434 6.08116 9.52594 6.0001L10.0059 5.8501H10.4559H10.8159V6.0901Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0332 9.2251C11.0332 8.91444 11.285 8.6626 11.5957 8.6626H16.0957C16.4064 8.6626 16.6582 8.91444 16.6582 9.2251C16.6582 9.53576 16.4064 9.7876 16.0957 9.7876H11.5957C11.285 9.7876 11.0332 9.53576 11.0332 9.2251Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0332 12.2251C11.0332 11.9144 11.285 11.6626 11.5957 11.6626H16.0957C16.4064 11.6626 16.6582 11.9144 16.6582 12.2251C16.6582 12.5358 16.4064 12.7876 16.0957 12.7876H11.5957C11.285 12.7876 11.0332 12.5358 11.0332 12.2251Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0332 15.2251C11.0332 14.9144 11.285 14.6626 11.5957 14.6626H14.5957C14.9064 14.6626 15.1582 14.9144 15.1582 15.2251C15.1582 15.5358 14.9064 15.7876 14.5957 15.7876H11.5957C11.285 15.7876 11.0332 15.5358 11.0332 15.2251Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5547 18.135C15.5547 17.7208 15.8905 17.385 16.3047 17.385H18.5547C18.9689 17.385 19.3047 17.7208 19.3047 18.135C19.3047 18.5492 18.9689 18.885 18.5547 18.885H16.3047C15.8905 18.885 15.5547 18.5492 15.5547 18.135Z" fill="#2F91A3"/>
+<path d="M20.7004 18.1651L18.5254 20.2801L18.6004 15.9751L20.7004 18.1651Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3267 15.2768C18.6096 15.166 18.9314 15.2367 19.1417 15.456L21.2417 17.646C21.527 17.9435 21.5187 18.4155 21.2233 18.7028L19.0483 20.8178C18.8304 21.0296 18.5064 21.0891 18.2275 20.9684C17.9487 20.8478 17.7702 20.5708 17.7755 20.2671L17.8505 15.9621C17.8558 15.6583 18.0438 15.3877 18.3267 15.2768ZM19.3186 17.8077L19.307 18.474L19.6436 18.1466L19.3186 17.8077Z" fill="#2F91A3"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-type.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-type.svg
new file mode 100644
index 0000000..fff8897
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-type.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4208 5.1748H5.58078C5.35711 5.1748 5.17578 5.35613 5.17578 5.5798V15.4198C5.17578 15.6435 5.35711 15.8248 5.58078 15.8248H15.4208C15.6445 15.8248 15.8258 15.6435 15.8258 15.4198V5.5798C15.8258 5.35613 15.6445 5.1748 15.4208 5.1748Z" fill="#D6FFEA"/>
+<path d="M15.2555 5.74498V15.27H5.74547V5.74498H15.2705H15.2555ZM15.4205 4.61998H5.58047C5.32188 4.61998 5.07389 4.7227 4.89104 4.90555C4.70819 5.0884 4.60547 5.33639 4.60547 5.59498V15.42C4.60547 15.6786 4.70819 15.9266 4.89104 16.1094C5.07389 16.2923 5.32188 16.395 5.58047 16.395H15.4055C15.6641 16.395 15.912 16.2923 16.0949 16.1094C16.2777 15.9266 16.3805 15.6786 16.3805 15.42V5.57998C16.3805 5.32139 16.2777 5.0734 16.0949 4.89055C15.912 4.7077 15.6641 4.60498 15.4055 4.60498L15.4205 4.61998Z" fill="#5ACB9A"/>
+<path d="M18.4208 8.1748H8.58078C8.35711 8.1748 8.17578 8.35613 8.17578 8.5798V18.4198C8.17578 18.6435 8.35711 18.8248 8.58078 18.8248H18.4208C18.6445 18.8248 18.8258 18.6435 18.8258 18.4198V8.5798C18.8258 8.35613 18.6445 8.1748 18.4208 8.1748Z" fill="#D6FFEA"/>
+<path d="M18.2555 8.74498V18.27H8.74547V8.74498H18.2705H18.2555ZM18.4205 7.61998H8.58047C8.32188 7.61998 8.07389 7.7227 7.89104 7.90555C7.70819 8.0884 7.60547 8.33639 7.60547 8.59498V18.42C7.60547 18.6786 7.70819 18.9266 7.89104 19.1094C8.07389 19.2923 8.32188 19.395 8.58047 19.395H18.4055C18.6641 19.395 18.9121 19.2923 19.0949 19.1094C19.2777 18.9266 19.3805 18.6786 19.3805 18.42V8.57998C19.3805 8.32139 19.2777 8.0734 19.0949 7.89055C18.9121 7.7077 18.6641 7.60498 18.4055 7.60498L18.4205 7.61998Z" fill="#5ACB9A"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-user_mapping.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-user_mapping.svg
new file mode 100644
index 0000000..e1d54bc
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-user_mapping.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.4187 15.4799C3.41512 15.41 3.41512 15.3399 3.4187 15.27C3.47361 13.5193 4.21904 11.8615 5.49219 10.6586C6.76533 9.45572 8.46274 8.8055 10.2137 8.84995C11.9672 8.80146 13.6685 9.44988 14.9449 10.6532C16.2213 11.8565 16.9688 13.5166 17.0237 15.27C17.0273 15.3399 17.0273 15.41 17.0237 15.4799H3.4187Z" fill="#FFEEEE"/>
+<path d="M10.2146 9.40458C11.769 9.34805 13.2861 9.8884 14.4548 10.9148C15.6234 11.9412 16.3551 13.3759 16.4996 14.9246H3.98961C4.13365 13.3866 4.85677 11.9608 6.01256 10.9359C7.16834 9.91099 8.67041 9.36361 10.2146 9.40458ZM10.2146 8.27958C8.31139 8.2312 6.46678 8.94016 5.08587 10.2508C3.70496 11.5614 2.90066 13.3664 2.84961 15.2696C2.88369 15.5324 2.93378 15.7929 2.99961 16.0496H17.5796C17.6252 15.7916 17.6553 15.5312 17.6696 15.2696C17.6445 14.3194 17.4311 13.3837 17.0418 12.5165C16.6525 11.6494 16.095 10.8682 15.4016 10.218C14.7082 9.56788 13.8927 9.06178 13.0023 8.72904C12.112 8.3963 11.1644 8.24353 10.2146 8.27958Z" fill="#BD4949"/>
+<path d="M10.2154 10.0499C12.0462 10.0499 13.5304 8.56575 13.5304 6.73492C13.5304 4.9041 12.0462 3.41992 10.2154 3.41992C8.38457 3.41992 6.90039 4.9041 6.90039 6.73492C6.90039 8.56575 8.38457 10.0499 10.2154 10.0499Z" fill="#FFEEEE"/>
+<path d="M10.2151 3.9751C10.7628 3.96617 11.3008 4.12041 11.7605 4.41821C12.2203 4.716 12.581 5.14387 12.7968 5.64734C13.0127 6.15081 13.0738 6.70711 12.9724 7.24543C12.8711 7.78375 12.6118 8.27973 12.2277 8.67024C11.8435 9.06075 11.3519 9.32812 10.8153 9.43831C10.2787 9.5485 9.72148 9.49654 9.21453 9.28903C8.70758 9.08152 8.27384 8.72785 7.96853 8.27305C7.66322 7.81824 7.50015 7.28287 7.50008 6.7351C7.49998 6.01083 7.78458 5.31555 8.29249 4.79922C8.8004 4.2829 9.49091 3.98691 10.2151 3.9751ZM10.2151 2.8501C9.4467 2.8501 8.69557 3.07795 8.05669 3.50484C7.4178 3.93173 6.91985 4.53848 6.62581 5.24837C6.33176 5.95826 6.25483 6.73941 6.40473 7.49302C6.55463 8.24664 6.92464 8.93888 7.46797 9.48221C8.0113 10.0255 8.70354 10.3955 9.45715 10.5454C10.2108 10.6954 10.9919 10.6184 11.7018 10.3244C12.4117 10.0303 13.0185 9.53237 13.4453 8.89349C13.8722 8.2546 14.1001 7.50348 14.1001 6.7351C14.1001 5.70473 13.6908 4.71657 12.9622 3.98799C12.2336 3.25941 11.2454 2.8501 10.2151 2.8501Z" fill="#BD4949"/>
+<path d="M6.98901 17.1456C6.98543 17.0756 6.98543 17.0055 6.98901 16.9356C7.04004 15.1823 7.78377 13.5207 9.05734 12.3146C10.3309 11.1085 12.0305 10.4562 13.784 10.5006C15.5375 10.4521 17.2388 11.1005 18.5152 12.3038C19.7916 13.5071 20.5391 15.1673 20.594 16.9206C20.5976 16.9905 20.5976 17.0606 20.594 17.1306L6.98901 17.1456Z" fill="#BFE1F1"/>
+<path d="M13.7849 11.0702C15.3293 11.0251 16.8331 11.5686 17.9917 12.5908C19.1504 13.6129 19.8772 15.0372 20.0249 16.5752H7.49992C7.64807 15.0292 8.38126 13.5982 9.54954 12.575C10.7178 11.5517 12.2329 11.0134 13.7849 11.0702ZM13.7849 9.94519C11.8817 9.89681 10.0371 10.6058 8.65618 11.9164C7.27528 13.227 6.47098 15.0321 6.41992 16.9352C6.43427 17.1968 6.46433 17.4572 6.50992 17.7152H20.9999C21.0456 17.4572 21.0756 17.1968 21.0899 16.9352C21.0388 15.0427 20.2428 13.2468 18.8749 11.9379C17.5071 10.629 15.6779 9.91288 13.7849 9.94519Z" fill="#2C66BD"/>
+<path d="M13.7838 11.7152C15.6146 11.7152 17.0988 10.231 17.0988 8.4002C17.0988 6.56938 15.6146 5.08521 13.7838 5.08521C11.9529 5.08521 10.4688 6.56938 10.4688 8.4002C10.4688 10.231 11.9529 11.7152 13.7838 11.7152Z" fill="#BFE1F1"/>
+<path d="M13.7848 5.64C14.3306 5.64 14.8643 5.80187 15.3181 6.10514C15.772 6.40842 16.1258 6.83947 16.3347 7.34379C16.5436 7.84812 16.5982 8.40306 16.4917 8.93845C16.3852 9.47384 16.1224 9.96562 15.7364 10.3516C15.3504 10.7376 14.8586 11.0005 14.3232 11.107C13.7878 11.2135 13.2329 11.1588 12.7286 10.9499C12.2242 10.741 11.7932 10.3873 11.4899 9.93337C11.1866 9.47949 11.0248 8.94588 11.0248 8.4C11.0248 7.668 11.3156 6.96599 11.8332 6.44839C12.3508 5.93078 13.0528 5.64 13.7848 5.64ZM13.7848 4.515C13.0158 4.51203 12.2632 4.73736 11.6223 5.16244C10.9815 5.58752 10.4812 6.19323 10.1848 6.90285C9.88847 7.61248 9.80939 8.39409 9.9576 9.14869C10.1058 9.90329 10.4746 10.5969 11.0174 11.1418C11.5601 11.6866 12.2523 12.0581 13.0063 12.2092C13.7603 12.3603 14.5422 12.2843 15.253 11.9907C15.9638 11.6971 16.5714 11.1991 16.999 10.5599C17.4265 9.92074 17.6548 9.16902 17.6548 8.4C17.6567 7.88981 17.5582 7.38423 17.3648 6.91213C17.1714 6.44002 16.8869 6.01064 16.5275 5.64849C16.1681 5.28634 15.741 4.99852 15.2704 4.80146C14.7998 4.6044 14.295 4.50197 13.7848 4.5V4.515Z" fill="#2C66BD"/>
+<path d="M13.6949 21.1501C16.0559 21.1501 17.9699 19.2361 17.9699 16.8751C17.9699 14.5141 16.0559 12.6001 13.6949 12.6001C11.3339 12.6001 9.41992 14.5141 9.41992 16.8751C9.41992 19.2361 11.3339 21.1501 13.6949 21.1501Z" fill="#BFE1F1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3092 16.8901C14.3121 16.7702 14.2791 16.6522 14.2143 16.5512C14.1495 16.4503 14.056 16.3711 13.9458 16.3238C13.8356 16.2766 13.7137 16.2634 13.5959 16.2861C13.4782 16.3088 13.3699 16.3662 13.2851 16.451C13.2003 16.5358 13.1428 16.6441 13.1202 16.7618C13.0975 16.8796 13.1106 17.0015 13.1579 17.1117C13.2052 17.2219 13.2844 17.3155 13.3853 17.3802C13.4862 17.445 13.6043 17.478 13.7242 17.4751C13.877 17.4678 14.0216 17.4038 14.1297 17.2956C14.2379 17.1875 14.3019 17.0429 14.3092 16.8901ZM17.0542 16.2901L16.2142 16.1401C16.164 15.9602 16.0882 15.7884 15.9892 15.6301L16.4992 14.9101C16.5236 14.8805 16.5369 14.8434 16.5369 14.8051C16.5369 14.7668 16.5236 14.7296 16.4992 14.7001L15.9142 14.1151C15.8822 14.0895 15.8426 14.0756 15.8017 14.0756C15.7608 14.0756 15.7211 14.0895 15.6892 14.1151L14.9992 14.5801C14.8385 14.4854 14.6674 14.4099 14.4892 14.3551L14.2942 13.5001C14.2801 13.4628 14.2556 13.4303 14.2238 13.4064C14.1919 13.3825 14.1539 13.3682 14.1142 13.3651H13.2742C13.2333 13.3638 13.1932 13.3765 13.1605 13.401C13.1278 13.4255 13.1044 13.4605 13.0942 13.5001L12.9292 14.3551C12.7613 14.3986 12.5999 14.4642 12.4492 14.5501L11.7442 14.0701C11.7301 14.0541 11.7128 14.0413 11.6934 14.0326C11.674 14.0238 11.6529 14.0193 11.6317 14.0193C11.6104 14.0193 11.5893 14.0238 11.5699 14.0326C11.5506 14.0413 11.5332 14.0541 11.5192 14.0701L10.9342 14.6551C10.9098 14.6846 10.8964 14.7218 10.8964 14.7601C10.8964 14.7984 10.9098 14.8355 10.9342 14.8651L11.4142 15.5551C11.3338 15.7188 11.2685 15.8895 11.2192 16.0651L10.3792 16.2151C10.3408 16.2222 10.3062 16.2426 10.2814 16.2729C10.2567 16.3031 10.2435 16.3411 10.2442 16.3801V17.2351C10.244 17.2724 10.2577 17.3084 10.2827 17.3362C10.3076 17.3639 10.342 17.3813 10.3792 17.3851L11.2192 17.5501C11.2651 17.7222 11.3413 17.8847 11.4442 18.0301L10.9642 18.7201C10.9482 18.7342 10.9354 18.7515 10.9267 18.7709C10.9179 18.7903 10.9134 18.8113 10.9134 18.8326C10.9134 18.8539 10.9179 18.8749 10.9267 18.8943C10.9354 18.9137 10.9482 18.931 10.9642 18.9451L11.5492 19.5451C11.5811 19.5706 11.6208 19.5846 11.6617 19.5846C11.7026 19.5846 11.7422 19.5706 11.7742 19.5451L12.4642 19.0651C12.6142 19.1523 12.7758 19.218 12.9442 19.2601L13.1092 20.1151C13.1163 20.1535 13.1367 20.1881 13.1669 20.2128C13.1971 20.2375 13.2351 20.2507 13.2742 20.2501H14.1142C14.1544 20.2489 14.1934 20.2353 14.2256 20.2112C14.2578 20.187 14.2818 20.1534 14.2942 20.1151L14.4442 19.2751L14.9992 19.2001L15.6892 19.6651C15.7198 19.6871 15.7565 19.6989 15.7942 19.6989C15.8318 19.6989 15.8686 19.6871 15.8992 19.6651L16.4842 19.0651C16.5001 19.051 16.5129 19.0337 16.5217 19.0143C16.5304 18.9949 16.5349 18.9739 16.5349 18.9526C16.5349 18.9313 16.5304 18.9103 16.5217 18.8909C16.5129 18.8715 16.5001 18.8542 16.4842 18.8401L16.0042 18.1201C16.1071 17.9747 16.1833 17.8122 16.2292 17.6401L17.0692 17.4751C17.1063 17.4713 17.1407 17.4539 17.1657 17.4262C17.1906 17.3984 17.2044 17.3624 17.2042 17.3251V16.5001C17.2048 16.4611 17.1916 16.4231 17.1669 16.3929C17.1422 16.3626 17.1075 16.3422 17.0692 16.3351L17.0542 16.2901ZM13.7092 18.3301C13.4125 18.3301 13.1225 18.2421 12.8758 18.0773C12.6291 17.9125 12.4369 17.6782 12.3233 17.4041C12.2098 17.13 12.1801 16.8284 12.238 16.5374C12.2959 16.2465 12.4387 15.9792 12.6485 15.7694C12.8583 15.5596 13.1256 15.4168 13.4165 15.3589C13.7075 15.301 14.0091 15.3307 14.2832 15.4443C14.5573 15.5578 14.7915 15.7501 14.9564 15.9967C15.1212 16.2434 15.2092 16.5334 15.2092 16.8301C15.2092 17.2279 15.0511 17.6094 14.7698 17.8907C14.4885 18.172 14.107 18.3301 13.7092 18.3301Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/coll-view.svg b/static/img/style_guide/iconography_assets/tree_view_icons/coll-view.svg
new file mode 100644
index 0000000..695d9a7
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/coll-view.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.1154 3.8999H3.90039V17.1149H17.1154V3.8999Z" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.33789 3.8999C3.33789 3.58924 3.58973 3.3374 3.90039 3.3374H17.1154C17.4261 3.3374 17.6779 3.58924 17.6779 3.8999V17.1149C17.6779 17.4256 17.4261 17.6774 17.1154 17.6774H3.90039C3.58973 17.6774 3.33789 17.4256 3.33789 17.1149V3.8999ZM4.46289 4.4624V16.5524H16.5529V4.4624H4.46289Z" fill="#9CC71C"/>
+<path d="M20.1154 6.8999H6.90039V20.1149H20.1154V6.8999Z" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.33789 6.8999C6.33789 6.58924 6.58973 6.3374 6.90039 6.3374H20.1154C20.4261 6.3374 20.6779 6.58924 20.6779 6.8999V20.1149C20.6779 20.4256 20.4261 20.6774 20.1154 20.6774H6.90039C6.58973 20.6774 6.33789 20.4256 6.33789 20.1149V6.8999ZM7.46289 7.4624V19.5524H19.5529V7.4624H7.46289Z" fill="#9CC71C"/>
+<path d="M17.7314 9.2998H9.31641V17.7148H17.7314V9.2998Z" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75391 9.2998C8.75391 8.98914 9.00575 8.7373 9.31641 8.7373H17.7314C18.0421 8.7373 18.2939 8.98914 18.2939 9.2998V17.7148C18.2939 18.0255 18.0421 18.2773 17.7314 18.2773H9.31641C9.00575 18.2773 8.75391 18.0255 8.75391 17.7148V9.2998ZM9.87891 9.8623V17.1523H17.1689V9.8623H9.87891Z" fill="#9CC71C"/>
+<path d="M15.3298 11.6997H11.7148V15.3147H15.3298V11.6997Z" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1523 11.6997C11.1523 11.389 11.4042 11.1372 11.7148 11.1372H15.3298C15.6405 11.1372 15.8923 11.389 15.8923 11.6997V15.3147C15.8923 15.6254 15.6405 15.8772 15.3298 15.8772H11.7148C11.4042 15.8772 11.1523 15.6254 11.1523 15.3147V11.6997ZM12.2773 12.2622V14.7522H14.7673V12.2622H12.2773Z" fill="#9CC71C"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/collation.svg b/static/img/style_guide/iconography_assets/tree_view_icons/collation.svg
new file mode 100644
index 0000000..7071577
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/collation.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.90625 6.83374H4.33203L3.5293 9.0603H2.36914L5.62695 0.529053H6.61133L9.875 9.0603H8.7207L7.90625 6.83374ZM4.67188 5.90796H7.57227L6.11914 1.91772L4.67188 5.90796Z" fill="#E87373"/>
+<path d="M5.02148 12.3484V14.2527H7.14258C7.52148 14.2527 7.82812 14.1824 8.0625 14.0417C8.30078 13.8972 8.41992 13.6433 8.41992 13.28C8.41992 12.8777 8.26367 12.6121 7.95117 12.4832C7.68164 12.3933 7.33789 12.3484 6.91992 12.3484H5.02148ZM5.02148 15.6824V17.9851H7.14258C7.52148 17.9851 7.81641 17.9343 8.02734 17.8328C8.41016 17.6453 8.60156 17.2859 8.60156 16.7546C8.60156 16.3054 8.41602 15.9968 8.04492 15.8289C7.83789 15.7351 7.54688 15.6863 7.17188 15.6824H5.02148ZM7.49414 10.8484C8.55273 10.864 9.30273 11.1707 9.74414 11.7683C10.0098 12.1355 10.1426 12.575 10.1426 13.0867C10.1426 13.614 10.0098 14.0378 9.74414 14.3582C9.5957 14.5378 9.37695 14.7019 9.08789 14.8503C9.5293 15.0105 9.86133 15.2644 10.084 15.6121C10.3105 15.9597 10.4238 16.3816 10.4238 16.8777C10.4238 17.3894 10.2949 17.8484 10.0371 18.2546C9.87305 18.5242 9.66797 18.7507 9.42188 18.9343C9.14453 19.1453 8.81641 19.2898 8.4375 19.3679C8.0625 19.446 7.6543 19.4851 7.21289 19.4851H3.29883V10.8484H7.49414Z" fill="#E87373"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4395 4.2605C16.8537 4.2605 17.1895 4.59628 17.1895 5.0105V18.5105C17.1895 18.9247 16.8537 19.2605 16.4395 19.2605C16.0252 19.2605 15.6895 18.9247 15.6895 18.5105V5.0105C15.6895 4.59628 16.0252 4.2605 16.4395 4.2605Z" fill="#E87373"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7198 14.2302C21.0127 14.5231 21.0127 14.9979 20.7198 15.2908L16.9698 19.0408C16.6769 19.3337 16.202 19.3337 15.9091 19.0408C15.6162 18.7479 15.6162 18.2731 15.9091 17.9802L19.6591 14.2302C19.952 13.9373 20.4269 13.9373 20.7198 14.2302Z" fill="#E87373"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1591 14.2302C12.452 13.9373 12.9269 13.9373 13.2198 14.2302L16.9698 17.9802C17.2627 18.2731 17.2627 18.7479 16.9698 19.0408C16.6769 19.3337 16.202 19.3337 15.9091 19.0408L12.1591 15.2908C11.8662 14.9979 11.8662 14.5231 12.1591 14.2302Z" fill="#E87373"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/compound_trigger-bad.svg b/static/img/style_guide/iconography_assets/tree_view_icons/compound_trigger-bad.svg
new file mode 100644
index 0000000..ce28acf
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/compound_trigger-bad.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5002 11.6096C19.4725 11.4685 19.4048 11.3383 19.3052 11.2346L13.1852 4.82962C13.0805 4.72196 12.9464 4.64749 12.7997 4.61548C12.653 4.58348 12.5002 4.59535 12.3602 4.64962C12.222 4.70418 12.1036 4.79931 12.0206 4.92249C11.9376 5.04566 11.8939 5.19109 11.8952 5.33962L11.8052 10.1546H5.91016C5.51233 10.1546 5.1308 10.3127 4.8495 10.594C4.56819 10.8753 4.41016 11.2568 4.41016 11.6546L19.5002 11.6096Z" fill="#2F91A3"/>
+<path d="M4.5 12.3597C4.5 12.7575 4.65804 13.1391 4.93934 13.4204C5.22064 13.7017 5.60218 13.8597 6 13.8597H11.76V18.6447C11.7532 18.7924 11.793 18.9384 11.8737 19.0623C11.9545 19.1861 12.0721 19.2814 12.21 19.3347C12.3087 19.3572 12.4113 19.3572 12.51 19.3347C12.605 19.3376 12.6995 19.3204 12.7874 19.2842C12.8753 19.248 12.9546 19.1936 13.02 19.1247L19.44 12.9447C19.4935 12.8497 19.5264 12.7446 19.5368 12.6361C19.5471 12.5275 19.5346 12.4181 19.5 12.3147H4.5V12.3597Z" fill="#EFA539"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1607 2.8942C20.6001 3.33354 20.6001 4.04585 20.1607 4.48519L15.6607 8.98519C15.2214 9.42453 14.5091 9.42453 14.0697 8.98519C13.6304 8.54585 13.6304 7.83354 14.0697 7.3942L18.5697 2.8942C19.0091 2.45486 19.7214 2.45486 20.1607 2.8942Z" fill="#D0021B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0697 2.8942C14.5091 2.45486 15.2214 2.45486 15.6607 2.8942L20.1607 7.3942C20.6001 7.83354 20.6001 8.54585 20.1607 8.98519C19.7214 9.42453 19.0091 9.42453 18.5697 8.98519L14.0697 4.48519C13.6304 4.04585 13.6304 3.33354 14.0697 2.8942Z" fill="#D0021B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/compound_trigger.svg b/static/img/style_guide/iconography_assets/tree_view_icons/compound_trigger.svg
new file mode 100644
index 0000000..4f3d2a5
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/compound_trigger.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5002 11.6099C19.4725 11.4688 19.4048 11.3386 19.3052 11.2349L13.1852 4.82987C13.0805 4.72221 12.9464 4.64774 12.7997 4.61573C12.653 4.58372 12.5002 4.59559 12.3602 4.64987C12.222 4.70442 12.1036 4.79956 12.0206 4.92273C11.9376 5.04591 11.8939 5.19134 11.8952 5.33987L11.8052 10.1549H5.91016C5.51233 10.1549 5.1308 10.3129 4.8495 10.5942C4.56819 10.8755 4.41016 11.257 4.41016 11.6549L19.5002 11.6099Z" fill="#2F91A3"/>
+<path d="M4.5 12.3599C4.5 12.7578 4.65804 13.1393 4.93934 13.4206C5.22064 13.7019 5.60218 13.8599 6 13.8599H11.76V18.6449C11.7532 18.7926 11.793 18.9387 11.8737 19.0625C11.9545 19.1863 12.0721 19.2816 12.21 19.3349C12.3087 19.3574 12.4113 19.3574 12.51 19.3349C12.605 19.3378 12.6995 19.3206 12.7874 19.2844C12.8753 19.2482 12.9546 19.1939 13.02 19.1249L19.44 12.9449C19.4935 12.85 19.5264 12.7448 19.5368 12.6363C19.5471 12.5278 19.5346 12.4183 19.5 12.3149H4.5V12.3599Z" fill="#EFA539"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/database.svg b/static/img/style_guide/iconography_assets/tree_view_icons/database.svg
new file mode 100644
index 0000000..350779b
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/database.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.98 8.25C20.1461 8.03428 20.2405 7.77204 20.25 7.5C20.25 5.85 16.5 4.5 12 4.5C7.50005 4.5 3.75005 5.85 3.75005 7.5C3.75963 7.77204 3.85403 8.03428 4.02005 8.25C3.84431 8.46041 3.74805 8.72585 3.74805 9C3.74805 9.27415 3.84431 9.53959 4.02005 9.75C3.84431 9.96041 3.74805 10.2259 3.74805 10.5C3.74805 10.7741 3.84431 11.0396 4.02005 11.25C3.84431 11.4604 3.74805 11.7259 3.74805 12C3.74805 12.2741 3.84431 12.5396 4.02005 12.75C3.84431 12.9604 3.74805 13.2259 3.74805 13.5C3.74805 13.7741 3.84431 14.0396 4.02005 14.25C3.84431 14.4604 3.74805 14.7259 3.74805 15C3.74805 15.2741 3.84431 15.5396 4.02005 15.75C3.85403 15.9657 3.75963 16.228 3.75005 16.5C3.75005 18.15 7.50005 19.5 12 19.5C16.5 19.5 20.25 18.15 20.25 16.5C20.2405 16.228 20.1461 15.9657 19.98 15.75C20.1558 15.5396 20.2521 15.2741 20.2521 15C20.2521 14.7259 20.1558 14.4604 19.98 14.25C20.1558 14.0396 20.2521 13.7741 20.2521 13.5C20.2521 13.2259 20.1558 12.9604 19.98 12.75C20.1558 12.5396 20.2521 12.2741 20.2521 12C20.2521 11.7259 20.1558 11.4604 19.98 11.25C20.1558 11.0396 20.2521 10.7741 20.2521 10.5C20.2521 10.2259 20.1558 9.96041 19.98 9.75C20.1558 9.53959 20.2521 9.27415 20.2521 9C20.2521 8.72585 20.1558 8.46041 19.98 8.25Z" fill="#F9F9D1"/>
+<path d="M12 10.5C16.5563 10.5 20.25 9.15685 20.25 7.5C20.25 5.84315 16.5563 4.5 12 4.5C7.44365 4.5 3.75 5.84315 3.75 7.5C3.75 9.15685 7.44365 10.5 12 10.5Z" fill="#AC9230"/>
+<path d="M12 18C8.16 18 4.935 17.04 4.02 15.75C3.85398 15.9657 3.75958 16.228 3.75 16.5C3.75 18.15 7.5 19.5 12 19.5C16.5 19.5 20.25 18.15 20.25 16.5C20.2404 16.228 20.146 15.9657 19.98 15.75C19.065 17.04 15.84 18 12 18Z" fill="#AC9230"/>
+<path d="M12 13.5C8.16 13.5 4.935 12.54 4.02 11.25C3.85398 11.4657 3.75958 11.728 3.75 12C3.75 13.65 7.5 15 12 15C16.5 15 20.25 13.65 20.25 12C20.2404 11.728 20.146 11.4657 19.98 11.25C19.065 12.54 15.84 13.5 12 13.5Z" fill="#AC9230"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/databasebad.svg b/static/img/style_guide/iconography_assets/tree_view_icons/databasebad.svg
new file mode 100644
index 0000000..0a59240
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/databasebad.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.605 8.625C19.7711 8.40928 19.8655 8.14704 19.875 7.875C19.875 6.225 16.185 4.875 11.625 4.875C7.06505 4.875 3.37505 6.225 3.37505 7.875C3.38463 8.14704 3.47903 8.40928 3.64505 8.625C3.46931 8.83541 3.37305 9.10085 3.37305 9.375C3.37305 9.64915 3.46931 9.91459 3.64505 10.125C3.46931 10.3354 3.37305 10.6009 3.37305 10.875C3.37305 11.1491 3.46931 11.4146 3.64505 11.625C3.46931 11.8354 3.37305 12.1009 3.37305 12.375C3.37305 12.6491 3.46931 12.9146 3.64505 13.125C3.46931 13.3354 3.37305 13.6009 3.37305 13.875C3.37305 14.1491 3.46931 14.4146 3.64505 14.625C3.46931 14.8354 3.37305 15.1009 3.37305 15.375C3.37305 15.6491 3.46931 15.9146 3.64505 16.125C3.47903 16.3407 3.38463 16.603 3.37505 16.875C3.37505 18.525 7.06505 19.875 11.625 19.875C16.185 19.875 19.875 18.525 19.875 16.875C19.8655 16.603 19.7711 16.3407 19.605 16.125C19.7808 15.9146 19.8771 15.6491 19.8771 15.375C19.8771 15.1009 19.7808 14.8354 19.605 14.625C19.7808 14.4146 19.8771 14.1491 19.8771 13.875C19.8771 13.6009 19.7808 13.3354 19.605 13.125C19.7808 12.9146 19.8771 12.6491 19.8771 12.375C19.8771 12.1009 19.7808 11.8354 19.605 11.625C19.7808 11.4146 19.8771 11.1491 19.8771 10.875C19.8771 10.6009 19.7808 10.3354 19.605 10.125C19.7808 9.91459 19.8771 9.64915 19.8771 9.375C19.8771 9.10085 19.7808 8.83541 19.605 8.625Z" fill="#F2F2F2"/>
+<path d="M11.625 10.875C16.1813 10.875 19.875 9.53185 19.875 7.875C19.875 6.21815 16.1813 4.875 11.625 4.875C7.06865 4.875 3.375 6.21815 3.375 7.875C3.375 9.53185 7.06865 10.875 11.625 10.875Z" fill="#717F8E"/>
+<path d="M11.625 18.375C7.785 18.375 4.56 17.415 3.645 16.125C3.47898 16.3407 3.38458 16.603 3.375 16.875C3.375 18.525 7.065 19.875 11.625 19.875C16.185 19.875 19.875 18.525 19.875 16.875C19.8654 16.603 19.771 16.3407 19.605 16.125C18.69 17.415 15.465 18.375 11.625 18.375Z" fill="#717F8E"/>
+<path d="M11.625 13.9353C7.785 13.9353 4.56 12.9753 3.645 11.6853C3.47898 11.901 3.38458 12.1633 3.375 12.4353C3.375 14.0853 7.065 15.4353 11.625 15.4353C16.185 15.4353 19.875 14.0853 19.875 12.4353C19.8654 12.1633 19.771 11.901 19.605 11.6853C18.69 12.9753 15.465 13.9353 11.625 13.9353Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4205 3.3295C21.8598 3.76884 21.8598 4.48116 21.4205 4.9205L16.9205 9.4205C16.4812 9.85984 15.7688 9.85984 15.3295 9.4205C14.8902 8.98116 14.8902 8.26884 15.3295 7.8295L19.8295 3.3295C20.2688 2.89017 20.9812 2.89017 21.4205 3.3295Z" fill="#D0021B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3295 3.3295C15.7688 2.89017 16.4812 2.89017 16.9205 3.3295L21.4205 7.8295C21.8598 8.26884 21.8598 8.98116 21.4205 9.4205C20.9812 9.85984 20.2688 9.85984 19.8295 9.4205L15.3295 4.9205C14.8902 4.48116 14.8902 3.76884 15.3295 3.3295Z" fill="#D0021B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/domain.svg b/static/img/style_guide/iconography_assets/tree_view_icons/domain.svg
new file mode 100644
index 0000000..5bfd1dc
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/domain.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.0759 19.7701H5.92586L5.88086 10.5151L12.0009 4.24512L18.1209 10.5451L18.0759 19.7701Z" fill="#CBDFF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.92578 9.75781C6.23644 9.75781 6.48828 10.0097 6.48828 10.3203V19.7553C6.48828 20.066 6.23644 20.3178 5.92578 20.3178C5.61512 20.3178 5.36328 20.066 5.36328 19.7553V10.3203C5.36328 10.0097 5.61512 9.75781 5.92578 9.75781Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.36328 19.7549C5.36328 19.4442 5.61512 19.1924 5.92578 19.1924H18.0758C18.3864 19.1924 18.6383 19.4442 18.6383 19.7549C18.6383 20.0655 18.3864 20.3174 18.0758 20.3174H5.92578C5.61512 20.3174 5.36328 20.0655 5.36328 19.7549Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0762 9.75781C18.3868 9.75781 18.6387 10.0097 18.6387 10.3203V19.7553C18.6387 20.066 18.3868 20.3178 18.0762 20.3178C17.7655 20.3178 17.5137 20.066 17.5137 19.7553V10.3203C17.5137 10.0097 17.7655 9.75781 18.0762 9.75781Z" fill="#6F6F6F"/>
+<path d="M14.7008 12.3298H9.30078V19.1848H14.7008V12.3298Z" fill="#81602B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3985 3.84774C12.618 4.06761 12.6176 4.42377 12.3978 4.64323L4.29777 12.7282C4.0779 12.9477 3.72174 12.9474 3.50227 12.7275C3.28281 12.5076 3.28314 12.1515 3.50301 11.932L11.603 3.847C11.8229 3.62753 12.179 3.62787 12.3985 3.84774Z" fill="#C42E2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6019 3.84774C11.8214 3.62787 12.1775 3.62753 12.3974 3.847L20.4974 11.932C20.7173 12.1515 20.7176 12.5076 20.4981 12.7275C20.2786 12.9474 19.9225 12.9477 19.7026 12.7282L11.6026 4.64323C11.3827 4.42377 11.3824 4.06761 11.6019 3.84774Z" fill="#C42E2E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/domain_constraints-bad.svg b/static/img/style_guide/iconography_assets/tree_view_icons/domain_constraints-bad.svg
new file mode 100644
index 0000000..15c741e
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/domain_constraints-bad.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.255 20.025L5.625 20.145V10.47L12 3.85498L18.375 10.23L18.255 20.025Z" fill="#CBDFF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3969 3.45723C12.6166 3.6769 12.6166 4.03306 12.3969 4.25273L3.89189 12.7577C3.67222 12.9774 3.31606 12.9774 3.09639 12.7577C2.87672 12.5381 2.87672 12.1819 3.09639 11.9622L11.6014 3.45723C11.8211 3.23756 12.1772 3.23756 12.3969 3.45723Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6023 3.45723C11.8219 3.23756 12.1781 3.23756 12.3977 3.45723L20.9027 11.9622C21.1224 12.1819 21.1224 12.5381 20.9027 12.7577C20.6831 12.9774 20.3269 12.9774 20.1073 12.7577L11.6023 4.25273C11.3826 4.03306 11.3826 3.6769 11.6023 3.45723Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.625 9.66748C5.93566 9.66748 6.1875 9.91932 6.1875 10.23V20.145C6.1875 20.4556 5.93566 20.7075 5.625 20.7075C5.31434 20.7075 5.0625 20.4556 5.0625 20.145V10.23C5.0625 9.91932 5.31434 9.66748 5.625 9.66748Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.0625 20.1453C5.0625 19.8346 5.31434 19.5828 5.625 19.5828H18.375C18.6857 19.5828 18.9375 19.8346 18.9375 20.1453C18.9375 20.4559 18.6857 20.7078 18.375 20.7078H5.625C5.31434 20.7078 5.0625 20.4559 5.0625 20.1453Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.375 9.66748C18.6857 9.66748 18.9375 9.91932 18.9375 10.23V20.145C18.9375 20.4556 18.6857 20.7075 18.375 20.7075C18.0643 20.7075 17.8125 20.4556 17.8125 20.145V10.23C17.8125 9.91932 18.0643 9.66748 18.375 9.66748Z" fill="#717F8E"/>
+<path d="M11.9991 18.3152C14.4181 18.3152 16.3791 16.3542 16.3791 13.9352C16.3791 11.5162 14.4181 9.55518 11.9991 9.55518C9.58013 9.55518 7.61914 11.5162 7.61914 13.9352C7.61914 16.3542 9.58013 18.3152 11.9991 18.3152Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5657 11.8006C14.8166 11.9838 14.8715 12.3357 14.6883 12.5866L11.8083 16.5316C11.7159 16.6582 11.5749 16.7405 11.4192 16.7586C11.2635 16.7768 11.1073 16.7292 10.9882 16.6273L9.21822 15.1123C8.98221 14.9102 8.95465 14.5552 9.15666 14.3191C9.35867 14.0831 9.71375 14.0556 9.94977 14.2576L11.258 15.3774L13.7797 11.9233C13.9629 11.6723 14.3148 11.6174 14.5657 11.8006Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.1553 7.44965C21.4482 7.74254 21.4482 8.21742 21.1553 8.51031L16.6553 13.0103C16.3624 13.3032 15.8876 13.3032 15.5947 13.0103C15.3018 12.7174 15.3018 12.2425 15.5947 11.9497L20.0947 7.44965C20.3876 7.15676 20.8624 7.15676 21.1553 7.44965Z" fill="#D0021B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5947 7.44965C15.8876 7.15676 16.3624 7.15676 16.6553 7.44965L21.1553 11.9497C21.4482 12.2425 21.4482 12.7174 21.1553 13.0103C20.8624 13.3032 20.3876 13.3032 20.0947 13.0103L15.5947 8.51031C15.3018 8.21742 15.3018 7.74254 15.5947 7.44965Z" fill="#D0021B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/domain_constraints.svg b/static/img/style_guide/iconography_assets/tree_view_icons/domain_constraints.svg
new file mode 100644
index 0000000..efda34f
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/domain_constraints.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9558 19.635L5.92578 19.77V10.545L12.0008 4.245L18.0758 10.32L17.9558 19.635Z" fill="#CBDFF1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.92578 9.75781C6.23644 9.75781 6.48828 10.0097 6.48828 10.3203V19.7553C6.48828 20.066 6.23644 20.3178 5.92578 20.3178C5.61512 20.3178 5.36328 20.066 5.36328 19.7553V10.3203C5.36328 10.0097 5.61512 9.75781 5.92578 9.75781Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.36328 19.7549C5.36328 19.4442 5.61512 19.1924 5.92578 19.1924H18.0758C18.3864 19.1924 18.6383 19.4442 18.6383 19.7549C18.6383 20.0655 18.3864 20.3174 18.0758 20.3174H5.92578C5.61512 20.3174 5.36328 20.0655 5.36328 19.7549Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0762 9.75781C18.3868 9.75781 18.6387 10.0097 18.6387 10.3203V19.7553C18.6387 20.066 18.3868 20.3178 18.0762 20.3178C17.7655 20.3178 17.5137 20.066 17.5137 19.7553V10.3203C17.5137 10.0097 17.7655 9.75781 18.0762 9.75781Z" fill="#6F6F6F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3981 3.84725C12.6178 4.06692 12.6178 4.42307 12.3981 4.64274L4.29814 12.7427C4.07847 12.9624 3.72231 12.9624 3.50264 12.7427C3.28297 12.5231 3.28297 12.1669 3.50264 11.9472L11.6026 3.84725C11.8223 3.62758 12.1785 3.62758 12.3981 3.84725Z" fill="#C42E2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6023 3.84725C11.8219 3.62758 12.1781 3.62758 12.3977 3.84725L20.4977 11.9472C20.7174 12.1669 20.7174 12.5231 20.4977 12.7427C20.2781 12.9624 19.9219 12.9624 19.7023 12.7427L11.6023 4.64274C11.3826 4.42307 11.3826 4.06692 11.6023 3.84725Z" fill="#C42E2E"/>
+<path d="M12.0001 18.0297C14.3031 18.0297 16.1701 16.1627 16.1701 13.8597C16.1701 11.5567 14.3031 9.6897 12.0001 9.6897C9.69705 9.6897 7.83008 11.5567 7.83008 13.8597C7.83008 16.1627 9.69705 18.0297 12.0001 18.0297Z" fill="#81602B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4145 11.8677C14.6284 12.0243 14.6749 12.3247 14.5183 12.5386L11.7733 16.2886C11.6945 16.3962 11.5746 16.4661 11.4421 16.4818C11.3097 16.4974 11.1768 16.4572 11.0752 16.3709L9.38017 14.9309C9.17814 14.7592 9.1535 14.4563 9.32514 14.2543C9.49677 14.0522 9.79969 14.0276 10.0017 14.1992L11.3034 15.3051L13.7436 11.9715C13.9002 11.7576 14.2006 11.7112 14.4145 11.8677Z" fill="#DEF4FD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/edbfunc.svg b/static/img/style_guide/iconography_assets/tree_view_icons/edbfunc.svg
new file mode 100644
index 0000000..f609ba8
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/edbfunc.svg
@@ -0,0 +1,17 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.88477 8.72975V15.1947L9.47976 18.4197L15.0748 15.1947V8.72975L9.47976 5.48975L3.88477 8.72975Z" fill="#FEFABF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.48047 11.4075C9.79113 11.4075 10.043 11.6593 10.043 11.97V18.675C10.043 18.9856 9.79113 19.2375 9.48047 19.2375C9.16981 19.2375 8.91797 18.9856 8.91797 18.675V11.97C8.91797 11.6593 9.16981 11.4075 9.48047 11.4075Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3145 8.0625C15.6251 8.0625 15.877 8.31434 15.877 8.625V15.33C15.877 15.6407 15.6251 15.8925 15.3145 15.8925C15.0038 15.8925 14.752 15.6407 14.752 15.33V8.625C14.752 8.31434 15.0038 8.0625 15.3145 8.0625Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.66016 8.0625C3.97082 8.0625 4.22266 8.31434 4.22266 8.625V15.33C4.22266 15.6407 3.97082 15.8925 3.66016 15.8925C3.3495 15.8925 3.09766 15.6407 3.09766 15.33V8.625C3.09766 8.31434 3.3495 8.0625 3.66016 8.0625Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7866 8.34401C15.9417 8.61318 15.8492 8.95712 15.5801 9.11223L9.77507 12.4572C9.5059 12.6123 9.16196 12.5199 9.00686 12.2507C8.85176 11.9815 8.94423 11.6376 9.2134 11.4825L15.0184 8.13747C15.2876 7.98237 15.6315 8.07484 15.7866 8.34401Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.96575 4.95317C10.1214 5.22204 10.0296 5.56616 9.7607 5.72179L3.9557 9.08179C3.68684 9.23741 3.34272 9.14561 3.18709 8.87674C3.03147 8.60787 3.12327 8.26375 3.39214 8.10812L9.19714 4.74813C9.46601 4.5925 9.81013 4.6843 9.96575 4.95317Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7866 15.0491C15.9417 15.3183 15.8492 15.6622 15.5801 15.8173L9.77507 19.1623C9.5059 19.3174 9.16196 19.2249 9.00686 18.9558C8.85176 18.6866 8.94423 18.3427 9.2134 18.1876L15.0184 14.8426C15.2876 14.6874 15.6315 14.7799 15.7866 15.0491Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.18655 8.34401C3.34165 8.07484 3.68559 7.98237 3.95476 8.13747L9.75976 11.4825C10.0289 11.6376 10.1214 11.9815 9.9663 12.2507C9.8112 12.5199 9.46725 12.6123 9.19808 12.4572L3.39308 9.11223C3.12391 8.95712 3.03144 8.61318 3.18655 8.34401Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.0074 4.95317C9.16303 4.6843 9.50715 4.5925 9.77602 4.74813L15.581 8.10812C15.8499 8.26375 15.9417 8.60787 15.7861 8.87674C15.6304 9.14561 15.2863 9.23741 15.0175 9.08179L9.21245 5.72179C8.94358 5.56616 8.85178 5.22204 9.0074 4.95317Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.18655 15.0491C3.34165 14.7799 3.68559 14.6874 3.95476 14.8426L9.75976 18.1876C10.0289 18.3427 10.1214 18.6866 9.9663 18.9558C9.8112 19.2249 9.46725 19.3174 9.19808 19.1623L3.39308 15.8173C3.12391 15.6622 3.03144 15.3183 3.18655 15.0491Z" fill="#B9871B"/>
+<path d="M18.4653 18.735L19.3203 18.285L19.5603 17.25V16.785L19.6953 15.765L19.9953 15.375L20.7603 15H19.9953L20.5203 14.895L19.7253 14.31L19.6803 13.92V13.185L19.5603 12.165L19.2453 11.805L18.7353 11.58L18.4653 11.55L14.3403 11.46L13.7403 11.88L13.3803 12.18V12.6L13.4403 12.48L13.3203 13.845L13.3803 14.325L12.3453 15L12.1953 15.12L12.3453 15L13.0203 15.48L13.1103 15.765L13.5003 16.8L13.4853 17.25L13.4703 17.565L13.4853 17.01V17.28L13.6353 17.94L13.8753 18.27L14.2953 18.51L14.6403 18.735H18.4653Z" fill="#FEFABF"/>
+<path d="M18.181 18.6C18.453 18.5997 18.7209 18.5327 18.961 18.405C19.1249 18.3074 19.2596 18.1675 19.351 18C19.4363 17.837 19.4873 17.6584 19.501 17.475C19.501 17.285 19.501 17.1 19.501 16.92V17.055C19.501 16.8 19.501 16.575 19.501 16.41C19.4914 16.2601 19.4914 16.1098 19.501 15.96C19.5141 15.8509 19.5445 15.7445 19.591 15.645C19.634 15.5619 19.6897 15.4859 19.756 15.42C19.8261 15.3478 19.9071 15.287 19.996 15.24L20.236 15.135H20.461H20.236L19.996 15.03C19.9069 14.9831 19.8259 14.9224 19.756 14.85C19.6898 14.7839 19.6342 14.708 19.591 14.625C19.5447 14.5253 19.5144 14.419 19.501 14.31C19.4914 14.1601 19.4914 14.0098 19.501 13.86C19.501 13.68 19.501 13.46 19.501 13.2C19.501 13.02 19.501 12.84 19.501 12.645C19.4873 12.4616 19.4363 12.2829 19.351 12.12C19.2555 11.9505 19.1155 11.8105 18.946 11.715C18.7054 11.5884 18.4379 11.5215 18.166 11.52V11.355H18.361H18.616L18.886 11.445C18.9827 11.482 19.0736 11.5325 19.156 11.595C19.2985 11.7039 19.4162 11.842 19.501 12C19.5772 12.1254 19.6329 12.2621 19.666 12.405C19.6806 12.5646 19.6806 12.7253 19.666 12.885C19.666 13.065 19.666 13.59 19.666 13.59C19.6479 13.7795 19.6479 13.9704 19.666 14.16C19.6913 14.3079 19.7532 14.4471 19.846 14.565C19.9483 14.6829 20.0767 14.7753 20.221 14.835C20.2583 14.8578 20.289 14.8897 20.3104 14.9278C20.3317 14.9659 20.3429 15.0088 20.3429 15.0525C20.3429 15.0961 20.3317 15.1391 20.3104 15.1771C20.289 15.2152 20.2583 15.2472 20.221 15.27C20.0767 15.3296 19.9483 15.4221 19.846 15.54C19.7532 15.6579 19.6913 15.7971 19.666 15.945C19.6479 16.1345 19.6479 16.3254 19.666 16.515C19.666 16.515 19.666 17.565 19.666 17.715C19.6329 17.8579 19.5772 17.9946 19.501 18.12C19.4187 18.2538 19.3118 18.3709 19.186 18.465C19.1036 18.5275 19.0127 18.578 18.916 18.615L18.646 18.705H18.391H18.196L18.181 18.6Z" fill="#34495E" stroke="#B9871B" stroke-width="0.5" stroke-miterlimit="10"/>
+<path d="M14.8348 11.5203C14.5628 11.5206 14.295 11.5875 14.0548 11.7153C13.8854 11.8108 13.7453 11.9508 13.6498 12.1203C13.5646 12.2832 13.5136 12.4619 13.4998 12.6453C13.4998 12.8353 13.4998 13.0203 13.4998 13.2003V13.0653C13.4998 13.3203 13.4998 13.5003 13.4998 13.7103C13.5095 13.8601 13.5095 14.0104 13.4998 14.1603C13.4868 14.2694 13.4564 14.3757 13.4098 14.4753C13.3669 14.5584 13.3112 14.6343 13.2448 14.7003C13.1748 14.7725 13.0938 14.8332 13.0048 14.8803L12.6898 15.0003H12.4648H12.6898L12.9298 15.1053C13.0189 15.1521 13.0999 15.2129 13.1698 15.2853C13.236 15.3514 13.2917 15.4273 13.3348 15.5103C13.3811 15.6099 13.4115 15.7162 13.4248 15.8253C13.4344 15.9751 13.4344 16.1254 13.4248 16.2753C13.4248 16.4553 13.4248 16.6753 13.4248 16.9353V16.8003C13.4248 16.9803 13.4248 17.1603 13.4248 17.3553C13.4386 17.5387 13.4896 17.7173 13.5748 17.8803C13.6703 18.0497 13.8104 18.1898 13.9798 18.2853C14.2204 18.4119 14.488 18.4788 14.7598 18.4803V18.6453H14.6248H14.3698L14.0998 18.5553C14.0032 18.5183 13.9123 18.4678 13.8298 18.4053C13.7041 18.3302 13.5924 18.2337 13.4998 18.1203C13.4237 17.9949 13.368 17.8582 13.3348 17.7153C13.3203 17.5556 13.3203 17.3949 13.3348 17.2353C13.3348 17.0553 13.3348 16.5303 13.3348 16.5303C13.3529 16.3407 13.3529 16.1499 13.3348 15.9603C13.3095 15.8124 13.2477 15.6732 13.1548 15.5553C13.0525 15.4374 12.9241 15.3449 12.7798 15.2853C12.7426 15.2625 12.7118 15.2305 12.6905 15.1924C12.6692 15.1544 12.658 15.1114 12.658 15.0678C12.658 15.0241 12.6692 14.9812 12.6905 14.9431C12.7118 14.905 12.7426 14.8731 12.7798 14.8503C12.9241 14.7906 13.0525 14.6982 13.1548 14.5803C13.2477 14.4624 13.3095 14.3232 13.3348 14.1753C13.3529 13.9857 13.3529 13.7949 13.3348 13.6053C13.3348 13.6053 13.3348 12.5553 13.3348 12.4053C13.368 12.2624 13.4237 12.1257 13.4998 12.0003C13.5821 11.8664 13.689 11.7494 13.8148 11.6553C13.8973 11.5928 13.9882 11.5423 14.0848 11.5053L14.3548 11.4153H14.6098H14.8048L14.8348 11.5203Z" fill="#34495E" stroke="#B9871B" stroke-width="0.5" stroke-miterlimit="10"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6328 13.9949C14.6328 13.6842 14.8847 13.4324 15.1953 13.4324H17.7753C18.086 13.4324 18.3378 13.6842 18.3378 13.9949C18.3378 14.3055 18.086 14.5574 17.7753 14.5574H15.1953C14.8847 14.5574 14.6328 14.3055 14.6328 13.9949Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6328 16.125C14.6328 15.8143 14.8847 15.5625 15.1953 15.5625H17.7753C18.086 15.5625 18.3378 15.8143 18.3378 16.125C18.3378 16.4357 18.086 16.6875 17.7753 16.6875H15.1953C14.8847 16.6875 14.6328 16.4357 14.6328 16.125Z" fill="#B9871B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/edbproc.svg b/static/img/style_guide/iconography_assets/tree_view_icons/edbproc.svg
new file mode 100644
index 0000000..fd8ec68
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/edbproc.svg
@@ -0,0 +1,17 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.86914 8.72975V15.1947L9.47914 18.4197L15.0741 15.1947V8.72975L9.47914 5.48975L3.86914 8.72975Z" fill="#FEFABF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.47852 11.4075C9.78918 11.4075 10.041 11.6593 10.041 11.97V18.675C10.041 18.9856 9.78918 19.2375 9.47852 19.2375C9.16786 19.2375 8.91602 18.9856 8.91602 18.675V11.97C8.91602 11.6593 9.16786 11.4075 9.47852 11.4075Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2988 8.0625C15.6095 8.0625 15.8613 8.31434 15.8613 8.625V15.33C15.8613 15.6407 15.6095 15.8925 15.2988 15.8925C14.9882 15.8925 14.7363 15.6407 14.7363 15.33V8.625C14.7363 8.31434 14.9882 8.0625 15.2988 8.0625Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.64453 8.0625C3.95519 8.0625 4.20703 8.31434 4.20703 8.625V15.33C4.20703 15.6407 3.95519 15.8925 3.64453 15.8925C3.33387 15.8925 3.08203 15.6407 3.08203 15.33V8.625C3.08203 8.31434 3.33387 8.0625 3.64453 8.0625Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.771 8.34401C15.9261 8.61318 15.8336 8.95712 15.5644 9.11223L9.75945 12.4572C9.49028 12.6123 9.14634 12.5199 8.99123 12.2507C8.83613 11.9815 8.9286 11.6376 9.19777 11.4825L15.0028 8.13747C15.2719 7.98237 15.6159 8.07484 15.771 8.34401Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.95013 4.95317C10.1058 5.22204 10.0139 5.56616 9.74508 5.72179L3.94008 9.08179C3.67121 9.23741 3.32709 9.14561 3.17147 8.87674C3.01584 8.60787 3.10764 8.26375 3.37651 8.10812L9.18151 4.74813C9.45038 4.5925 9.7945 4.6843 9.95013 4.95317Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.771 15.0491C15.9261 15.3183 15.8336 15.6622 15.5644 15.8173L9.75945 19.1623C9.49028 19.3174 9.14634 19.2249 8.99123 18.9558C8.83613 18.6866 8.9286 18.3427 9.19777 18.1876L15.0028 14.8426C15.2719 14.6874 15.6159 14.7799 15.771 15.0491Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.17092 8.34401C3.32602 8.07484 3.66997 7.98237 3.93914 8.13747L9.74414 11.4825C10.0133 11.6376 10.1058 11.9815 9.95067 12.2507C9.79557 12.5199 9.45163 12.6123 9.18246 12.4572L3.37746 9.11223C3.10829 8.95712 3.01582 8.61318 3.17092 8.34401Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99178 4.95317C9.1474 4.6843 9.49152 4.5925 9.76039 4.74813L15.5654 8.10812C15.8343 8.26375 15.9261 8.60787 15.7704 8.87674C15.6148 9.14561 15.2707 9.23741 15.0018 9.08179L9.19683 5.72179C8.92796 5.56616 8.83615 5.22204 8.99178 4.95317Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.17092 15.0491C3.32602 14.7799 3.66997 14.6874 3.93914 14.8426L9.74414 18.1876C10.0133 18.3427 10.1058 18.6866 9.95067 18.9558C9.79557 19.2249 9.45163 19.3174 9.18246 19.1623L3.37746 15.8173C3.10829 15.6622 3.01582 15.3183 3.17092 15.0491Z" fill="#B9871B"/>
+<path d="M18.4497 18.735L19.3197 18.285L19.5597 17.25V16.785L19.6797 15.765L19.9797 15.375L20.7447 15H19.9797L20.5047 14.895L19.7097 14.31L19.6647 13.92V13.185L19.5597 12.165L19.2297 11.805L18.7197 11.58L18.4497 11.55L14.3247 11.46L13.7397 11.88L13.3647 12.18V12.6L13.4247 12.48L13.3047 13.845L13.3647 14.325L12.3297 15L12.1797 15.12L12.3297 15L13.0047 15.48L13.0947 15.765L13.4847 16.8L13.4697 17.25L13.4547 17.565L13.4697 17.01V17.28L13.6197 17.94L13.8597 18.27L14.2797 18.51L14.6247 18.735H18.4497Z" fill="#FEFABF"/>
+<path d="M18.1641 18.6C18.4361 18.5997 18.7039 18.5327 18.9441 18.405C19.1135 18.3095 19.2536 18.1694 19.3491 18C19.4343 17.837 19.4853 17.6584 19.4991 17.475C19.4991 17.285 19.4991 17.1 19.4991 16.92V17.055C19.4991 16.8 19.4991 16.575 19.4991 16.41C19.4894 16.2601 19.4894 16.1098 19.4991 15.96C19.5122 15.8509 19.5425 15.7445 19.5891 15.645C19.632 15.5619 19.6877 15.4859 19.7541 15.42C19.8241 15.3478 19.9051 15.287 19.9941 15.24L20.2341 15.135H20.4591H20.2341L19.9941 15.03C19.905 14.9831 19.824 14.9224 19.7541 14.85C19.6879 14.7839 19.6322 14.708 19.5891 14.625C19.5263 14.4835 19.4955 14.3298 19.4991 14.175C19.4895 14.0251 19.4895 13.8748 19.4991 13.725C19.4991 13.545 19.4991 13.325 19.4991 13.065V13.2C19.4991 13.02 19.4991 12.84 19.4991 12.645C19.4853 12.4616 19.4343 12.2829 19.3491 12.12C19.2536 11.9505 19.1135 11.8105 18.9441 11.715C18.7035 11.5884 18.4359 11.5215 18.1641 11.52V11.355H18.3591H18.6141L18.8841 11.445C18.9807 11.482 19.0716 11.5325 19.1541 11.595C19.2966 11.7039 19.4142 11.842 19.4991 12C19.5752 12.1254 19.6309 12.2621 19.6641 12.405C19.6786 12.5646 19.6786 12.7253 19.6641 12.885C19.6641 13.065 19.6641 13.59 19.6641 13.59C19.646 13.7795 19.646 13.9704 19.6641 14.16C19.6894 14.3079 19.7512 14.4471 19.8441 14.565C19.9464 14.6829 20.0748 14.7753 20.2191 14.835C20.2563 14.8578 20.2871 14.8897 20.3084 14.9278C20.3297 14.9659 20.341 15.0088 20.341 15.0525C20.341 15.0961 20.3297 15.1391 20.3084 15.1771C20.2871 15.2152 20.2563 15.2472 20.2191 15.27C20.0748 15.3296 19.9464 15.4221 19.8441 15.54C19.7512 15.6579 19.6894 15.7971 19.6641 15.945C19.646 16.1345 19.646 16.3254 19.6641 16.515C19.6641 16.515 19.6641 17.565 19.6641 17.715C19.6309 17.8579 19.5752 17.9946 19.4991 18.12C19.4168 18.2538 19.3099 18.3709 19.1841 18.465C19.1016 18.5275 19.0107 18.578 18.9141 18.615L18.6441 18.705H18.3891H18.1941L18.1641 18.6Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.79 10.98H18.6758L19.0192 11.0944C19.1489 11.1441 19.2708 11.2122 19.3815 11.2961C19.5638 11.4354 19.7158 11.6124 19.8256 11.8137C19.9198 11.9709 19.9889 12.1418 20.0303 12.3203L20.0361 12.3453L20.0384 12.3709C20.0545 12.5474 20.055 12.7249 20.04 12.9015V13.5898V13.6078L20.0383 13.6256C20.0229 13.7864 20.0224 13.9482 20.0369 14.1091C20.0523 14.1879 20.0856 14.2621 20.1342 14.326C20.1973 14.3967 20.2756 14.4522 20.3632 14.4884L20.3905 14.4997L20.4157 14.5151C20.5077 14.5714 20.5837 14.6504 20.6364 14.7445C20.6892 14.8386 20.7169 14.9446 20.7169 15.0525C20.7169 15.1603 20.6892 15.2664 20.6364 15.3605C20.5837 15.4546 20.5077 15.5335 20.4157 15.5898L20.3905 15.6052L20.3632 15.6165C20.2756 15.6528 20.1973 15.7083 20.1342 15.7789C20.0856 15.8429 20.0523 15.9171 20.0369 15.9959C20.0224 16.1567 20.0229 16.3186 20.0383 16.4794L20.04 16.4971V16.515V17.7579L20.0303 17.7997C19.9882 17.9814 19.9173 18.1553 19.8204 18.3147L19.8194 18.3164C19.7126 18.4902 19.5738 18.6423 19.4105 18.7646C19.3001 18.8481 19.1784 18.9157 19.049 18.9652L19.0337 18.9711L18.7058 19.08H17.9121L17.668 18.2255L18.1645 18.225C18.3737 18.2247 18.5797 18.1736 18.7647 18.0761C18.8711 18.0153 18.9594 17.9271 19.0204 17.8208C19.0784 17.7084 19.1139 17.5858 19.125 17.4598V16.4217C19.1151 16.2599 19.1153 16.0977 19.1257 15.9359L19.1271 15.9153C19.1449 15.7666 19.1868 15.6218 19.2502 15.4862L19.2566 15.4726C19.3169 15.3559 19.3952 15.2493 19.4882 15.1564C19.4952 15.1492 19.5023 15.1421 19.5095 15.135C19.5021 15.1277 19.4948 15.1203 19.4875 15.1129C19.3953 15.0202 19.3176 14.9141 19.2573 14.798L19.2519 14.7877L19.2472 14.7771C19.1643 14.5902 19.1225 14.3878 19.1248 14.1835C19.1154 14.0269 19.1154 13.8699 19.125 13.7133V12.6609C19.1139 12.535 19.0784 12.4116 19.0204 12.2991C18.9595 12.193 18.8715 12.1051 18.7653 12.0442C18.5793 11.9473 18.3727 11.8961 18.1629 11.895L17.79 11.8929V10.98Z" fill="#B9871B"/>
+<path d="M14.8192 11.5203C14.5472 11.5206 14.2794 11.5875 14.0392 11.7153C13.8698 11.8108 13.7297 11.9508 13.6342 12.1203C13.549 12.2832 13.4979 12.4619 13.4842 12.6453C13.4842 12.8353 13.4842 13.0203 13.4842 13.2003V13.0653C13.4992 13.3203 13.4992 13.5003 13.4992 13.7103C13.5088 13.8601 13.5088 14.0104 13.4992 14.1603C13.4861 14.2694 13.4558 14.3757 13.4092 14.4753C13.3662 14.5584 13.3106 14.6343 13.2442 14.7003C13.1741 14.7725 13.0932 14.8332 13.0042 14.8803L12.6742 15.0003H12.4492H12.6742L12.9142 15.1053C13.0033 15.1521 13.0843 15.2129 13.1542 15.2853C13.2204 15.3514 13.276 15.4273 13.3192 15.5103C13.3655 15.6099 13.3959 15.7162 13.4092 15.8253C13.4188 15.9751 13.4188 16.1254 13.4092 16.2753C13.4092 16.4553 13.4092 16.6753 13.4092 16.9353V16.8003C13.4092 16.9803 13.4092 17.1603 13.4092 17.3553C13.4229 17.5387 13.474 17.7173 13.5592 17.8803C13.6547 18.0497 13.7948 18.1898 13.9642 18.2853C14.2048 18.4119 14.4723 18.4788 14.7442 18.4803V18.6453H14.6242H14.3692L14.0992 18.5553C14.0026 18.5183 13.9117 18.4678 13.8292 18.4053C13.7035 18.3302 13.5918 18.2337 13.4992 18.1203C13.423 17.9949 13.3673 17.8582 13.3342 17.7153C13.3196 17.5556 13.3196 17.3949 13.3342 17.2353C13.3342 17.0553 13.3342 16.5303 13.3342 16.5303C13.3523 16.3407 13.3523 16.1499 13.3342 15.9603C13.3089 15.8124 13.247 15.6732 13.1542 15.5553C13.0519 15.4374 12.9235 15.3449 12.7792 15.2853C12.742 15.2625 12.7112 15.2305 12.6899 15.1924C12.6685 15.1544 12.6573 15.1114 12.6573 15.0678C12.6573 15.0241 12.6685 14.9812 12.6899 14.9431C12.7112 14.905 12.742 14.8731 12.7792 14.8503C12.9235 14.7906 13.0519 14.6982 13.1542 14.5803C13.247 14.4624 13.3089 14.3232 13.3342 14.1753C13.3523 13.9857 13.3523 13.7949 13.3342 13.6053C13.3342 13.6053 13.3342 12.5553 13.3342 12.4053C13.3673 12.2624 13.423 12.1257 13.4992 12.0003C13.5815 11.8664 13.6884 11.7494 13.8142 11.6553C13.8967 11.5928 13.9876 11.5423 14.0842 11.5053L14.3542 11.4153H14.6092H14.8042L14.8192 11.5203Z" fill="#34495E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2942 11.0403H15.1303L15.2524 11.8948L14.8205 11.8953C14.6113 11.8955 14.4054 11.9466 14.2204 12.0441C14.114 12.105 14.0257 12.1931 13.9646 12.2994C13.9067 12.4119 13.8712 12.5345 13.8601 12.6604V13.0544C13.8749 13.3105 13.8751 13.4955 13.8751 13.6986C13.885 13.8603 13.8847 14.0226 13.8743 14.1843L13.873 14.205C13.8552 14.3537 13.8132 14.4984 13.7498 14.6341L13.7435 14.6476C13.6831 14.7644 13.6048 14.8709 13.5119 14.9638C13.4874 14.9889 13.4621 15.0129 13.4358 15.0359C13.5223 15.1253 13.5953 15.2268 13.6528 15.3372L13.6605 15.3521C13.7234 15.4873 13.7642 15.6318 13.7823 15.7798L13.7836 15.7905L13.7843 15.8013C13.7947 15.963 13.7949 16.1252 13.7851 16.287V17.3393C13.7962 17.4653 13.8317 17.5887 13.8896 17.7011C13.9505 17.8072 14.0386 17.8952 14.1447 17.956C14.3308 18.053 14.5373 18.1041 14.7472 18.1053L15.1201 18.1073V19.0203H14.3092L13.9659 18.9058C13.8427 18.8587 13.7265 18.7948 13.6203 18.7166C13.4643 18.6207 13.3254 18.4993 13.2096 18.3574L13.1931 18.3372L13.1796 18.315C13.0827 18.1556 13.0119 17.9817 12.9698 17.8L12.964 17.7749L12.9616 17.7494C12.9455 17.5729 12.945 17.3953 12.9601 17.2188V16.5304V16.5124L12.9618 16.4947C12.9771 16.3339 12.9776 16.172 12.9632 16.0112C12.9478 15.9324 12.9145 15.8582 12.8659 15.7942C12.8027 15.7236 12.7244 15.6681 12.6368 15.6318L12.6095 15.6205L12.5843 15.6051C12.4924 15.5488 12.4163 15.4699 12.3636 15.3758C12.3109 15.2817 12.2832 15.1756 12.2832 15.0678C12.2832 14.9599 12.3109 14.8539 12.3636 14.7598C12.3878 14.7167 12.4168 14.6767 12.4501 14.6407V14.6253H12.4648C12.5005 14.5891 12.5406 14.5572 12.5843 14.5304L12.6095 14.515L12.6368 14.5037C12.7244 14.4675 12.8027 14.412 12.8659 14.3413C12.9145 14.2774 12.9478 14.2032 12.9632 14.1244C12.9776 13.9635 12.9771 13.8017 12.9618 13.6409L12.9601 13.6231V13.6053H13.125C13.125 13.6053 13.125 13.6053 13.125 13.6053H12.9601V12.3624L12.9698 12.3206C13.0119 12.1389 13.0827 11.965 13.1796 11.8056L13.1806 11.8039C13.2875 11.6301 13.4262 11.478 13.5895 11.3557C13.7 11.2721 13.8217 11.2046 13.951 11.1551L13.9664 11.1492L14.2942 11.0403Z" fill="#B9871B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/edbvar.svg b/static/img/style_guide/iconography_assets/tree_view_icons/edbvar.svg
new file mode 100644
index 0000000..b1a1d29
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/edbvar.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5003 3.56982H4.51531C3.9934 3.56982 3.57031 3.99291 3.57031 4.51482V19.4998C3.57031 20.0217 3.9934 20.4448 4.51531 20.4448H19.5003C20.0222 20.4448 20.4453 20.0217 20.4453 19.4998V4.51482C20.4453 3.99291 20.0222 3.56982 19.5003 3.56982Z" fill="#FFEFD6"/>
+<path d="M19.5 4.125C19.5995 4.125 19.6948 4.16451 19.7652 4.23484C19.8355 4.30516 19.875 4.40054 19.875 4.5V19.5C19.875 19.5995 19.8355 19.6948 19.7652 19.7652C19.6948 19.8355 19.5995 19.875 19.5 19.875H4.5C4.40054 19.875 4.30516 19.8355 4.23484 19.7652C4.16451 19.6948 4.125 19.5995 4.125 19.5V4.5C4.125 4.40054 4.16451 4.30516 4.23484 4.23484C4.30516 4.16451 4.40054 4.125 4.5 4.125H19.5ZM19.5 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3Z" fill="#EFA539"/>
+<path d="M8.7148 18.0903H7.8898C7.46764 17.459 7.13451 16.7725 6.8998 16.0503C6.67817 15.3875 6.56176 14.6941 6.5548 13.9953C6.55011 13.201 6.69251 12.4127 6.9748 11.6703C7.21218 11.0496 7.5245 10.4602 7.9048 9.91528H8.7148C8.37923 10.6193 8.10812 11.3523 7.9048 12.1053C7.64619 13.2024 7.61556 14.3409 7.8148 15.4503C7.89795 15.924 8.01832 16.3905 8.1748 16.8453C8.2848 17.1353 8.4648 17.5503 8.7148 18.0903Z" fill="#AB6A0C"/>
+<path d="M9 17.13L11.13 13.875L9.195 10.875H10.695L12 12.885L13.23 10.875H14.73L12.795 13.875L14.925 17.085H13.425L11.895 15L10.5 17.13H9Z" fill="#AB6A0C"/>
+<path d="M15.1049 18.0903C15.3449 17.5903 15.5099 17.2053 15.5999 16.9353C15.7073 16.6306 15.7975 16.3201 15.8699 16.0053C15.9475 15.6737 16.0075 15.3382 16.0499 15.0003C16.0702 14.6756 16.0702 14.35 16.0499 14.0253C16.0559 13.3792 15.9854 12.7348 15.8399 12.1053C15.6423 11.3525 15.3762 10.6195 15.0449 9.91528H15.8549C16.278 10.5106 16.6163 11.1618 16.8599 11.8503C17.0958 12.5202 17.2175 13.225 17.2199 13.9353C17.2109 14.5802 17.115 15.221 16.9349 15.8403C16.7038 16.6402 16.3495 17.3993 15.8849 18.0903H15.1049Z" fill="#AB6A0C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.47266 7.5C3.47266 7.18934 3.7245 6.9375 4.03516 6.9375H20.0252C20.3358 6.9375 20.5877 7.18934 20.5877 7.5C20.5877 7.81066 20.3358 8.0625 20.0252 8.0625H4.03516C3.7245 8.0625 3.47266 7.81066 3.47266 7.5Z" fill="#EFA539"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/event_trigger.svg b/static/img/style_guide/iconography_assets/tree_view_icons/event_trigger.svg
new file mode 100644
index 0000000..b92b2f4
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/event_trigger.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8906 4.77002H6.39063C5.5622 4.77002 4.89062 5.44159 4.89062 6.27002V16.77C4.89062 17.5984 5.5622 18.27 6.39063 18.27H16.8906C17.7191 18.27 18.3906 17.5984 18.3906 16.77V6.27002C18.3906 5.44159 17.7191 4.77002 16.8906 4.77002Z" fill="#EDFFFD"/>
+<path d="M19.1102 18.3153L16.4102 20.9253L16.5002 15.6003L19.1102 18.3153Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2944 15.0768C16.5065 14.9935 16.7478 15.0463 16.9057 15.2105L19.5157 17.9255C19.7305 18.1491 19.724 18.5043 19.5011 18.7198L16.8011 21.3298C16.6375 21.4879 16.3948 21.5319 16.1861 21.4413C15.9774 21.3507 15.8439 21.1433 15.8477 20.9159L15.9377 15.5909C15.9416 15.3631 16.0824 15.1601 16.2944 15.0768ZM17.0395 16.9731L16.9955 19.5772L18.3159 18.3008L17.0395 16.9731Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.57065 4.20752H16.6956C16.6956 4.20752 16.6956 4.20752 16.6956 4.20752C17.2909 4.2075 17.8621 4.4426 18.2849 4.86165C18.7077 5.2807 18.9479 5.84978 18.9531 6.44504L18.9532 6.45002L18.9531 9.75002C18.9531 10.0607 18.7013 10.3125 18.3906 10.3125C18.08 10.3125 17.8281 10.0607 17.8281 9.75002V6.45281C17.8249 6.15499 17.7045 5.87038 17.4929 5.66067C17.2808 5.45045 16.9943 5.33251 16.6957 5.33252H6.57338C6.27729 5.33571 5.9942 5.45474 5.78478 5.66416C5.57537 5.87357 5.45634 6.15667 5.45315 6.45275V16.5873C5.45634 16.8834 5.57537 17.1665 5.78478 17.3759C5.99421 17.5853 6.27731 17.7043 6.57341 17.7075H16.6956C17.0063 17.7075 17.2581 17.9594 17.2581 18.27C17.2581 18.5807 17.0063 18.8325 16.6956 18.8325H6.56569C5.97388 18.8273 5.40778 18.5899 4.98929 18.1714C4.5708 17.7529 4.33338 17.1868 4.32817 16.595L4.32812 16.59L4.32815 6.44506C4.33336 5.85325 4.5708 5.28715 4.98929 4.86866C5.40778 4.45017 5.97388 4.21276 6.56569 4.20754L6.57065 4.20752Z" fill="#2F91A3"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/ex_unknown.svg b/static/img/style_guide/iconography_assets/tree_view_icons/ex_unknown.svg
new file mode 100644
index 0000000..d0ec230
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/ex_unknown.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.75234 4.95011C9.67255 4.39061 10.736 4.11172 11.8123 4.14761C13.2186 4.09003 14.6064 4.48428 15.7723 5.27261C16.8223 6.02261 17.3473 7.14761 17.3473 8.64761C17.3751 9.47108 17.1357 10.2814 16.6648 10.9576C16.2213 11.5093 15.7054 11.9987 15.1311 12.4126L14.3811 12.9939C13.9994 13.2743 13.716 13.668 13.5711 14.1189C13.4696 14.5296 13.4242 14.9522 13.4361 15.3751H10.5748C10.5628 14.5416 10.6766 13.711 10.9123 12.9114C11.2463 12.2809 11.7306 11.7425 12.3223 11.3439L13.0723 10.7439C13.3137 10.5734 13.5253 10.3644 13.6986 10.1251C13.9726 9.75661 14.12 9.30931 14.1186 8.85011C14.1219 8.32516 13.9577 7.81283 13.6498 7.38761C13.3373 6.94761 12.7673 6.72761 11.9398 6.72761C11.1123 6.72761 10.5348 6.99886 10.2073 7.54136C9.87905 8.04332 9.70202 8.62909 9.69735 9.22886H6.65234C6.73734 7.21386 7.43734 5.78761 8.75234 4.95011ZM10.4998 16.8039H13.6536V19.8526H10.4998V16.8039Z" fill="#1CAFE4"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/exclusion_constraint.svg b/static/img/style_guide/iconography_assets/tree_view_icons/exclusion_constraint.svg
new file mode 100644
index 0000000..c94e53e
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/exclusion_constraint.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9997 20.4452C16.6637 20.4452 20.4447 16.6642 20.4447 12.0002C20.4447 7.33613 16.6637 3.55518 11.9997 3.55518C7.33564 3.55518 3.55469 7.33613 3.55469 12.0002C3.55469 16.6642 7.33564 20.4452 11.9997 20.4452Z" fill="#DEF4FD"/>
+<path d="M12 4.125C13.5575 4.125 15.0801 4.58686 16.3751 5.45218C17.6702 6.31749 18.6795 7.5474 19.2756 8.98637C19.8716 10.4253 20.0275 12.0087 19.7237 13.5363C19.4198 15.0639 18.6698 16.4671 17.5685 17.5685C16.4671 18.6698 15.0639 19.4198 13.5363 19.7237C12.0087 20.0275 10.4253 19.8716 8.98637 19.2756C7.5474 18.6795 6.3175 17.6702 5.45218 16.3751C4.58686 15.0801 4.125 13.5575 4.125 12C4.12897 9.91264 4.95993 7.9119 6.43592 6.43591C7.91191 4.95992 9.91264 4.12896 12 4.125ZM12 3C10.22 3 8.47991 3.52784 6.99987 4.51677C5.51983 5.50571 4.36628 6.91131 3.68509 8.55585C3.0039 10.2004 2.82567 12.01 3.17294 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89472 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12C21 9.61305 20.0518 7.32387 18.364 5.63604C16.6761 3.94821 14.387 3 12 3Z" fill="#2C66BD"/>
+<path d="M16.6209 9.34519V10.8452H13.2909L12.2709 13.1402H16.6359V14.6402H11.5809L10.6359 16.8002H9.13586L10.0959 14.6702H7.38086V13.1702H10.7109L11.7459 10.8602H7.38086V9.36019H12.4059L13.3659 7.2002H14.8659L13.9659 9.34519H16.6209Z" fill="#2C66BD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/extension.svg b/static/img/style_guide/iconography_assets/tree_view_icons/extension.svg
new file mode 100644
index 0000000..d7673ca
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/extension.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.43 19.6952C8.18335 19.6952 7.9468 19.5972 7.77239 19.4228C7.59798 19.2484 7.5 19.0119 7.5 18.7652V5.2652C7.5 5.01855 7.59798 4.782 7.77239 4.6076C7.9468 4.43319 8.18335 4.33521 8.43 4.33521H18.345C18.5917 4.33521 18.8282 4.43319 19.0026 4.6076C19.177 4.782 19.275 5.01855 19.275 5.2652V15.2552L14.775 19.7552L8.43 19.6952Z" fill="#C9EDD2"/>
+<path d="M18.3447 4.87511C18.392 4.87511 18.4388 4.88442 18.4825 4.90251C18.5261 4.9206 18.5658 4.94712 18.5992 4.98055C18.6327 5.01398 18.6592 5.05366 18.6773 5.09734C18.6954 5.14102 18.7047 5.18783 18.7047 5.23511V15.0001L14.5797 19.1251H8.42969C8.33421 19.1251 8.24264 19.0872 8.17513 19.0197C8.10762 18.9522 8.06969 18.8606 8.06969 18.7651V5.26511C8.06969 5.16963 8.10762 5.07806 8.17513 5.01055C8.24264 4.94304 8.33421 4.90511 8.42969 4.90511H18.3447V4.87511ZM18.3447 3.78011H8.42969C8.03186 3.78011 7.65033 3.93814 7.36903 4.21945C7.08772 4.50075 6.92969 4.88228 6.92969 5.28011V18.7801C6.92969 19.1779 7.08772 19.5595 7.36903 19.8408C7.65033 20.1221 8.03186 20.2801 8.42969 20.2801H14.9997L19.7847 15.4951V5.23511C19.7847 4.83728 19.6267 4.45575 19.3453 4.17445C19.064 3.89314 18.6825 3.73511 18.2847 3.73511L18.3447 3.78011Z" fill="#1A6016"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2312 13.7473L19.4962 13.7173L19.5026 14.8423L14.7969 14.8691V20.2498H13.6719V14.3098C13.6719 14.0004 13.9218 13.749 14.2312 13.7473Z" fill="#1A6016"/>
+<path d="M13.1849 7.69482H4.16992V10.7098H13.1849V7.69482Z" fill="#C9EDD2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.60742 7.69482C3.60742 7.38416 3.85926 7.13232 4.16992 7.13232H13.1849C13.4956 7.13232 13.7474 7.38416 13.7474 7.69482V10.7098C13.7474 11.0205 13.4956 11.2723 13.1849 11.2723H4.16992C3.85926 11.2723 3.60742 11.0205 3.60742 10.7098V7.69482ZM4.73242 8.25732V10.1473H12.6224V8.25732H4.73242Z" fill="#1A6016"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/foreign_data_wrapper-1.svg b/static/img/style_guide/iconography_assets/tree_view_icons/foreign_data_wrapper-1.svg
new file mode 100644
index 0000000..244621b
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/foreign_data_wrapper-1.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.605 9.375C19.7711 9.15928 19.8655 8.89704 19.875 8.625C19.875 6.975 16.185 5.625 11.625 5.625C7.06505 5.625 3.37505 6.975 3.37505 8.625C3.38463 8.89704 3.47903 9.15928 3.64505 9.375C3.46931 9.58541 3.37305 9.85085 3.37305 10.125C3.37305 10.3991 3.46931 10.6646 3.64505 10.875C3.46931 11.0854 3.37305 11.3509 3.37305 11.625C3.37305 11.8991 3.46931 12.1646 3.64505 12.375C3.46931 12.5854 3.37305 12.8509 3.37305 13.125C3.37305 13.3991 3.46931 13.6646 3.64505 13.875C3.46931 14.0854 3.37305 14.3509 3.37305 14.625C3.37305 14.8991 3.46931 15.1646 3.64505 15.375C3.46931 15.5854 3.37305 15.8509 3.37305 16.125C3.37305 16.3991 3.46931 16.6646 3.64505 16.875C3.47903 17.0907 3.38463 17.353 3.37505 17.625C3.37505 19.275 7.06505 20.625 11.625 20.625C16.185 20.625 19.875 19.275 19.875 17.625C19.8655 17.353 19.7711 17.0907 19.605 16.875C19.7808 16.6646 19.8771 16.3991 19.8771 16.125C19.8771 15.8509 19.7808 15.5854 19.605 15.375C19.7808 15.1646 19.8771 14.8991 19.8771 14.625C19.8771 14.3509 19.7808 14.0854 19.605 13.875C19.7808 13.6646 19.8771 13.3991 19.8771 13.125C19.8771 12.8509 19.7808 12.5854 19.605 12.375C19.7808 12.1646 19.8771 11.8991 19.8771 11.625C19.8771 11.3509 19.7808 11.0854 19.605 10.875C19.7808 10.6646 19.8771 10.3991 19.8771 10.125C19.8771 9.85085 19.7808 9.58541 19.605 9.375Z" fill="#F9F9D1"/>
+<path d="M11.625 11.625C16.1813 11.625 19.875 10.2819 19.875 8.625C19.875 6.96815 16.1813 5.625 11.625 5.625C7.06865 5.625 3.375 6.96815 3.375 8.625C3.375 10.2819 7.06865 11.625 11.625 11.625Z" fill="#AC9230"/>
+<path d="M11.625 19.125C7.785 19.125 4.56 18.165 3.645 16.875C3.47898 17.0907 3.38458 17.353 3.375 17.625C3.375 19.275 7.065 20.625 11.625 20.625C16.185 20.625 19.875 19.275 19.875 17.625C19.8654 17.353 19.771 17.0907 19.605 16.875C18.69 18.165 15.465 19.125 11.625 19.125Z" fill="#AC9230"/>
+<path d="M11.625 14.625C7.785 14.625 4.56 13.665 3.645 12.375C3.47898 12.5907 3.38458 12.853 3.375 13.125C3.375 14.775 7.065 16.125 11.625 16.125C16.185 16.125 19.875 14.775 19.875 13.125C19.8654 12.853 19.771 12.5907 19.605 12.375C18.69 13.665 15.465 14.625 11.625 14.625Z" fill="#AC9230"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.1553 2.84467C21.4482 3.13756 21.4482 3.61244 21.1553 3.90533L18.1553 6.90533C17.8624 7.19822 17.3876 7.19822 17.0947 6.90533C16.8018 6.61244 16.8018 6.13756 17.0947 5.84467L20.0947 2.84467C20.3876 2.55178 20.8624 2.55178 21.1553 2.84467Z" fill="#AC9230"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.875 3.375C16.875 2.96079 17.2108 2.625 17.625 2.625H20.625C21.0392 2.625 21.375 2.96079 21.375 3.375C21.375 3.78921 21.0392 4.125 20.625 4.125H17.625C17.2108 4.125 16.875 3.78921 16.875 3.375Z" fill="#AC9230"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.625 2.625C21.0392 2.625 21.375 2.96079 21.375 3.375V6.375C21.375 6.78921 21.0392 7.125 20.625 7.125C20.2108 7.125 19.875 6.78921 19.875 6.375V3.375C19.875 2.96079 20.2108 2.625 20.625 2.625Z" fill="#AC9230"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/fts_configuration-1.svg b/static/img/style_guide/iconography_assets/tree_view_icons/fts_configuration-1.svg
new file mode 100644
index 0000000..aa70db1
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/fts_configuration-1.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.4107 20.4447C7.12825 20.4447 6.85736 20.3325 6.65763 20.1328C6.45791 19.933 6.3457 19.6621 6.3457 19.3797V4.61969C6.3457 4.33723 6.45791 4.06635 6.65763 3.86662C6.85736 3.66689 7.12825 3.55469 7.4107 3.55469H12.7507L17.6407 8.44469V19.3647C17.6407 19.6471 17.5285 19.918 17.3288 20.1178C17.129 20.3175 16.8582 20.4297 16.5757 20.4297L7.4107 20.4447Z" fill="#F2F2F2"/>
+<path d="M12.526 4.125L17.026 8.625V19.32C17.026 19.4513 16.9739 19.5772 16.881 19.67C16.7882 19.7628 16.6623 19.815 16.531 19.815H7.41102C7.27973 19.815 7.15383 19.7628 7.061 19.67C6.96817 19.5772 6.91602 19.4513 6.91602 19.32V4.62C6.91602 4.48872 6.96817 4.36281 7.061 4.26998C7.15383 4.17715 7.27973 4.125 7.41102 4.125H12.526ZM12.991 3H7.41102C6.98137 3 6.56931 3.17068 6.2655 3.47449C5.96169 3.7783 5.79102 4.19035 5.79102 4.62V19.38C5.79102 19.8097 5.96169 20.2217 6.2655 20.5255C6.56931 20.8293 6.98137 21 7.41102 21H16.591C17.0207 21 17.4327 20.8293 17.7365 20.5255C18.0403 20.2217 18.211 19.8097 18.211 19.38V8.22L12.991 3Z" fill="#737373"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.668 8.9175V3H11.543V9.48C11.543 9.79066 11.7948 10.0425 12.1055 10.0425H17.5955V8.9175H12.668Z" fill="#737373"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5407 15.7352C12.5437 15.6183 12.5115 15.5032 12.4484 15.4047C12.3853 15.3062 12.2941 15.2289 12.1866 15.1828C12.0791 15.1367 11.9603 15.1238 11.8454 15.1459C11.7306 15.168 11.625 15.224 11.5423 15.3067C11.4596 15.3895 11.4035 15.4951 11.3814 15.6099C11.3594 15.7248 11.3722 15.8436 11.4183 15.9511C11.4644 16.0586 11.5417 16.1498 11.6402 16.2129C11.7387 16.276 11.8538 16.3082 11.9707 16.3052C12.1196 16.2979 12.2603 16.2356 12.3657 16.1302C12.4711 16.0248 12.5335 15.884 12.5407 15.7352ZM15.2107 15.1502L14.4007 15.0002C14.3545 14.8261 14.2838 14.6595 14.1907 14.5052L14.6707 13.8002C14.6951 13.7707 14.7084 13.7335 14.7084 13.6952C14.7084 13.6569 14.6951 13.6198 14.6707 13.5902L14.1007 13.0202C14.0712 12.9958 14.034 12.9825 13.9957 12.9825C13.9574 12.9825 13.9203 12.9958 13.8907 13.0202L13.1707 13.5002C13.0144 13.4113 12.8483 13.3408 12.6757 13.2902L12.5257 12.4802C12.5133 12.4419 12.4894 12.4083 12.4572 12.3841C12.4249 12.36 12.386 12.3464 12.3457 12.3452H11.5357C11.4974 12.3472 11.4608 12.3614 11.4311 12.3857C11.4014 12.4099 11.3803 12.4431 11.3707 12.4802L11.2207 13.3202C11.0534 13.3585 10.892 13.419 10.7407 13.5002L10.0507 13.0352C10.0227 13.0077 9.98499 12.9923 9.94573 12.9923C9.90646 12.9923 9.86877 13.0077 9.84073 13.0352L9.27073 13.6052C9.24634 13.6348 9.23301 13.6719 9.23301 13.7102C9.23301 13.7485 9.24634 13.7857 9.27073 13.8152L9.73573 14.4902C9.65567 14.6489 9.5904 14.8146 9.54073 14.9852L8.73073 15.1352C8.69234 15.1423 8.65772 15.1628 8.633 15.193C8.60828 15.2232 8.59508 15.2612 8.59573 15.3002V16.1402C8.59554 16.1775 8.60927 16.2136 8.63423 16.2413C8.65919 16.269 8.6936 16.2865 8.73073 16.2902L9.54073 16.4552C9.58203 16.6263 9.65311 16.7888 9.75073 16.9352L9.28573 17.6102C9.25824 17.6383 9.24285 17.676 9.24285 17.7152C9.24285 17.7545 9.25824 17.7922 9.28573 17.8202L9.85573 18.4052C9.88528 18.4296 9.92241 18.4429 9.96073 18.4429C9.99904 18.4429 10.0362 18.4296 10.0657 18.4052L10.7407 18.0002C10.8913 18.0828 11.053 18.1434 11.2207 18.1802L11.3707 19.0202C11.3778 19.0586 11.3983 19.0932 11.4285 19.1179C11.4587 19.1427 11.4967 19.1559 11.5357 19.1552H12.3607C12.4016 19.1565 12.4417 19.1438 12.4744 19.1193C12.5071 19.0948 12.5305 19.0598 12.5407 19.0202L12.6907 18.2102L13.1707 18.0002L13.8457 18.4502C13.8753 18.4746 13.9124 18.4879 13.9507 18.4879C13.989 18.4879 14.0262 18.4746 14.0557 18.4502L14.6257 17.8652C14.6532 17.8372 14.6686 17.7995 14.6686 17.7602C14.6686 17.721 14.6532 17.6833 14.6257 17.6552L14.1607 16.9502C14.2658 16.815 14.347 16.6628 14.4007 16.5002L15.2107 16.3352C15.2479 16.3315 15.2823 16.314 15.3072 16.2863C15.3322 16.2586 15.3459 16.2225 15.3457 16.1852V15.3452C15.3464 15.3062 15.3332 15.2682 15.3085 15.238C15.2837 15.2078 15.2491 15.1873 15.2107 15.1802V15.1502ZM12.0007 17.1452C11.7176 17.1482 11.4401 17.0668 11.2034 16.9113C10.9668 16.7559 10.7819 16.5335 10.6721 16.2725C10.5624 16.0115 10.533 15.7238 10.5875 15.4459C10.642 15.1681 10.778 14.9129 10.9782 14.7127C11.1784 14.5125 11.4336 14.3765 11.7115 14.322C11.9893 14.2674 12.277 14.2969 12.538 14.4066C12.799 14.5163 13.0214 14.7013 13.1768 14.9379C13.3323 15.1746 13.4137 15.4521 13.4107 15.7352C13.4068 16.108 13.257 16.4643 12.9934 16.7279C12.7298 16.9915 12.3735 17.1413 12.0007 17.1452Z" fill="#737373"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/fts_dictionary.svg b/static/img/style_guide/iconography_assets/tree_view_icons/fts_dictionary.svg
new file mode 100644
index 0000000..d8ac794
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/fts_dictionary.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1401 17.73L10.8901 20.73C10.4206 20.8993 9.9031 20.8761 9.45065 20.6653C8.9982 20.4546 8.64749 20.0734 8.47508 19.605C8.3057 19.1354 8.32894 18.618 8.53971 18.1655C8.75047 17.7131 9.13166 17.3624 9.60008 17.19L17.8501 14.19L18.6001 13.92L17.4751 10.8L17.2651 10.23L14.8951 3.70496C14.8173 3.49227 14.6583 3.31911 14.4531 3.2235C14.2478 3.12788 14.0129 3.11762 13.8001 3.19496L4.57508 6.55496C4.36238 6.63272 4.18923 6.79169 4.09361 6.99698C3.998 7.20227 3.98774 7.43711 4.06508 7.64996L6.43508 14.13L6.66008 14.73L8.16008 18.72L8.49008 19.605C8.66249 20.0734 9.0132 20.4546 9.46565 20.6653C9.9181 20.8761 10.4356 20.8993 10.9051 20.73L20.0401 17.4" fill="#DEF4FD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6077 2.66628C13.9606 2.53806 14.35 2.55507 14.6903 2.71359C15.0307 2.87211 15.2942 3.15918 15.4231 3.5118L17.7927 10.0355L17.7935 10.0379L18.004 10.6092L19.129 13.7292C19.1796 13.8695 19.1724 14.0243 19.1089 14.1593C19.0454 14.2944 18.9308 14.3987 18.7904 14.4492L18.0421 14.7186L18.0404 14.7192L9.79414 17.7178C9.79385 17.7179 9.79444 17.7177 9.79414 17.7178C9.46554 17.8391 9.19727 18.0856 9.04936 18.4031C8.9268 18.6662 8.89452 18.9606 8.95455 19.2412L9.01772 19.4107C9.13882 19.7397 9.38515 20.0074 9.70294 20.1554C9.87787 20.2369 10.0666 20.2785 10.256 20.2796C10.4054 20.2787 10.555 20.2527 10.6982 20.2011C10.6985 20.201 10.6979 20.2012 10.6982 20.2011L19.8472 16.8715C20.1391 16.7651 20.4619 16.9154 20.5683 17.2073C20.6747 17.4992 20.5244 17.822 20.2325 17.9284L19.3745 18.2412C19.3607 18.2475 19.3466 18.2533 19.3321 18.2586L11.0975 21.2584L11.0957 21.2591C10.8239 21.3571 10.5396 21.4055 10.256 21.4046C9.89902 21.4057 9.54265 21.3288 9.21289 21.1752C8.62578 20.9017 8.17069 20.4071 7.94696 19.7993L7.96015 19.7944L7.9589 19.7911L7.94571 19.7958C7.91873 19.721 7.89551 19.6453 7.87605 19.5689L7.63332 18.9179L7.63279 18.9165L5.90655 14.3232L3.53656 7.84317C3.40834 7.49029 3.42495 7.09984 3.58347 6.75949C3.74199 6.41915 4.02906 6.15559 4.38168 6.02666L13.6077 2.66628ZM8.29635 17.4846C8.57753 17.1127 8.9613 16.8256 9.40554 16.6621L9.40761 16.6613L17.6576 13.6613L17.6593 13.6607L17.8798 13.5813L16.947 10.9944L16.9457 10.9908L16.737 10.4244L16.7361 10.422L14.3665 3.89811C14.3665 3.89796 14.3666 3.89826 14.3665 3.89811C14.3399 3.82556 14.2854 3.76605 14.2153 3.7334C14.1452 3.70072 14.0649 3.69719 13.9921 3.72357C13.9921 3.72359 13.9922 3.72355 13.9921 3.72357L4.76799 7.08326C4.76793 7.08328 4.76806 7.08323 4.76799 7.08326C4.69532 7.10988 4.63597 7.1643 4.60328 7.23448C4.57064 7.30457 4.56708 7.38474 4.59337 7.45745C4.59342 7.45759 4.59332 7.45732 4.59337 7.45745L6.96233 13.9346L8.29635 17.4846Z" fill="#1A79AA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7437 15.4979C19.8498 15.7899 19.6991 16.1126 19.4072 16.2188L10.7822 19.3538C10.4902 19.4599 10.1675 19.3092 10.0613 19.0173C9.95521 18.7253 10.1059 18.4026 10.3978 18.2964L19.0228 15.1614C19.3148 15.0553 19.6375 15.206 19.7437 15.4979Z" fill="#1A79AA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.49691 6.05248C5.69154 5.98168 5.90671 6.08206 5.97751 6.27669L9.86251 16.9567C9.93331 17.1513 9.83293 17.3665 9.6383 17.4373C9.44367 17.5081 9.22849 17.4077 9.15769 17.2131L5.27269 6.53308C5.20189 6.33845 5.30228 6.12328 5.49691 6.05248Z" fill="#2980B9"/>
+<path d="M12.1705 9.29851C12.1189 9.36498 12.0634 9.42447 12.004 9.47697C11.9461 9.5261 11.8617 9.58345 11.7509 9.64904L11.5293 9.78021C11.3207 9.90102 11.1785 10.0075 11.1026 10.0997C10.9743 10.2558 10.9471 10.4355 11.021 10.6386C11.0868 10.8195 11.1842 10.9328 11.3131 10.9785C11.4435 11.0208 11.5806 11.0158 11.7243 10.9635C11.9522 10.8805 12.1373 10.7374 12.2793 10.5342C12.4239 10.3301 12.4354 10.0495 12.3139 9.69246L12.1705 9.29851ZM11.3476 9.03823C11.5344 8.94221 11.6631 8.86028 11.7338 8.79246C11.8615 8.67303 11.9005 8.54517 11.8509 8.4089C11.7905 8.24289 11.6908 8.15011 11.5518 8.13055C11.4144 8.10762 11.2342 8.13673 11.0112 8.21789C10.7609 8.30898 10.6063 8.4354 10.5473 8.59716C10.5064 8.71589 10.5019 8.85781 10.534 9.02292L9.5119 9.39492C9.40524 9.03249 9.39839 8.70529 9.49134 8.41331C9.64146 7.95462 10.0572 7.60127 10.7386 7.35328C11.1821 7.19185 11.608 7.13642 12.0165 7.18699C12.4249 7.23755 12.718 7.50689 12.8956 7.995L13.572 9.85327C13.6189 9.98212 13.6782 10.1373 13.7498 10.3189C13.8078 10.4549 13.8631 10.5414 13.9158 10.5783C13.9686 10.6152 14.0355 10.6372 14.1166 10.6442L14.1734 10.8002L13.0212 11.2196C12.9593 11.1495 12.909 11.0809 12.8705 11.0135C12.8319 10.9462 12.7923 10.868 12.7515 10.779C12.663 10.9908 12.5437 11.1872 12.3935 11.3681C12.2133 11.5824 11.9795 11.7418 11.6921 11.8465C11.3254 11.9799 10.984 11.9863 10.6679 11.8657C10.3534 11.7416 10.1263 11.4876 9.98648 11.1036C9.80522 10.6055 9.86603 10.1752 10.1689 9.81238C10.3353 9.61432 10.6135 9.41487 11.0034 9.21404L11.3476 9.03823Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/fts_parser.svg b/static/img/style_guide/iconography_assets/tree_view_icons/fts_parser.svg
new file mode 100644
index 0000000..a309976
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/fts_parser.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.76025 10.8904H8.49951L7.15186 6.64233L5.76025 10.8904ZM5.89941 4.17407H8.44824L12.2715 14.97H9.8252L9.1294 12.7507H5.15234L4.40527 14.97H2.04688L5.89941 4.17407Z" fill="#609404"/>
+<path d="M17.8818 11.0881C17.75 11.1711 17.6157 11.2395 17.479 11.2932C17.3472 11.342 17.1641 11.3884 16.9297 11.4324L16.4609 11.5203C16.0215 11.5984 15.7065 11.6936 15.5161 11.8059C15.1938 11.9963 15.0327 12.2917 15.0327 12.6921C15.0327 13.0486 15.1304 13.3074 15.3257 13.4685C15.5259 13.6248 15.7676 13.7029 16.0508 13.7029C16.5 13.7029 16.9126 13.571 17.2886 13.3074C17.6694 13.0437 17.8672 12.5627 17.8818 11.8645V11.0881ZM16.6147 10.114C17.0005 10.0652 17.2764 10.0042 17.4424 9.93091C17.7402 9.80396 17.8892 9.6062 17.8892 9.33765C17.8892 9.0105 17.7744 8.78589 17.5449 8.66382C17.3203 8.53687 16.9883 8.47339 16.5488 8.47339C16.0557 8.47339 15.7065 8.59546 15.5015 8.8396C15.355 9.02026 15.2573 9.2644 15.2085 9.57202H13.1943C13.2383 8.87378 13.4336 8.30005 13.7803 7.85083C14.332 7.14771 15.2793 6.79614 16.6221 6.79614C17.4961 6.79614 18.2725 6.96948 18.9512 7.31616C19.6299 7.66284 19.9692 8.31714 19.9692 9.27905V12.9412C19.9692 13.1951 19.9741 13.5027 19.9839 13.864C19.9985 14.1375 20.04 14.323 20.1084 14.4207C20.1768 14.5183 20.2793 14.5989 20.416 14.6624V14.97H18.1455C18.082 14.8088 18.0381 14.6575 18.0137 14.5159C17.9893 14.3743 17.9697 14.2131 17.9551 14.0325C17.667 14.345 17.335 14.6111 16.959 14.8308C16.5098 15.0896 16.002 15.219 15.4355 15.219C14.7129 15.219 14.1147 15.0139 13.6411 14.6038C13.1724 14.1887 12.938 13.6028 12.938 12.8459C12.938 11.8645 13.3164 11.1541 14.0732 10.7146C14.4883 10.4753 15.0986 10.3044 15.9043 10.2019L16.6147 10.114Z" fill="#609404"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/fts_template.svg b/static/img/style_guide/iconography_assets/tree_view_icons/fts_template.svg
new file mode 100644
index 0000000..3bfc84b
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/fts_template.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 4.5H6C5.17157 4.5 4.5 5.17157 4.5 6V18C4.5 18.8284 5.17157 19.5 6 19.5H18C18.8284 19.5 19.5 18.8284 19.5 18V6C19.5 5.17157 18.8284 4.5 18 4.5Z" fill="#FFFFD6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 5.0625C5.48223 5.0625 5.0625 5.48223 5.0625 6V18C5.0625 18.5178 5.48223 18.9375 6 18.9375H18C18.5178 18.9375 18.9375 18.5178 18.9375 18V6C18.9375 5.48223 18.5178 5.0625 18 5.0625H6ZM3.9375 6C3.9375 4.86091 4.86091 3.9375 6 3.9375H18C19.1391 3.9375 20.0625 4.86091 20.0625 6V18C20.0625 19.1391 19.1391 20.0625 18 20.0625H6C4.86091 20.0625 3.9375 19.1391 3.9375 18V6Z" fill="#CEBD39"/>
+<path d="M11.3242 14.7002C13.1882 14.7002 14.6992 13.1892 14.6992 11.3252C14.6992 9.46123 13.1882 7.9502 11.3242 7.9502C9.46026 7.9502 7.94922 9.46123 7.94922 11.3252C7.94922 13.1892 9.46026 14.7002 11.3242 14.7002Z" fill="#FFFFD6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3242 8.5127C9.77092 8.5127 8.51172 9.77189 8.51172 11.3252C8.51172 12.8785 9.77092 14.1377 11.3242 14.1377C12.8775 14.1377 14.1367 12.8785 14.1367 11.3252C14.1367 9.77189 12.8775 8.5127 11.3242 8.5127ZM7.38672 11.3252C7.38672 9.15057 9.1496 7.3877 11.3242 7.3877C13.4988 7.3877 15.2617 9.15057 15.2617 11.3252C15.2617 13.4998 13.4988 15.2627 11.3242 15.2627C9.1496 15.2627 7.38672 13.4998 7.38672 11.3252Z" fill="#CEBD39"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.448 13.4472C13.6676 13.2276 14.0238 13.2276 14.2435 13.4472L17.1235 16.3272C17.3431 16.5469 17.3431 16.903 17.1235 17.1227C16.9038 17.3424 16.5476 17.3424 16.328 17.1227L13.448 14.2427C13.2283 14.023 13.2283 13.6669 13.448 13.4472Z" fill="#CEBD39"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/function.svg b/static/img/style_guide/iconography_assets/tree_view_icons/function.svg
new file mode 100644
index 0000000..48ed770
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/function.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.4849 20.1151L18.3899 19.1101L18.9149 16.8601V15.8101L19.1999 13.5601L19.8599 12.7201L21.5549 11.8801H19.8599L21.0299 11.6701L19.2749 10.3651L19.1699 9.48008V7.86008L18.9149 5.64008L18.2099 4.81508L17.0849 4.32008L16.4849 4.26008L7.39492 4.08008L6.08992 4.99508L5.27992 5.65508V6.57008L5.41492 6.31508L5.12992 9.34508L5.27992 10.3951L2.99992 11.8801L2.66992 12.1651L2.99992 11.8801L4.46992 12.9451L4.67992 13.5601L5.54992 15.8401L5.50492 16.8301L5.47492 17.5201L5.50492 16.3201V16.9051L5.83492 18.3451L6.35992 19.0651L7.30492 19.6351L8.05492 20.1151H16.4849Z" fill="#EDFFFD"/>
+<path d="M15.8555 19.8002C16.4511 19.8002 17.0378 19.6561 17.5655 19.3802C17.9374 19.1669 18.2436 18.8556 18.4505 18.4802C18.6392 18.1168 18.7515 17.7186 18.7805 17.3102C18.7805 16.8902 18.7805 16.4852 18.7805 16.0952V16.3952C18.7805 15.8252 18.7805 15.3452 18.7805 14.8952C18.7886 14.5586 18.8187 14.2229 18.8705 13.8902C18.9037 13.6506 18.9746 13.4177 19.0805 13.2002C19.1974 13.0345 19.3391 12.8878 19.5005 12.7652C19.6496 12.6098 19.8216 12.4783 20.0105 12.3752C20.1836 12.2844 20.3643 12.2091 20.5505 12.1502C20.6964 12.0884 20.8468 12.0382 21.0005 12.0002C21.1505 12.0002 21.1505 11.9252 21.0005 11.8952C20.8329 11.8742 20.6673 11.8391 20.5055 11.7902C20.3186 11.733 20.1378 11.6576 19.9655 11.5652C19.7963 11.4768 19.6398 11.3658 19.5005 11.2352C19.356 11.0895 19.2346 10.9226 19.1405 10.7402C19.0349 10.5226 18.964 10.2898 18.9305 10.0502C18.8768 9.70264 18.8467 9.35183 18.8405 9.0002C18.8405 8.6102 18.8405 8.1102 18.8405 7.5002V7.8002C18.8405 7.4102 18.8405 7.0052 18.8405 6.5852C18.8115 6.17676 18.6992 5.77859 18.5105 5.4152C18.3029 5.04025 17.9969 4.72908 17.6255 4.5152C17.0974 4.24037 16.5109 4.09633 15.9155 4.0952V3.8252H16.3655C16.5527 3.83998 16.7383 3.87008 16.9205 3.9152C17.1251 3.96528 17.3256 4.03045 17.5205 4.1102C17.6966 4.21909 17.8579 4.35016 18.0005 4.5002C18.2749 4.70546 18.5088 4.95974 18.6905 5.2502C18.8571 5.52407 18.9786 5.82286 19.0505 6.1352C19.1293 6.49017 19.1745 6.85176 19.1855 7.2152C19.1855 7.6052 19.1855 8.7152 19.1855 8.7152C19.181 9.13259 19.2162 9.54946 19.2905 9.9602C19.3454 10.2829 19.4794 10.587 19.6805 10.8452C19.9032 11.1124 20.1859 11.3231 20.5055 11.4602C20.5894 11.511 20.6587 11.5825 20.7068 11.6679C20.7549 11.7533 20.7802 11.8497 20.7802 11.9477C20.7802 12.0457 20.7549 12.1421 20.7068 12.2275C20.6587 12.3129 20.5894 12.3844 20.5055 12.4352C20.1877 12.5684 19.9052 12.7739 19.6805 13.0352C19.4799 13.2937 19.346 13.5977 19.2905 13.9202C19.2162 14.3309 19.181 14.7478 19.1855 15.1652C19.1855 15.1652 19.1105 17.4752 19.0355 17.8052C18.9636 18.1175 18.8421 18.4163 18.6755 18.6902C18.5047 19.0011 18.2755 19.2761 18.0005 19.5002C17.8228 19.6422 17.6258 19.7583 17.4155 19.8452C17.2204 19.9242 17.0199 19.9893 16.8155 20.0402C16.6332 20.0846 16.4476 20.1146 16.2605 20.1302H15.8105L15.8555 19.8002Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M8.4907 4.19987C7.89516 4.19983 7.30846 4.34393 6.7807 4.61987C6.40883 4.83314 6.10269 5.14447 5.8957 5.51987C5.70701 5.88327 5.59471 6.28144 5.5657 6.68987C5.5657 7.10987 5.5657 7.51487 5.5657 7.90487V7.60487C5.5657 8.17487 5.5657 8.65487 5.5657 9.10487C5.55764 9.44148 5.52757 9.77719 5.4757 10.1099C5.44251 10.3495 5.37163 10.5824 5.2657 10.7999C5.17209 10.9825 5.05063 11.1495 4.9057 11.2949C4.7567 11.4502 4.58469 11.5818 4.3957 11.6849C4.22269 11.7756 4.04198 11.8509 3.8557 11.9099C3.66415 11.9591 3.46819 11.9892 3.2707 11.9999C3.1207 11.9999 3.1207 12.0749 3.2707 12.1049C3.43837 12.1259 3.60395 12.161 3.7657 12.2099C3.9526 12.2671 4.13346 12.3425 4.3057 12.4349C4.49469 12.538 4.6667 12.6695 4.8157 12.8249C4.96027 12.9705 5.08168 13.1375 5.1757 13.3199C5.2814 13.5375 5.35226 13.7703 5.3857 14.0099C5.43749 14.3426 5.46755 14.6783 5.4757 15.0149C5.4757 15.4049 5.4757 15.9049 5.4757 16.5149V16.2149C5.4757 16.6049 5.4757 17.0099 5.4757 17.4299C5.50471 17.8383 5.61701 18.2365 5.8057 18.5999C6.01331 18.9748 6.3193 19.286 6.6907 19.4999C7.21888 19.7747 7.80531 19.9187 8.4007 19.9199V20.2799H7.9507C7.79496 20.2111 7.64455 20.1309 7.5007 20.0399C7.29616 19.9898 7.09561 19.9246 6.9007 19.8449C6.68518 19.7593 6.4831 19.6431 6.3007 19.4999C6.02638 19.2946 5.79243 19.0403 5.6107 18.7499C5.4442 18.476 5.32266 18.1772 5.2507 17.8649C5.17198 17.5099 5.12678 17.1483 5.1157 16.7849C5.1157 16.3949 5.1157 15.2849 5.1157 15.2849C5.12024 14.8675 5.08508 14.4506 5.0107 14.0399C4.95585 13.7172 4.82186 13.4131 4.6207 13.1549C4.39805 12.8877 4.11536 12.6769 3.7957 12.5399C3.71188 12.4891 3.64256 12.4175 3.59445 12.3321C3.54635 12.2467 3.52107 12.1504 3.52107 12.0524C3.52107 11.9544 3.54635 11.858 3.59445 11.7726C3.64256 11.6872 3.71188 11.6157 3.7957 11.5649C4.11355 11.4316 4.396 11.2262 4.6207 10.9649C4.82132 10.7063 4.95526 10.4024 5.0107 10.0799C5.08508 9.66914 5.12024 9.25226 5.1157 8.83487C5.1157 8.83487 5.1907 6.52487 5.2657 6.19487C5.33766 5.88254 5.4592 5.58375 5.6257 5.30987C5.79656 4.999 6.02574 4.72399 6.3007 4.49987C6.47848 4.35789 6.67543 4.24174 6.8857 4.15487C7.08577 4.07524 7.2913 4.01008 7.5007 3.95987C7.68309 3.91551 7.86865 3.88542 8.0557 3.86987H8.5057L8.4907 4.19987Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.91797 8.11548C8.91797 7.80482 9.16981 7.55298 9.48047 7.55298H15.1055C15.4161 7.55298 15.668 7.80482 15.668 8.11548C15.668 8.42614 15.4161 8.67798 15.1055 8.67798H9.48047C9.16981 8.67798 8.91797 8.42614 8.91797 8.11548Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.91797 11.8655C8.91797 11.5548 9.16981 11.303 9.48047 11.303H15.1055C15.4161 11.303 15.668 11.5548 15.668 11.8655C15.668 12.1761 15.4161 12.428 15.1055 12.428H9.48047C9.16981 12.428 8.91797 12.1761 8.91797 11.8655Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.91797 15.6155C8.91797 15.3048 9.16981 15.053 9.48047 15.053H13.2305C13.5411 15.053 13.793 15.3048 13.793 15.6155C13.793 15.9261 13.5411 16.178 13.2305 16.178H9.48047C9.16981 16.178 8.91797 15.9261 8.91797 15.6155Z" fill="#2F91A3"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/group.svg b/static/img/style_guide/iconography_assets/tree_view_icons/group.svg
new file mode 100644
index 0000000..578a81b
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/group.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.2168 12.6901C7.25988 11.4606 7.78687 10.298 8.68304 9.45517C9.57921 8.61238 10.772 8.1577 12.0018 8.1901C13.2316 8.1577 14.4244 8.61238 15.3206 9.45517C16.2167 10.298 16.7437 11.4606 16.7868 12.6901H7.2168Z" fill="#FFEEEE"/>
+<path d="M12.0003 8.74497C12.9868 8.72103 13.9496 9.04897 14.7164 9.6701C15.4832 10.2912 16.0039 11.165 16.1853 12.135H7.81532C7.99672 11.165 8.51741 10.2912 9.2842 9.6701C10.051 9.04897 11.0138 8.72103 12.0003 8.74497ZM12.0003 7.61997C10.6183 7.58366 9.2783 8.09708 8.27437 9.04758C7.27044 9.99808 6.68457 11.308 6.64532 12.69C6.63385 12.8798 6.63385 13.0701 6.64532 13.26H17.2353C17.2468 13.0701 17.2468 12.8798 17.2353 12.69C17.1962 11.3291 16.627 10.0374 15.649 9.09022C14.671 8.14308 13.3617 7.61549 12.0003 7.61997Z" fill="#BD4949"/>
+<path d="M12 9.31494C13.2426 9.31494 14.25 8.30758 14.25 7.06494C14.25 5.8223 13.2426 4.81494 12 4.81494C10.7574 4.81494 9.75 5.8223 9.75 7.06494C9.75 8.30758 10.7574 9.31494 12 9.31494Z" fill="#FFEEEE"/>
+<path d="M11.9997 5.37012C12.3349 5.37012 12.6626 5.46953 12.9414 5.65578C13.2201 5.84203 13.4374 6.10675 13.5657 6.41647C13.694 6.72619 13.7275 7.067 13.6621 7.3958C13.5967 7.72459 13.4353 8.02661 13.1982 8.26366C12.9612 8.50071 12.6592 8.66215 12.3304 8.72755C12.0016 8.79295 11.6608 8.75938 11.351 8.63109C11.0413 8.5028 10.7766 8.28555 10.5903 8.00681C10.4041 7.72807 10.3047 7.40036 10.3047 7.06512C10.3047 6.61558 10.4833 6.18445 10.8011 5.86657C11.119 5.5487 11.5501 5.37012 11.9997 5.37012ZM11.9997 4.24512C11.4419 4.24512 10.8967 4.41051 10.433 4.72037C9.96923 5.03024 9.60779 5.47066 9.39435 5.98595C9.18091 6.50124 9.12506 7.06825 9.23387 7.61527C9.34268 8.1623 9.61126 8.66477 10.0056 9.05916C10.4 9.45354 10.9025 9.72212 11.4495 9.83093C11.9966 9.93974 12.5636 9.8839 13.0789 9.67046C13.5941 9.45702 14.0346 9.09557 14.3444 8.63183C14.6543 8.16808 14.8197 7.62286 14.8197 7.06512C14.8197 6.31721 14.5226 5.59993 13.9937 5.07108C13.4649 4.54222 12.7476 4.24512 11.9997 4.24512Z" fill="#BD4949"/>
+<path d="M12.4512 19.1852C12.4943 17.9558 13.0212 16.7931 13.9174 15.9503C14.8136 15.1075 16.0064 14.6528 17.2362 14.6852C18.466 14.6528 19.6588 15.1075 20.5549 15.9503C21.4511 16.7931 21.9781 17.9558 22.0212 19.1852H12.4512Z" fill="#C7FA65"/>
+<path d="M17.2353 15.2398C18.2218 15.2159 19.1846 15.5438 19.9514 16.165C20.7182 16.7861 21.2389 17.6599 21.4203 18.6298H13.0653C13.2467 17.6599 13.7674 16.7861 14.5342 16.165C15.301 15.5438 16.2638 15.2159 17.2503 15.2398H17.2353ZM17.2503 14.1148C15.8683 14.0785 14.5283 14.592 13.5244 15.5425C12.5204 16.493 11.9346 17.8029 11.8953 19.1848C11.8839 19.3747 11.8839 19.565 11.8953 19.7548H22.5003C22.5117 19.565 22.5117 19.3747 22.5003 19.1848C22.4611 17.8029 21.8752 16.493 20.8713 15.5425C19.8673 14.592 18.5274 14.0785 17.1453 14.1148H17.2503Z" fill="#1A6016"/>
+<path d="M17.2363 15.8098C18.479 15.8098 19.4863 14.8025 19.4863 13.5598C19.4863 12.3172 18.479 11.3098 17.2363 11.3098C15.9937 11.3098 14.9863 12.3172 14.9863 13.5598C14.9863 14.8025 15.9937 15.8098 17.2363 15.8098Z" fill="#C7FA65"/>
+<path d="M17.236 11.8652C17.5744 11.8624 17.9059 11.961 18.1877 12.1482C18.4696 12.3354 18.689 12.6027 18.8177 12.9157C18.9463 13.2287 18.9784 13.573 18.9096 13.9043C18.8409 14.2357 18.6746 14.5389 18.4321 14.7749C18.1896 15.0109 17.882 15.1689 17.549 15.2286C17.2159 15.2883 16.8725 15.2469 16.5632 15.1098C16.2538 14.9727 15.9926 14.7461 15.8131 14.4593C15.6336 14.1724 15.544 13.8384 15.556 13.5002C15.556 13.0507 15.7346 12.6195 16.0525 12.3017C16.3703 11.9838 16.8015 11.8052 17.251 11.8052L17.236 11.8652ZM17.251 10.6802C16.6926 10.6772 16.146 10.8401 15.6802 11.1482C15.2145 11.4562 14.8507 11.8956 14.635 12.4106C14.4193 12.9256 14.3613 13.4931 14.4684 14.0411C14.5755 14.5891 14.8429 15.093 15.2367 15.4889C15.6304 15.8848 16.1329 16.1549 16.6803 16.2649C17.2278 16.3749 17.7955 16.32 18.3117 16.107C18.8279 15.894 19.2692 15.5325 19.5797 15.0685C19.8902 14.6044 20.056 14.0586 20.056 13.5002C20.056 12.7523 19.7589 12.035 19.2301 11.5062C18.7012 10.9773 17.9839 10.6802 17.236 10.6802H17.251Z" fill="#1A6016"/>
+<path d="M1.9668 19.1852C2.00988 17.9558 2.53687 16.7931 3.43304 15.9503C4.32921 15.1075 5.52201 14.6528 6.7518 14.6852C7.98158 14.6528 9.17438 15.1075 10.0706 15.9503C10.9667 16.7931 11.4937 17.9558 11.5368 19.1852H1.9668Z" fill="#BFE1F1"/>
+<path d="M6.76586 15.2398C7.75237 15.2159 8.71519 15.5438 9.48198 16.165C10.2488 16.7861 10.7695 17.6599 10.9509 18.6298H2.58087C2.76226 17.6599 3.28296 16.7861 4.04975 16.165C4.81654 15.5438 5.77936 15.2159 6.76586 15.2398ZM6.76586 14.1148C5.38383 14.0785 4.04384 14.592 3.03991 15.5425C2.03598 16.493 1.45012 17.8029 1.41087 19.1848C1.3995 19.3747 1.3995 19.565 1.41087 19.7548H12.0009C12.0123 19.565 12.0123 19.3747 12.0009 19.1848C11.9617 17.824 11.3925 16.5322 10.4145 15.5851C9.43659 14.638 8.12729 14.1104 6.76586 14.1148Z" fill="#2C66BD"/>
+<path d="M6.76563 15.8098C8.00827 15.8098 9.01562 14.8025 9.01562 13.5598C9.01562 12.3172 8.00827 11.3098 6.76563 11.3098C5.52298 11.3098 4.51562 12.3172 4.51562 13.5598C4.51562 14.8025 5.52298 15.8098 6.76563 15.8098Z" fill="#BFE1F1"/>
+<path d="M6.766 11.8653C7.10375 11.8655 7.43374 11.9666 7.71363 12.1556C7.99352 12.3447 8.21056 12.613 8.3369 12.9262C8.46323 13.2395 8.49311 13.5833 8.4227 13.9136C8.35228 14.244 8.18479 14.5457 7.9417 14.7802C7.69861 15.0147 7.39101 15.1712 7.05836 15.2297C6.72571 15.2882 6.38318 15.2459 6.0747 15.1084C5.76622 14.9708 5.50587 14.7443 5.32704 14.4577C5.14821 14.1712 5.05905 13.8378 5.071 13.5003C5.08656 13.0612 5.27198 12.6453 5.58818 12.3403C5.90439 12.0353 6.32667 11.865 6.766 11.8653ZM6.766 10.7403C6.2051 10.7374 5.65609 10.9019 5.18915 11.2127C4.72221 11.5235 4.35856 11.9664 4.14469 12.485C3.93081 13.0035 3.87643 13.574 3.98849 14.1236C4.10056 14.6732 4.37397 15.1769 4.77379 15.5703C5.17361 15.9637 5.68166 16.229 6.233 16.3321C6.78434 16.4353 7.35392 16.3717 7.86893 16.1495C8.38393 15.9272 8.82097 15.5565 9.12416 15.0846C9.42735 14.6127 9.58293 14.0611 9.571 13.5003C9.55537 12.7654 9.25343 12.0657 8.72949 11.5501C8.20556 11.0346 7.50104 10.744 6.766 10.7403Z" fill="#2C66BD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/index.svg b/static/img/style_guide/iconography_assets/tree_view_icons/index.svg
new file mode 100644
index 0000000..e725d2e
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/index.svg
@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.71469 5.05518H15.2997C15.4747 5.05518 15.6426 5.12471 15.7664 5.24849C15.8902 5.37226 15.9597 5.54013 15.9597 5.71518V8.23518C15.9597 8.41022 15.8902 8.57809 15.7664 8.70187C15.6426 8.82564 15.4747 8.89518 15.2997 8.89518H8.69969C8.52862 8.89518 8.36456 8.82722 8.2436 8.70626C8.12264 8.5853 8.05469 8.42124 8.05469 8.25018V5.71518C8.05469 5.54013 8.12422 5.37226 8.248 5.24849C8.37177 5.12471 8.53964 5.05518 8.71469 5.05518Z" fill="#DEF4FD"/>
+<path d="M15.3 5.625C15.3239 5.625 15.3468 5.63448 15.3636 5.65136C15.3805 5.66824 15.39 5.69113 15.39 5.715V8.235C15.39 8.25887 15.3805 8.28176 15.3636 8.29864C15.3468 8.31552 15.3239 8.325 15.3 8.325H8.7C8.67613 8.325 8.65324 8.31552 8.63636 8.29864C8.61948 8.28176 8.61 8.25887 8.61 8.235V5.715C8.61 5.69113 8.61948 5.66824 8.63636 5.65136C8.65324 5.63448 8.67613 5.625 8.7 5.625H15.3ZM15.3 4.5H8.7C8.38037 4.50395 8.07517 4.6337 7.85055 4.86113C7.62592 5.08856 7.49998 5.39534 7.5 5.715V8.235C7.5 8.39456 7.53143 8.55255 7.59249 8.69996C7.65355 8.84737 7.74304 8.98131 7.85587 9.09414C7.96869 9.20696 8.10263 9.29645 8.25004 9.35751C8.39745 9.41857 8.55544 9.45 8.715 9.45H15.3C15.6196 9.44605 15.9248 9.31631 16.1495 9.08888C16.3741 8.86144 16.5 8.55466 16.5 8.235V5.715C16.5 5.39534 16.3741 5.08856 16.1495 4.86113C15.9248 4.6337 15.6196 4.50395 15.3 4.5Z" fill="#357FD3"/>
+<path d="M19.7703 15.855H17.7303C17.3658 15.855 17.0703 16.1505 17.0703 16.515V18.285C17.0703 18.6495 17.3658 18.945 17.7303 18.945H19.7703C20.1348 18.945 20.4303 18.6495 20.4303 18.285V16.515C20.4303 16.1505 20.1348 15.855 19.7703 15.855Z" fill="#DEF4FD"/>
+<path d="M19.785 16.4099C19.8089 16.4099 19.8318 16.4194 19.8486 16.4363C19.8655 16.4532 19.875 16.476 19.875 16.4999V18.2849C19.875 18.3088 19.8655 18.3317 19.8486 18.3486C19.8318 18.3654 19.8089 18.3749 19.785 18.3749H17.715C17.6911 18.3749 17.6682 18.3654 17.6514 18.3486C17.6345 18.3317 17.625 18.3088 17.625 18.2849V16.4999C17.625 16.476 17.6345 16.4532 17.6514 16.4363C17.6682 16.4194 17.6911 16.4099 17.715 16.4099H19.77H19.785ZM19.77 15.2849H17.715C17.3928 15.2849 17.0837 15.4129 16.8559 15.6408C16.628 15.8686 16.5 16.1777 16.5 16.4999V18.2849C16.5 18.4445 16.5314 18.6025 16.5925 18.7499C16.6535 18.8973 16.743 19.0312 16.8559 19.144C16.9687 19.2569 17.1026 19.3464 17.25 19.4074C17.3975 19.4685 17.5554 19.4999 17.715 19.4999H19.77C19.9296 19.4999 20.0876 19.4685 20.235 19.4074C20.3824 19.3464 20.5163 19.2569 20.6291 19.144C20.742 19.0312 20.8315 18.8973 20.8925 18.7499C20.9536 18.6025 20.985 18.4445 20.985 18.2849V16.4999C20.985 16.1777 20.857 15.8686 20.6291 15.6408C20.4013 15.4129 20.0922 15.2849 19.77 15.2849Z" fill="#357FD3"/>
+<path d="M6.27031 15.855H4.23031C3.8658 15.855 3.57031 16.1505 3.57031 16.515V18.285C3.57031 18.6495 3.8658 18.945 4.23031 18.945H6.27031C6.63482 18.945 6.93031 18.6495 6.93031 18.285V16.515C6.93031 16.1505 6.63482 15.855 6.27031 15.855Z" fill="#DEF4FD"/>
+<path d="M6.285 16.4099C6.30887 16.4099 6.33176 16.4194 6.34864 16.4363C6.36552 16.4532 6.375 16.476 6.375 16.4999V18.2849C6.375 18.3088 6.36552 18.3317 6.34864 18.3486C6.33176 18.3654 6.30887 18.3749 6.285 18.3749H4.215C4.19113 18.3749 4.16824 18.3654 4.15136 18.3486C4.13448 18.3317 4.125 18.3088 4.125 18.2849V16.4999C4.125 16.476 4.13448 16.4532 4.15136 16.4363C4.16824 16.4194 4.19113 16.4099 4.215 16.4099H6.285ZM6.285 15.2849H4.215C3.89276 15.2849 3.58372 15.4129 3.35587 15.6408C3.12801 15.8686 3 16.1777 3 16.4999V18.2849C3 18.4445 3.03143 18.6025 3.09249 18.7499C3.15355 18.8973 3.24304 19.0312 3.35587 19.144C3.46869 19.2569 3.60263 19.3464 3.75004 19.4074C3.89745 19.4685 4.05544 19.4999 4.215 19.4999H6.285C6.44456 19.4999 6.60255 19.4685 6.74996 19.4074C6.89737 19.3464 7.03131 19.2569 7.14413 19.144C7.25696 19.0312 7.34645 18.8973 7.40751 18.7499C7.46857 18.6025 7.5 18.4445 7.5 18.2849V16.4999C7.5 16.1777 7.37199 15.8686 7.14413 15.6408C6.91628 15.4129 6.60724 15.2849 6.285 15.2849Z" fill="#357FD3"/>
+<path d="M13.0203 15.855H10.9803C10.6158 15.855 10.3203 16.1505 10.3203 16.515V18.285C10.3203 18.6495 10.6158 18.945 10.9803 18.945H13.0203C13.3848 18.945 13.6803 18.6495 13.6803 18.285V16.515C13.6803 16.1505 13.3848 15.855 13.0203 15.855Z" fill="#DEF4FD"/>
+<path d="M13.0356 16.4099C13.0595 16.4099 13.0824 16.4194 13.0993 16.4363C13.1161 16.4532 13.1256 16.476 13.1256 16.4999V18.2849C13.1256 18.3088 13.1161 18.3317 13.0993 18.3486C13.0824 18.3654 13.0595 18.3749 13.0356 18.3749H10.9806C10.9568 18.3749 10.9339 18.3654 10.917 18.3486C10.9001 18.3317 10.8906 18.3088 10.8906 18.2849V16.4999C10.8906 16.476 10.9001 16.4532 10.917 16.4363C10.9339 16.4194 10.9568 16.4099 10.9806 16.4099H13.0356ZM13.0356 15.2849H10.9806C10.6584 15.2849 10.3493 15.4129 10.1215 15.6408C9.89363 15.8686 9.76563 16.1777 9.76562 16.4999V18.2849C9.76563 18.4445 9.79705 18.6025 9.85811 18.7499C9.91917 18.8973 10.0087 19.0312 10.1215 19.144C10.2343 19.2569 10.3683 19.3464 10.5157 19.4074C10.6631 19.4685 10.8211 19.4999 10.9806 19.4999H13.0356C13.1952 19.4999 13.3532 19.4685 13.5006 19.4074C13.648 19.3464 13.7819 19.2569 13.8948 19.144C14.0076 19.0312 14.0971 18.8973 14.1581 18.7499C14.2192 18.6025 14.2506 18.4445 14.2506 18.2849V16.4999C14.2506 16.1777 14.1226 15.8686 13.8948 15.6408C13.6669 15.4129 13.3579 15.2849 13.0356 15.2849Z" fill="#357FD3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9707 8.8877C12.2814 8.8877 12.5332 9.13954 12.5332 9.4502V12.8102C12.5332 13.1209 12.2814 13.3727 11.9707 13.3727C11.66 13.3727 11.4082 13.1209 11.4082 12.8102V9.4502C11.4082 9.13954 11.66 8.8877 11.9707 8.8877Z" fill="#357FD3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9707 12.2478C12.2814 12.2478 12.5332 12.4996 12.5332 12.8103V15.2853C12.5332 15.596 12.2814 15.8478 11.9707 15.8478C11.66 15.8478 11.4082 15.596 11.4082 15.2853V12.8103C11.4082 12.4996 11.66 12.2478 11.9707 12.2478Z" fill="#357FD3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.6875 12.2549C4.6875 11.9442 4.93934 11.6924 5.25 11.6924H18.75C19.0607 11.6924 19.3125 11.9442 19.3125 12.2549V15.2849C19.3125 15.5955 19.0607 15.8474 18.75 15.8474C18.4393 15.8474 18.1875 15.5955 18.1875 15.2849V12.8174H5.8125V15.2849C5.8125 15.5955 5.56066 15.8474 5.25 15.8474C4.93934 15.8474 4.6875 15.5955 4.6875 15.2849V12.2549Z" fill="#357FD3"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/language.svg b/static/img/style_guide/iconography_assets/tree_view_icons/language.svg
new file mode 100644
index 0000000..4ac940a
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/language.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.6707 10.4998C20.6707 11.4298 19.8157 12.2848 18.4357 12.9148C17.8507 13.1848 18.5407 16.7998 17.7907 16.9948C17.0407 17.1898 14.7907 13.9948 13.9957 13.9948C13.3657 13.9948 12.7057 14.0848 12.0157 14.0848C7.2157 14.1598 3.3457 12.5398 3.3457 10.4998C3.3457 8.45982 7.2157 6.94482 12.0007 6.94482C16.7857 6.94482 20.6707 8.56482 20.6707 10.4998Z" fill="#FBFB6E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.4189 9.48544C4.05511 9.84203 3.9082 10.1829 3.9082 10.4998C3.9082 10.8184 4.05667 11.1671 4.42303 11.5333C4.79212 11.9022 5.35494 12.2582 6.09634 12.5659C7.57705 13.1805 9.66483 13.559 12.0069 13.5224L12.0157 13.5223V13.5223C12.3388 13.5223 12.658 13.5013 12.9899 13.4786L13.0201 13.4766C13.3365 13.455 13.6683 13.4323 13.9957 13.4323C14.2596 13.4323 14.4947 13.5549 14.6545 13.6548C14.8319 13.7658 15.0147 13.9131 15.1917 14.0701C15.5145 14.3562 15.8732 14.7242 16.2153 15.0752C16.2479 15.1087 16.2804 15.142 16.3127 15.1751C16.6949 15.5668 17.0501 15.9254 17.3517 16.175C17.4282 16.2382 17.4955 16.2897 17.5539 16.3304C17.5588 16.3024 17.5636 16.2717 17.5682 16.2379C17.6119 15.9131 17.6154 15.4743 17.6126 14.9862C17.6122 14.9283 17.6118 14.8696 17.6114 14.8104C17.6083 14.3937 17.6051 13.9543 17.6328 13.5956C17.6485 13.3916 17.6763 13.1786 17.7333 12.9938C17.7811 12.8388 17.8962 12.5443 18.2 12.4041L18.2021 12.4031C18.8501 12.1073 19.3407 11.7733 19.6619 11.4335C19.9809 11.0959 20.1082 10.7811 20.1082 10.4998C20.1082 10.2176 19.9685 9.89031 19.5981 9.53263C19.2269 9.17413 18.6606 8.82378 17.9157 8.51675C16.4288 7.90387 14.3371 7.50732 12.0007 7.50732C9.65939 7.50732 7.5713 7.87906 6.08989 8.47873C5.34804 8.77902 4.78648 9.12515 4.4189 9.48544ZM17.7573 16.4448C17.7574 16.4449 17.7558 16.4446 17.7524 16.4435C17.7556 16.4442 17.7573 16.4447 17.7573 16.4448ZM5.66777 7.43592C7.31761 6.76808 9.55701 6.38232 12.0007 6.38232C14.4493 6.38232 16.6926 6.79578 18.3444 7.47665C19.1689 7.81649 19.8729 8.23396 20.3797 8.72343C20.8873 9.21372 21.2332 9.81452 21.2332 10.4998C21.2332 11.1485 20.933 11.7263 20.4795 12.2062C20.0547 12.6558 19.4744 13.0441 18.7972 13.3669C18.7809 13.4355 18.7655 13.5386 18.7544 13.6821C18.7307 13.9896 18.7334 14.3753 18.7364 14.8005C18.7368 14.8595 18.7372 14.9193 18.7376 14.9797C18.7403 15.4535 18.7392 15.9719 18.6831 16.3881C18.6553 16.5942 18.6093 16.8164 18.5212 17.0088C18.4352 17.1967 18.2619 17.4535 17.9322 17.5392C17.6339 17.6168 17.3595 17.5097 17.1896 17.4231C17.0011 17.3271 16.8118 17.1885 16.6345 17.0417C16.2784 16.7471 15.8809 16.3435 15.5075 15.9608C15.4768 15.9293 15.4462 15.898 15.4158 15.8668C15.0652 15.5072 14.7356 15.1692 14.4455 14.9119C14.2881 14.7724 14.1587 14.6716 14.058 14.6086C14.0074 14.577 13.9768 14.563 13.9634 14.5574C13.685 14.5588 13.3966 14.5785 13.0794 14.6001L13.0665 14.601C12.7398 14.6233 12.3855 14.6471 12.0201 14.6473C9.56393 14.6852 7.31838 14.2912 5.66506 13.605C4.83897 13.2621 4.13429 12.8353 3.62775 12.329C3.11848 11.82 2.7832 11.2012 2.7832 10.4998C2.7832 9.79676 3.12005 9.18325 3.63141 8.68202C4.13899 8.1845 4.84399 7.76938 5.66777 7.43592ZM18.8215 13.2908C18.8217 13.2912 18.8201 13.2954 18.8162 13.3023C18.8194 13.2939 18.8214 13.2904 18.8215 13.2908Z" fill="#D4AA16"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/mview.svg b/static/img/style_guide/iconography_assets/tree_view_icons/mview.svg
new file mode 100644
index 0000000..0b6ed8a
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/mview.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.06461 3.61548H19.6496C19.8485 3.61548 20.0393 3.6945 20.1799 3.83515C20.3206 3.97581 20.3996 4.16657 20.3996 4.36548V19.6505C20.3996 19.8494 20.3206 20.0402 20.1799 20.1808C20.0393 20.3215 19.8485 20.4005 19.6496 20.4005H4.34961C4.1507 20.4005 3.95993 20.3215 3.81928 20.1808C3.67863 20.0402 3.59961 19.8494 3.59961 19.6505V4.06548C3.59958 4.00511 3.61169 3.94534 3.63524 3.88974C3.65879 3.83414 3.69328 3.78385 3.73667 3.74186C3.78006 3.69987 3.83145 3.66705 3.88779 3.64534C3.94413 3.62362 4.00426 3.61347 4.06461 3.61548Z" fill="#E3FF8D"/>
+<path d="M3.61523 19.6502V4.06523C3.61523 3.94589 3.66264 3.83143 3.74704 3.74704C3.83143 3.66264 3.94589 3.61523 4.06523 3.61523H19.6502C19.8491 3.61523 20.0399 3.69425 20.1806 3.8349C20.3212 3.97556 20.4002 4.16632 20.4002 4.36523V13.8752" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.17773 4.17773H19.6502C19.7 4.17773 19.7477 4.19749 19.7828 4.23265C19.818 4.26782 19.8377 4.31551 19.8377 4.36523V13.8752C19.8377 14.1859 20.0896 14.4377 20.4002 14.4377C20.7109 14.4377 20.9627 14.1859 20.9627 13.8752V4.36523C20.9627 4.01714 20.8245 3.6833 20.5783 3.43716C20.3322 3.19102 19.9983 3.05273 19.6502 3.05273H4.06523C3.7967 3.05273 3.53917 3.15941 3.34929 3.34929C3.15941 3.53917 3.05273 3.7967 3.05273 4.06523V19.6502C3.05273 19.9609 3.30457 20.2127 3.61523 20.2127C3.92589 20.2127 4.17773 19.9609 4.17773 19.6502V4.17773Z" fill="#9CC71C"/>
+<path d="M11.6848 17.3399H6.95977C6.84161 17.3362 6.72932 17.2875 6.64573 17.2039C6.56213 17.1204 6.51352 17.0081 6.50977 16.8899V7.10991C6.51352 6.99176 6.56213 6.87946 6.64573 6.79587C6.72932 6.71228 6.84161 6.66367 6.95977 6.65991H17.0398C17.1579 6.66367 17.2702 6.71228 17.3538 6.79587C17.4374 6.87946 17.486 6.99176 17.4898 7.10991V13.7399" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.96005 6.09741H17.0579C17.319 6.10571 17.5671 6.21341 17.7518 6.39813C17.9365 6.58284 18.044 6.83096 18.0523 7.09205L18.0528 7.10991L18.0525 13.7399C18.0525 14.0506 17.8007 14.3024 17.49 14.3024C17.1794 14.3024 16.9275 14.0506 16.9275 13.7399V7.22241H7.07255V16.7774H11.685C11.9957 16.7774 12.2475 17.0293 12.2475 17.3399C12.2475 17.6506 11.9957 17.9024 11.685 17.9024H6.94218C6.68109 17.8941 6.43297 17.7864 6.24826 17.6017C6.06355 17.417 5.95613 17.1689 5.94783 16.9078L5.94727 16.8899L5.94755 7.09204C5.95584 6.83095 6.06355 6.58284 6.24826 6.39813C6.43297 6.21342 6.6811 6.10599 6.94219 6.0977L6.96005 6.09741Z" fill="#9CC71C"/>
+<path d="M14.1462 9.39014H9.85625C9.60772 9.39014 9.40625 9.59161 9.40625 9.84014V14.1601C9.40625 14.4087 9.60772 14.6101 9.85625 14.6101H14.1462C14.3948 14.6101 14.5962 14.4087 14.5962 14.1601V9.84014C14.5962 9.59161 14.3948 9.39014 14.1462 9.39014Z" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.96875 9.95264V14.0476H14.0337V9.95264H9.96875ZM8.84375 9.84014C8.84375 9.28095 9.29706 8.82764 9.85625 8.82764H14.1463C14.7054 8.82764 15.1587 9.28095 15.1587 9.84014V14.1601C15.1587 14.7193 14.7054 15.1726 14.1463 15.1726H9.85625C9.29706 15.1726 8.84375 14.7193 8.84375 14.1601V9.84014Z" fill="#9CC71C"/>
+<path d="M3.61523 19.8001H14.5952V16.0051L17.4902 18.2251L20.3852 16.0051V19.8001" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3464 15.5007C14.5384 15.4059 14.7676 15.4285 14.9375 15.5588L17.4902 17.5163L20.0429 15.5588C20.2129 15.4285 20.4421 15.4059 20.6341 15.5007C20.8261 15.5954 20.9477 15.791 20.9477 16.0051V19.8001C20.9477 20.1108 20.6959 20.3626 20.3852 20.3626C20.0746 20.3626 19.8227 20.1108 19.8227 19.8001V17.1453L17.8325 18.6715C17.6306 18.8263 17.3499 18.8263 17.1479 18.6715L15.1577 17.1453V19.8001C15.1577 20.1108 14.9059 20.3626 14.5952 20.3626H3.61523C3.30457 20.3626 3.05273 20.1108 3.05273 19.8001C3.05273 19.4895 3.30457 19.2376 3.61523 19.2376H14.0327V16.0051C14.0327 15.791 14.1543 15.5954 14.3464 15.5007Z" fill="#9CC71C"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/package.svg b/static/img/style_guide/iconography_assets/tree_view_icons/package.svg
new file mode 100644
index 0000000..b5fe67d
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/package.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.93555 7.91984V16.0798L12.0005 20.1598L19.0655 16.0798V7.91984L12.0005 3.83984L4.93555 7.91984Z" fill="#FEFABF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 11.4526C12.3107 11.4526 12.5625 11.7045 12.5625 12.0151V20.4751C12.5625 20.7858 12.3107 21.0376 12 21.0376C11.6893 21.0376 11.4375 20.7858 11.4375 20.4751V12.0151C11.4375 11.7045 11.6893 11.4526 12 11.4526Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3652 7.22241C19.6759 7.22241 19.9277 7.47425 19.9277 7.78491V16.2449C19.9277 16.5556 19.6759 16.8074 19.3652 16.8074C19.0546 16.8074 18.8027 16.5556 18.8027 16.2449V7.78491C18.8027 7.47425 19.0546 7.22241 19.3652 7.22241Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.63477 7.22241C4.94543 7.22241 5.19727 7.47425 5.19727 7.78491V16.2449C5.19727 16.5556 4.94543 16.8074 4.63477 16.8074C4.32411 16.8074 4.07227 16.5556 4.07227 16.2449V7.78491C4.07227 7.47425 4.32411 7.22241 4.63477 7.22241Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8227 7.50332C19.9782 7.7723 19.8861 8.11636 19.6172 8.27179L12.2972 12.5018C12.0282 12.6572 11.6841 12.5652 11.5287 12.2962C11.3733 12.0272 11.4653 11.6832 11.7343 11.5277L19.0543 7.29773C19.3233 7.1423 19.6673 7.23434 19.8227 7.50332Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4712 3.24356C12.6266 3.51254 12.5346 3.85659 12.2656 4.01203L4.9456 8.24203C4.67662 8.39746 4.33256 8.30542 4.17713 8.03644C4.02169 7.76746 4.11374 7.4234 4.38272 7.26797L11.7027 3.03797C11.9717 2.88253 12.3157 2.97458 12.4712 3.24356Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8227 15.9635C19.9782 16.2325 19.8861 16.5766 19.6172 16.732L12.2972 20.962C12.0282 21.1174 11.6841 21.0254 11.5287 20.7564C11.3733 20.4874 11.4653 20.1434 11.7343 19.9879L19.0543 15.7579C19.3233 15.6025 19.6673 15.6945 19.8227 15.9635Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.17713 7.50332C4.33256 7.23434 4.67662 7.1423 4.9456 7.29773L12.2656 11.5277C12.5346 11.6832 12.6266 12.0272 12.4712 12.2962C12.3157 12.5652 11.9717 12.6572 11.7027 12.5018L4.38272 8.27179C4.11374 8.11636 4.02169 7.7723 4.17713 7.50332Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5287 3.24356C11.6841 2.97458 12.0282 2.88253 12.2972 3.03797L19.6172 7.26797C19.8861 7.4234 19.9782 7.76746 19.8227 8.03644C19.6673 8.30542 19.3233 8.39746 19.0543 8.24203L11.7343 4.01203C11.4653 3.85659 11.3733 3.51254 11.5287 3.24356Z" fill="#B9871B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.17713 15.9635C4.33256 15.6945 4.67662 15.6025 4.9456 15.7579L12.2656 19.9879C12.5346 20.1434 12.6266 20.4874 12.4712 20.7564C12.3157 21.0254 11.9717 21.1174 11.7027 20.962L4.38272 16.732C4.11374 16.5766 4.02169 16.2325 4.17713 15.9635Z" fill="#B9871B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/partition.svg b/static/img/style_guide/iconography_assets/tree_view_icons/partition.svg
new file mode 100644
index 0000000..05e857d
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/partition.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 13.5V4.5C3.75 4.10218 3.90804 3.72064 4.18934 3.43934C4.47064 3.15804 4.85218 3 5.25 3H18.75C19.1478 3 19.5294 3.15804 19.8107 3.43934C20.092 3.72064 20.25 4.10218 20.25 4.5V13.5H3.75Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4375 12.75V9H12.5625V12.75H11.4375Z" fill="#C1CBD5"/>
+<path d="M4.875 9H19.125V12.375H4.875V9ZM3.75 7.875V13.5H20.25V7.92H3.75V7.875Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4375 9V3H12.5625V9H11.4375Z" fill="#2195E7"/>
+<path d="M18.75 4.125C18.8495 4.125 18.9448 4.16451 19.0152 4.23484C19.0855 4.30516 19.125 4.40054 19.125 4.5V7.875H4.875V4.5C4.875 4.40054 4.91451 4.30516 4.98484 4.23484C5.05516 4.16451 5.15054 4.125 5.25 4.125H18.75ZM18.75 3H5.25C4.85218 3 4.47064 3.15804 4.18934 3.43934C3.90804 3.72064 3.75 4.10218 3.75 4.5V9H20.25V4.5C20.25 4.10218 20.092 3.72064 19.8107 3.43934C19.5294 3.15804 19.1478 3 18.75 3Z" fill="#2195E7"/>
+<path d="M18.75 21H5.25C4.85218 21 4.47064 20.842 4.18934 20.5607C3.90804 20.2794 3.75 19.8978 3.75 19.5V16.5H20.25V19.5C20.25 19.8978 20.092 20.2794 19.8107 20.5607C19.5294 20.842 19.1478 21 18.75 21Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4375 20.205V15.75H12.5625V20.205H11.4375Z" fill="#C1CBD5"/>
+<path d="M4.875 16.5H19.125V19.5C19.125 19.5995 19.0855 19.6948 19.0152 19.7652C18.9448 19.8355 18.8495 19.875 18.75 19.875H5.25C5.15054 19.875 5.05516 19.8355 4.98484 19.7652C4.91451 19.6948 4.875 19.5995 4.875 19.5V16.5ZM3.75 15.375V19.5C3.75 19.8978 3.90804 20.2794 4.18934 20.5607C4.47064 20.842 4.85218 21 5.25 21H18.75C19.1478 21 19.5294 20.842 19.8107 20.5607C20.092 20.2794 20.25 19.8978 20.25 19.5V15.42H3.75V15.375Z" fill="#2195E7"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/partition_table.svg b/static/img/style_guide/iconography_assets/tree_view_icons/partition_table.svg
new file mode 100644
index 0000000..9c66df2
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/partition_table.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.25 4.5H18.75C19.65 4.5 20.25 5.1 20.25 6V18C20.25 18.9 19.65 19.5 18.75 19.5H5.25C4.35 19.5 3.75 18.9 3.75 18V6C3.75 5.1 4.35 4.5 5.25 4.5Z" fill="#F2F2F2"/>
+<path d="M19.5 13.65H12.6V9H11.4V13.65H4.5V14.85H11.4V19.5H12.6V14.85H19.5V13.65Z" fill="#C1CBD5"/>
+<path d="M18.75 4.5H5.25C4.35 4.5 3.75 5.1 3.75 6V18C3.75 18.9 4.35 19.5 5.25 19.5H18.75C19.65 19.5 20.25 18.9 20.25 18V6C20.25 5.1 19.65 4.5 18.75 4.5ZM18.75 5.7C18.9 5.7 19.05 5.85 19.05 6V9.15H12.6V5.7H18.75ZM5.25 5.7H11.4V9.3H4.8V6C4.8 5.85 5.1 5.7 5.25 5.7ZM18.75 18.3H5.25C5.1 18.3 4.95 18.15 4.95 18V10.35H19.2V18C19.2 18.15 18.9 18.3 18.75 18.3Z" fill="#2195E7"/>
+<path d="M6.15 11.3999C3.15 11.3999 0.75 8.9999 0.75 6.1499C0.75 3.1499 3.15 0.899902 6.15 0.899902C9 0.899902 11.4 3.1499 11.4 6.1499C11.4 8.9999 9 11.3999 6.15 11.3999Z" fill="#F2F2F2" stroke="#34495E" stroke-width="0.5" stroke-miterlimit="10" stroke-linejoin="bevel"/>
+<path d="M6.74961 3.2998H5.54961H4.34961V9.29981H5.54961V7.19981H6.74961C7.79961 7.19981 8.69961 6.29981 8.69961 5.24981C8.69961 4.1998 7.79961 3.2998 6.74961 3.2998ZM6.74961 6.14981H5.54961V4.34981H6.89961C7.34961 4.34981 7.79961 4.79981 7.79961 5.24981C7.79961 5.69981 7.34961 6.14981 6.74961 6.14981Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/pg.svg b/static/img/style_guide/iconography_assets/tree_view_icons/pg.svg
new file mode 100644
index 0000000..e561e96
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/pg.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7148 12.9752C18.3311 12.3688 18.8702 11.6887 19.3197 10.9502C19.8626 10.1009 20.2629 9.16863 20.5047 8.19016C21.1648 5.35516 20.5048 3.78015 17.7148 3.04515C14.9248 2.31015 14.5947 3.57016 14.5947 3.57016C13.9023 3.29301 13.1604 3.16067 12.4148 3.18131C11.6693 3.20195 10.9358 3.37512 10.2597 3.69015C10.2597 3.69015 6.52475 2.55015 5.14475 3.48015C3.76475 4.41015 2.14475 5.58016 3.92975 11.2202C4.25794 12.5417 4.76247 13.8131 5.42975 15.0002C6.37475 16.3802 7.03475 16.0952 7.36475 15.7502C7.36475 15.7502 8.66975 14.2502 8.93975 13.9952C9.20975 13.7402 10.4397 14.2502 10.6647 14.2502C11.339 14.6714 11.8394 15.3208 12.0747 16.0802C12.1497 16.7402 11.7897 20.4302 13.0497 20.9552C13.3852 21.1082 13.7527 21.1781 14.1209 21.159C14.4892 21.1399 14.8474 21.0323 15.1653 20.8454C15.4831 20.6585 15.7513 20.3978 15.947 20.0853C16.1428 19.7728 16.2603 19.4177 16.2897 19.0502C16.56 17.8918 16.7702 16.7202 16.9197 15.5402L17.2798 13.5902L17.7148 12.9752Z" fill="#DEF4FD"/>
+<path d="M9.80917 3.67485C9.80917 3.67485 6.05917 2.17485 4.01917 4.24485C1.97917 6.31485 4.37917 12.6898 4.37917 12.6898C4.76101 13.7675 5.30749 14.7795 5.99917 15.6898C5.99917 15.6898 6.55417 16.4398 7.42417 15.6898C7.42417 15.6898 8.75917 14.2648 9.16417 13.7248" stroke="#326690" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M14.25 3.33022C15.0067 3.03395 15.8157 2.89447 16.6279 2.92026C17.4401 2.94604 18.2386 3.13655 18.975 3.48022C21.195 4.68022 20.85 6.19522 20.79 6.64522C20.73 7.09522 20.16 11.7152 17.31 13.1402" stroke="#326690" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M8.50359 8.18999C8.50359 8.18999 10.2286 7.10999 11.1286 7.82999C12.0286 8.54999 11.7286 11.025 11.7136 11.115C11.5068 11.8775 11.2462 12.6244 10.9336 13.35L10.6786 13.8C10.6786 13.8 10.4836 14.145 9.97359 13.935C9.46359 13.725 8.06859 12.795 8.17359 11.445C8.28508 10.3637 8.31016 9.27526 8.24859 8.18999C8.17359 7.78499 8.50359 4.61999 10.2286 3.68999C10.8524 3.31904 11.5542 3.09877 12.2781 3.04669C13.002 2.99461 13.7281 3.11216 14.3986 3.38999C15.2191 3.71798 15.9627 4.21259 16.5823 4.84256C17.2019 5.47253 17.6842 6.22417 17.9986 7.04999L18.1186 7.79999C17.9313 8.68738 17.8907 9.59948 17.9986 10.5C17.9986 10.5 18.3586 12.375 17.7436 12.93C17.7436 12.93 17.0086 12.6 17.3536 13.095C17.3536 13.095 15.3436 9.89999 15.7036 8.47499C15.7036 8.47499 15.7936 7.09499 17.8636 7.48499" stroke="#326690" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M8.77539 17.4C10.2754 17.4 11.0254 14.265 11.0254 14.265L12.0154 15.63C12.2659 16.6549 12.352 17.7131 12.2704 18.765C12.4504 20.265 12.6154 21.33 14.4004 21.12C14.96 21.0412 15.475 20.771 15.8579 20.3553C16.2407 19.9396 16.4678 19.4042 16.5004 18.84C16.5208 18.417 16.5965 17.9984 16.7254 17.595C16.7254 17.295 16.8754 16.815 16.8754 16.815C16.8754 16.395 17.3104 13.125 17.3104 13.125C17.3022 13.5015 17.3703 13.8758 17.5107 14.2253C17.651 14.5747 17.8606 14.8922 18.1269 15.1585C18.3932 15.4248 18.7107 15.6344 19.0601 15.7747C19.4096 15.9151 19.7839 15.9832 20.1604 15.975" stroke="#326690" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M17.3686 8.27999C17.3686 8.27999 17.2486 8.00999 16.7086 8.17499C16.1686 8.33999 16.4386 8.51999 16.4386 8.51999C16.4386 8.51999 16.6186 8.72999 16.7986 8.71499C16.926 8.70702 17.0481 8.66143 17.1496 8.58399C17.2511 8.50656 17.3273 8.40076 17.3686 8.27999Z" fill="#326690"/>
+<path d="M10.7405 8.65497C10.7405 8.65497 10.7405 8.35497 10.1255 8.32497C9.51048 8.29497 9.73548 8.57997 9.73548 8.57997C9.73548 8.57997 9.84048 8.84997 10.0205 8.89497C10.1507 8.93175 10.289 8.92854 10.4174 8.88574C10.5458 8.84294 10.6584 8.76254 10.7405 8.65497Z" fill="#326690"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/pga_job-disabled.svg b/static/img/style_guide/iconography_assets/tree_view_icons/pga_job-disabled.svg
new file mode 100644
index 0000000..b6cc068
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/pga_job-disabled.svg
@@ -0,0 +1,20 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.3043 5.32471H5.8493C5.32739 5.32471 4.9043 5.7478 4.9043 6.26971V19.7547C4.9043 20.2766 5.32739 20.6997 5.8493 20.6997H16.3043C16.8262 20.6997 17.2493 20.2766 17.2493 19.7547V6.26971C17.2493 5.7478 16.8262 5.32471 16.3043 5.32471Z" fill="#DEF4FD"/>
+<path d="M16.3047 5.89478C16.4041 5.89478 16.4995 5.93428 16.5699 6.00461C16.6402 6.07494 16.6797 6.17032 16.6797 6.26978V19.7698C16.6797 19.8692 16.6402 19.9646 16.5699 20.0349C16.4995 20.1053 16.4041 20.1448 16.3047 20.1448H5.80469C5.70523 20.1448 5.60985 20.1053 5.53952 20.0349C5.4692 19.9646 5.42969 19.8692 5.42969 19.7698V6.26978C5.42969 6.17032 5.4692 6.07494 5.53952 6.00461C5.60985 5.93428 5.70523 5.89478 5.80469 5.89478H16.3047ZM16.3047 4.76978H5.80469C5.40686 4.76978 5.02533 4.92781 4.74403 5.20912C4.46272 5.49042 4.30469 5.87195 4.30469 6.26978V19.7698C4.30469 20.1676 4.46272 20.5491 4.74403 20.8304C5.02533 21.1117 5.40686 21.2698 5.80469 21.2698H16.3047C16.7025 21.2698 17.084 21.1117 17.3653 20.8304C17.6467 20.5491 17.8047 20.1676 17.8047 19.7698V6.26978C17.8047 5.87195 17.6467 5.49042 17.3653 5.20912C17.084 4.92781 16.7025 4.76978 16.3047 4.76978Z" fill="#34495E"/>
+<path d="M8.63867 5.6996V4.7696C8.64261 4.52158 8.74391 4.28505 8.9207 4.11106C9.0975 3.93707 9.33562 3.83957 9.58367 3.8396H12.5837C12.8265 3.84728 13.057 3.94819 13.2274 4.12137C13.3978 4.29454 13.4949 4.52669 13.4987 4.7696V5.6996H8.63867Z" fill="#DEF4FD"/>
+<path d="M12.5703 4.39478C12.6698 4.39478 12.7652 4.43428 12.8355 4.50461C12.9058 4.57494 12.9453 4.67032 12.9453 4.76978V5.14478H9.19531V4.76978C9.19531 4.67032 9.23482 4.57494 9.30515 4.50461C9.37547 4.43428 9.47086 4.39478 9.57031 4.39478H12.5703ZM12.5703 3.26978H9.57031C9.17249 3.26978 8.79096 3.42781 8.50965 3.70912C8.22835 3.99042 8.07031 4.37195 8.07031 4.76978V6.26978H14.0703V4.76978C14.0703 4.37195 13.9123 3.99042 13.631 3.70912C13.3497 3.42781 12.9681 3.26978 12.5703 3.26978Z" fill="#34495E"/>
+<path d="M10.2598 9.94491V8.90991H14.9998V9.94491H10.2598Z" fill="#DEF4FD"/>
+<path d="M15.0598 8.90991H10.2598V9.94491H15.0598V8.90991Z" fill="#2195E7"/>
+<path d="M10.2598 13.7996V12.7646H14.9998V13.7996H10.2598Z" fill="#DEF4FD"/>
+<path d="M15.0598 12.7646H10.2598V13.7996H15.0598V12.7646Z" fill="#2195E7"/>
+<path d="M10.2598 17.9996V16.9646H14.9998V17.9996H10.2598Z" fill="#DEF4FD"/>
+<path d="M15.0598 16.9048H10.2598V17.9248H15.0598V16.9048Z" fill="#2195E7"/>
+<path d="M8.13039 13.0496H7.65039V13.5296H8.13039V13.0496Z" fill="#DEF4FD"/>
+<path d="M8.70071 12.48H7.0957V14.085H8.70071V12.48Z" fill="#2195E7"/>
+<path d="M8.13039 9.17969H7.65039V9.65969H8.13039V9.17969Z" fill="#DEF4FD"/>
+<path d="M8.70071 8.625H7.0957V10.23H8.70071V8.625Z" fill="#2195E7"/>
+<path d="M8.13039 17.1746H7.65039V17.6546H8.13039V17.1746Z" fill="#DEF4FD"/>
+<path d="M8.70071 16.605H7.0957V18.21H8.70071V16.605Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.2955 2.45939C20.7348 2.89873 20.7348 3.61104 20.2955 4.05038L15.7955 8.55038C15.3562 8.98972 14.6438 8.98972 14.2045 8.55038C13.7652 8.11104 13.7652 7.39873 14.2045 6.95939L18.7045 2.45939C19.1438 2.02005 19.8562 2.02005 20.2955 2.45939Z" fill="#D0021B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2045 2.45939C14.6438 2.02005 15.3562 2.02005 15.7955 2.45939L20.2955 6.95939C20.7348 7.39873 20.7348 8.11104 20.2955 8.55038C19.8562 8.98972 19.1438 8.98972 18.7045 8.55038L14.2045 4.05038C13.7652 3.61104 13.7652 2.89873 14.2045 2.45939Z" fill="#D0021B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/pga_job.svg b/static/img/style_guide/iconography_assets/tree_view_icons/pga_job.svg
new file mode 100644
index 0000000..0294de0
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/pga_job.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2359 5.06982H6.78094C6.25903 5.06982 5.83594 5.49292 5.83594 6.01482V19.4998C5.83594 20.0217 6.25903 20.4448 6.78094 20.4448H17.2359C17.7578 20.4448 18.1809 20.0217 18.1809 19.4998V6.01482C18.1809 5.49292 17.7578 5.06982 17.2359 5.06982Z" fill="#DEF4FD"/>
+<path d="M17.2356 5.625C17.3351 5.625 17.4305 5.66451 17.5008 5.73484C17.5711 5.80516 17.6106 5.90054 17.6106 6V19.5C17.6106 19.5995 17.5711 19.6948 17.5008 19.7652C17.4305 19.8355 17.3351 19.875 17.2356 19.875H6.73562C6.64146 19.8674 6.55361 19.8246 6.48965 19.7551C6.42569 19.6856 6.39032 19.5945 6.39063 19.5V6C6.39063 5.90054 6.43013 5.80516 6.50046 5.73484C6.57079 5.66451 6.66617 5.625 6.76563 5.625H17.2656H17.2356ZM17.2656 4.5H6.76563C6.3678 4.5 5.98627 4.65804 5.70496 4.93934C5.42366 5.22064 5.26563 5.60218 5.26562 6V19.5C5.26563 19.8978 5.42366 20.2794 5.70496 20.5607C5.98627 20.842 6.3678 21 6.76563 21H17.2656C17.6634 21 18.045 20.842 18.3263 20.5607C18.6076 20.2794 18.7656 19.8978 18.7656 19.5V6C18.7656 5.60218 18.6076 5.22064 18.3263 4.93934C18.045 4.65804 17.6634 4.5 17.2656 4.5Z" fill="#34495E"/>
+<path d="M9.57031 5.44482V4.49982C9.57418 4.25438 9.6734 4.02007 9.84698 3.84649C10.0206 3.67291 10.2549 3.57369 10.5003 3.56982H13.5003C13.7484 3.56979 13.9865 3.66729 14.1633 3.84128C14.3401 4.01527 14.4414 4.2518 14.4453 4.49982V5.44482H9.57031Z" fill="#DEF4FD"/>
+<path d="M13.5 4.125C13.5995 4.125 13.6948 4.16451 13.7652 4.23484C13.8355 4.30516 13.875 4.40054 13.875 4.5V4.875H10.125V4.5C10.125 4.40054 10.1645 4.30516 10.2348 4.23484C10.3052 4.16451 10.4005 4.125 10.5 4.125H13.5ZM13.5 3H10.5C10.1022 3 9.72064 3.15804 9.43934 3.43934C9.15804 3.72064 9 4.10218 9 4.5V6H15V4.5C15 4.10218 14.842 3.72064 14.5607 3.43934C14.2794 3.15804 13.8978 3 13.5 3Z" fill="#34495E"/>
+<path d="M11.1914 9.91502V8.89502H15.9914V9.93002L11.1914 9.91502Z" fill="#2195E7"/>
+<path d="M8.17578 10.1098V8.81982H9.46578V10.1098H8.17578Z" fill="#2195E7"/>
+<path d="M11.1914 13.4997V12.4197H15.9914V13.4997H11.1914Z" fill="#2195E7"/>
+<path d="M8.17578 13.6351V12.3601H9.46578V13.6501L8.17578 13.6351Z" fill="#2195E7"/>
+<path d="M11.1914 16.9652V15.9302H15.9914V16.9652H11.1914Z" fill="#2195E7"/>
+<path d="M8.17578 17.0847V15.7947H9.46578V17.0847H8.17578Z" fill="#2195E7"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/pga_jobstep-disabled.svg b/static/img/style_guide/iconography_assets/tree_view_icons/pga_jobstep-disabled.svg
new file mode 100644
index 0000000..12b4a2f
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/pga_jobstep-disabled.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.74961 5.1001H17.2496C17.6996 5.1001 18.1496 5.5501 18.1496 6.0001V19.5001C18.1496 19.9501 17.6996 20.4001 17.2496 20.4001H6.74961C6.29961 20.4001 5.84961 19.9501 5.84961 19.5001V6.0001C5.84961 5.5501 6.29961 5.1001 6.74961 5.1001Z" fill="#DEF4FD"/>
+<path d="M17.25 5.7C17.4 5.7 17.55 5.85 17.55 6V19.5C17.55 19.65 17.4 19.8 17.25 19.8H6.75C6.6 19.8 6.45 19.65 6.45 19.5V6C6.45 5.85 6.6 5.7 6.75 5.7H17.25ZM17.25 4.5H6.75C5.85 4.5 5.25 5.1 5.25 6V19.5C5.25 20.4 5.85 21 6.75 21H17.25C18.15 21 18.75 20.4 18.75 19.5V6C18.75 5.1 18.15 4.5 17.25 4.5Z" fill="#34495E"/>
+<path d="M9.59961 5.4001V4.5001C9.59961 4.0501 10.0496 3.6001 10.4996 3.6001H13.4996C13.9496 3.6001 14.3996 4.0501 14.3996 4.5001V5.4001H9.59961Z" fill="#DEF4FD"/>
+<path d="M13.5 4.2C13.65 4.2 13.8 4.35 13.8 4.5V4.8H10.2V4.5C10.2 4.35 10.35 4.2 10.5 4.2H13.5ZM13.5 3H10.5C9.6 3 9 3.6 9 4.5V6H15V4.5C15 3.6 14.4 3 13.5 3Z" fill="#34495E"/>
+<path d="M11.5508 9.9001V8.8501H16.3508V9.9001H11.5508Z" fill="#2195E7"/>
+<path d="M11.5508 13.8V12.75H16.3508V13.8H11.5508Z" fill="#717F8E"/>
+<path d="M11.5508 18.0002V16.9502H16.3508V18.0002H11.5508Z" fill="#717F8E"/>
+<path d="M8.40039 14.1002V12.4502H10.0504V14.1002H8.40039Z" fill="#717F8E"/>
+<path d="M8.40039 18.15V16.5H10.0504V18.15H8.40039Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1326 7.64653C11.3832 7.83025 11.4373 8.18226 11.2536 8.43278L9.6036 10.6828C9.50655 10.8151 9.35653 10.8985 9.19289 10.911C9.02925 10.9235 8.8683 10.8639 8.75225 10.7479L7.85225 9.84788C7.63258 9.62821 7.63258 9.27206 7.85225 9.05239C8.07192 8.83272 8.42808 8.83272 8.64775 9.05239L9.08413 9.48877L10.3464 7.76749C10.5301 7.51698 10.8821 7.46282 11.1326 7.64653Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0455 2.6547C21.4848 3.09404 21.4848 3.80635 21.0455 4.24569L16.5455 8.74569C16.1062 9.18503 15.3938 9.18503 14.9545 8.74569C14.5152 8.30635 14.5152 7.59404 14.9545 7.1547L19.4545 2.6547C19.8938 2.21536 20.6062 2.21536 21.0455 2.6547Z" fill="#D0021B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9545 2.6547C15.3938 2.21536 16.1062 2.21536 16.5455 2.6547L21.0455 7.1547C21.4848 7.59404 21.4848 8.30635 21.0455 8.74569C20.6062 9.18503 19.8938 9.18503 19.4545 8.74569L14.9545 4.24569C14.5152 3.80635 14.5152 3.09404 14.9545 2.6547Z" fill="#D0021B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/pga_jobstep.svg b/static/img/style_guide/iconography_assets/tree_view_icons/pga_jobstep.svg
new file mode 100644
index 0000000..6992b42
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/pga_jobstep.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2359 5.06982H6.78094C6.25903 5.06982 5.83594 5.49292 5.83594 6.01482V19.4998C5.83594 20.0217 6.25903 20.4448 6.78094 20.4448H17.2359C17.7578 20.4448 18.1809 20.0217 18.1809 19.4998V6.01482C18.1809 5.49292 17.7578 5.06982 17.2359 5.06982Z" fill="#DEF4FD"/>
+<path d="M17.2356 5.625C17.3351 5.625 17.4305 5.66451 17.5008 5.73484C17.5711 5.80516 17.6106 5.90054 17.6106 6V19.5C17.6106 19.5995 17.5711 19.6948 17.5008 19.7652C17.4305 19.8355 17.3351 19.875 17.2356 19.875H6.73562C6.64146 19.8674 6.55361 19.8246 6.48965 19.7551C6.42569 19.6856 6.39032 19.5945 6.39063 19.5V6C6.39063 5.90054 6.43013 5.80516 6.50046 5.73484C6.57079 5.66451 6.66617 5.625 6.76563 5.625H17.2656H17.2356ZM17.2656 4.5H6.76563C6.3678 4.5 5.98627 4.65804 5.70496 4.93934C5.42366 5.22064 5.26563 5.60218 5.26562 6V19.5C5.26563 19.8978 5.42366 20.2794 5.70496 20.5607C5.98627 20.842 6.3678 21 6.76563 21H17.2656C17.6634 21 18.045 20.842 18.3263 20.5607C18.6076 20.2794 18.7656 19.8978 18.7656 19.5V6C18.7656 5.60218 18.6076 5.22064 18.3263 4.93934C18.045 4.65804 17.6634 4.5 17.2656 4.5Z" fill="#34495E"/>
+<path d="M9.57031 5.44482V4.49982C9.57418 4.25438 9.6734 4.02007 9.84698 3.84649C10.0206 3.67291 10.2549 3.57369 10.5003 3.56982H13.5003C13.7484 3.56979 13.9865 3.66729 14.1633 3.84128C14.3401 4.01527 14.4414 4.2518 14.4453 4.49982V5.44482H9.57031Z" fill="#DEF4FD"/>
+<path d="M13.5 4.125C13.5995 4.125 13.6948 4.16451 13.7652 4.23484C13.8355 4.30516 13.875 4.40054 13.875 4.5V4.875H10.125V4.5C10.125 4.40054 10.1645 4.30516 10.2348 4.23484C10.3052 4.16451 10.4005 4.125 10.5 4.125H13.5ZM13.5 3H10.5C10.1022 3 9.72064 3.15804 9.43934 3.43934C9.15804 3.72064 9 4.10218 9 4.5V6H15V4.5C15 4.10218 14.842 3.72064 14.5607 3.43934C14.2794 3.15804 13.8978 3 13.5 3Z" fill="#34495E"/>
+<path d="M11.5957 9.94491V8.90991H16.3957V9.94491H11.5957Z" fill="#2195E7"/>
+<path d="M11.5957 13.7999V12.7649H16.3957V13.7999H11.5957Z" fill="#717F8E"/>
+<path d="M11.5957 18.0001V16.9651H16.3957V18.0001H11.5957Z" fill="#717F8E"/>
+<path d="M8.43164 14.085V12.48H10.0366V14.085H8.43164Z" fill="#717F8E"/>
+<path d="M8.43164 18.2251V16.6201H10.0366V18.2251H8.43164Z" fill="#717F8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1622 7.61587C11.4129 7.79929 11.4675 8.15124 11.2841 8.40198L9.64909 10.637C9.55788 10.7616 9.41943 10.8433 9.2662 10.8628C9.11297 10.8824 8.95845 10.838 8.8389 10.7402L7.8489 9.93021C7.60846 9.73349 7.57302 9.3791 7.76974 9.13867C7.96647 8.89823 8.32085 8.86279 8.56129 9.05951L9.09171 9.49349L10.3761 7.73775C10.5595 7.48702 10.9115 7.43245 11.1622 7.61587Z" fill="#2195E7"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/pga_schedule-disabled.svg b/static/img/style_guide/iconography_assets/tree_view_icons/pga_schedule-disabled.svg
new file mode 100644
index 0000000..51453a5
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/pga_schedule-disabled.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0004 20.4002C16.4739 20.4002 20.1004 16.7737 20.1004 12.3002C20.1004 7.82669 16.4739 4.2002 12.0004 4.2002C7.52688 4.2002 3.90039 7.82669 3.90039 12.3002C3.90039 16.7737 7.52688 20.4002 12.0004 20.4002Z" fill="#E3F3F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0004 4.7627C7.83754 4.7627 4.46289 8.13735 4.46289 12.3002C4.46289 16.463 7.83754 19.8377 12.0004 19.8377C16.1632 19.8377 19.5379 16.463 19.5379 12.3002C19.5379 8.13735 16.1632 4.7627 12.0004 4.7627ZM3.33789 12.3002C3.33789 7.51603 7.21622 3.6377 12.0004 3.6377C16.7846 3.6377 20.6629 7.51603 20.6629 12.3002C20.6629 17.0844 16.7846 20.9627 12.0004 20.9627C7.21622 20.9627 3.33789 17.0844 3.33789 12.3002Z" fill="#BD4949"/>
+<path d="M16.05 11.5499H12.75V6.8999C12.75 6.4499 12.45 6.1499 12 6.1499C11.55 6.1499 11.25 6.4499 11.25 6.8999V12.2999C11.25 12.7499 11.55 13.0499 12 13.0499H16.05C16.5 13.0499 16.8 12.7499 16.8 12.2999C16.8 11.8499 16.5 11.5499 16.05 11.5499Z" fill="#1E50AD"/>
+<path d="M19.95 5.8498L22.2 3.5998C22.65 3.1498 22.65 2.3998 22.2 1.9498C21.75 1.4998 21 1.4998 20.55 1.9498L18.3 4.1998L16.05 1.9498C15.6 1.4998 14.85 1.4998 14.4 1.9498C13.95 2.3998 13.95 3.1498 14.4 3.5998L16.65 5.8498L14.55 8.0998C14.1 8.54981 14.1 9.29981 14.55 9.74981C14.7 9.89981 15 10.0498 15.3 10.0498C15.6 10.0498 15.9 9.89981 16.05 9.74981L18.3 7.4998L20.55 9.74981C20.7 9.89981 21 10.0498 21.3 10.0498C21.6 10.0498 21.9 9.89981 22.05 9.74981C22.5 9.29981 22.5 8.54981 22.05 8.0998L19.95 5.8498Z" fill="#D0021B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/pga_schedule.svg b/static/img/style_guide/iconography_assets/tree_view_icons/pga_schedule.svg
new file mode 100644
index 0000000..dd3f8cb
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/pga_schedule.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0004 20.355C16.4739 20.355 20.1004 16.7285 20.1004 12.255C20.1004 7.78152 16.4739 4.15503 12.0004 4.15503C7.52688 4.15503 3.90039 7.78152 3.90039 12.255C3.90039 16.7285 7.52688 20.355 12.0004 20.355Z" fill="#E3F3F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0004 4.71753C7.83754 4.71753 4.46289 8.09218 4.46289 12.255C4.46289 16.4179 7.83754 19.7925 12.0004 19.7925C16.1632 19.7925 19.5379 16.4179 19.5379 12.255C19.5379 8.09218 16.1632 4.71753 12.0004 4.71753ZM3.33789 12.255C3.33789 7.47086 7.21622 3.59253 12.0004 3.59253C16.7846 3.59253 20.6629 7.47086 20.6629 12.255C20.6629 17.0392 16.7846 20.9175 12.0004 20.9175C7.21622 20.9175 3.33789 17.0392 3.33789 12.255Z" fill="#BD4949"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.10522C12.4142 6.10522 12.75 6.44101 12.75 6.85522V12.2552C12.75 12.6694 12.4142 13.0052 12 13.0052C11.5858 13.0052 11.25 12.6694 11.25 12.2552V6.85522C11.25 6.44101 11.5858 6.10522 12 6.10522Z" fill="#1E50AD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 12.2551C11.25 11.8409 11.5858 11.5051 12 11.5051H16.05C16.4642 11.5051 16.8 11.8409 16.8 12.2551C16.8 12.6693 16.4642 13.0051 16.05 13.0051H12C11.5858 13.0051 11.25 12.6693 11.25 12.2551Z" fill="#1E50AD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/ppas.svg b/static/img/style_guide/iconography_assets/tree_view_icons/ppas.svg
new file mode 100644
index 0000000..2992d14
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/ppas.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.3702 6.9302H10.0952V10.3802H17.3702V13.3802H10.0952V17.0852H17.3702V20.0852L6.61523 20.0102V3.8252L17.3702 3.9002V6.9302Z" fill="#EB7324"/>
+<path d="M13.3201 13.4105C12.013 11.9465 10.4068 10.7802 8.61009 9.99048C7.5644 13.3382 7.83257 16.9584 9.36009 20.1155H16.5901C16.4067 19.0841 16.1047 18.0775 15.6901 17.1155H10.0951V13.4105H13.3201Z" fill="#E54D25"/>
+<path d="M6.63086 3.8252V9.30019C7.30775 9.47851 7.96975 9.70921 8.61086 9.99019C9.35305 7.62958 10.7216 5.51449 12.5709 3.8702L6.63086 3.8252Z" fill="#F9A11F"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/primary_key.svg b/static/img/style_guide/iconography_assets/tree_view_icons/primary_key.svg
new file mode 100644
index 0000000..64deb03
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/primary_key.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.69 5.11498C17.9375 4.37614 16.9494 3.92507 15.8981 3.84054C14.8469 3.756 13.7994 4.04336 12.9385 4.65245C12.0775 5.26154 11.4579 6.15366 11.1876 7.17307C10.9174 8.19247 11.0138 9.27441 11.46 10.23L4.50005 17.34C4.2627 17.6224 4.13778 17.9824 4.14915 18.3512C4.16052 18.72 4.3074 19.0716 4.56169 19.3389C4.81599 19.6062 5.15987 19.7704 5.52761 19.8001C5.89534 19.8298 6.26113 19.723 6.55505 19.5L7.83005 18.165L11.37 20.235L9.87005 16.365L12.99 17.235L11.49 14.49L13.605 12.39C14.5606 12.8362 15.6425 12.9326 16.662 12.6624C17.6814 12.3922 18.5735 11.7725 19.1826 10.9116C19.7917 10.0506 20.079 9.00309 19.9945 7.95187C19.9099 6.90065 19.4589 5.91252 18.72 5.15998L18.69 5.11498ZM16.5 9.37498C16.2906 9.58565 16.0234 9.72939 15.7322 9.788C15.4409 9.8466 15.1389 9.81742 14.8643 9.70415C14.5897 9.59088 14.3549 9.39863 14.1897 9.15176C14.0244 8.90489 13.9362 8.61453 13.9362 8.31748C13.9362 8.02042 14.0244 7.73006 14.1897 7.48319C14.3549 7.23633 14.5897 7.04407 14.8643 6.9308C15.1389 6.81754 15.4409 6.78835 15.7322 6.84695C16.0234 6.90556 16.2906 7.0493 16.5 7.25998C16.7794 7.54102 16.9362 7.9212 16.9362 8.31748C16.9362 8.71375 16.7794 9.09393 16.5 9.37498Z" fill="#F5F47E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6136 4.19325C13.5822 3.50802 14.7606 3.18474 15.9432 3.27985C17.1259 3.37495 18.2375 3.8824 19.0841 4.71359C19.1118 4.74075 19.1366 4.7707 19.1581 4.80296L19.1595 4.8051C19.9681 5.64668 20.4615 6.74233 20.5552 7.90679C20.6503 9.08941 20.327 10.2679 19.6418 11.2364C18.9565 12.205 17.9529 12.9021 16.8061 13.2061C15.7882 13.4759 14.7148 13.4208 13.7346 13.054L12.1864 14.5912L13.4837 16.9652C13.5921 17.1637 13.5711 17.4078 13.4305 17.5849C13.2898 17.7619 13.0568 17.8375 12.839 17.7768L10.8002 17.2083L11.8945 20.0317C11.981 20.2547 11.9169 20.508 11.7349 20.6631C11.5528 20.8183 11.2926 20.8413 11.0861 20.7206L7.92982 18.8749L6.96183 19.8885C6.94118 19.9101 6.91884 19.93 6.89502 19.9481C6.49088 20.2547 5.98793 20.4016 5.48229 20.3608C4.97666 20.3199 4.50382 20.0941 4.15416 19.7266C3.80451 19.3591 3.60256 18.8756 3.58692 18.3685C3.57128 17.8615 3.74305 17.3665 4.0694 16.9781C4.07856 16.9672 4.08812 16.9567 4.09808 16.9465L10.7971 10.1031C10.4293 9.12222 10.3739 8.04782 10.6439 7.02894C10.9479 5.88211 11.645 4.87847 12.6136 4.19325ZM15.8531 4.40123C14.9332 4.32726 14.0167 4.5787 13.2633 5.11165C12.51 5.6446 11.9678 6.42521 11.7314 7.31719C11.4949 8.20917 11.5793 9.15586 11.9697 9.99199C12.0689 10.2044 12.026 10.456 11.862 10.6235L4.9187 17.7164C4.77815 17.8907 4.70447 18.1097 4.71138 18.3339C4.71849 18.5643 4.81029 18.7841 4.96922 18.9512C5.12816 19.1182 5.34308 19.2208 5.57292 19.2394C5.78953 19.2569 6.00507 19.1986 6.18294 19.0752L7.42326 17.7765C7.60323 17.588 7.88905 17.5479 8.11398 17.6794L10.2634 18.9363L9.34556 16.5683C9.26863 16.3698 9.31034 16.1449 9.45333 15.9872C9.59631 15.8294 9.81608 15.766 10.0211 15.8231L11.8573 16.3352L10.9964 14.7597C10.8763 14.5399 10.916 14.2673 11.0937 14.0908L13.2087 11.9908C13.3761 11.8246 13.6293 11.7805 13.843 11.8803C14.6792 12.2707 15.6258 12.3551 16.5178 12.1186C17.4098 11.8822 18.1904 11.34 18.7234 10.5867C19.2563 9.83336 19.5078 8.91678 19.4338 7.99696C19.3598 7.07715 18.9651 6.21253 18.3187 5.55405C18.2954 5.53037 18.2743 5.50467 18.2556 5.47726C17.6023 4.85397 16.7542 4.47369 15.8531 4.40123ZM15.6212 7.3984C15.4392 7.36177 15.2504 7.38001 15.0788 7.45081C14.9071 7.5216 14.7604 7.64176 14.6571 7.79605C14.5539 7.95034 14.4987 8.13182 14.4987 8.31748C14.4987 8.50313 14.5539 8.68461 14.6571 8.8389C14.7604 8.9932 14.9071 9.11335 15.0788 9.18415C15.2504 9.25494 15.4392 9.27318 15.6212 9.23655C15.8032 9.19993 15.9702 9.11008 16.1011 8.97841C16.2757 8.80276 16.3737 8.56515 16.3737 8.31748C16.3737 8.0698 16.2757 7.83219 16.1011 7.65654C15.9702 7.52487 15.8032 7.43503 15.6212 7.3984ZM14.6498 6.4108C15.0274 6.25506 15.4427 6.21493 15.8431 6.29551C16.2435 6.37609 16.611 6.57374 16.899 6.86341C17.2831 7.24985 17.4987 7.77259 17.4987 8.31748C17.4987 8.86236 17.2831 9.3851 16.899 9.77154C16.611 10.0612 16.2435 10.2589 15.8431 10.3394C15.4427 10.42 15.0274 10.3799 14.6498 10.2242C14.2722 10.0684 13.9494 9.80406 13.7222 9.46462C13.495 9.12517 13.3737 8.72592 13.3737 8.31748C13.3737 7.90903 13.495 7.50978 13.7222 7.17034C13.9494 6.8309 14.2722 6.56655 14.6498 6.4108Z" fill="#CAA524"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/procedure.svg b/static/img/style_guide/iconography_assets/tree_view_icons/procedure.svg
new file mode 100644
index 0000000..cf8c10e
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/procedure.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.3808 20.1151L18.2858 19.1101L18.8108 16.8601V15.8101L19.0808 13.5601L19.7558 12.7201L21.4508 11.8801H19.7558L20.9108 11.6701L19.1558 10.3651L19.0508 9.48008V7.86008L18.8108 5.64008L18.1058 4.81508L16.9808 4.32008L16.3808 4.26008L7.27578 4.08008L5.97078 4.99508L5.16078 5.65508V6.57008L5.31078 6.31508L5.02578 9.34508L5.16078 10.3951L2.88078 11.8801L2.55078 12.1651L2.88078 11.8801L4.35078 12.9451L4.57578 13.5601L5.44578 15.8401L5.38578 16.8301L5.37078 17.5201L5.38578 16.3201V16.9051L5.71578 18.3451L6.25578 19.0651L7.18578 19.6351L7.95078 20.1151H16.3808Z" fill="#EDFFFD"/>
+<path d="M15.7363 19.8002C16.3319 19.8002 16.9186 19.6561 17.4463 19.3802C17.8182 19.1669 18.1243 18.8556 18.3313 18.4802C18.52 18.1168 18.6323 17.7186 18.6613 17.3102C18.6613 16.8902 18.6613 16.4852 18.6613 16.0952V16.3952C18.6613 15.8252 18.6613 15.3452 18.6613 14.8952C18.6694 14.5586 18.6995 14.2229 18.7513 13.8902C18.7845 13.6506 18.8554 13.4177 18.9613 13.2002C19.0549 13.0175 19.1764 12.8505 19.3213 12.7052C19.4703 12.5498 19.6423 12.4183 19.8313 12.3152C20.0043 12.2244 20.185 12.1491 20.3713 12.0902C20.5775 12.0379 20.7887 12.0078 21.0013 12.0002C21.1513 12.0002 21.1513 11.9252 21.0013 11.8952C20.8337 11.8742 20.6681 11.8391 20.5063 11.7902C20.3194 11.733 20.1386 11.6576 19.9663 11.5652C19.7773 11.4621 19.6053 11.3306 19.4563 11.1752C19.3118 11.0295 19.1904 10.8626 19.0963 10.6802C18.9906 10.4626 18.9198 10.2298 18.8863 9.99019C18.8151 9.66377 18.7649 9.33308 18.7363 9.0002C18.7363 8.6102 18.7363 8.1102 18.7363 7.5002V7.8002C18.7363 7.4102 18.7363 7.0052 18.7363 6.5852C18.7073 6.17676 18.595 5.77859 18.4063 5.4152C18.1987 5.04025 17.8927 4.72908 17.5213 4.5152C16.9932 4.24037 16.4067 4.09633 15.8113 4.0952V3.8252H16.2613C16.4485 3.83998 16.6341 3.87008 16.8163 3.9152C17.0209 3.96528 17.2214 4.03045 17.4163 4.1102C17.6293 4.21096 17.8264 4.34235 18.0013 4.5002C18.2757 4.70546 18.5096 4.95974 18.6913 5.2502C18.8578 5.52407 18.9794 5.82286 19.0513 6.1352C19.1301 6.49017 19.1752 6.85176 19.1863 7.2152C19.1863 7.6052 19.1863 8.7152 19.1863 8.7152C19.1818 9.13259 19.2169 9.54946 19.2913 9.9602C19.3462 10.2829 19.4802 10.587 19.6813 10.8452C19.904 11.1124 20.1867 11.3231 20.5063 11.4602C20.5902 11.511 20.6595 11.5825 20.7076 11.6679C20.7557 11.7533 20.781 11.8497 20.781 11.9477C20.781 12.0457 20.7557 12.1421 20.7076 12.2275C20.6595 12.3129 20.5902 12.3844 20.5063 12.4352C20.1885 12.5684 19.906 12.7739 19.6813 13.0352C19.4807 13.2937 19.3468 13.5977 19.2913 13.9202C19.2169 14.3309 19.1818 14.7478 19.1863 15.1652C19.1863 15.1652 19.1113 17.4752 19.0363 17.8052C18.9644 18.1175 18.8428 18.4163 18.6763 18.6902C18.5055 19.0011 18.2763 19.2761 18.0013 19.5002C17.8236 19.6422 17.6266 19.7583 17.4163 19.8452C17.2211 19.9242 17.0206 19.9893 16.8163 20.0402C16.6339 20.0846 16.4484 20.1146 16.2613 20.1302H15.8113L15.7363 19.8002Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M8.36977 4.19987C7.77422 4.19983 7.18752 4.34393 6.65977 4.61987C6.28789 4.83314 5.98176 5.14447 5.77477 5.51987C5.58607 5.88327 5.47377 6.28144 5.44477 6.68987C5.44477 7.10987 5.44477 7.51487 5.44477 7.90487V7.60487C5.44477 8.17487 5.44477 8.65487 5.44477 9.10487C5.4367 9.44148 5.40664 9.77719 5.35477 10.1099C5.32157 10.3495 5.25069 10.5824 5.14477 10.7999C5.05115 10.9825 4.9297 11.1495 4.78477 11.2949C4.63576 11.4502 4.46375 11.5818 4.27477 11.6849C4.10175 11.7756 3.92104 11.8509 3.73477 11.9099C3.5481 11.9581 3.35722 11.9883 3.16477 11.9999C2.99977 11.9999 2.99977 11.9999 3.16477 11.9999C3.33243 12.0209 3.49802 12.056 3.65977 12.1049C3.84667 12.1621 4.02753 12.2375 4.19977 12.3299C4.38875 12.433 4.56076 12.5645 4.70977 12.7199C4.85433 12.8655 4.97574 13.0325 5.06977 13.2149C5.17546 13.4325 5.24633 13.6653 5.27977 13.9049C5.33155 14.2376 5.36161 14.5733 5.36977 14.9099C5.36977 15.2999 5.36977 15.7999 5.36977 16.4099V16.1099C5.36977 16.4999 5.36977 16.9049 5.36977 17.3249C5.39877 17.7333 5.51107 18.1315 5.69977 18.4949C5.90738 18.8698 6.21337 19.181 6.58477 19.3949C7.11294 19.6697 7.69937 19.8137 8.29477 19.8149V20.1749H7.84477C7.65762 20.1601 7.472 20.13 7.28977 20.0849C7.08522 20.0348 6.88467 19.9696 6.68977 19.8899C6.50317 19.7831 6.33165 19.652 6.17977 19.4999C5.90544 19.2946 5.67149 19.0403 5.48977 18.7499C5.32326 18.476 5.20172 18.1772 5.12977 17.8649C5.05104 17.5099 5.00584 17.1483 4.99477 16.7849C4.99477 16.3949 4.99477 15.2849 4.99477 15.2849C4.9993 14.8675 4.96415 14.4506 4.88977 14.0399C4.84473 13.6962 4.71025 13.3703 4.49977 13.0949C4.27712 12.8277 3.99442 12.6169 3.67477 12.4799C3.59094 12.4291 3.52162 12.3575 3.47352 12.2721C3.42541 12.1867 3.40014 12.0904 3.40014 11.9924C3.40014 11.8944 3.42541 11.798 3.47352 11.7126C3.52162 11.6272 3.59094 11.5557 3.67477 11.5049C3.99261 11.3716 4.27507 11.1662 4.49977 10.9049C4.70038 10.6463 4.83432 10.3424 4.88977 10.0199C4.96415 9.60914 4.9993 9.19226 4.99477 8.77487C4.99477 8.77487 5.06977 6.46487 5.14477 6.13487C5.21672 5.82254 5.33826 5.52375 5.50477 5.24987C5.68177 4.96052 5.91059 4.70627 6.17977 4.49987C6.35754 4.35789 6.55449 4.24174 6.76477 4.15487C6.95996 4.07592 7.16045 4.01076 7.36477 3.95987C7.54715 3.91551 7.73271 3.88542 7.91977 3.86987H8.36977V4.19987Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/resource_group.svg b/static/img/style_guide/iconography_assets/tree_view_icons/resource_group.svg
new file mode 100644
index 0000000..a2ed43e
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/resource_group.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7543 13.6199H5.8493C5.32739 13.6199 4.9043 14.043 4.9043 14.5649V19.4699C4.9043 19.9918 5.32739 20.4149 5.8493 20.4149H10.7543C11.2762 20.4149 11.6993 19.9918 11.6993 19.4699V14.5649C11.6993 14.043 11.2762 13.6199 10.7543 13.6199Z" fill="#DEF4FD"/>
+<path d="M10.754 14.1897C10.8534 14.1897 10.9488 14.2292 11.0192 14.2995C11.0895 14.3699 11.129 14.4652 11.129 14.5647V19.4997C11.129 19.5992 11.0895 19.6945 11.0192 19.7649C10.9488 19.8352 10.8534 19.8747 10.754 19.8747H5.83398C5.73453 19.8747 5.63915 19.8352 5.56882 19.7649C5.49849 19.6945 5.45898 19.5992 5.45898 19.4997V14.5647C5.45898 14.4652 5.49849 14.3699 5.56882 14.2995C5.63915 14.2292 5.73453 14.1897 5.83398 14.1897H10.754ZM10.754 13.0647H5.83398C5.43616 13.0647 5.05463 13.2227 4.77332 13.504C4.49202 13.7853 4.33398 14.1669 4.33398 14.5647V19.4997C4.33398 19.8975 4.49202 20.2791 4.77332 20.5604C5.05463 20.8417 5.43616 20.9997 5.83398 20.9997H10.754C11.1518 20.9997 11.5333 20.8417 11.8146 20.5604C12.096 20.2791 12.254 19.8975 12.254 19.4997V14.5647C12.254 14.1669 12.096 13.7853 11.8146 13.504C11.5333 13.2227 11.1518 13.0647 10.754 13.0647Z" fill="#2195E7"/>
+<path d="M10.7543 4.61987H5.8493C5.32739 4.61987 4.9043 5.04296 4.9043 5.56487V10.4699C4.9043 10.9918 5.32739 11.4149 5.8493 11.4149H10.7543C11.2762 11.4149 11.6993 10.9918 11.6993 10.4699V5.56487C11.6993 5.04296 11.2762 4.61987 10.7543 4.61987Z" fill="#DEF4FD"/>
+<path d="M10.754 5.1897C10.8534 5.1897 10.9488 5.22921 11.0192 5.29953C11.0895 5.36986 11.129 5.46524 11.129 5.5647V10.4997C11.129 10.5992 11.0895 10.6945 11.0192 10.7649C10.9488 10.8352 10.8534 10.8747 10.754 10.8747H5.83398C5.73453 10.8747 5.63915 10.8352 5.56882 10.7649C5.49849 10.6945 5.45898 10.5992 5.45898 10.4997V5.5647C5.45898 5.46524 5.49849 5.36986 5.56882 5.29953C5.63915 5.22921 5.73453 5.1897 5.83398 5.1897H10.754ZM10.754 4.0647H5.83398C5.43616 4.0647 5.05463 4.22273 4.77332 4.50404C4.49202 4.78534 4.33398 5.16687 4.33398 5.5647V10.4997C4.33398 10.8975 4.49202 11.2791 4.77332 11.5604C5.05463 11.8417 5.43616 11.9997 5.83398 11.9997H10.754C11.1518 11.9997 11.5333 11.8417 11.8146 11.5604C12.096 11.2791 12.254 10.8975 12.254 10.4997V5.5647C12.254 5.16687 12.096 4.78534 11.8146 4.50404C11.5333 4.22273 11.1518 4.0647 10.754 4.0647Z" fill="#2195E7"/>
+<path d="M19.7543 13.6199H14.8493C14.3274 13.6199 13.9043 14.043 13.9043 14.5649V19.4699C13.9043 19.9918 14.3274 20.4149 14.8493 20.4149H19.7543C20.2762 20.4149 20.6993 19.9918 20.6993 19.4699V14.5649C20.6993 14.043 20.2762 13.6199 19.7543 13.6199Z" fill="#DEF4FD"/>
+<path d="M19.754 14.1897C19.8534 14.1897 19.9488 14.2292 20.0192 14.2995C20.0895 14.3699 20.129 14.4652 20.129 14.5647V19.4997C20.129 19.5992 20.0895 19.6945 20.0192 19.7649C19.9488 19.8352 19.8534 19.8747 19.754 19.8747H14.834C14.7345 19.8747 14.6391 19.8352 14.5688 19.7649C14.4985 19.6945 14.459 19.5992 14.459 19.4997V14.5647C14.459 14.4652 14.4985 14.3699 14.5688 14.2995C14.6391 14.2292 14.7345 14.1897 14.834 14.1897H19.754ZM19.754 13.0647H14.834C14.4362 13.0647 14.0546 13.2227 13.7733 13.504C13.492 13.7853 13.334 14.1669 13.334 14.5647V19.4997C13.334 19.8975 13.492 20.2791 13.7733 20.5604C14.0546 20.8417 14.4362 20.9997 14.834 20.9997H19.754C20.1518 20.9997 20.5333 20.8417 20.8146 20.5604C21.0959 20.2791 21.254 19.8975 21.254 19.4997V14.5647C21.254 14.1669 21.0959 13.7853 20.8146 13.504C20.5333 13.2227 20.1518 13.0647 19.754 13.0647Z" fill="#2195E7"/>
+<path d="M19.7543 4.61987H14.8493C14.3274 4.61987 13.9043 5.04296 13.9043 5.56487V10.4699C13.9043 10.9918 14.3274 11.4149 14.8493 11.4149H19.7543C20.2762 11.4149 20.6993 10.9918 20.6993 10.4699V5.56487C20.6993 5.04296 20.2762 4.61987 19.7543 4.61987Z" fill="#FFEEEE"/>
+<path d="M19.754 5.1897C19.8534 5.1897 19.9488 5.22921 20.0192 5.29953C20.0895 5.36986 20.129 5.46524 20.129 5.5647V10.4997C20.129 10.5992 20.0895 10.6945 20.0192 10.7649C19.9488 10.8352 19.8534 10.8747 19.754 10.8747H14.834C14.7345 10.8747 14.6391 10.8352 14.5688 10.7649C14.4985 10.6945 14.459 10.5992 14.459 10.4997V5.5647C14.459 5.46524 14.4985 5.36986 14.5688 5.29953C14.6391 5.22921 14.7345 5.1897 14.834 5.1897H19.754ZM19.754 4.0647H14.834C14.4362 4.0647 14.0546 4.22273 13.7733 4.50404C13.492 4.78534 13.334 5.16687 13.334 5.5647V10.4997C13.334 10.8975 13.492 11.2791 13.7733 11.5604C14.0546 11.8417 14.4362 11.9997 14.834 11.9997H19.754C20.1518 11.9997 20.5333 11.8417 20.8146 11.5604C21.0959 11.2791 21.254 10.8975 21.254 10.4997V5.5647C21.254 5.16687 21.0959 4.78534 20.8146 4.50404C20.5333 4.22273 20.1518 4.0647 19.754 4.0647Z" fill="#BD4949"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/role.svg b/static/img/style_guide/iconography_assets/tree_view_icons/role.svg
new file mode 100644
index 0000000..97a9b9c
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/role.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.96063 18.6901C3.95323 18.5752 3.95323 18.46 3.96063 18.3451C4.02729 16.2748 4.91003 14.3149 6.41625 12.893C7.92247 11.4711 9.92992 10.7025 12.0006 10.7551C14.0764 10.6986 16.0899 11.4673 17.5998 12.8929C19.1097 14.3185 19.9929 16.2845 20.0556 18.3601C20.063 18.475 20.063 18.5902 20.0556 18.7051L3.96063 18.6901Z" fill="#BFE1F1"/>
+<path d="M12 11.3105C13.8905 11.256 15.7284 11.9367 17.1272 13.2096C18.5259 14.4825 19.3765 16.2483 19.5 18.1355H4.5C4.62348 16.2483 5.47408 14.4825 6.87285 13.2096C8.27162 11.9367 10.1095 11.256 12 11.3105ZM12 10.1855C9.77449 10.125 7.61598 10.9504 5.99873 12.4805C4.38148 14.0105 3.43779 16.12 3.375 18.3455C3.38656 18.652 3.41661 18.9576 3.465 19.2605H20.52C20.5684 18.9576 20.5984 18.652 20.61 18.3455C20.5472 16.1227 19.6056 14.0155 17.9916 12.4859C16.3776 10.9563 14.223 10.129 12 10.1855Z" fill="#2C66BD"/>
+<path d="M12.0004 13.2601C14.1957 13.2601 15.9754 11.4804 15.9754 9.28506C15.9754 7.08973 14.1957 5.31006 12.0004 5.31006C9.80506 5.31006 8.02539 7.08973 8.02539 9.28506C8.02539 11.4804 9.80506 13.2601 12.0004 13.2601Z" fill="#BFE1F1"/>
+<path d="M12 5.86523C12.6728 5.8682 13.3296 6.07041 13.8876 6.44636C14.4456 6.8223 14.8797 7.35512 15.1351 7.97756C15.3905 8.6 15.4558 9.28415 15.3227 9.94366C15.1897 10.6032 14.8642 11.2085 14.3874 11.6832C13.9106 12.1579 13.3039 12.4807 12.6438 12.6109C11.9837 12.741 11.2998 12.6727 10.6785 12.4146C10.0572 12.1564 9.52631 11.72 9.15282 11.1604C8.77934 10.6008 8.58001 9.94304 8.58 9.27023C8.58397 8.3658 8.94604 7.49975 9.58698 6.86162C10.2279 6.22349 11.0956 5.86523 12 5.86523ZM12 4.74023C11.11 4.74023 10.24 5.00415 9.49994 5.49862C8.75991 5.99309 8.18314 6.69589 7.84254 7.51816C7.50195 8.34043 7.41283 9.24523 7.58647 10.1181C7.7601 10.9911 8.18869 11.7929 8.81802 12.4222C9.44736 13.0516 10.2492 13.4801 11.1221 13.6538C11.995 13.8274 12.8998 13.7383 13.7221 13.3977C14.5443 13.0571 15.2471 12.4803 15.7416 11.7403C16.2361 11.0003 16.5 10.1303 16.5 9.24023C16.5 8.04676 16.0259 6.90217 15.182 6.05825C14.3381 5.21434 13.1935 4.74023 12 4.74023Z" fill="#2C66BD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/rule-1.svg b/static/img/style_guide/iconography_assets/tree_view_icons/rule-1.svg
new file mode 100644
index 0000000..8dec098
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/rule-1.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3695 7.48511H3.64453V16.5001H20.3695V7.48511Z" fill="#FEE07B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.08203 7.48511C3.08203 7.17445 3.33387 6.92261 3.64453 6.92261H20.3695C20.6802 6.92261 20.932 7.17445 20.932 7.48511V16.5001C20.932 16.8108 20.6802 17.0626 20.3695 17.0626H3.64453C3.33387 17.0626 3.08203 16.8108 3.08203 16.5001V7.48511ZM4.20703 8.04761V15.9376H19.807V8.04761H4.20703Z" fill="#DDA91D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3652 7.49292C16.6759 7.49292 16.9277 7.74476 16.9277 8.05542V13.3204C16.9277 13.6311 16.6759 13.8829 16.3652 13.8829C16.0546 13.8829 15.8027 13.6311 15.8027 13.3204V8.05542C15.8027 7.74476 16.0546 7.49292 16.3652 7.49292Z" fill="#DDA91D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3652 7.49292C10.6759 7.49292 10.9277 7.74476 10.9277 8.05542V13.3204C10.9277 13.6311 10.6759 13.8829 10.3652 13.8829C10.0546 13.8829 9.80273 13.6311 9.80273 13.3204V8.05542C9.80273 7.74476 10.0546 7.49292 10.3652 7.49292Z" fill="#DDA91D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3652 7.49292C13.6759 7.49292 13.9277 7.74476 13.9277 8.05542V11.8204C13.9277 12.1311 13.6759 12.3829 13.3652 12.3829C13.0546 12.3829 12.8027 12.1311 12.8027 11.8204V8.05542C12.8027 7.74476 13.0546 7.49292 13.3652 7.49292Z" fill="#DDA91D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.36523 7.49292C7.67589 7.49292 7.92773 7.74476 7.92773 8.05542V11.8204C7.92773 12.1311 7.67589 12.3829 7.36523 12.3829C7.05457 12.3829 6.80273 12.1311 6.80273 11.8204V8.05542C6.80273 7.74476 7.05457 7.49292 7.36523 7.49292Z" fill="#DDA91D"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/schema.svg b/static/img/style_guide/iconography_assets/tree_view_icons/schema.svg
new file mode 100644
index 0000000..ef5c3a5
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/schema.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9936 3.63139L3.625 12L11.9936 20.3686L20.3622 12L11.9936 3.63139Z" fill="#FFEEEE"/>
+<path d="M11.999 4.49972L19.499 11.9997L11.999 19.4997L4.49898 11.9997L11.999 4.49972ZM11.999 2.83472L2.83398 11.9997L11.999 21.1647L21.164 11.9997L11.999 2.83472Z" fill="#BD4949"/>
+<path d="M12.0041 15.2987L15.3027 12L12.0041 8.70135L8.70543 12L12.0041 15.2987Z" fill="#BD4949"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/server.svg b/static/img/style_guide/iconography_assets/tree_view_icons/server.svg
new file mode 100644
index 0000000..5ed5625
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/server.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7011 3.90015H6.31609C5.37997 3.90015 4.62109 4.65902 4.62109 5.59515V6.85515C4.62109 7.79127 5.37997 8.55015 6.31609 8.55015H17.7011C18.6372 8.55015 19.3961 7.79127 19.3961 6.85515V5.59515C19.3961 4.65902 18.6372 3.90015 17.7011 3.90015Z" fill="#F2F2F2"/>
+<path d="M17.7008 4.49997C17.9991 4.49997 18.2853 4.6185 18.4963 4.82948C18.7073 5.04045 18.8258 5.3266 18.8258 5.62497V6.89997C18.8258 7.19834 18.7073 7.48449 18.4963 7.69547C18.2853 7.90644 17.9991 8.02497 17.7008 8.02497H6.30078C6.00241 8.02497 5.71626 7.90644 5.50529 7.69547C5.29431 7.48449 5.17578 7.19834 5.17578 6.89997V5.59497C5.1836 5.30183 5.30557 5.02333 5.51571 4.8188C5.72584 4.61427 6.00754 4.49987 6.30078 4.49997H17.7008ZM17.7008 3.37497H6.30078C5.70404 3.37497 5.13175 3.61202 4.70979 4.03398C4.28783 4.45594 4.05078 5.02823 4.05078 5.62497V6.89997C4.05078 7.49671 4.28783 8.069 4.70979 8.49096C5.13175 8.91292 5.70404 9.14997 6.30078 9.14997H17.7008C18.2975 9.14997 18.8698 8.91292 19.2918 8.49096C19.7137 8.069 19.9508 7.49671 19.9508 6.89997V5.59497C19.9508 4.99823 19.7137 4.42594 19.2918 4.00398C18.8698 3.58202 18.2975 3.34497 17.7008 3.34497V3.37497Z" fill="#AAAAAA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.40625 5.66235H9.55625V6.78735H6.40625V5.66235Z" fill="#AAAAAA"/>
+<path d="M6.30116 9.67529H17.7012C18.1507 9.67529 18.5818 9.85387 18.8997 10.1717C19.2176 10.4896 19.3962 10.9208 19.3962 11.3703V12.6453C19.3962 12.8672 19.3522 13.0869 19.2669 13.2917C19.1815 13.4965 19.0564 13.6824 18.8988 13.8386C18.7412 13.9948 18.5542 14.1182 18.3487 14.2017C18.1431 14.2853 17.923 14.3273 17.7012 14.3253H6.30116C6.07927 14.3253 5.85958 14.2814 5.65477 14.196C5.44996 14.1106 5.26409 13.9855 5.10789 13.8279C4.95169 13.6703 4.82825 13.4834 4.74471 13.2778C4.66117 13.0722 4.61918 12.8522 4.62116 12.6303V11.3703C4.62114 10.9233 4.79766 10.4945 5.1123 10.177C5.42694 9.85957 5.85422 9.67925 6.30116 9.67529Z" fill="#F2F2F2"/>
+<path d="M17.7008 10.2297C17.9991 10.2297 18.2853 10.3483 18.4963 10.5592C18.7073 10.7702 18.8258 11.0564 18.8258 11.3547V12.6297C18.8258 12.9281 18.7073 13.2143 18.4963 13.4252C18.2853 13.6362 17.9991 13.7547 17.7008 13.7547H6.30078C6.00241 13.7547 5.71626 13.6362 5.50529 13.4252C5.29431 13.2143 5.17578 12.9281 5.17578 12.6297V11.3547C5.17578 11.0564 5.29431 10.7702 5.50529 10.5592C5.71626 10.3483 6.00241 10.2297 6.30078 10.2297H17.7008ZM17.7008 9.10474H6.30078C5.70404 9.10474 5.13175 9.34179 4.70979 9.76375C4.28783 10.1857 4.05078 10.758 4.05078 11.3547V12.6297C4.05078 13.2265 4.28783 13.7988 4.70979 14.2207C5.13175 14.6427 5.70404 14.8797 6.30078 14.8797H17.7008C18.2975 14.8797 18.8698 14.6427 19.2918 14.2207C19.7137 13.7988 19.9508 13.2265 19.9508 12.6297V11.3547C19.9508 10.758 19.7137 10.1857 19.2918 9.76375C18.8698 9.34179 18.2975 9.10474 17.7008 9.10474Z" fill="#7B7B97"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.40625 11.4375H9.55625V12.5625H6.40625V11.4375Z" fill="#7B7B97"/>
+<path d="M6.30047 15.45H17.7005C18.146 15.45 18.5733 15.627 18.8884 15.9421C19.2035 16.2571 19.3805 16.6845 19.3805 17.13V18.405C19.3824 18.6269 19.3405 18.847 19.2569 19.0525C19.1734 19.2581 19.0499 19.4451 18.8937 19.6027C18.7375 19.7603 18.5517 19.8854 18.3469 19.9707C18.142 20.0561 17.9224 20.1 17.7005 20.1H6.30047C5.85093 20.1 5.4198 19.9214 5.10192 19.6036C4.78405 19.2857 4.60547 18.8546 4.60547 18.405V17.13C4.60546 16.9081 4.64941 16.6884 4.73477 16.4836C4.82014 16.2788 4.94523 16.0929 5.10282 15.9367C5.26042 15.7805 5.44739 15.6571 5.65295 15.5736C5.85851 15.49 6.07859 15.448 6.30047 15.45Z" fill="#F2F2F2"/>
+<path d="M17.7008 16.0198C17.9991 16.0198 18.2853 16.1383 18.4963 16.3493C18.7073 16.5603 18.8258 16.8464 18.8258 17.1448V18.4198C18.8258 18.7181 18.7073 19.0043 18.4963 19.2153C18.2853 19.4262 17.9991 19.5448 17.7008 19.5448H6.30078C6.00241 19.5448 5.71626 19.4262 5.50529 19.2153C5.29431 19.0043 5.17578 18.7181 5.17578 18.4198V17.1448C5.17578 16.8464 5.29431 16.5603 5.50529 16.3493C5.71626 16.1383 6.00241 16.0198 6.30078 16.0198H17.7008ZM17.7008 14.8948H6.30078C5.70404 14.8948 5.13175 15.1318 4.70979 15.5538C4.28783 15.9757 4.05078 16.548 4.05078 17.1448V18.4198C4.05078 19.0165 4.28783 19.5888 4.70979 20.0108C5.13175 20.4327 5.70404 20.6698 6.30078 20.6698H17.7008C18.2975 20.6698 18.8698 20.4327 19.2918 20.0108C19.7137 19.5888 19.9508 19.0165 19.9508 18.4198V17.1448C19.9508 16.548 19.7137 15.9757 19.2918 15.5538C18.8698 15.1318 18.2975 14.8948 17.7008 14.8948Z" fill="#AAAAAA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.40625 17.2126H9.55625V18.3376H6.40625V17.2126Z" fill="#AAAAAA"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/server_group.svg b/static/img/style_guide/iconography_assets/tree_view_icons/server_group.svg
new file mode 100644
index 0000000..d4bccec
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/server_group.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7011 3.90015H6.31609C5.37997 3.90015 4.62109 4.65902 4.62109 5.59515V6.85515C4.62109 7.79127 5.37997 8.55015 6.31609 8.55015H17.7011C18.6372 8.55015 19.3961 7.79127 19.3961 6.85515V5.59515C19.3961 4.65902 18.6372 3.90015 17.7011 3.90015Z" fill="#F2F2F2"/>
+<path d="M17.7008 4.49997C17.9991 4.49997 18.2853 4.6185 18.4963 4.82948C18.7073 5.04045 18.8258 5.3266 18.8258 5.62497V6.89997C18.8258 7.19834 18.7073 7.48449 18.4963 7.69547C18.2853 7.90644 17.9991 8.02497 17.7008 8.02497H6.30078C6.00241 8.02497 5.71626 7.90644 5.50529 7.69547C5.29431 7.48449 5.17578 7.19834 5.17578 6.89997V5.59497C5.1836 5.30183 5.30557 5.02333 5.51571 4.8188C5.72584 4.61427 6.00754 4.49987 6.30078 4.49997H17.7008ZM17.7008 3.37497H6.30078C5.70404 3.37497 5.13175 3.61202 4.70979 4.03398C4.28783 4.45594 4.05078 5.02823 4.05078 5.62497V6.89997C4.05078 7.49671 4.28783 8.069 4.70979 8.49096C5.13175 8.91292 5.70404 9.14997 6.30078 9.14997H17.7008C18.2975 9.14997 18.8698 8.91292 19.2918 8.49096C19.7137 8.069 19.9508 7.49671 19.9508 6.89997V5.59497C19.9508 4.99823 19.7137 4.42594 19.2918 4.00398C18.8698 3.58202 18.2975 3.34497 17.7008 3.34497V3.37497Z" fill="#7B7B97"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.40625 5.66235H9.55625V6.78735H6.40625V5.66235Z" fill="#7B7B97"/>
+<path d="M17.7011 9.67529H6.31609C5.37997 9.67529 4.62109 10.4342 4.62109 11.3703V12.6303C4.62109 13.5664 5.37997 14.3253 6.31609 14.3253H17.7011C18.6372 14.3253 19.3961 13.5664 19.3961 12.6303V11.3703C19.3961 10.4342 18.6372 9.67529 17.7011 9.67529Z" fill="#F2F2F2"/>
+<path d="M17.7008 10.2297C17.9991 10.2297 18.2853 10.3483 18.4963 10.5592C18.7073 10.7702 18.8258 11.0564 18.8258 11.3547V12.6297C18.8258 12.9281 18.7073 13.2143 18.4963 13.4252C18.2853 13.6362 17.9991 13.7547 17.7008 13.7547H6.30078C6.00241 13.7547 5.71626 13.6362 5.50529 13.4252C5.29431 13.2143 5.17578 12.9281 5.17578 12.6297V11.3547C5.17578 11.0564 5.29431 10.7702 5.50529 10.5592C5.71626 10.3483 6.00241 10.2297 6.30078 10.2297H17.7008ZM17.7008 9.10474H6.30078C5.70404 9.10474 5.13175 9.34179 4.70979 9.76375C4.28783 10.1857 4.05078 10.758 4.05078 11.3547V12.6297C4.05078 13.2265 4.28783 13.7988 4.70979 14.2207C5.13175 14.6427 5.70404 14.8797 6.30078 14.8797H17.7008C18.2975 14.8797 18.8698 14.6427 19.2918 14.2207C19.7137 13.7988 19.9508 13.2265 19.9508 12.6297V11.3547C19.9508 10.758 19.7137 10.1857 19.2918 9.76375C18.8698 9.34179 18.2975 9.10474 17.7008 9.10474Z" fill="#7B7B97"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.40625 11.4375H9.55625V12.5625H6.40625V11.4375Z" fill="#7B7B97"/>
+<path d="M17.7011 15.45H6.31609C5.37997 15.45 4.62109 16.2088 4.62109 17.145V18.405C4.62109 19.3411 5.37997 20.0999 6.31609 20.0999H17.7011C18.6372 20.0999 19.3961 19.3411 19.3961 18.405V17.145C19.3961 16.2088 18.6372 15.45 17.7011 15.45Z" fill="#F2F2F2"/>
+<path d="M17.7008 16.0198C17.9991 16.0198 18.2853 16.1383 18.4963 16.3493C18.7073 16.5603 18.8258 16.8464 18.8258 17.1448V18.4198C18.8258 18.7181 18.7073 19.0043 18.4963 19.2153C18.2853 19.4262 17.9991 19.5448 17.7008 19.5448H6.30078C6.00241 19.5448 5.71626 19.4262 5.50529 19.2153C5.29431 19.0043 5.17578 18.7181 5.17578 18.4198V17.1448C5.17578 16.8464 5.29431 16.5603 5.50529 16.3493C5.71626 16.1383 6.00241 16.0198 6.30078 16.0198H17.7008ZM17.7008 14.8948H6.30078C5.70404 14.8948 5.13175 15.1318 4.70979 15.5538C4.28783 15.9757 4.05078 16.548 4.05078 17.1448V18.4198C4.05078 19.0165 4.28783 19.5888 4.70979 20.0108C5.13175 20.4327 5.70404 20.6698 6.30078 20.6698H17.7008C18.2975 20.6698 18.8698 20.4327 19.2918 20.0108C19.7137 19.5888 19.9508 19.0165 19.9508 18.4198V17.1448C19.9508 16.548 19.7137 15.9757 19.2918 15.5538C18.8698 15.1318 18.2975 14.8948 17.7008 14.8948Z" fill="#7B7B97"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.40625 17.2126H9.55625V18.3376H6.40625V17.2126Z" fill="#7B7B97"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/serverbad.svg b/static/img/style_guide/iconography_assets/tree_view_icons/serverbad.svg
new file mode 100644
index 0000000..9187432
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/serverbad.svg
@@ -0,0 +1,13 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.17609 4.34972H16.5011C16.7249 4.34171 16.9482 4.37815 17.1578 4.45694C17.3675 4.53572 17.5595 4.65528 17.7227 4.80871C17.8859 4.96214 18.0171 5.1464 18.1086 5.35082C18.2002 5.55525 18.2503 5.7758 18.2561 5.99972V7.27471C18.2603 7.50496 18.2176 7.73365 18.1305 7.94682C18.0434 8.16 17.9138 8.3532 17.7495 8.51462C17.5853 8.67604 17.3899 8.80231 17.1753 8.88571C16.9606 8.96912 16.7312 9.00791 16.5011 8.99972H5.17609C4.73053 8.99972 4.30322 8.82272 3.98815 8.50765C3.67309 8.19259 3.49609 7.76528 3.49609 7.31972V5.99972C3.50774 5.5606 3.6894 5.14316 4.0028 4.83536C4.31619 4.52756 4.73684 4.35345 5.17609 4.34972Z" fill="#F2F2F2"/>
+<path d="M16.5758 4.905C16.869 4.9049 17.1507 5.0193 17.3609 5.22383C17.571 5.42836 17.693 5.70686 17.7008 6V7.275C17.7008 7.57337 17.5823 7.85952 17.3713 8.07049C17.1603 8.28147 16.8741 8.4 16.5758 8.4H5.17578C4.87741 8.4 4.59126 8.28147 4.38029 8.07049C4.16931 7.85952 4.05078 7.57337 4.05078 7.275V6C4.05078 5.70163 4.16931 5.41548 4.38029 5.2045C4.59126 4.99353 4.87741 4.875 5.17578 4.875H16.5758V4.905ZM16.5758 3.75H5.17578C4.57904 3.75 4.00675 3.98705 3.58479 4.40901C3.16283 4.83097 2.92578 5.40326 2.92578 6V7.275C2.92578 7.87174 3.16283 8.44403 3.58479 8.86599C4.00675 9.28795 4.57904 9.525 5.17578 9.525H16.5758C17.1725 9.525 17.7448 9.28795 18.1668 8.86599C18.5887 8.44403 18.8258 7.87174 18.8258 7.275V6C18.8258 5.40326 18.5887 4.83097 18.1668 4.40901C17.7448 3.98705 17.1725 3.75 16.5758 3.75Z" fill="#AAAAAA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.28125 6.11206H8.43125V7.23706H5.28125V6.11206Z" fill="#AAAAAA"/>
+<path d="M5.17609 10.125H16.5011C16.9506 10.125 17.3818 10.3036 17.6996 10.6215C18.0175 10.9393 18.1961 11.3705 18.1961 11.82V13.095C18.1961 13.3169 18.1522 13.5366 18.0668 13.7414C17.9814 13.9462 17.8563 14.1321 17.6987 14.2883C17.5411 14.4445 17.3542 14.5679 17.1486 14.6514C16.943 14.735 16.723 14.777 16.5011 14.775H5.17609C4.73053 14.775 4.30322 14.598 3.98815 14.2829C3.67309 13.9679 3.49609 13.5406 3.49609 13.095V11.82C3.49608 11.373 3.6726 10.9442 3.98723 10.6267C4.30187 10.3093 4.72916 10.129 5.17609 10.125Z" fill="#F2F2F2"/>
+<path d="M16.5758 10.6946C16.8741 10.6946 17.1603 10.8131 17.3713 11.0241C17.5823 11.2351 17.7008 11.5212 17.7008 11.8196V13.0946C17.7008 13.3929 17.5823 13.6791 17.3713 13.8901C17.1603 14.1011 16.8741 14.2196 16.5758 14.2196H5.17578C4.87741 14.2196 4.59126 14.1011 4.38029 13.8901C4.16931 13.6791 4.05078 13.3929 4.05078 13.0946V11.8196C4.05078 11.5212 4.16931 11.2351 4.38029 11.0241C4.59126 10.8131 4.87741 10.6946 5.17578 10.6946H16.5758ZM16.5758 9.56958H5.17578C4.57904 9.56958 4.00675 9.80663 3.58479 10.2286C3.16283 10.6505 2.92578 11.2228 2.92578 11.8196V13.0946C2.92578 13.6913 3.16283 14.2636 3.58479 14.6856C4.00675 15.1075 4.57904 15.3446 5.17578 15.3446H16.5758C17.1725 15.3446 17.7448 15.1075 18.1668 14.6856C18.5887 14.2636 18.8258 13.6913 18.8258 13.0946V11.8196C18.8258 11.2228 18.5887 10.6505 18.1668 10.2286C17.7448 9.80663 17.1725 9.56958 16.5758 9.56958Z" fill="#7B7B97"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.28125 11.8872H8.43125V13.0122H5.28125V11.8872Z" fill="#7B7B97"/>
+<path d="M5.17609 15.8999H16.5011C16.9506 15.8999 17.3818 16.0785 17.6996 16.3964C18.0175 16.7142 18.1961 17.1454 18.1961 17.5949V18.8699C18.1961 19.0918 18.1522 19.3115 18.0668 19.5163C17.9814 19.7211 17.8563 19.907 17.6987 20.0632C17.5411 20.2194 17.3542 20.3428 17.1486 20.4264C16.943 20.5099 16.723 20.5519 16.5011 20.5499H5.17609C4.73053 20.5499 4.30322 20.3729 3.98815 20.0578C3.67309 19.7428 3.49609 19.3155 3.49609 18.8699V17.5949C3.49608 17.1479 3.6726 16.7191 3.98723 16.4016C4.30187 16.0842 4.72916 15.9039 5.17609 15.8999Z" fill="#F2F2F2"/>
+<path d="M16.5758 16.5C16.8741 16.5 17.1603 16.6185 17.3713 16.8295C17.5823 17.0405 17.7008 17.3266 17.7008 17.625V18.9C17.7008 19.1984 17.5823 19.4845 17.3713 19.6955C17.1603 19.9065 16.8741 20.025 16.5758 20.025H5.17578C4.87741 20.025 4.59126 19.9065 4.38029 19.6955C4.16931 19.4845 4.05078 19.1984 4.05078 18.9V17.625C4.05078 17.3266 4.16931 17.0405 4.38029 16.8295C4.59126 16.6185 4.87741 16.5 5.17578 16.5H16.5758ZM16.5758 15.375H5.17578C4.57904 15.375 4.00675 15.6121 3.58479 16.034C3.16283 16.456 2.92578 17.0283 2.92578 17.625V18.9C2.92578 19.4967 3.16283 20.069 3.58479 20.491C4.00675 20.9129 4.57904 21.15 5.17578 21.15H16.5758C17.1725 21.15 17.7448 20.9129 18.1668 20.491C18.5887 20.069 18.8258 19.4967 18.8258 18.9V17.625C18.8258 17.0283 18.5887 16.456 18.1668 16.034C17.7448 15.6121 17.1725 15.375 16.5758 15.375Z" fill="#AAAAAA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.28125 17.6624H8.43125V18.7874H5.28125V17.6624Z" fill="#AAAAAA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8717 2.08439C22.311 2.52373 22.311 3.23604 21.8717 3.67538L17.3717 8.17538C16.9323 8.61472 16.22 8.61472 15.7807 8.17538C15.3413 7.73604 15.3413 7.02373 15.7807 6.58439L20.2807 2.08439C20.72 1.64505 21.4323 1.64505 21.8717 2.08439Z" fill="#D0021B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7807 2.08439C16.22 1.64505 16.9323 1.64505 17.3717 2.08439L21.8717 6.58439C22.311 7.02373 22.311 7.73604 21.8717 8.17538C21.4323 8.61472 20.72 8.61472 20.2807 8.17538L15.7807 3.67538C15.3413 3.23604 15.3413 2.52373 15.7807 2.08439Z" fill="#D0021B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/sub_partition_table.svg b/static/img/style_guide/iconography_assets/tree_view_icons/sub_partition_table.svg
new file mode 100644
index 0000000..73b194a
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/sub_partition_table.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 15.1499V6.1499C3.75 5.2499 4.35 4.6499 5.25 4.6499H18.75C19.65 4.6499 20.25 5.2499 20.25 6.1499V15.1499H3.75Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4375 14.3999V10.6499H12.5625V14.3999H11.4375Z" fill="#C1CBD5"/>
+<path d="M18.75 4.6499H12.6H11.4H5.25C4.35 4.6499 3.75 5.2499 3.75 6.1499V9.4499V10.6499V15.1499H20.25V10.6499V9.5999V6.1499C20.25 5.2499 19.65 4.6499 18.75 4.6499ZM18.75 5.8499C18.9 5.8499 19.05 5.9999 19.05 6.1499V9.4499H12.6V5.8499H18.75ZM4.8 6.1499C4.8 5.9999 4.95 5.8499 5.1 5.8499H11.25V9.5999H4.8V6.1499ZM19.2 13.9499H4.8V10.6499H11.4H12.6H19.2V13.9499Z" fill="#2195E7"/>
+<path d="M18.75 21.75H5.25C4.35 21.75 3.75 21.15 3.75 20.25V17.25H20.25V20.25C20.25 21.15 19.65 21.75 18.75 21.75Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4375 21V16.5H12.5625V21H11.4375Z" fill="#C1CBD5"/>
+<path d="M3.75 20.2502C3.75 21.1502 4.35 21.7502 5.25 21.7502H18.75C19.65 21.7502 20.25 21.1502 20.25 20.2502V16.2002H3.75V20.2502ZM4.8 17.2502H19.05V20.2502C19.05 20.4002 18.9 20.5502 18.75 20.5502H5.25C5.1 20.5502 4.95 20.4002 4.95 20.2502L4.8 17.2502Z" fill="#2195E7"/>
+<path d="M7.49961 12.75C4.49961 12.75 2.09961 10.35 2.09961 7.5C2.09961 4.5 4.49961 2.25 7.49961 2.25C10.3496 2.25 12.7496 4.5 12.7496 7.5C12.7496 10.35 10.3496 12.75 7.49961 12.75Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49961 2.625C4.69272 2.625 2.47461 4.72083 2.47461 7.5C2.47461 10.1361 4.69982 12.375 7.49961 12.375C10.1425 12.375 12.3746 10.1429 12.3746 7.5C12.3746 4.71407 10.1495 2.625 7.49961 2.625ZM1.72461 7.5C1.72461 4.27917 4.3065 1.875 7.49961 1.875C10.5497 1.875 13.1246 4.28593 13.1246 7.5C13.1246 10.5571 10.5567 13.125 7.49961 13.125C4.2994 13.125 1.72461 10.5639 1.72461 7.5Z" fill="#34495E"/>
+<path d="M8.09922 4.6499H6.89922H5.69922V10.6499H6.89922V8.5499H8.09922C9.14922 8.5499 10.0492 7.6499 10.0492 6.5999C10.0492 5.5499 9.14922 4.6499 8.09922 4.6499ZM8.09922 7.4999H6.89922V5.6999H8.24922C8.69922 5.6999 9.14922 6.1499 9.14922 6.5999C9.14922 7.0499 8.69922 7.4999 8.09922 7.4999Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/synonym.svg b/static/img/style_guide/iconography_assets/tree_view_icons/synonym.svg
new file mode 100644
index 0000000..1902a88
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/synonym.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5304 3.91528H9.52539C8.69696 3.91528 8.02539 4.58686 8.02539 5.41528V12.9153C8.02539 13.7437 8.69696 14.4153 9.52539 14.4153H19.5304C20.3588 14.4153 21.0304 13.7437 21.0304 12.9153V5.41528C21.0304 4.58686 20.3588 3.91528 19.5304 3.91528Z" fill="#C8FAFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9883 14.4153V8.41528H15.1133V14.4153H13.9883Z" fill="#5997AB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9883 9.16528V3.91528H15.1133V9.16528H13.9883Z" fill="#5997AB"/>
+<path d="M19.5004 5.04028C19.5998 5.04028 19.6952 5.07979 19.7656 5.15012C19.8359 5.22044 19.8754 5.31583 19.8754 5.41528V12.9153C19.8754 13.0147 19.8359 13.1101 19.7656 13.1804C19.6952 13.2508 19.5998 13.2903 19.5004 13.2903H9.52539C9.42593 13.2903 9.33055 13.2508 9.26023 13.1804C9.1899 13.1101 9.15039 13.0147 9.15039 12.9153V5.41528C9.15039 5.31583 9.1899 5.22044 9.26023 5.15012C9.33055 5.07979 9.42593 5.04028 9.52539 5.04028H19.5004ZM19.5004 3.91528H9.52539C9.12757 3.91528 8.74604 4.07332 8.46473 4.35462C8.18343 4.63593 8.02539 5.01746 8.02539 5.41528V12.9153C8.02539 13.3131 8.18343 13.6946 8.46473 13.9759C8.74604 14.2572 9.12757 14.4153 9.52539 14.4153H19.5004C19.8982 14.4153 20.2797 14.2572 20.5611 13.9759C20.8424 13.6946 21.0004 13.3131 21.0004 12.9153V5.41528C21.0004 5.01746 20.8424 4.63593 20.5611 4.35462C20.2797 4.07332 19.8982 3.91528 19.5004 3.91528Z" fill="#5997AB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.77539 8.60278H20.2654V9.72778H8.77539V8.60278Z" fill="#5997AB"/>
+<path d="M8.26563 12.8853H4.51562C3.6872 12.8853 3.01562 13.5568 3.01562 14.3853V18.5703C3.01562 19.3987 3.6872 20.0703 4.51562 20.0703H8.26563C9.09405 20.0703 9.76562 19.3987 9.76562 18.5703V14.3853C9.76562 13.5568 9.09405 12.8853 8.26563 12.8853Z" fill="#5997AB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.7826 15.1165C8.00009 15.3383 7.99656 15.6944 7.77473 15.9119L5.47973 18.1619C5.25789 18.3794 4.90176 18.3759 4.68427 18.154C4.46679 17.9322 4.47031 17.5761 4.69215 17.3586L6.98715 15.1086C7.20898 14.8911 7.56512 14.8946 7.7826 15.1165Z" fill="#C8FAFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.38086 14.9478C7.69152 14.9478 7.94336 15.1996 7.94336 15.5103V17.7303C7.94336 18.0409 7.69152 18.2928 7.38086 18.2928C7.0702 18.2928 6.81836 18.0409 6.81836 17.7303V15.5103C6.81836 15.1996 7.0702 14.9478 7.38086 14.9478Z" fill="#C8FAFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.56856 15.4352C4.57684 15.1247 4.83531 14.8796 5.14586 14.8879L7.39586 14.9479C7.70641 14.9562 7.95145 15.2146 7.94317 15.5252C7.93488 15.8357 7.67642 16.0808 7.36587 16.0725L5.11587 16.0125C4.80532 16.0042 4.56028 15.7458 4.56856 15.4352Z" fill="#C8FAFF"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/table-inherited.svg b/static/img/style_guide/iconography_assets/tree_view_icons/table-inherited.svg
new file mode 100644
index 0000000..6da0d04
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/table-inherited.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.75 4.5H5.25C4.42157 4.5 3.75 5.17157 3.75 6V18C3.75 18.8284 4.42157 19.5 5.25 19.5H18.75C19.5784 19.5 20.25 18.8284 20.25 18V6C20.25 5.17157 19.5784 4.5 18.75 4.5Z" fill="#F2F2F2"/>
+<path d="M19.5 13.695H12.57V9H11.445V13.695H4.5V14.82H11.445V19.5H12.57V14.82H19.5V13.695Z" fill="#C1CBD5"/>
+<path d="M18.75 4.5H5.25C4.85218 4.5 4.47064 4.65804 4.18934 4.93934C3.90804 5.22064 3.75 5.60218 3.75 6V18C3.75 18.3978 3.90804 18.7794 4.18934 19.0607C4.47064 19.342 4.85218 19.5 5.25 19.5H18.75C19.1478 19.5 19.5294 19.342 19.8107 19.0607C20.092 18.7794 20.25 18.3978 20.25 18V6C20.25 5.60218 20.092 5.22064 19.8107 4.93934C19.5294 4.65804 19.1478 4.5 18.75 4.5ZM18.75 5.625C18.8495 5.625 18.9448 5.66451 19.0152 5.73484C19.0855 5.80516 19.125 5.90054 19.125 6V9.18H12.57V5.625H18.75ZM5.25 5.625H11.43V9.18H4.875V6C4.875 5.90054 4.91451 5.80516 4.98484 5.73484C5.05516 5.66451 5.15054 5.625 5.25 5.625ZM18.75 18.375H5.25C5.15054 18.375 5.05516 18.3355 4.98484 18.2652C4.91451 18.1948 4.875 18.0995 4.875 18V10.32H19.125V18C19.125 18.0995 19.0855 18.1948 19.0152 18.2652C18.9448 18.3355 18.8495 18.375 18.75 18.375Z" fill="#2195E7"/>
+<path d="M18.0005 12C16.8346 12 15.6948 11.6542 14.7254 11.0065C13.756 10.3587 13.0004 9.43805 12.5542 8.36088C12.108 7.28371 11.9913 6.09842 12.2187 4.95491C12.4462 3.81139 13.0076 2.761 13.8321 1.93657C14.6565 1.11214 15.7069 0.550694 16.8504 0.323234C17.9939 0.0957745 19.1792 0.212515 20.2564 0.658694C21.3336 1.10487 22.2542 1.86045 22.902 2.82988C23.5497 3.79931 23.8955 4.93904 23.8955 6.10496C23.8915 7.6672 23.2692 9.16431 22.1645 10.269C21.0598 11.3737 19.5627 11.996 18.0005 12Z" fill="#F2F2F2"/>
+<path d="M17.9996 0.374975C19.127 0.374975 20.229 0.709274 21.1664 1.3356C22.1037 1.96192 22.8343 2.85214 23.2657 3.89368C23.6971 4.93522 23.81 6.0813 23.5901 7.18699C23.3702 8.29268 22.8273 9.30832 22.0301 10.1055C21.233 10.9026 20.2173 11.4455 19.1116 11.6655C18.0059 11.8854 16.8599 11.7725 15.8183 11.3411C14.7768 10.9097 13.8866 10.1791 13.2602 9.24172C12.6339 8.30437 12.2996 7.20233 12.2996 6.07498C12.2996 4.56324 12.9001 3.11342 13.9691 2.04447C14.4984 1.51517 15.1268 1.09531 15.8183 0.808861C16.5099 0.52241 17.2511 0.374975 17.9996 0.374975ZM17.9996 -2.51095e-05C16.795 -0.0148979 15.6132 0.328714 14.6043 0.987138C13.5955 1.64556 12.8052 2.58907 12.3339 3.69773C11.8625 4.8064 11.7315 6.03017 11.9573 7.21351C12.1832 8.39684 12.7558 9.4863 13.6023 10.3434C14.4489 11.2005 15.5311 11.7866 16.7116 12.0272C17.892 12.2677 19.1173 12.1519 20.2318 11.6944C21.3462 11.2368 22.2994 10.4583 22.9704 9.45773C23.6413 8.45714 23.9995 7.27967 23.9996 6.07498C24.0095 5.28076 23.8617 4.49247 23.5646 3.75584C23.2675 3.0192 22.8271 2.34889 22.269 1.78377C21.7108 1.21865 21.0461 0.769972 20.3132 0.463765C19.5803 0.157557 18.7939 -8.71652e-05 17.9996 -2.51095e-05Z" fill="#34495E"/>
+<path d="M17.6545 2.8949C17.5042 3.04658 17.42 3.25142 17.42 3.4649C17.42 3.67838 17.5042 3.88323 17.6545 4.0349L18.8845 5.2649H14.9995C14.7846 5.2649 14.5786 5.35024 14.4267 5.50214C14.2748 5.65405 14.1895 5.86007 14.1895 6.0749C14.1895 6.28973 14.2748 6.49575 14.4267 6.64766C14.5786 6.79956 14.7846 6.8849 14.9995 6.8849H18.8695L17.6395 8.1149C17.5521 8.18663 17.4806 8.27586 17.4298 8.37685C17.379 8.47785 17.3498 8.58836 17.3443 8.70129C17.3388 8.81422 17.3569 8.92706 17.3976 9.03254C17.4383 9.13803 17.5006 9.23383 17.5806 9.31378C17.6605 9.39373 17.7563 9.45605 17.8618 9.49675C17.9673 9.53744 18.0801 9.55559 18.1931 9.55005C18.306 9.5445 18.4165 9.51538 18.5175 9.46454C18.6185 9.41371 18.7077 9.3423 18.7795 9.2549L21.3895 6.6449C21.4657 6.57081 21.5262 6.48219 21.5676 6.38429C21.609 6.28639 21.6303 6.18118 21.6303 6.0749C21.6303 5.96862 21.609 5.86341 21.5676 5.76551C21.5262 5.66761 21.4657 5.57899 21.3895 5.5049L18.7945 2.8949C18.6428 2.74468 18.4379 2.6604 18.2245 2.6604C18.011 2.6604 17.8061 2.74468 17.6545 2.8949Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/table-inherits.svg b/static/img/style_guide/iconography_assets/tree_view_icons/table-inherits.svg
new file mode 100644
index 0000000..50c4621
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/table-inherits.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.75 4.5H5.25C4.42157 4.5 3.75 5.17157 3.75 6V18C3.75 18.8284 4.42157 19.5 5.25 19.5H18.75C19.5784 19.5 20.25 18.8284 20.25 18V6C20.25 5.17157 19.5784 4.5 18.75 4.5Z" fill="#F2F2F2"/>
+<path d="M19.5 13.695H12.57V9H11.445V13.695H4.5V14.82H11.445V19.5H12.57V14.82H19.5V13.695Z" fill="#C1CBD5"/>
+<path d="M18.75 4.5H5.25C4.85218 4.5 4.47064 4.65804 4.18934 4.93934C3.90804 5.22064 3.75 5.60218 3.75 6V18C3.75 18.3978 3.90804 18.7794 4.18934 19.0607C4.47064 19.342 4.85218 19.5 5.25 19.5H18.75C19.1478 19.5 19.5294 19.342 19.8107 19.0607C20.092 18.7794 20.25 18.3978 20.25 18V6C20.25 5.60218 20.092 5.22064 19.8107 4.93934C19.5294 4.65804 19.1478 4.5 18.75 4.5ZM18.75 5.625C18.8495 5.625 18.9448 5.66451 19.0152 5.73484C19.0855 5.80516 19.125 5.90054 19.125 6V9.18H12.57V5.625H18.75ZM5.25 5.625H11.43V9.18H4.875V6C4.875 5.90054 4.91451 5.80516 4.98484 5.73484C5.05516 5.66451 5.15054 5.625 5.25 5.625ZM18.75 18.375H5.25C5.15054 18.375 5.05516 18.3355 4.98484 18.2652C4.91451 18.1948 4.875 18.0995 4.875 18V10.32H19.125V18C19.125 18.0995 19.0855 18.1948 19.0152 18.2652C18.9448 18.3355 18.8495 18.375 18.75 18.375Z" fill="#2195E7"/>
+<path d="M18.0005 12C16.8346 12 15.6948 11.6542 14.7254 11.0065C13.756 10.3587 13.0004 9.43805 12.5542 8.36088C12.108 7.28371 11.9913 6.09842 12.2187 4.95491C12.4462 3.81139 13.0076 2.761 13.8321 1.93657C14.6565 1.11214 15.7069 0.550694 16.8504 0.323234C17.9939 0.0957745 19.1792 0.212515 20.2564 0.658694C21.3336 1.10487 22.2542 1.86045 22.902 2.82988C23.5497 3.79931 23.8955 4.93904 23.8955 6.10496C23.8915 7.6672 23.2692 9.16431 22.1645 10.269C21.0598 11.3737 19.5627 11.996 18.0005 12Z" fill="#F2F2F2"/>
+<path d="M17.9996 0.374975C19.127 0.374975 20.229 0.709274 21.1664 1.3356C22.1037 1.96192 22.8343 2.85214 23.2657 3.89368C23.6971 4.93522 23.81 6.0813 23.5901 7.18699C23.3702 8.29268 22.8273 9.30832 22.0301 10.1055C21.233 10.9026 20.2173 11.4455 19.1116 11.6655C18.0059 11.8854 16.8599 11.7725 15.8183 11.3411C14.7768 10.9097 13.8866 10.1791 13.2602 9.24172C12.6339 8.30437 12.2996 7.20233 12.2996 6.07498C12.2996 4.56324 12.9001 3.11342 13.9691 2.04447C14.4984 1.51517 15.1268 1.09531 15.8183 0.808861C16.5099 0.52241 17.2511 0.374975 17.9996 0.374975ZM17.9996 -2.51095e-05C16.795 -0.0148979 15.6132 0.328714 14.6043 0.987138C13.5955 1.64556 12.8052 2.58907 12.3339 3.69773C11.8625 4.8064 11.7315 6.03017 11.9573 7.21351C12.1832 8.39684 12.7558 9.4863 13.6023 10.3434C14.4489 11.2005 15.5311 11.7866 16.7116 12.0272C17.892 12.2677 19.1173 12.1519 20.2318 11.6944C21.3462 11.2368 22.2994 10.4583 22.9704 9.45773C23.6413 8.45714 23.9995 7.27967 23.9996 6.07498C24.0095 5.28076 23.8617 4.49247 23.5646 3.75584C23.2675 3.0192 22.8271 2.34889 22.269 1.78377C21.7108 1.21865 21.0461 0.769972 20.3132 0.463765C19.5803 0.157557 18.7939 -8.71652e-05 17.9996 -2.51095e-05Z" fill="#34495E"/>
+<path d="M18.1959 2.8949C18.3461 3.04658 18.4304 3.25142 18.4304 3.4649C18.4304 3.67838 18.3461 3.88323 18.1959 4.0349L16.9659 5.2649H20.8359C21.0507 5.2649 21.2567 5.35024 21.4086 5.50214C21.5605 5.65405 21.6459 5.86007 21.6459 6.0749C21.6459 6.28973 21.5605 6.49575 21.4086 6.64766C21.2567 6.79956 21.0507 6.8849 20.8359 6.8849H16.9659L18.1959 8.1149C18.2833 8.18663 18.3547 8.27586 18.4055 8.37685C18.4564 8.47785 18.4855 8.58836 18.491 8.70129C18.4966 8.81422 18.4784 8.92706 18.4377 9.03254C18.397 9.13803 18.3347 9.23383 18.2548 9.31378C18.1748 9.39373 18.079 9.45605 17.9735 9.49675C17.868 9.53744 17.7552 9.55559 17.6423 9.55005C17.5294 9.5445 17.4188 9.51538 17.3178 9.46454C17.2168 9.41371 17.1276 9.3423 17.0559 9.2549L14.4459 6.6449C14.3697 6.57081 14.3091 6.48219 14.2678 6.38429C14.2264 6.28639 14.2051 6.18118 14.2051 6.0749C14.2051 5.96862 14.2264 5.86341 14.2678 5.76551C14.3091 5.66761 14.3697 5.57899 14.4459 5.5049L17.0559 2.8949C17.2076 2.74468 17.4124 2.6604 17.6259 2.6604C17.8394 2.6604 18.0442 2.74468 18.1959 2.8949Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/table-multi-inherit.svg b/static/img/style_guide/iconography_assets/tree_view_icons/table-multi-inherit.svg
new file mode 100644
index 0000000..d8db75a
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/table-multi-inherit.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.75 4.5H5.25C4.42157 4.5 3.75 5.17157 3.75 6V18C3.75 18.8284 4.42157 19.5 5.25 19.5H18.75C19.5784 19.5 20.25 18.8284 20.25 18V6C20.25 5.17157 19.5784 4.5 18.75 4.5Z" fill="#F2F2F2"/>
+<path d="M19.5 13.695H12.57V9H11.445V13.695H4.5V14.82H11.445V19.5H12.57V14.82H19.5V13.695Z" fill="#C1CBD5"/>
+<path d="M18.75 4.5H5.25C4.85218 4.5 4.47064 4.65804 4.18934 4.93934C3.90804 5.22064 3.75 5.60218 3.75 6V18C3.75 18.3978 3.90804 18.7794 4.18934 19.0607C4.47064 19.342 4.85218 19.5 5.25 19.5H18.75C19.1478 19.5 19.5294 19.342 19.8107 19.0607C20.092 18.7794 20.25 18.3978 20.25 18V6C20.25 5.60218 20.092 5.22064 19.8107 4.93934C19.5294 4.65804 19.1478 4.5 18.75 4.5ZM18.75 5.625C18.8495 5.625 18.9448 5.66451 19.0152 5.73484C19.0855 5.80516 19.125 5.90054 19.125 6V9.18H12.57V5.625H18.75ZM5.25 5.625H11.43V9.18H4.875V6C4.875 5.90054 4.91451 5.80516 4.98484 5.73484C5.05516 5.66451 5.15054 5.625 5.25 5.625ZM18.75 18.375H5.25C5.15054 18.375 5.05516 18.3355 4.98484 18.2652C4.91451 18.1948 4.875 18.0995 4.875 18V10.32H19.125V18C19.125 18.0995 19.0855 18.1948 19.0152 18.2652C18.9448 18.3355 18.8495 18.375 18.75 18.375Z" fill="#2195E7"/>
+<path d="M18.0005 12C16.8346 12 15.6948 11.6542 14.7254 11.0065C13.756 10.3587 13.0004 9.43805 12.5542 8.36088C12.108 7.28371 11.9913 6.09842 12.2187 4.95491C12.4462 3.81139 13.0076 2.761 13.8321 1.93657C14.6565 1.11214 15.7069 0.550694 16.8504 0.323234C17.9939 0.0957745 19.1792 0.212515 20.2564 0.658694C21.3336 1.10487 22.2542 1.86045 22.902 2.82988C23.5497 3.79931 23.8955 4.93904 23.8955 6.10496C23.8915 7.6672 23.2692 9.16431 22.1645 10.269C21.0598 11.3737 19.5627 11.996 18.0005 12Z" fill="#F2F2F2"/>
+<path d="M17.9996 0.374975C19.127 0.374975 20.229 0.709274 21.1664 1.3356C22.1037 1.96192 22.8343 2.85214 23.2657 3.89368C23.6971 4.93522 23.81 6.0813 23.5901 7.18699C23.3702 8.29268 22.8273 9.30832 22.0301 10.1055C21.233 10.9026 20.2173 11.4455 19.1116 11.6655C18.0059 11.8854 16.8599 11.7725 15.8183 11.3411C14.7768 10.9097 13.8866 10.1791 13.2602 9.24172C12.6339 8.30437 12.2996 7.20233 12.2996 6.07498C12.2996 4.56324 12.9001 3.11342 13.9691 2.04447C14.4984 1.51517 15.1268 1.09531 15.8183 0.808861C16.5099 0.52241 17.2511 0.374975 17.9996 0.374975ZM17.9996 -2.51095e-05C16.795 -0.0148979 15.6132 0.328714 14.6043 0.987138C13.5955 1.64556 12.8052 2.58907 12.3339 3.69773C11.8625 4.8064 11.7315 6.03017 11.9573 7.21351C12.1832 8.39684 12.7558 9.4863 13.6023 10.3434C14.4489 11.2005 15.5311 11.7866 16.7116 12.0272C17.892 12.2677 19.1173 12.1519 20.2318 11.6944C21.3462 11.2368 22.2994 10.4583 22.9704 9.45773C23.6413 8.45714 23.9995 7.27967 23.9996 6.07498C24.0095 5.28076 23.8617 4.49247 23.5646 3.75584C23.2675 3.0192 22.8271 2.34889 22.269 1.78377C21.7108 1.21865 21.0461 0.769972 20.3132 0.463765C19.5803 0.157557 18.7939 -8.71652e-05 17.9996 -2.51095e-05Z" fill="#34495E"/>
+<path d="M22.4089 5.565L20.0689 3.21C19.9279 3.093 19.7484 3.03284 19.5654 3.04131C19.3824 3.04979 19.2092 3.12628 19.0797 3.2558C18.9501 3.38533 18.8737 3.55855 18.8652 3.74153C18.8567 3.92451 18.9169 4.10406 19.0339 4.245L20.1289 5.34H15.7189L16.8139 4.245C16.9309 4.10406 16.991 3.92451 16.9826 3.74153C16.9741 3.55855 16.8976 3.38533 16.7681 3.2558C16.6385 3.12628 16.4653 3.04979 16.2823 3.04131C16.0994 3.03284 15.9198 3.093 15.7789 3.21L13.4989 5.565C13.4318 5.63189 13.3785 5.71138 13.3422 5.79889C13.3058 5.88641 13.2871 5.98024 13.2871 6.075C13.2871 6.16977 13.3058 6.2636 13.3422 6.35111C13.3785 6.43863 13.4318 6.51811 13.4989 6.585L15.7789 9C15.8442 9.07868 15.9252 9.14285 16.0167 9.18844C16.1082 9.23402 16.2083 9.26001 16.3104 9.26474C16.4125 9.26947 16.5145 9.25284 16.6099 9.2159C16.7052 9.17897 16.7918 9.12255 16.8641 9.05025C16.9364 8.97795 16.9928 8.89136 17.0298 8.79602C17.0667 8.70067 17.0833 8.59867 17.0786 8.49653C17.0739 8.3944 17.0479 8.29437 17.0023 8.20284C16.9567 8.11132 16.8925 8.03031 16.8139 7.965L15.7189 6.87H20.1289L19.0339 7.965C18.9552 8.03031 18.891 8.11132 18.8454 8.20284C18.7999 8.29437 18.7739 8.3944 18.7691 8.49653C18.7644 8.59867 18.781 8.70067 18.818 8.79602C18.8549 8.89136 18.9113 8.97795 18.9836 9.05025C19.0559 9.12255 19.1425 9.17897 19.2379 9.2159C19.3332 9.25284 19.4352 9.26947 19.5373 9.26474C19.6395 9.26001 19.7395 9.23402 19.831 9.18844C19.9226 9.14285 20.0036 9.07868 20.0689 9L22.4089 6.645C22.476 6.57811 22.5293 6.49863 22.5656 6.41111C22.6019 6.3236 22.6206 6.22977 22.6206 6.135C22.6206 6.04024 22.6019 5.94641 22.5656 5.8589C22.5293 5.77138 22.476 5.69189 22.4089 5.625V5.565Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/table-repl.svg b/static/img/style_guide/iconography_assets/tree_view_icons/table-repl.svg
new file mode 100644
index 0000000..4f4a8d7
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/table-repl.svg
@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 3.375H4.5C3.67157 3.375 3 4.04657 3 4.875V9.375C3 10.2034 3.67157 10.875 4.5 10.875H9C9.82843 10.875 10.5 10.2034 10.5 9.375V4.875C10.5 4.04657 9.82843 3.375 9 3.375Z" fill="#DEF4FD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1875 10.875V6.375H7.3125V10.875H6.1875Z" fill="#C1CBD5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1875 7.125V3.375H7.3125V7.125H6.1875Z" fill="#2195E7"/>
+<path d="M9 4.5C9.09946 4.5 9.19484 4.53951 9.26517 4.60984C9.33549 4.68016 9.375 4.77554 9.375 4.875V9.375C9.375 9.47446 9.33549 9.56984 9.26517 9.64017C9.19484 9.71049 9.09946 9.75 9 9.75H4.5C4.40054 9.75 4.30516 9.71049 4.23484 9.64017C4.16451 9.56984 4.125 9.47446 4.125 9.375V4.875C4.125 4.77554 4.16451 4.68016 4.23484 4.60984C4.30516 4.53951 4.40054 4.5 4.5 4.5H9ZM9 3.375H4.5C4.10218 3.375 3.72064 3.53304 3.43934 3.81434C3.15804 4.09564 3 4.47718 3 4.875V9.375C3 9.77282 3.15804 10.1544 3.43934 10.4357C3.72064 10.717 4.10218 10.875 4.5 10.875H9C9.39782 10.875 9.77936 10.717 10.0607 10.4357C10.342 10.1544 10.5 9.77282 10.5 9.375V4.875C10.5 4.47718 10.342 4.09564 10.0607 3.81434C9.77936 3.53304 9.39782 3.375 9 3.375Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 6.5625H9.75V7.6875H3.75V6.5625Z" fill="#2195E7"/>
+<path d="M19.5156 13.125H15.0156C14.1872 13.125 13.5156 13.7966 13.5156 14.625V19.125C13.5156 19.9534 14.1872 20.625 15.0156 20.625H19.5156C20.3441 20.625 21.0156 19.9534 21.0156 19.125V14.625C21.0156 13.7966 20.3441 13.125 19.5156 13.125Z" fill="#DEF4FD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7031 20.625V16.125H17.8281V20.625H16.7031Z" fill="#C1CBD5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7031 16.875V13.125H17.8281V16.875H16.7031Z" fill="#2195E7"/>
+<path d="M19.5 14.25C19.5995 14.25 19.6948 14.2895 19.7652 14.3598C19.8355 14.4302 19.875 14.5255 19.875 14.625V19.125C19.875 19.2245 19.8355 19.3198 19.7652 19.3902C19.6948 19.4605 19.5995 19.5 19.5 19.5H15C14.9005 19.5 14.8052 19.4605 14.7348 19.3902C14.6645 19.3198 14.625 19.2245 14.625 19.125V14.625C14.625 14.5255 14.6645 14.4302 14.7348 14.3598C14.8052 14.2895 14.9005 14.25 15 14.25H19.5ZM19.5 13.125H15C14.6022 13.125 14.2206 13.283 13.9393 13.5643C13.658 13.8456 13.5 14.2272 13.5 14.625V19.125C13.5 19.5228 13.658 19.9044 13.9393 20.1857C14.2206 20.467 14.6022 20.625 15 20.625H19.5C19.8978 20.625 20.2794 20.467 20.5607 20.1857C20.842 19.9044 21 19.5228 21 19.125V14.625C21 14.2272 20.842 13.8456 20.5607 13.5643C20.2794 13.283 19.8978 13.125 19.5 13.125Z" fill="#2195E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2656 16.3125H20.2656V17.4375H14.2656V16.3125Z" fill="#2195E7"/>
+<path d="M11.3698 17.1302L9.83984 18.6002L9.89984 15.6152L11.3698 17.1302Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69376 15.0916C9.90497 15.0085 10.1455 15.0604 10.3035 15.2233L11.7735 16.7383C11.8778 16.8457 11.9349 16.9902 11.9323 17.1399C11.9296 17.2895 11.8675 17.4319 11.7596 17.5356L10.2296 19.0056C10.0655 19.1633 9.82262 19.2065 9.61421 19.1153C9.4058 19.024 9.27289 18.8162 9.27746 18.5887L9.33746 15.6037C9.34202 15.3768 9.48255 15.1748 9.69376 15.0916ZM10.4351 16.9744L10.4295 17.2534L10.5725 17.116L10.4351 16.9744Z" fill="#354A5F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77115 12.0661C7.05791 12.1856 7.19352 12.5149 7.07403 12.8017C6.53572 14.0936 6.73532 15.1923 7.3104 15.851C7.87825 16.5014 8.94132 16.8683 10.4461 16.4257C10.7441 16.338 11.0568 16.5086 11.1444 16.8066C11.2321 17.1047 11.0616 17.4173 10.7635 17.505C8.95329 18.0374 7.39135 17.6543 6.46295 16.5909C5.54178 15.5359 5.37388 13.9571 6.03557 12.369C6.15506 12.0822 6.48439 11.9466 6.77115 12.0661Z" fill="#354A5F"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/tablespace.svg b/static/img/style_guide/iconography_assets/tree_view_icons/tablespace.svg
new file mode 100644
index 0000000..4f0e3b0
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/tablespace.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 8.625H4.5V18.375H19.5V8.625Z" fill="#F5F47E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.9375 8.625C3.9375 8.31434 4.18934 8.0625 4.5 8.0625H19.5C19.8107 8.0625 20.0625 8.31434 20.0625 8.625V18.375C20.0625 18.6857 19.8107 18.9375 19.5 18.9375H4.5C4.18934 18.9375 3.9375 18.6857 3.9375 18.375V8.625ZM5.0625 9.1875V17.8125H18.9375V9.1875H5.0625Z" fill="#CAA524"/>
+<path d="M12.75 8.625H4.5V5.625H10.785L12.75 7.02V8.625Z" fill="#F5F47E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.9375 5.625C3.9375 5.31434 4.18934 5.0625 4.5 5.0625H10.785C10.9017 5.0625 11.0155 5.09879 11.1106 5.16633L13.0756 6.56133C13.2242 6.66682 13.3125 6.83777 13.3125 7.02V8.625C13.3125 8.93566 13.0607 9.1875 12.75 9.1875H4.5C4.18934 9.1875 3.9375 8.93566 3.9375 8.625V5.625ZM5.0625 6.1875V8.0625H12.1875V7.3105L10.6056 6.1875H5.0625Z" fill="#CAA524"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/trigger-bad.svg b/static/img/style_guide/iconography_assets/tree_view_icons/trigger-bad.svg
new file mode 100644
index 0000000..b0f56ea
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/trigger-bad.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00586 12.9751C4.00586 12.1467 4.67743 11.4751 5.50586 11.4751H12.1209C12.9493 11.4751 13.6209 12.1467 13.6209 12.9751C13.6209 13.8035 12.9493 14.4751 12.1209 14.4751H5.50586C4.67743 14.4751 4.00586 13.8035 4.00586 12.9751Z" fill="#2F91A3"/>
+<path d="M18.4206 13.0803L12.0156 19.2753L12.2256 6.67529L18.4206 13.0803Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9502 5.97772C12.2324 5.86632 12.5538 5.93586 12.7647 6.1539L18.9597 12.5589C19.2477 12.8566 19.2398 13.3314 18.942 13.6194L12.537 19.8144C12.319 20.0253 11.9954 20.0841 11.7171 19.9633C11.4388 19.8426 11.2607 19.5661 11.2657 19.2628L11.4757 6.66282C11.4808 6.35951 11.668 6.08912 11.9502 5.97772ZM12.9453 8.49822L12.7957 17.4774L17.3601 13.0626L12.9453 8.49822Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2916 3.9296C19.7309 4.36894 19.7309 5.08125 19.2916 5.52059L14.7916 10.0206C14.3522 10.4599 13.6399 10.4599 13.2006 10.0206C12.7613 9.58125 12.7613 8.86894 13.2006 8.4296L17.7006 3.9296C18.1399 3.49026 18.8522 3.49026 19.2916 3.9296Z" fill="#D0021B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2006 3.9296C13.6399 3.49026 14.3522 3.49026 14.7916 3.9296L19.2916 8.4296C19.7309 8.86894 19.7309 9.58125 19.2916 10.0206C18.8522 10.4599 18.1399 10.4599 17.7006 10.0206L13.2006 5.52059C12.7613 5.08125 12.7613 4.36894 13.2006 3.9296Z" fill="#D0021B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/trigger.svg b/static/img/style_guide/iconography_assets/tree_view_icons/trigger.svg
new file mode 100644
index 0000000..f66e4ce
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/trigger.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.05078 12C4.05078 11.1716 4.72235 10.5 5.55078 10.5H12.1658C12.9942 10.5 13.6658 11.1716 13.6658 12C13.6658 12.8284 12.9942 13.5 12.1658 13.5H5.55078C4.72235 13.5 4.05078 12.8284 4.05078 12Z" fill="#2F91A3"/>
+<path d="M18.4499 12.1052L12.0449 18.3002L12.2699 5.7002L18.4499 12.1052Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9953 5.00229C12.2776 4.89123 12.599 4.96115 12.8096 5.17945L18.9896 11.5845C19.277 11.8823 19.2688 12.3566 18.9713 12.6443L12.5663 18.8393C12.3482 19.0503 12.0244 19.109 11.746 18.9881C11.4676 18.8671 11.2896 18.5903 11.295 18.2868L11.52 5.68683C11.5255 5.38353 11.713 5.11336 11.9953 5.00229ZM12.9875 7.52404L12.8272 16.5002L17.3901 12.0869L12.9875 7.52404Z" fill="#2F91A3"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/trigger_function.svg b/static/img/style_guide/iconography_assets/tree_view_icons/trigger_function.svg
new file mode 100644
index 0000000..cd3e18b
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/trigger_function.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.3795 20.1301C16.7632 20.1752 17.1515 20.1016 17.4921 19.9192C17.8327 19.7368 18.1092 19.4544 18.2845 19.1101C18.646 18.4162 18.8265 17.6423 18.8095 16.8601V15.8101L19.0945 13.5001L19.7695 12.6601L21.4645 11.8201H19.7545L20.9095 11.6101L19.1545 10.3051L19.0495 9.42008V7.86008L18.8095 5.62508L18.1045 4.81508L16.9795 4.32008H16.3795L7.27445 4.08008L5.99945 4.99508L5.18945 5.67008V6.58508L5.32445 6.33008L5.03945 9.33008L5.17445 10.3801L2.89445 11.8801L2.56445 12.1651L2.89445 11.8801L4.39445 12.9601L4.49945 13.5001L5.36945 15.7801V16.7701V17.4601V16.2601V16.8451L5.69945 18.3451L6.22445 19.0801L7.16945 19.6351L7.91945 20.1301H16.3795Z" fill="#EDFFFD"/>
+<path d="M19.9186 12.3902C20.0916 12.2994 20.2723 12.2241 20.4586 12.1652C20.633 12.0933 20.8138 12.0381 20.9986 12.0002C21.1486 12.0002 21.1486 11.9252 20.9986 11.8952C20.8309 11.8742 20.6653 11.8391 20.5036 11.7902C20.3167 11.733 20.1358 11.6576 19.9636 11.5652C19.7746 11.4621 19.6026 11.3306 19.4536 11.1752C19.309 11.0295 19.1876 10.8626 19.0936 10.6802C18.9879 10.4626 18.917 10.2298 18.8836 9.99019C18.8123 9.66377 18.7622 9.33308 18.7336 9.00019C18.7336 8.61019 18.7336 8.11019 18.7336 7.50019V7.80019C18.7336 7.41019 18.7336 7.00519 18.7336 6.58519C18.7046 6.17676 18.5923 5.77859 18.4036 5.41519C18.196 5.04025 17.89 4.72908 17.5186 4.5152C16.9904 4.24037 16.404 4.09633 15.8086 4.0952V3.8252H16.2586C16.4457 3.83998 16.6314 3.87008 16.8136 3.9152C17.0181 3.96528 17.2187 4.03045 17.4136 4.1102C17.6266 4.21096 17.8237 4.34235 17.9986 4.5002C18.2729 4.70546 18.5069 4.95974 18.6886 5.2502C18.8551 5.52407 18.9766 5.82286 19.0486 6.1352C19.1273 6.49017 19.1725 6.85176 19.1836 7.21519C19.1836 7.60519 19.1836 8.71519 19.1836 8.71519C19.1791 9.13258 19.2142 9.54946 19.2886 9.96019C19.3434 10.2829 19.4774 10.587 19.6786 10.8452C19.9012 11.1124 20.1839 11.3231 20.5036 11.4602C20.5874 11.511 20.6567 11.5825 20.7048 11.6679C20.7529 11.7533 20.7782 11.8497 20.7782 11.9477C20.7782 12.0457 20.7529 12.1421 20.7048 12.2275C20.6567 12.3129 20.5874 12.3844 20.5036 12.4352C20.0836 12.6452 19.7386 12.4802 19.9186 12.3902Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path d="M8.36977 4.19987C7.77422 4.19983 7.18752 4.34393 6.65977 4.61987C6.28789 4.83314 5.98176 5.14447 5.77477 5.51987C5.58607 5.88327 5.47377 6.28144 5.44477 6.68987C5.44477 7.10987 5.44477 7.51487 5.44477 7.90487V7.60487C5.44477 8.17487 5.44477 8.65487 5.44477 9.10487C5.4367 9.44148 5.40664 9.77719 5.35477 10.1099C5.32157 10.3495 5.25069 10.5824 5.14477 10.7999C5.05115 10.9825 4.9297 11.1495 4.78477 11.2949C4.63576 11.4502 4.46375 11.5818 4.27477 11.6849C4.10175 11.7756 3.92104 11.8509 3.73477 11.9099C3.5481 11.9581 3.35722 11.9883 3.16477 11.9999C2.99977 11.9999 2.99977 11.9999 3.16477 11.9999C3.33243 12.0209 3.49802 12.056 3.65977 12.1049C3.84667 12.1621 4.02753 12.2375 4.19977 12.3299C4.38875 12.433 4.56076 12.5645 4.70977 12.7199C4.85433 12.8655 4.97574 13.0325 5.06977 13.2149C5.17546 13.4325 5.24633 13.6653 5.27977 13.9049C5.33155 14.2376 5.36161 14.5733 5.36977 14.9099C5.36977 15.2999 5.36977 15.7999 5.36977 16.4099V16.1099C5.36977 16.4999 5.36977 16.9049 5.36977 17.3249C5.39877 17.7333 5.51107 18.1315 5.69977 18.4949C5.90738 18.8698 6.21337 19.181 6.58477 19.3949C7.11294 19.6697 7.69937 19.8137 8.29477 19.8149V20.1749H7.84477C7.65762 20.1601 7.472 20.13 7.28977 20.0849C7.08522 20.0348 6.88467 19.9696 6.68977 19.8899C6.50317 19.7831 6.33165 19.652 6.17977 19.4999C5.90544 19.2946 5.67149 19.0403 5.48977 18.7499C5.32326 18.476 5.20172 18.1772 5.12977 17.8649C5.05104 17.5099 5.00584 17.1483 4.99477 16.7849C4.99477 16.3949 4.99477 15.2849 4.99477 15.2849C4.9993 14.8675 4.96415 14.4506 4.88977 14.0399C4.84473 13.6962 4.71025 13.3703 4.49977 13.0949C4.27712 12.8277 3.99442 12.6169 3.67477 12.4799C3.59094 12.4291 3.52162 12.3575 3.47352 12.2721C3.42541 12.1867 3.40014 12.0904 3.40014 11.9924C3.40014 11.8944 3.42541 11.798 3.47352 11.7126C3.52162 11.6272 3.59094 11.5557 3.67477 11.5049C3.99261 11.3716 4.27507 11.1662 4.49977 10.9049C4.70038 10.6463 4.83432 10.3424 4.88977 10.0199C4.96415 9.60914 4.9993 9.19226 4.99477 8.77487C4.99477 8.77487 5.06977 6.46487 5.14477 6.13487C5.21672 5.82254 5.33826 5.52375 5.50477 5.24987C5.68177 4.96052 5.91059 4.70627 6.17977 4.49987C6.35754 4.35789 6.55449 4.24174 6.76477 4.15487C6.95996 4.07592 7.16045 4.01076 7.36477 3.95987C7.54715 3.91551 7.73271 3.88542 7.91977 3.86987H8.36977V4.19987Z" fill="#34495E" stroke="#2F91A3" stroke-width="0.8" stroke-miterlimit="10"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.79688 8.11548C8.79688 7.80482 9.04871 7.55298 9.35938 7.55298H14.9844C15.295 7.55298 15.5469 7.80482 15.5469 8.11548C15.5469 8.42614 15.295 8.67798 14.9844 8.67798H9.35938C9.04871 8.67798 8.79688 8.42614 8.79688 8.11548Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.79688 11.8655C8.79688 11.5548 9.04871 11.303 9.35938 11.303H14.9844C15.295 11.303 15.5469 11.5548 15.5469 11.8655C15.5469 12.1761 15.295 12.428 14.9844 12.428H9.35938C9.04871 12.428 8.79688 12.1761 8.79688 11.8655Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.79688 15.6155C8.79688 15.3048 9.04871 15.053 9.35938 15.053H14.9844C15.295 15.053 15.5469 15.3048 15.5469 15.6155C15.5469 15.9261 15.295 16.178 14.9844 16.178H9.35938C9.04871 16.178 8.79688 15.9261 8.79688 15.6155Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0293 17.8052C15.0293 17.391 15.3651 17.0552 15.7793 17.0552H19.3043C19.7185 17.0552 20.0543 17.391 20.0543 17.8052C20.0543 18.2194 19.7185 18.5552 19.3043 18.5552H15.7793C15.3651 18.5552 15.0293 18.2194 15.0293 17.8052Z" fill="#2F91A3"/>
+<path d="M20.399 17.8349L18.209 19.9499L18.284 15.6599L20.399 17.8349Z" fill="#2980B9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0079 14.9624C18.2895 14.8509 18.6105 14.9197 18.8217 15.1368L20.9367 17.3118C21.0757 17.4548 21.152 17.6471 21.1489 17.8465C21.1458 18.0458 21.0634 18.2357 20.92 18.3742L18.73 20.4892C18.5118 20.6999 18.1881 20.7584 17.9099 20.6375C17.6317 20.5165 17.4538 20.2399 17.4591 19.9366L17.5341 15.6466C17.5394 15.3438 17.7263 15.0738 18.0079 14.9624ZM19.0024 17.4743L18.9905 18.1523L19.3366 17.818L19.0024 17.4743Z" fill="#2F91A3"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/triggerbad.svg b/static/img/style_guide/iconography_assets/tree_view_icons/triggerbad.svg
new file mode 100644
index 0000000..f51a4a9
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/triggerbad.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.125 4.46997H5.625C4.79657 4.46997 4.125 5.14154 4.125 5.96997V16.47C4.125 17.2984 4.79657 17.97 5.625 17.97H16.125C16.9534 17.97 17.625 17.2984 17.625 16.47V5.96997C17.625 5.14154 16.9534 4.46997 16.125 4.46997Z" fill="#EDFFFD"/>
+<path d="M18.3602 18.0147L15.6602 20.6247L15.7502 15.3147L18.3602 18.0147Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5437 14.7915C15.7554 14.708 15.9965 14.7602 16.1546 14.9238L18.7646 17.6238C18.9805 17.8471 18.9745 18.2032 18.7511 18.4191L16.0511 21.0291C15.8875 21.1873 15.6448 21.2313 15.4361 21.1407C15.2274 21.0501 15.0939 20.8427 15.0977 20.6152L15.1877 15.3052C15.1916 15.0777 15.3321 14.8749 15.5437 14.7915ZM16.2896 16.682L16.2456 19.2764L17.5648 18.0012L16.2896 16.682Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.82065 3.9375H15.9504C16.5355 3.94247 17.0957 4.17439 17.5131 4.58433C17.9305 4.99427 18.1724 5.55025 18.188 6.13509L18.1883 6.15L18.1881 9.45C18.1881 9.76066 17.9363 10.0125 17.6256 10.0125C17.315 10.0125 17.0631 9.76066 17.0631 9.45V6.15822C17.0537 5.86728 16.9326 5.59105 16.7248 5.38696C16.5159 5.18181 16.2357 5.06554 15.943 5.0625H5.82328C5.53057 5.06554 5.25038 5.18181 5.0415 5.38696C4.8337 5.59104 4.71259 5.86728 4.70315 6.15821V16.3173C4.70634 16.6134 4.82537 16.8964 5.03478 17.1059C5.24421 17.3153 5.52731 17.4343 5.82341 17.4375H15.9456C16.2563 17.4375 16.5081 17.6893 16.5081 18C16.5081 18.3107 16.2563 18.5625 15.9456 18.5625H5.81569C5.22388 18.5573 4.65778 18.3198 4.23929 17.9014C3.8208 17.4829 3.58338 16.9168 3.57817 16.325L3.57812 16.32L3.57815 6.13508C3.59366 5.55024 3.8358 4.99427 4.2532 4.58433C4.6706 4.17439 5.23085 3.94249 5.81587 3.93752L5.82065 3.9375Z" fill="#2F91A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.6705 2.5795C21.1098 3.01884 21.1098 3.73116 20.6705 4.1705L16.1705 8.6705C15.7312 9.10984 15.0188 9.10984 14.5795 8.6705C14.1402 8.23116 14.1402 7.51884 14.5795 7.0795L19.0795 2.5795C19.5188 2.14017 20.2312 2.14017 20.6705 2.5795Z" fill="#D0021B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5795 2.5795C15.0188 2.14017 15.7312 2.14017 16.1705 2.5795L20.6705 7.0795C21.1098 7.51884 21.1098 8.23116 20.6705 8.6705C20.2312 9.10984 19.5188 9.10984 19.0795 8.6705L14.5795 4.1705C14.1402 3.73116 14.1402 3.01884 14.5795 2.5795Z" fill="#D0021B"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/type.svg b/static/img/style_guide/iconography_assets/tree_view_icons/type.svg
new file mode 100644
index 0000000..32e9924
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/type.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.85008 5.20508H18.1351C18.3101 5.20508 18.478 5.27461 18.6018 5.39839C18.7255 5.52216 18.7951 5.69004 18.7951 5.86508V18.1501C18.7951 18.3211 18.7271 18.4852 18.6062 18.6062C18.4852 18.7271 18.3211 18.7951 18.1501 18.7951H5.86508C5.69004 18.7951 5.52216 18.7255 5.39839 18.6018C5.27461 18.478 5.20508 18.3101 5.20508 18.1351V5.85008C5.20508 5.67901 5.27303 5.51496 5.39399 5.39399C5.51496 5.27303 5.67901 5.20508 5.85008 5.20508Z" fill="#D6FFEA"/>
+<path d="M18.1498 5.7749C18.1736 5.7749 18.1965 5.78438 18.2134 5.80126C18.2303 5.81814 18.2398 5.84103 18.2398 5.8649V18.1499C18.2398 18.1738 18.2303 18.1967 18.2134 18.2135C18.1965 18.2304 18.1736 18.2399 18.1498 18.2399H5.84977C5.8259 18.2399 5.803 18.2304 5.78613 18.2135C5.76925 18.1967 5.75977 18.1738 5.75977 18.1499V5.8649C5.75977 5.84103 5.76925 5.81814 5.78613 5.80126C5.803 5.78438 5.8259 5.7749 5.84977 5.7749H18.1498ZM18.1498 4.6499H5.84977C5.52753 4.6499 5.21849 4.77791 4.99063 5.00577C4.76277 5.23362 4.63477 5.54266 4.63477 5.8649V18.1499C4.63477 18.4721 4.76277 18.7812 4.99063 19.009C5.21849 19.2369 5.52753 19.3649 5.84977 19.3649H18.1498C18.472 19.3649 18.781 19.2369 19.0089 19.009C19.2368 18.7812 19.3648 18.4721 19.3648 18.1499V5.8649C19.3648 5.54266 19.2368 5.23362 19.0089 5.00577C18.781 4.77791 18.472 4.6499 18.1498 4.6499Z" fill="#5ACB9A"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/unique_constraint.svg b/static/img/style_guide/iconography_assets/tree_view_icons/unique_constraint.svg
new file mode 100644
index 0000000..020c0ee
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/unique_constraint.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0004 20.0999C16.4739 20.0999 20.1004 16.4734 20.1004 11.9999C20.1004 7.5264 16.4739 3.8999 12.0004 3.8999C7.52688 3.8999 3.90039 7.5264 3.90039 11.9999C3.90039 16.4734 7.52688 20.0999 12.0004 20.0999Z" fill="#CBE7F6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0004 4.4624C7.83754 4.4624 4.46289 7.83706 4.46289 11.9999C4.46289 16.1627 7.83754 19.5374 12.0004 19.5374C16.1632 19.5374 19.5379 16.1627 19.5379 11.9999C19.5379 7.83706 16.1632 4.4624 12.0004 4.4624ZM3.33789 11.9999C3.33789 7.21574 7.21622 3.3374 12.0004 3.3374C16.7846 3.3374 20.6629 7.21574 20.6629 11.9999C20.6629 16.7841 16.7846 20.6624 12.0004 20.6624C7.21622 20.6624 3.33789 16.7841 3.33789 11.9999Z" fill="#2C66BD"/>
+<path d="M14.1602 13.7549H10.2109V13.3389C10.3281 13.3311 10.5098 13.3154 10.7559 13.292C11.0059 13.2646 11.1777 13.2373 11.2715 13.21C11.3926 13.1709 11.4844 13.1084 11.5469 13.0225C11.6133 12.9326 11.6465 12.7998 11.6465 12.624V8.51074H10.1875V8.01855H10.5098C10.9316 8.01855 11.3086 7.94043 11.6406 7.78418C11.9766 7.62793 12.2168 7.45996 12.3613 7.28027H12.8477C12.8359 7.53418 12.8242 7.83105 12.8125 8.1709C12.8008 8.51074 12.7949 8.81543 12.7949 9.08496V12.5596C12.7949 12.6963 12.8242 12.8193 12.8828 12.9287C12.9453 13.0342 13.0332 13.1123 13.1465 13.1631C13.248 13.2061 13.4141 13.2451 13.6445 13.2803C13.875 13.3154 14.0469 13.335 14.1602 13.3389V13.7549Z" fill="#2C66BD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.923 6.92772C12.0298 6.79498 12.191 6.71777 12.3613 6.71777H12.8477C13.0013 6.71777 13.1483 6.78065 13.2545 6.8918C13.3606 7.00295 13.4166 7.15269 13.4096 7.30621C13.398 7.55735 13.3863 7.85195 13.3747 8.19028C13.3631 8.52525 13.3574 8.8233 13.3574 9.08496V12.5596C13.3574 12.6005 13.3637 12.6278 13.3713 12.6472C13.3715 12.6473 13.3718 12.6475 13.3721 12.6476C13.4114 12.6626 13.5186 12.6921 13.7294 12.7242C13.9558 12.7587 14.1007 12.774 14.1795 12.7767C14.4825 12.7871 14.7227 13.0357 14.7227 13.3389V13.7549C14.7227 14.0655 14.4708 14.3174 14.1602 14.3174H10.2109C9.90028 14.3174 9.64844 14.0655 9.64844 13.7549V13.3389C9.64844 13.0427 9.87804 12.7973 10.1735 12.7776C10.2817 12.7704 10.4554 12.7555 10.6985 12.7324C10.9015 12.7101 11.0221 12.6906 11.0819 12.6778C11.0831 12.6635 11.084 12.6458 11.084 12.624V9.07324H10.1875C9.87684 9.07324 9.625 8.8214 9.625 8.51074V8.01855C9.625 7.70789 9.87684 7.45605 10.1875 7.45605H10.5098C10.8612 7.45605 11.1544 7.3913 11.4011 7.27522L11.4034 7.27414L11.4034 7.27415C11.7034 7.13464 11.8557 7.01146 11.923 6.92772ZM12.1026 8.18148C12.1695 8.27404 12.209 8.38779 12.209 8.51074V12.624C12.209 12.8023 12.1846 13.0047 12.0968 13.1924H12.3859C12.28 12.9938 12.2324 12.7786 12.2324 12.5596V9.08496C12.2324 8.80756 12.2384 8.49623 12.2503 8.15151C12.251 8.13265 12.2516 8.11392 12.2523 8.09532C12.2037 8.12504 12.1538 8.15373 12.1026 8.18148Z" fill="#2C66BD"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/user_mapping.svg b/static/img/style_guide/iconography_assets/tree_view_icons/user_mapping.svg
new file mode 100644
index 0000000..a8d9a9b
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/user_mapping.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.96059 17.1455C3.95324 17.0307 3.95324 16.9154 3.96059 16.8005C4.02338 14.7276 4.90442 12.7639 6.41107 11.3387C7.91772 9.9136 9.92737 9.14304 12.0006 9.19554C14.0764 9.139 16.0899 9.90777 17.5998 11.3333C19.1097 12.7589 19.9928 14.7249 20.0556 16.8005C20.0629 16.9154 20.0629 17.0307 20.0556 17.1455H3.96059Z" fill="#BFE1F1"/>
+<path d="M12 9.75016C13.8905 9.69564 15.7284 10.3764 17.1272 11.6493C18.5259 12.9222 19.3765 14.688 19.5 16.5752H4.5C4.62348 14.688 5.47408 12.9222 6.87285 11.6493C8.27162 10.3764 10.1095 9.69564 12 9.75016ZM12 8.62516C10.8968 8.59522 9.7985 8.78296 8.76789 9.17765C7.73727 9.57235 6.79453 10.1663 5.99354 10.9255C5.19256 11.6847 4.54902 12.5943 4.09972 13.6023C3.65042 14.6103 3.40415 15.6969 3.375 16.8002C3.38715 17.1017 3.41721 17.4022 3.465 17.7002H20.52C20.5678 17.4022 20.5978 17.1017 20.61 16.8002C20.5511 14.5747 19.6112 12.4637 17.9968 10.9309C16.3824 9.39803 14.2255 8.56873 12 8.62516Z" fill="#2C66BD"/>
+<path d="M12.0004 10.7852C14.1957 10.7852 15.9754 9.00554 15.9754 6.8102C15.9754 4.61487 14.1957 2.83521 12.0004 2.83521C9.80506 2.83521 8.02539 4.61487 8.02539 6.8102C8.02539 9.00554 9.80506 10.7852 12.0004 10.7852Z" fill="#BFE1F1"/>
+<path d="M12 3.40503C12.6728 3.40799 13.3296 3.61021 13.8876 3.98615C14.4456 4.3621 14.8797 4.89491 15.1351 5.51735C15.3905 6.13979 15.4558 6.82395 15.3227 7.48346C15.1897 8.14297 14.8642 8.74828 14.3874 9.22298C13.9106 9.69768 13.3039 10.0205 12.6438 10.1507C11.9837 10.2808 11.2998 10.2125 10.6785 9.95438C10.0572 9.69623 9.52631 9.2598 9.15282 8.70018C8.77934 8.14056 8.58001 7.48283 8.58 6.81003C8.58397 5.90559 8.94604 5.03955 9.58698 4.40142C10.2279 3.76328 11.0956 3.40502 12 3.40503ZM12 2.28003C11.11 2.28003 10.24 2.54395 9.49994 3.03842C8.75991 3.53288 8.18314 4.23569 7.84254 5.05795C7.50195 5.88022 7.41283 6.78502 7.58647 7.65794C7.7601 8.53085 8.18869 9.33267 8.81802 9.96201C9.44736 10.5913 10.2492 11.0199 11.1221 11.1936C11.995 11.3672 12.8998 11.2781 13.7221 10.9375C14.5443 10.5969 15.2471 10.0201 15.7416 9.2801C16.2361 8.54007 16.5 7.67005 16.5 6.78003C16.5 5.58656 16.0259 4.44196 15.182 3.59805C14.3381 2.75414 13.1935 2.28003 12 2.28003Z" fill="#2C66BD"/>
+<path d="M11.911 21.7202C14.6697 21.7202 16.906 19.4839 16.906 16.7252C16.906 13.9666 14.6697 11.7302 11.911 11.7302C9.15235 11.7302 6.91602 13.9666 6.91602 16.7252C6.91602 19.4839 9.15235 21.7202 11.911 21.7202Z" fill="#BFE1F1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6144 16.7403C12.6174 16.5996 12.5782 16.4613 12.5018 16.343C12.4255 16.2248 12.3156 16.1322 12.1862 16.077C12.0568 16.0218 11.9138 16.0065 11.7756 16.0333C11.6375 16.06 11.5105 16.1274 11.411 16.2269C11.3115 16.3264 11.2441 16.4534 11.2174 16.5915C11.1907 16.7297 11.2059 16.8726 11.2611 17.0021C11.3163 17.1315 11.409 17.2414 11.5272 17.3177C11.6454 17.394 11.7837 17.4332 11.9244 17.4303C12.1062 17.4264 12.2795 17.3525 12.4081 17.2239C12.5366 17.0953 12.6106 16.9221 12.6144 16.7403ZM15.8244 16.0353L14.8494 15.8553C14.7936 15.6441 14.7077 15.442 14.5944 15.2553L15.1794 14.4153C15.2061 14.381 15.2207 14.3387 15.2207 14.2953C15.2207 14.2518 15.2061 14.2095 15.1794 14.1753L14.4444 13.5003C14.4078 13.4723 14.363 13.4571 14.3169 13.4571C14.2708 13.4571 14.226 13.4723 14.1894 13.5003L13.3644 14.0853C13.175 13.9771 12.9737 13.8915 12.7644 13.8303L12.5994 12.8103C12.5847 12.7651 12.5568 12.7252 12.5195 12.6959C12.4821 12.6665 12.4368 12.6489 12.3894 12.6453H11.3994C11.3533 12.6475 11.3092 12.6649 11.2739 12.6947C11.2387 12.7245 11.2142 12.7651 11.2044 12.8103L11.0244 13.8153C10.8407 13.8681 10.6643 13.9437 10.4994 14.0403L9.62939 13.5003C9.61267 13.4835 9.5928 13.4702 9.57092 13.4611C9.54904 13.452 9.52558 13.4473 9.50189 13.4473C9.4782 13.4473 9.45474 13.452 9.43286 13.4611C9.41098 13.4702 9.39111 13.4835 9.37439 13.5003L8.68439 14.1903C8.65763 14.2245 8.64309 14.2668 8.64309 14.3103C8.64309 14.3537 8.65763 14.396 8.68439 14.4303L9.23939 15.2403C9.14095 15.4324 9.06061 15.6333 8.99939 15.8403L8.02439 16.0203C7.97803 16.0275 7.93582 16.0512 7.90551 16.087C7.87521 16.1228 7.85883 16.1683 7.85939 16.2153V17.2203C7.85923 17.2655 7.87612 17.3092 7.9067 17.3425C7.93728 17.3759 7.9793 17.3965 8.02439 17.4003L8.99939 17.5953C9.05111 17.7985 9.13736 17.9913 9.25439 18.1653L8.69939 18.9753C8.68261 18.992 8.66929 19.0119 8.66021 19.0337C8.65112 19.0556 8.64645 19.0791 8.64645 19.1028C8.64645 19.1265 8.65112 19.1499 8.66021 19.1718C8.66929 19.1937 8.68261 19.2135 8.69939 19.2303L9.38939 19.9353C9.42601 19.9632 9.47081 19.9784 9.51689 19.9784C9.56297 19.9784 9.60777 19.9632 9.64439 19.9353L10.4994 19.4103C10.6777 19.512 10.8697 19.5877 11.0694 19.6353L11.2494 20.6403C11.2566 20.6866 11.2803 20.7288 11.3161 20.7591C11.3519 20.7894 11.3975 20.8058 11.4444 20.8053H12.4344C12.4824 20.8038 12.5287 20.787 12.5665 20.7573C12.6043 20.7276 12.6316 20.6866 12.6444 20.6403L12.8244 19.6653C13.0194 19.6653 13.2294 19.5303 13.4244 19.4403L14.2344 19.9803C14.2696 20.0048 14.3115 20.0179 14.3544 20.0179C14.3973 20.0179 14.4392 20.0048 14.4744 19.9803L15.1644 19.2753C15.1812 19.2585 15.1945 19.2387 15.2036 19.2168C15.2127 19.1949 15.2173 19.1715 15.2173 19.1478C15.2173 19.1241 15.2127 19.1006 15.2036 19.0787C15.1945 19.0569 15.1812 19.037 15.1644 19.0203L14.6094 18.1803C14.7264 18.0063 14.8127 17.8135 14.8644 17.6103L15.8394 17.4153C15.8845 17.4115 15.9265 17.3909 15.9571 17.3575C15.9877 17.3242 16.0045 17.2805 16.0044 17.2353V16.2303C16.0049 16.1833 15.9886 16.1378 15.9583 16.102C15.928 16.0662 15.8857 16.0425 15.8394 16.0353H15.8244ZM11.9244 18.4353C11.5849 18.4382 11.2523 18.3401 10.9688 18.1533C10.6853 17.9666 10.4638 17.6997 10.3325 17.3866C10.2012 17.0735 10.1661 16.7285 10.2316 16.3954C10.2971 16.0623 10.4603 15.7562 10.7003 15.5162C10.9403 15.2761 11.2464 15.113 11.5795 15.0475C11.9126 14.982 12.2577 15.0171 12.5707 15.1484C12.8838 15.2796 13.1507 15.5011 13.3375 15.7846C13.5242 16.0681 13.6224 16.4008 13.6194 16.7403C13.6155 17.1886 13.4356 17.6175 13.1186 17.9345C12.8016 18.2515 12.3727 18.4313 11.9244 18.4353Z" fill="#34495E"/>
+</svg>
diff --git a/static/img/style_guide/iconography_assets/tree_view_icons/view.svg b/static/img/style_guide/iconography_assets/tree_view_icons/view.svg
new file mode 100644
index 0000000..30d1109
--- /dev/null
+++ b/static/img/style_guide/iconography_assets/tree_view_icons/view.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.06461 3.615H19.6496C19.8485 3.615 20.0393 3.69401 20.1799 3.83467C20.3206 3.97532 20.3996 4.16608 20.3996 4.365V19.65C20.3996 19.8489 20.3206 20.0397 20.1799 20.1803C20.0393 20.321 19.8485 20.4 19.6496 20.4H4.34961C4.1507 20.4 3.95993 20.321 3.81928 20.1803C3.67863 20.0397 3.59961 19.8489 3.59961 19.65V4.065C3.59958 4.00462 3.61169 3.94485 3.63524 3.88925C3.65879 3.83365 3.69328 3.78336 3.73667 3.74138C3.78006 3.69939 3.83145 3.66656 3.88779 3.64485C3.94413 3.62314 4.00426 3.61298 4.06461 3.615Z" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.07211 3.0525H19.6496C19.9977 3.0525 20.3315 3.19078 20.5777 3.43692C20.8238 3.68306 20.9621 4.0169 20.9621 4.365V19.65C20.9621 19.9981 20.8238 20.3319 20.5777 20.5781C20.3315 20.8242 19.9977 20.9625 19.6496 20.9625H4.34961C4.00151 20.9625 3.66767 20.8242 3.42153 20.5781C3.17539 20.3319 3.03711 19.9981 3.03711 19.65L3.03711 4.06531C3.03711 4.0652 3.03711 4.0651 3.03711 4.065C3.03708 3.92925 3.06434 3.79488 3.11728 3.66988C3.17026 3.54479 3.24787 3.43164 3.34549 3.33716C3.44312 3.24269 3.55875 3.16883 3.68552 3.11997C3.80878 3.07247 3.94012 3.04956 4.07211 3.0525ZM4.16211 4.1775H19.6496C19.6993 4.1775 19.747 4.19725 19.7822 4.23241C19.8174 4.26758 19.8371 4.31527 19.8371 4.365V19.65C19.8371 19.6997 19.8174 19.7474 19.7822 19.7826C19.747 19.8177 19.6993 19.8375 19.6496 19.8375H4.34961C4.29988 19.8375 4.25219 19.8177 4.21703 19.7826C4.18186 19.7474 4.16211 19.6997 4.16211 19.65V4.1775Z" fill="#9CC71C"/>
+<path d="M17.0391 6.66016H6.94414C6.69561 6.66016 6.49414 6.86163 6.49414 7.11016V16.9052C6.49414 17.1537 6.69561 17.3552 6.94414 17.3552H17.0391C17.2877 17.3552 17.4891 17.1537 17.4891 16.9052V7.11016C17.4891 6.86163 17.2877 6.66016 17.0391 6.66016Z" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.05664 7.22266V16.7927H16.9266V7.22266H7.05664ZM5.93164 7.11016C5.93164 6.55097 6.38495 6.09766 6.94414 6.09766H17.0391C17.5983 6.09766 18.0516 6.55097 18.0516 7.11016V16.9052C18.0516 17.4643 17.5983 17.9177 17.0391 17.9177H6.94414C6.38496 17.9177 5.93164 17.4643 5.93164 16.9052V7.11016Z" fill="#9CC71C"/>
+<path d="M14.1443 9.38989H9.8543C9.60577 9.38989 9.4043 9.59136 9.4043 9.83989V14.1599C9.4043 14.4084 9.60577 14.6099 9.8543 14.6099H14.1443C14.3928 14.6099 14.5943 14.4084 14.5943 14.1599V9.83989C14.5943 9.59136 14.3928 9.38989 14.1443 9.38989Z" fill="#E3FF8D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.9668 9.95239V14.0474H14.0318V9.95239H9.9668ZM8.8418 9.83989C8.8418 9.2807 9.29511 8.82739 9.8543 8.82739H14.1443C14.7035 8.82739 15.1568 9.2807 15.1568 9.83989V14.1599C15.1568 14.7191 14.7035 15.1724 14.1443 15.1724H9.8543C9.29511 15.1724 8.8418 14.7191 8.8418 14.1599V9.83989Z" fill="#9CC71C"/>
+</svg>
diff --git a/static/img/style_guide/main_menu.png b/static/img/style_guide/main_menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..d5a7f1fd0a3356d5b95e87f2b70182181c2afa4d
GIT binary patch
diff --git a/static/img/style_guide/main_menu_dark.png b/static/img/style_guide/main_menu_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..0124ae9f5e7ef4803660017f4b54c86612d33ae6
GIT binary patch
diff --git a/static/img/style_guide/main_menu_hc.png b/static/img/style_guide/main_menu_hc.png
new file mode 100644
index 0000000000000000000000000000000000000000..02b2fc7bf4177dbb2e5c4a0ed8565dd230268996
GIT binary patch
diff --git a/static/img/style_guide/menu_tab.png b/static/img/style_guide/menu_tab.png
new file mode 100644
index 0000000000000000000000000000000000000000..f98c8a5ee84da30dc645f30c00148a74c1d43094
GIT binary patch
diff --git a/static/img/style_guide/menu_tab_dark.png b/static/img/style_guide/menu_tab_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8c6457c496f7f8e6614efac2d7df10128bf1805
GIT binary patch
diff --git a/static/img/style_guide/menu_tab_hc.png b/static/img/style_guide/menu_tab_hc.png
new file mode 100644
index 0000000000000000000000000000000000000000..abe9ebfe2f5649e083b7117110758cc09019e3a9
GIT binary patch
diff --git a/static/img/style_guide/toggle_dark_default.png b/static/img/style_guide/toggle_dark_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..233ef49c5609fc0738d18d04203488ef3c115f66
GIT binary patch
diff --git a/static/img/style_guide/toggle_dark_disabled.png b/static/img/style_guide/toggle_dark_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3966a2ef1cfc73dba64c54add487a92db5b5cda
GIT binary patch
diff --git a/static/img/style_guide/toggle_dark_hover.png b/static/img/style_guide/toggle_dark_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..5638b7bf52f0cc8c0b9dbad00427cd14ef4f3afc
GIT binary patch
diff --git a/static/img/style_guide/toggle_dark_off_default.png b/static/img/style_guide/toggle_dark_off_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ef7697f653d7a05504595cdbacde2ebc08bfa50
GIT binary patch
diff --git a/static/img/style_guide/toggle_dark_off_disabled.png b/static/img/style_guide/toggle_dark_off_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c2c5a824211ebf3a27da6288eeade2ef85850eb
GIT binary patch
diff --git a/static/img/style_guide/toggle_dark_off_hover.png b/static/img/style_guide/toggle_dark_off_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb4332a5035df2a78fe5aa0639ac2c491ce6be2b
GIT binary patch
diff --git a/static/img/style_guide/toggle_dark_off_pressed.png b/static/img/style_guide/toggle_dark_off_pressed.png
new file mode 100644
index 0000000000000000000000000000000000000000..f159f931cb4c3138323e086fa33db73a8b986e74
GIT binary patch
diff --git a/static/img/style_guide/toggle_dark_pressed.png b/static/img/style_guide/toggle_dark_pressed.png
new file mode 100644
index 0000000000000000000000000000000000000000..464afa8a25a006b606708356b93bab7c984d5235
GIT binary patch
diff --git a/static/img/style_guide/toggle_default.png b/static/img/style_guide/toggle_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..102eeb298869b40acb38a789f7226dda6579c2b2
GIT binary patch
diff --git a/static/img/style_guide/toggle_disabled.png b/static/img/style_guide/toggle_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..419d77bae42c7e3a9d100fd005511347dedaf930
GIT binary patch
diff --git a/static/img/style_guide/toggle_hc_default.png b/static/img/style_guide/toggle_hc_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..989119e8566069f746cfea2000049ac576efc630
GIT binary patch
diff --git a/static/img/style_guide/toggle_hc_disabled.png b/static/img/style_guide/toggle_hc_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..9090fd25e959fb5265f29a4b3409767190d0b47a
GIT binary patch
diff --git a/static/img/style_guide/toggle_hc_hover.png b/static/img/style_guide/toggle_hc_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..db74f8a05a02edf329b40ab72c5b1cc40294b854
GIT binary patch
diff --git a/static/img/style_guide/toggle_hc_off_default.png b/static/img/style_guide/toggle_hc_off_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..6748a7816a20b5bf73c729bc6fce8807750e5284
GIT binary patch
diff --git a/static/img/style_guide/toggle_hc_off_disabled.png b/static/img/style_guide/toggle_hc_off_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..c04733be1b3ede0ff21df53acd65849cf66b1140
GIT binary patch
diff --git a/static/img/style_guide/toggle_hc_off_hover.png b/static/img/style_guide/toggle_hc_off_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..9699738464261b08b3217924b0194c1843400b08
GIT binary patch
diff --git a/static/img/style_guide/toggle_hover.png b/static/img/style_guide/toggle_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1fc890bbbf6ea0c2e27fcdfc4784a037192b6a2
GIT binary patch
diff --git a/static/img/style_guide/toggle_off_default.png b/static/img/style_guide/toggle_off_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ec8df5451a9216bf1e20201710ec515f350ffb1
GIT binary patch
diff --git a/static/img/style_guide/toggle_off_disabled.png b/static/img/style_guide/toggle_off_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e64d8ee9bd1b4ae8899b30668684f294de7f815
GIT binary patch
diff --git a/static/img/style_guide/toggle_off_hover.png b/static/img/style_guide/toggle_off_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f78c43248b26317a3a44f29886aa552cdc6803e
GIT binary patch
diff --git a/static/img/style_guide/toggle_off_pressed.png b/static/img/style_guide/toggle_off_pressed.png
new file mode 100644
index 0000000000000000000000000000000000000000..354c8880333ec1b0e9aaadb82908150eba3f0a0a
GIT binary patch
diff --git a/static/img/style_guide/toggle_pressed.png b/static/img/style_guide/toggle_pressed.png
new file mode 100644
index 0000000000000000000000000000000000000000..b33dabf952c1b253b976f417fc2a996455aca697
GIT binary patch
diff --git a/static/js/index.js b/static/js/index.js
index 40bb704..1e4aae5 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -9,11 +9,9 @@ import 'bootstrap/dist/js/bootstrap.min.js';
 import '../../pgaweb/static/css/pgaweb.scss';
 
 import { library, dom } from '@fortawesome/fontawesome-svg-core';
-import { faLaptop, faDownload, faInfo, faBook, faQuestionCircle, faDesktop, faBug, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { faWindows, faApple, faDocker, faUbuntu, faPython, faRedhat } from '@fortawesome/free-brands-svg-icons';
-import { faFileArchive } from '@fortawesome/free-solid-svg-icons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
 
-library.add(faLaptop, faDownload, faInfo, faBook, faQuestionCircle, faDesktop, faBug, faSearch, faWindows, faApple, faDocker, faFileArchive, faUbuntu, faPython, faRedhat);
+library.add(fas);
 dom.watch();
 
 //Do not delete
