diff --git a/pgaweb/static/css/styleguide/_pgadmin.style.scss b/pgaweb/static/css/styleguide/_pgadmin.style.scss
index 2f24eec..c47c3d3 100644
--- a/pgaweb/static/css/styleguide/_pgadmin.style.scss
+++ b/pgaweb/static/css/styleguide/_pgadmin.style.scss
@@ -989,6 +989,10 @@ table.table-empty-rows{
 .typography-font-sect {
     background-color: #f3f5f9;
 
+    .typg-font-style {
+        letter-spacing: 0.25px;
+    }
+
     .typg-style-section {
         width: 49%;
         display: inline-block;
@@ -1014,8 +1018,8 @@ table.table-empty-rows{
         font-weight: normal;
         font-stretch: normal;
         font-style: normal;
-        line-height: 1.33;
-        letter-spacing: 0.25px;
+        line-height: 1.7;
+        letter-spacing: 2px;
         color: #222222;
         padding-left: 3em;
     }
@@ -1031,8 +1035,8 @@ table.table-empty-rows{
         font-weight: bold;
         font-stretch: normal;
         font-style: normal;
-        line-height: 1.33;
-        letter-spacing: 0.25px;
+        line-height: 1.7;
+        letter-spacing: 2px;
         color: #222222;
         padding-left: 3em;
     }
@@ -1040,9 +1044,7 @@ table.table-empty-rows{
 
 .font-family-desc {
     margin-top: 2em;
-    padding-top: 1em;
-    padding-left: 3em;
-    padding-right: 3em;
+    padding: 1em 3em 1em 3em;
     font-size: 12px;
     font-weight: normal;
     font-stretch: normal;
@@ -1254,7 +1256,7 @@ table.table-empty-rows{
 
 .dd_expand {
     width: 252px;
-    height: 269px;
+    height: auto;
     padding-left: 2em;
 }
 
@@ -1323,12 +1325,15 @@ table.table-empty-rows{
 }
 
 .iconography-icon {
-    width: 3.2em;
-    height: 3em;
+    width: 6.2em;
+    height: 5.5em;
     display: inline-block;
     align-items: center;
     text-align: center;
     vertical-align: middle;
+    word-break: break-all;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
 }
 
 .iconography-custom-icon {
@@ -1342,14 +1347,16 @@ table.table-empty-rows{
 }
 
 .iconography-query-icon {
-    width: 5em;
-    height: 5em;
+    width: 6.3em;
+    height: 5.5em;
     display: inline-block;
     align-items: center;
     text-align: center;
+    word-break: break-all;
     vertical-align: middle;
-    margin-right: 1em;
-    margin-bottom: 1em;
+    margin-bottom: 2em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
 }
 
 .iconography-fa-icon {
diff --git a/pgaweb/static/css/styleguide/dark_theme.scss b/pgaweb/static/css/styleguide/dark_theme.scss
index 7e398ea..7175740 100644
--- a/pgaweb/static/css/styleguide/dark_theme.scss
+++ b/pgaweb/static/css/styleguide/dark_theme.scss
@@ -648,6 +648,18 @@
     line-height: 1.17;
     letter-spacing: 0.25px;
     color: #FFF;
+    display: block;
+}
+
+.d-icon-label-tree {
+    font-size: 12px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.17;
+    letter-spacing: 0.25px;
+    color: #FFF;
+    display: block;
 }
 
 .dark-thm {
diff --git a/pgaweb/static/css/styleguide/hc_theme.scss b/pgaweb/static/css/styleguide/hc_theme.scss
index 345027c..48d5b5e 100644
--- a/pgaweb/static/css/styleguide/hc_theme.scss
+++ b/pgaweb/static/css/styleguide/hc_theme.scss
@@ -642,5 +642,13 @@
     padding-right: 2em;
 }
 
+// iconography
+.hc-iconography-component-container {
+    width: auto;
+    border: solid 1px #bac1cd;
+    margin-bottom: 3em;
+    background-color: #010b15;
+}
+
 
 
diff --git a/pgaweb/static/css/styleguide/iconography.scss b/pgaweb/static/css/styleguide/iconography.scss
index 04639c6..ace7d24 100644
--- a/pgaweb/static/css/styleguide/iconography.scss
+++ b/pgaweb/static/css/styleguide/iconography.scss
@@ -1,10 +1,6 @@
 .pg-icon {
-    background-repeat: no-repeat;
-    background-size: 24px !important;
-    align-content: center;
-    vertical-align: middle;
-    height: 2.3em;
-    width: 2.3em;
+    height: 24px;
+    width: 24px;
     display: inline-block;
 
 }
@@ -448,12 +444,8 @@
 
 
 .pg-icon-query {
-    background-repeat: no-repeat;
-    background-size: 64px !important;
-    align-content: center;
-    vertical-align: middle;
-    height: 5em;
-    width: 5em;
+    width: 64px;
+    height: 64px;
     display: inline-block;
 }
 
diff --git a/pgaweb/static/css/styleguide/sd_theme.scss b/pgaweb/static/css/styleguide/sd_theme.scss
index 5837c3d..ca589b7 100644
--- a/pgaweb/static/css/styleguide/sd_theme.scss
+++ b/pgaweb/static/css/styleguide/sd_theme.scss
@@ -2,6 +2,7 @@
     border: none;
     border-bottom: 3px solid #295c85!important;
     color: #295c85 !important;
+    font-weight: 500;
 }
 
 .nav-tabs .nav-link:hover {
@@ -12,7 +13,9 @@
     border: none;
     color: #6d7789;
     padding-left: 0em;
-    font-weight: 500;
+    font-weight: 400;
+    padding-right: 0em;
+    margin-right: 2em;
 }
 
 // Color code classes
@@ -569,8 +572,19 @@
     line-height: 1.17;
     letter-spacing: 0.25px;
     color: #222222;
+    display: block;
 }
 
+.icon-label-tree {
+    font-size: 12px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.17;
+    letter-spacing: 0.25px;
+    color: #222222;
+    display: block;
+}
 
 
 
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/dark_iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/dark_iconography.html
index 37aeed1..46a0742 100644
--- a/pgaweb/templates/pgaweb/styleguide/iconography/dark_iconography.html
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/dark_iconography.html
@@ -419,330 +419,439 @@
     <div class="iconography-header">
         <div class="iconography-icon">
             <span class="pg-icon cast"></span>
+            <span class="d-icon-label-tree">cast</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-cast"></span>
+            <span class="d-icon-label-tree">coll-cast</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon catalog_object_column"></span>
+            <span class="d-icon-label-tree">catalog_object_column</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-column"></span>
+            <span class="d-icon-label-tree">coll-column</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon catalog_object"></span>
+            <span class="d-icon-label-tree">catalog_object</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-catalog_object"></span>
+            <span class="d-icon-label-tree">coll-catalog_object</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon catalog"></span>
+            <span class="d-icon-label-tree">catalog</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-catalog"></span>
+            <span class="d-icon-label-tree">coll-catalog</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon domain_constraints"></span>
+            <span class="d-icon-label-tree">domain_constraints</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-domain_constraints"></span>
+            <span class="d-icon-label-tree">coll-domain_constraints</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon primary_key"></span>
+            <span class="d-icon-label-tree">primary_key</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon compound_trigger"></span>
+            <span class="d-icon-label-tree">compound_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-compound_trigger"></span>
+            <span class="d-icon-label-tree">coll-compound_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-database"></span>
+            <span class="d-icon-label-tree">coll-database</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon database"></span>
+            <span class="d-icon-label-tree">database</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon edbfunc"></span>
+            <span class="d-icon-label-tree">edbfunc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-edbfunc"></span>
+            <span class="d-icon-label-tree">coll-edbfunc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_template"></span>
+            <span class="d-icon-label-tree">fts_template</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_template"></span>
+            <span class="d-icon-label-tree">coll-fts_template</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon trigger"></span>
+            <span class="d-icon-label-tree">trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-trigger"></span>
+            <span class="d-icon-label-tree">coll-trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-sequence"></span>
+            <span class="d-icon-label-tree">coll-sequence</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon event_trigger"></span>
+            <span class="d-icon-label-tree">event_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-event_trigger"></span>
+            <span class="d-icon-label-tree">coll-event_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon trigger_function"></span>
+            <span class="d-icon-label-tree">trigger_function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-trigger_function"></span>
+            <span class="d-icon-label-tree">coll-trigger_function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon procedure"></span>
+            <span class="d-icon-label-tree">procedure</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-function"></span>
+            <span class="d-icon-label-tree">coll-function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon edbproc"></span>
+            <span class="d-icon-label-tree">edbproc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-edbproc"></span>
+            <span class="d-icon-label-tree">col-edbproc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon domain"></span>
+            <span class="d-icon-label-tree">domain</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-domain"></span>
+            <span class="d-icon-label-tree">coll-domain</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon collation"></span>
+            <span class="d-icon-label-tree">collation</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon language"></span>
+            <span class="d-icon-label-tree">language</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-language"></span>
+            <span class="d-icon-label-tree">coll-language</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon mview"></span>
+            <span class="d-icon-label-tree">mview</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-mview"></span>
+            <span class="d-icon-label-tree">coll-mview</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon function"></span>
+            <span class="d-icon-label-tree">function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-procedure"></span>
+            <span class="d-icon-label-tree">coll-procedure</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon schema"></span>
+            <span class="d-icon-label-tree">schema</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-schema"></span>
+            <span class="d-icon-label-tree">coll-schema</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon synonym"></span>
+            <span class="d-icon-label-tree">synonym</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-synonym"></span>
+            <span class="d-icon-label-tree">coll-synonym</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_parser"></span>
+            <span class="d-icon-label-tree">coll-fts_parser</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon type"></span>
+            <span class="d-icon-label-tree">type</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-type"></span>
+            <span class="d-icon-label-tree">coll-type</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon view"></span>
+            <span class="d-icon-label-tree">view</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-view"></span>
+            <span class="d-icon-label-tree">coll-view</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon resource_group"></span>
+            <span class="d-icon-label-tree">resource_group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-resource_group"></span>
+            <span class="d-icon-label-tree">coll-resource_group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon tablespace"></span>
+            <span class="d-icon-label-tree">tablespace</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-tablespace"></span>
+            <span class="d-icon-label-tree">coll-tablespace</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon rule-1"></span>
+            <span class="d-icon-label-tree">rule-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-rule"></span>
+            <span class="d-icon-label-tree">coll-rule</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon exclusion_constraint"></span>
+            <span class="d-icon-label-tree">exclusion_constraint</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon package"></span>
+            <span class="d-icon-label-tree">package</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-package"></span>
+            <span class="d-icon-label-tree">coll-package</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon index"></span>
+            <span class="d-icon-label-tree">index</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-index"></span>
+            <span class="d-icon-label-tree">coll-index</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon role"></span>
+            <span class="d-icon-label-tree">role</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-role"></span>
+            <span class="d-icon-label-tree">coll-role</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon group"></span>
+            <span class="d-icon-label-tree">group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon partition"></span>
+            <span class="d-icon-label-tree">partition</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-partition"></span>
+            <span class="d-icon-label-tree">coll-partition</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-foreign_data_wrapper-1"></span>
+            <span class="d-icon-label-tree">coll-foreign_data_wrapper-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon foreign_data_wrapper-1"></span>
+            <span class="d-icon-label-tree">foreign_data_wrapper-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_job"></span>
+            <span class="d-icon-label-tree">pga_job</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-pga_job"></span>
+            <span class="d-icon-label-tree">coll-pga_job</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_jobstep"></span>
+            <span class="d-icon-label-tree">pga_jobstep</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-pga_jobstep"></span>
+            <span class="d-icon-label-tree">coll-pga_jobstep</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon user_mapping"></span>
+            <span class="d-icon-label-tree">user_mapping</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-user_mapping"></span>
+            <span class="d-icon-label-tree">coll-user_mapping</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_schedule"></span>
+            <span class="d-icon-label-tree">pga_schedule</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-pga_schedule"></span>
+            <span class="d-icon-label-tree">coll-pga_schedule</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon server_group"></span>
+            <span class="d-icon-label-tree">server_group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon server"></span>
+            <span class="d-icon-label-tree">server</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-foreign_server"></span>
+            <span class="d-icon-label-tree">coll-foreign_server</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon trigger-bad"></span>
+            <span class="d-icon-label-tree">trigger-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon triggerbad"></span>
+            <span class="d-icon-label-tree">triggerbad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_schedule-disabled"></span>
+            <span class="d-icon-label-tree">pga_schedule-disabled</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_job-disabled"></span>
+            <span class="d-icon-label-tree">pga_job-disabled</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_jobstep-disabled"></span>
+            <span class="d-icon-label-tree">pga_jobstep-disabled</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon serverbad"></span>
+            <span class="d-icon-label-tree">serverbad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon domain_constraints-bad"></span>
+            <span class="d-icon-label-tree">domain_constraints-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon compound_trigger-bad"></span>
+            <span class="d-icon-label-tree">compound_trigger-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon databasebad"></span>
+            <span class="d-icon-label-tree">databasebad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon check-constraint-bad"></span>
+            <span class="d-icon-label-tree">check-constraint-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon check-constraint"></span>
+            <span class="d-icon-label-tree">check-constraint</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon sub_partition_table"></span>
+            <span class="d-icon-label-tree">sub_partition_table</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-inherited"></span>
+            <span class="d-icon-label-tree">table-inherited</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-inherits"></span>
+            <span class="d-icon-label-tree">table-inherits</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-multi-inherit"></span>
+            <span class="d-icon-label-tree">table-multi-inherit</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon partition_table"></span>
+            <span class="d-icon-label-tree">partition_table</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon unique_constraint"></span>
+            <span class="d-icon-label-tree">unique_constraint</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-repl"></span>
+            <span class="d-icon-label-tree">table-repl</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-foreign_table"></span>
+            <span class="d-icon-label-tree">coll-foreign_table</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_dictionary"></span>
+            <span class="d-icon-label-tree">coll-fts_dictionary</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon ppas"></span>
+            <span class="d-icon-label-tree">ppas</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pg"></span>
+            <span class="d-icon-label-tree">pg</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-edbvar"></span>
+            <span class="d-icon-label-tree">coll-edbvar</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon edbvar"></span>
+            <span class="d-icon-label-tree">edbvar</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon extension"></span>
+            <span class="d-icon-label-tree">extension</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-extension"></span>
+            <span class="d-icon-label-tree">coll-extension</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_configuration"></span>
+            <span class="d-icon-label-tree">coll-fts_configuration</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_configuration-1"></span>
+            <span class="d-icon-label-tree">fts_configuration-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_dictionary"></span>
+            <span class="d-icon-label-tree">fts_dictionary</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon ex_unknown"></span>
+            <span class="d-icon-label-tree">ex_unknown</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_parser"></span>
+            <span class="d-icon-label-tree">fts_parser</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-constraints"></span>
+            <span class="d-icon-label-tree">coll-constraints</span>
         </div>
     </div>
 </div>
@@ -753,156 +862,208 @@
     <div class="iconography-header">
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_aggregate"></span>
+            <span class="d-icon-label">ex_aggregate</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_append"></span>
+            <span class="d-icon-label">ex_append</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_and"></span>
+            <span class="d-icon-label">ex_bmp_and</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_heap"></span>
+            <span class="d-icon-label">ex_bmp_heap</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_index"></span>
+            <span class="d-icon-label">ex_bmp_index</span>
+
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_or"></span>
+            <span class="d-icon-label">ex_bmp_or</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_cte_scan"></span>
+            <span class="d-icon-label">ex_cte_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_delete"></span>
+            <span class="d-icon-label">ex_delete</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_foreign_scan"></span>
+            <span class="d-icon-label">ex_foreign_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_gather_merge"></span>
+            <span class="d-icon-label">ex_gather_merge</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_gather_motion"></span>
+            <span class="d-icon-label">ex_gather_motion</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_group"></span>
+            <span class="d-icon-label">ex_group</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_intersect_all"></span>
+            <span class="d-icon-label">ex_hash_setop_intersect_all</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_intersect"></span>
+            <span class="d-icon-label">ex_hash_setop_intersect</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_unknown"></span>
+            <span class="d-icon-label">ex_hash_setop_unknown</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash"></span>
+            <span class="d-icon-label">ex_hash</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_index_only_scan"></span>
+            <span class="d-icon-label">ex_index_only_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_index_scan"></span>
+            <span class="d-icon-label">ex_index_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_materialize"></span>
+            <span class="d-icon-label">ex_materialize</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge_anti_join"></span>
+            <span class="d-icon-label">ex_merge_anto_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge_append"></span>
+            <span class="d-icon-label">ex_merge_append</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge_semi_join"></span>
+            <span class="d-icon-label">ex_merge_semi_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge"></span>
+            <span class="d-icon-label">ex_merge</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_named_tuplestore_scan"></span>
+            <span class="d-icon-label">ex_named_tuplestore_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_recursive_union"></span>
+            <span class="d-icon-label">ex_recursive_union</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_redistribute_motion"></span>
+            <span class="d-icon-label">ex_redistribute_motion</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_result"></span>
+            <span class="d-icon-label">ex_result</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_scan"></span>
+            <span class="d-icon-label">ex_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_seek"></span>
+            <span class="d-icon-label">ex_seek</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_setop"></span>
+            <span class="d-icon-label">ex_setop</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_values_scan"></span>
+            <span class="d-icon-label">ex_values_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_lock_rows"></span>
+            <span class="d-icon-label">ex_lock_rows</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_projectset"></span>
+            <span class="d-icon-label">e_projectset</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_update"></span>
+            <span class="d-icon-label">ex_update</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_tid_scan"></span>
+            <span class="d-icon-label">ex_tid_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_window_aggregate"></span>
+            <span class="d-icon-label">ex_window_aggregate</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_except_all"></span>
+            <span class="d-icon-label">ex_hash_setop_except_all</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_limit"></span>
+            <span class="d-icon-label">ex_limit</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_table_func_scan"></span>
+            <span class="d-icon-label">ex_table_func_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_semi_join"></span>
+            <span class="d-icon-label">ex_hash_semi_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_subplan"></span>
+            <span class="d-icon-label">ex_subplan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_nested_loop_semi_join"></span>
+            <span class="d-icon-label">ex_nested_loop_semi_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_unique"></span>
+            <span class="d-icon-label">ex_unique</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_except"></span>
+            <span class="d-icon-label">ex_hash_setop_except</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_broadcast_motion"></span>
+            <span class="d-icon-label">ex_broadcast_motion</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_anti_join"></span>
+            <span class="d-icon-label">ex_hash_anti_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_insert"></span>
+            <span class="d-icon-label">ex_insert</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_nested_loop_anti_join"></span>
+            <span class="d-icon-label">ex_nested_loop_anti_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_worktable_scan"></span>
+            <span class="d-icon-label">ex_worktable_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_sort"></span>
+            <span class="d-icon-label">ex_sort</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_join"></span>
+            <span class="d-icon-label">ex_join</span>
         </div>
     </div>
 </div>
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/hc_iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/hc_iconography.html
index 02ab3d6..c21542f 100644
--- a/pgaweb/templates/pgaweb/styleguide/iconography/hc_iconography.html
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/hc_iconography.html
@@ -1,7 +1,7 @@
 {% 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="hc-iconography-component-container">
     <div class="iconography-header">
         <div class="iconography-fa-icon">
             <span class=" pg-fa-icon dark-thm fa fa-save"></span><br/>
@@ -355,7 +355,7 @@
 
 {% elif section == 'custom_icons' %}
 <p class="color-header" id="solidIcons">Custom Solid Icons (14x14px)</p>
-<div class="d-iconography-component-container">
+<div class="hc-iconography-component-container">
     <div class="iconography-header">
         <div class="iconography-custom-icon">
             <span class="pg-icon-custom commit dark-thm"></span>
@@ -417,334 +417,443 @@
 
 {% elif section == 'tree_view_icons' %}
 <p class="color-header" id="treeView">Tree View Icons (14x14px)</p>
-<div class="d-iconography-component-container">
+<div class="hc-iconography-component-container">
     <div class="iconography-header">
         <div class="iconography-icon">
             <span class="pg-icon cast"></span>
+            <span class="d-icon-label-tree">cast</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-cast"></span>
+            <span class="d-icon-label-tree">coll-cast</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon catalog_object_column"></span>
+            <span class="d-icon-label-tree">catalog_object_column</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-column"></span>
+            <span class="d-icon-label-tree">coll-column</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon catalog_object"></span>
+            <span class="d-icon-label-tree">catalog_object</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-catalog_object"></span>
+            <span class="d-icon-label-tree">coll-catalog_object</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon catalog"></span>
+            <span class="d-icon-label-tree">catalog</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-catalog"></span>
+            <span class="d-icon-label-tree">coll-catalog</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon domain_constraints"></span>
+            <span class="d-icon-label-tree">domain_constraints</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-domain_constraints"></span>
+            <span class="d-icon-label-tree">coll-domain_constraints</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon primary_key"></span>
+            <span class="d-icon-label-tree">primary_key</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon compound_trigger"></span>
+            <span class="d-icon-label-tree">compound_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-compound_trigger"></span>
+            <span class="d-icon-label-tree">coll-compound_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-database"></span>
+            <span class="d-icon-label-tree">coll-database</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon database"></span>
+            <span class="d-icon-label-tree">database</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon edbfunc"></span>
+            <span class="d-icon-label-tree">edbfunc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-edbfunc"></span>
+            <span class="d-icon-label-tree">coll-edbfunc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_template"></span>
+            <span class="d-icon-label-tree">fts_template</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_template"></span>
+            <span class="d-icon-label-tree">coll-fts_template</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon trigger"></span>
+            <span class="d-icon-label-tree">trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-trigger"></span>
+            <span class="d-icon-label-tree">coll-trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-sequence"></span>
+            <span class="d-icon-label-tree">coll-sequence</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon event_trigger"></span>
+            <span class="d-icon-label-tree">event_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-event_trigger"></span>
+            <span class="d-icon-label-tree">coll-event_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon trigger_function"></span>
+            <span class="d-icon-label-tree">trigger_function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-trigger_function"></span>
+            <span class="d-icon-label-tree">coll-trigger_function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon procedure"></span>
+            <span class="d-icon-label-tree">procedure</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-function"></span>
+            <span class="d-icon-label-tree">coll-function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon edbproc"></span>
+            <span class="d-icon-label-tree">edbproc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-edbproc"></span>
+            <span class="d-icon-label-tree">col-edbproc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon domain"></span>
+            <span class="d-icon-label-tree">domain</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-domain"></span>
+            <span class="d-icon-label-tree">coll-domain</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon collation"></span>
+            <span class="d-icon-label-tree">collation</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon language"></span>
+            <span class="d-icon-label-tree">language</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-language"></span>
+            <span class="d-icon-label-tree">coll-language</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon mview"></span>
+            <span class="d-icon-label-tree">mview</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-mview"></span>
+            <span class="d-icon-label-tree">coll-mview</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon function"></span>
+            <span class="d-icon-label-tree">function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-procedure"></span>
+            <span class="d-icon-label-tree">coll-procedure</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon schema"></span>
+            <span class="d-icon-label-tree">schema</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-schema"></span>
+            <span class="d-icon-label-tree">coll-schema</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon synonym"></span>
+            <span class="d-icon-label-tree">synonym</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-synonym"></span>
+            <span class="d-icon-label-tree">coll-synonym</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_parser"></span>
+            <span class="d-icon-label-tree">coll-fts_parser</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon type"></span>
+            <span class="d-icon-label-tree">type</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-type"></span>
+            <span class="d-icon-label-tree">coll-type</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon view"></span>
+            <span class="d-icon-label-tree">view</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-view"></span>
+            <span class="d-icon-label-tree">coll-view</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon resource_group"></span>
+            <span class="d-icon-label-tree">resource_group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-resource_group"></span>
+            <span class="d-icon-label-tree">coll-resource_group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon tablespace"></span>
+            <span class="d-icon-label-tree">tablespace</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-tablespace"></span>
+            <span class="d-icon-label-tree">coll-tablespace</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon rule-1"></span>
+            <span class="d-icon-label-tree">rule-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-rule"></span>
+            <span class="d-icon-label-tree">coll-rule</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon exclusion_constraint"></span>
+            <span class="d-icon-label-tree">exclusion_constraint</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon package"></span>
+            <span class="d-icon-label-tree">package</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-package"></span>
+            <span class="d-icon-label-tree">coll-package</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon index"></span>
+            <span class="d-icon-label-tree">index</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-index"></span>
+            <span class="d-icon-label-tree">coll-index</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon role"></span>
+            <span class="d-icon-label-tree">role</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-role"></span>
+            <span class="d-icon-label-tree">coll-role</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon group"></span>
+            <span class="d-icon-label-tree">group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon partition"></span>
+            <span class="d-icon-label-tree">partition</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-partition"></span>
+            <span class="d-icon-label-tree">coll-partition</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-foreign_data_wrapper-1"></span>
+            <span class="d-icon-label-tree">coll-foreign_data_wrapper-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon foreign_data_wrapper-1"></span>
+            <span class="d-icon-label-tree">foreign_data_wrapper-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_job"></span>
+            <span class="d-icon-label-tree">pga_job</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-pga_job"></span>
+            <span class="d-icon-label-tree">coll-pga_job</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_jobstep"></span>
+            <span class="d-icon-label-tree">pga_jobstep</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-pga_jobstep"></span>
+            <span class="d-icon-label-tree">coll-pga_jobstep</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon user_mapping"></span>
+            <span class="d-icon-label-tree">user_mapping</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-user_mapping"></span>
+            <span class="d-icon-label-tree">coll-user_mapping</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_schedule"></span>
+            <span class="d-icon-label-tree">pga_schedule</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-pga_schedule"></span>
+            <span class="d-icon-label-tree">coll-pga_schedule</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon server_group"></span>
+            <span class="d-icon-label-tree">server_group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon server"></span>
+            <span class="d-icon-label-tree">server</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-foreign_server"></span>
+            <span class="d-icon-label-tree">coll-foreign_server</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon trigger-bad"></span>
+            <span class="d-icon-label-tree">trigger-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon triggerbad"></span>
+            <span class="d-icon-label-tree">triggerbad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_schedule-disabled"></span>
+            <span class="d-icon-label-tree">pga_schedule-disabled</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_job-disabled"></span>
+            <span class="d-icon-label-tree">pga_job-disabled</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_jobstep-disabled"></span>
+            <span class="d-icon-label-tree">pga_jobstep-disabled</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon serverbad"></span>
+            <span class="d-icon-label-tree">serverbad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon domain_constraints-bad"></span>
+            <span class="d-icon-label-tree">domain_constraints-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon compound_trigger-bad"></span>
+            <span class="d-icon-label-tree">compound_trigger-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon databasebad"></span>
+            <span class="d-icon-label-tree">databasebad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon check-constraint-bad"></span>
+            <span class="d-icon-label-tree">check-constraint-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon check-constraint"></span>
+            <span class="d-icon-label-tree">check-constraint</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon sub_partition_table"></span>
+            <span class="d-icon-label-tree">sub_partition_table</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-inherited"></span>
+            <span class="d-icon-label-tree">table-inherited</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-inherits"></span>
+            <span class="d-icon-label-tree">table-inherits</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-multi-inherit"></span>
+            <span class="d-icon-label-tree">table-multi-inherit</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon partition_table"></span>
+            <span class="d-icon-label-tree">partition_table</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon unique_constraint"></span>
+            <span class="d-icon-label-tree">unique_constraint</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-repl"></span>
+            <span class="d-icon-label-tree">table-repl</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-foreign_table"></span>
+            <span class="d-icon-label-tree">coll-foreign_table</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_dictionary"></span>
+            <span class="d-icon-label-tree">coll-fts_dictionary</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon ppas"></span>
+            <span class="d-icon-label-tree">ppas</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pg"></span>
+            <span class="d-icon-label-tree">pg</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-edbvar"></span>
+            <span class="d-icon-label-tree">coll-edbvar</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon edbvar"></span>
+            <span class="d-icon-label-tree">edbvar</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon extension"></span>
+            <span class="d-icon-label-tree">extension</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-extension"></span>
+            <span class="d-icon-label-tree">coll-extension</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_configuration"></span>
+            <span class="d-icon-label-tree">coll-fts_configuration</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_configuration-1"></span>
+            <span class="d-icon-label-tree">fts_configuration-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_dictionary"></span>
+            <span class="d-icon-label-tree">fts_dictionary</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon ex_unknown"></span>
+            <span class="d-icon-label-tree">ex_unknown</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_parser"></span>
+            <span class="d-icon-label-tree">fts_parser</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-constraints"></span>
+            <span class="d-icon-label-tree">coll-constraints</span>
         </div>
     </div>
 </div>
@@ -752,160 +861,212 @@
 {% elif section == 'query_plans' %}
 <p class="color-header" id="queryPlans">Query Plan Icons
     (64x64px)</p>
-<div class="d-iconography-component-container">
+<div class="hc-iconography-component-container">
     <div class="iconography-header">
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_aggregate"></span>
+            <span class="d-icon-label">ex_aggregate</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_append"></span>
+            <span class="d-icon-label">ex_append</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_and"></span>
+            <span class="d-icon-label">ex_bmp_and</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_heap"></span>
+            <span class="d-icon-label">ex_bmp_heap</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_index"></span>
+            <span class="d-icon-label">ex_bmp_index</span>
+
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_or"></span>
+            <span class="d-icon-label">ex_bmp_or</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_cte_scan"></span>
+            <span class="d-icon-label">ex_cte_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_delete"></span>
+            <span class="d-icon-label">ex_delete</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_foreign_scan"></span>
+            <span class="d-icon-label">ex_foreign_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_gather_merge"></span>
+            <span class="d-icon-label">ex_gather_merge</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_gather_motion"></span>
+            <span class="d-icon-label">ex_gather_motion</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_group"></span>
+            <span class="d-icon-label">ex_group</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_intersect_all"></span>
+            <span class="d-icon-label">ex_hash_setop_intersect_all</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_intersect"></span>
+            <span class="d-icon-label">ex_hash_setop_intersect</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_unknown"></span>
+            <span class="d-icon-label">ex_hash_setop_unknown</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash"></span>
+            <span class="d-icon-label">ex_hash</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_index_only_scan"></span>
+            <span class="d-icon-label">ex_index_only_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_index_scan"></span>
+            <span class="d-icon-label">ex_index_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_materialize"></span>
+            <span class="d-icon-label">ex_materialize</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge_anti_join"></span>
+            <span class="d-icon-label">ex_merge_anto_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge_append"></span>
+            <span class="d-icon-label">ex_merge_append</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge_semi_join"></span>
+            <span class="d-icon-label">ex_merge_semi_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge"></span>
+            <span class="d-icon-label">ex_merge</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_named_tuplestore_scan"></span>
+            <span class="d-icon-label">ex_named_tuplestore_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_recursive_union"></span>
+            <span class="d-icon-label">ex_recursive_union</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_redistribute_motion"></span>
+            <span class="d-icon-label">ex_redistribute_motion</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_result"></span>
+            <span class="d-icon-label">ex_result</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_scan"></span>
+            <span class="d-icon-label">ex_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_seek"></span>
+            <span class="d-icon-label">ex_seek</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_setop"></span>
+            <span class="d-icon-label">ex_setop</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_values_scan"></span>
+            <span class="d-icon-label">ex_values_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_lock_rows"></span>
+            <span class="d-icon-label">ex_lock_rows</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_projectset"></span>
+            <span class="d-icon-label">e_projectset</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_update"></span>
+            <span class="d-icon-label">ex_update</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_tid_scan"></span>
+            <span class="d-icon-label">ex_tid_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_window_aggregate"></span>
+            <span class="d-icon-label">ex_window_aggregate</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_except_all"></span>
+            <span class="d-icon-label">ex_hash_setop_except_all</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_limit"></span>
+            <span class="d-icon-label">ex_limit</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_table_func_scan"></span>
+            <span class="d-icon-label">ex_table_func_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_semi_join"></span>
+            <span class="d-icon-label">ex_hash_semi_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_subplan"></span>
+            <span class="d-icon-label">ex_subplan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_nested_loop_semi_join"></span>
+            <span class="d-icon-label">ex_nested_loop_semi_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_unique"></span>
+            <span class="d-icon-label">ex_unique</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_except"></span>
+            <span class="d-icon-label">ex_hash_setop_except</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_broadcast_motion"></span>
+            <span class="d-icon-label">ex_broadcast_motion</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_anti_join"></span>
+            <span class="d-icon-label">ex_hash_anti_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_insert"></span>
+            <span class="d-icon-label">ex_insert</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_nested_loop_anti_join"></span>
+            <span class="d-icon-label">ex_nested_loop_anti_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_worktable_scan"></span>
+            <span class="d-icon-label">ex_worktable_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_sort"></span>
+            <span class="d-icon-label">ex_sort</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_join"></span>
+            <span class="d-icon-label">ex_join</span>
         </div>
     </div>
 </div>
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/sd_iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/sd_iconography.html
index 77834f6..e61c04c 100644
--- a/pgaweb/templates/pgaweb/styleguide/iconography/sd_iconography.html
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/sd_iconography.html
@@ -420,330 +420,439 @@
     <div class="iconography-header">
         <div class="iconography-icon">
             <span class="pg-icon cast"></span>
+            <span class="icon-label-tree">cast</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-cast"></span>
+            <span class="icon-label-tree">coll-cast</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon catalog_object_column"></span>
+            <span class="icon-label-tree">catalog_object_column</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-column"></span>
+            <span class="icon-label-tree">coll-column</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon catalog_object"></span>
+            <span class="icon-label-tree">catalog_object</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-catalog_object"></span>
+            <span class="icon-label-tree">coll-catalog_object</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon catalog"></span>
+            <span class="icon-label-tree">catalog</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-catalog"></span>
+            <span class="icon-label-tree">coll-catalog</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon domain_constraints"></span>
+            <span class="icon-label-tree">domain_constraints</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-domain_constraints"></span>
+            <span class="icon-label-tree">coll-domain_constraints</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon primary_key"></span>
+            <span class="icon-label-tree">primary_key</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon compound_trigger"></span>
+            <span class="icon-label-tree">compound_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-compound_trigger"></span>
+            <span class="icon-label-tree">coll-compound_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-database"></span>
+            <span class="icon-label-tree">coll-database</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon database"></span>
+            <span class="icon-label-tree">database</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon edbfunc"></span>
+            <span class="icon-label-tree">edbfunc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-edbfunc"></span>
+            <span class="icon-label-tree">coll-edbfunc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_template"></span>
+            <span class="icon-label-tree">fts_template</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_template"></span>
+            <span class="icon-label-tree">coll-fts_template</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon trigger"></span>
+            <span class="icon-label-tree">trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-trigger"></span>
+            <span class="icon-label-tree">coll-trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-sequence"></span>
+            <span class="icon-label-tree">coll-sequence</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon event_trigger"></span>
+            <span class="icon-label-tree">event_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-event_trigger"></span>
+            <span class="icon-label-tree">coll-event_trigger</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon trigger_function"></span>
+            <span class="icon-label-tree">trigger_function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-trigger_function"></span>
+            <span class="icon-label-tree">coll-trigger_function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon procedure"></span>
+            <span class="icon-label-tree">procedure</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-function"></span>
+            <span class="icon-label-tree">coll-function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon edbproc"></span>
+            <span class="icon-label-tree">edbproc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-edbproc"></span>
+            <span class="icon-label-tree">col-edbproc</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon domain"></span>
+            <span class="icon-label-tree">domain</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-domain"></span>
+            <span class="icon-label-tree">coll-domain</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon collation"></span>
+            <span class="icon-label-tree">collation</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon language"></span>
+            <span class="icon-label-tree">language</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-language"></span>
+            <span class="icon-label-tree">coll-language</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon mview"></span>
+            <span class="icon-label-tree">mview</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-mview"></span>
+            <span class="icon-label-tree">coll-mview</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon function"></span>
+            <span class="icon-label-tree">function</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-procedure"></span>
+            <span class="icon-label-tree">coll-procedure</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon schema"></span>
+            <span class="icon-label-tree">schema</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-schema"></span>
+            <span class="icon-label-tree">coll-schema</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon synonym"></span>
+            <span class="icon-label-tree">synonym</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-synonym"></span>
+            <span class="icon-label-tree">coll-synonym</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_parser"></span>
+            <span class="icon-label-tree">coll-fts_parser</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon type"></span>
+            <span class="icon-label-tree">type</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-type"></span>
+            <span class="icon-label-tree">coll-type</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon view"></span>
+            <span class="icon-label-tree">view</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-view"></span>
+            <span class="icon-label-tree">coll-view</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon resource_group"></span>
+            <span class="icon-label-tree">resource_group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-resource_group"></span>
+            <span class="icon-label-tree">coll-resource_group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon tablespace"></span>
+            <span class="icon-label-tree">tablespace</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-tablespace"></span>
+            <span class="icon-label-tree">coll-tablespace</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon rule-1"></span>
+            <span class="icon-label-tree">rule-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-rule"></span>
+            <span class="icon-label-tree">coll-rule</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon exclusion_constraint"></span>
+            <span class="icon-label-tree">exclusion_constraint</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon package"></span>
+            <span class="icon-label-tree">package</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-package"></span>
+            <span class="icon-label-tree">coll-package</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon index"></span>
+            <span class="icon-label-tree">index</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-index"></span>
+            <span class="icon-label-tree">coll-index</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon role"></span>
+            <span class="icon-label-tree">role</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-role"></span>
+            <span class="icon-label-tree">coll-role</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon group"></span>
+            <span class="icon-label-tree">group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon partition"></span>
+            <span class="icon-label-tree">partition</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-partition"></span>
+            <span class="icon-label-tree">coll-partition</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-foreign_data_wrapper-1"></span>
+            <span class="icon-label-tree">coll-foreign_data_wrapper-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon foreign_data_wrapper-1"></span>
+            <span class="icon-label-tree">foreign_data_wrapper-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_job"></span>
+            <span class="icon-label-tree">pga_job</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-pga_job"></span>
+            <span class="icon-label-tree">coll-pga_job</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_jobstep"></span>
+            <span class="icon-label-tree">pga_jobstep</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-pga_jobstep"></span>
+            <span class="icon-label-tree">coll-pga_jobstep</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon user_mapping"></span>
+            <span class="icon-label-tree">user_mapping</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-user_mapping"></span>
+            <span class="icon-label-tree">coll-user_mapping</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_schedule"></span>
+            <span class="icon-label-tree">pga_schedule</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-pga_schedule"></span>
+            <span class="icon-label-tree">coll-pga_schedule</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon server_group"></span>
+            <span class="icon-label-tree">server_group</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon server"></span>
+            <span class="icon-label-tree">server</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-foreign_server"></span>
+            <span class="icon-label-tree">coll-foreign_server</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon trigger-bad"></span>
+            <span class="icon-label-tree">trigger-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon triggerbad"></span>
+            <span class="icon-label-tree">triggerbad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_schedule-disabled"></span>
+            <span class="icon-label-tree">pga_schedule-disabled</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_job-disabled"></span>
+            <span class="icon-label-tree">pga_job-disabled</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pga_jobstep-disabled"></span>
+            <span class="icon-label-tree">pga_jobstep-disabled</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon serverbad"></span>
+            <span class="icon-label-tree">serverbad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon domain_constraints-bad"></span>
+            <span class="icon-label-tree">domain_constraints-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon compound_trigger-bad"></span>
+            <span class="icon-label-tree">compound_trigger-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon databasebad"></span>
+            <span class="icon-label-tree">databasebad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon check-constraint-bad"></span>
+            <span class="icon-label-tree">check-constraint-bad</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon check-constraint"></span>
+            <span class="icon-label-tree">check-constraint</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon sub_partition_table"></span>
+            <span class="icon-label-tree">sub_partition_table</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-inherited"></span>
+            <span class="icon-label-tree">table-inherited</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-inherits"></span>
+            <span class="icon-label-tree">table-inherits</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-multi-inherit"></span>
+            <span class="icon-label-tree">table-multi-inherit</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon partition_table"></span>
+            <span class="icon-label-tree">partition_table</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon unique_constraint"></span>
+            <span class="icon-label-tree">unique_constraint</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon table-repl"></span>
+            <span class="icon-label-tree">table-repl</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-foreign_table"></span>
+            <span class="icon-label-tree">coll-foreign_table</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_dictionary"></span>
+            <span class="icon-label-tree">coll-fts_dictionary</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon ppas"></span>
+            <span class="icon-label-tree">ppas</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon pg"></span>
+            <span class="icon-label-tree">pg</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-edbvar"></span>
+            <span class="icon-label-tree">coll-edbvar</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon edbvar"></span>
+            <span class="icon-label-tree">edbvar</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon extension"></span>
+            <span class="icon-label-tree">extension</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-extension"></span>
+            <span class="icon-label-tree">coll-extension</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-fts_configuration"></span>
+            <span class="icon-label-tree">coll-fts_configuration</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_configuration-1"></span>
+            <span class="icon-label-tree">fts_configuration-1</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_dictionary"></span>
+            <span class="icon-label-tree">fts_dictionary</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon ex_unknown"></span>
+            <span class="icon-label-tree">ex_unknown</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon fts_parser"></span>
+            <span class="icon-label-tree">fts_parser</span>
         </div>
         <div class="iconography-icon">
             <span class="pg-icon coll-constraints"></span>
+            <span class="icon-label-tree">coll-constraints</span>
         </div>
     </div>
 </div>
@@ -755,156 +864,208 @@
     <div class="iconography-header">
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_aggregate"></span>
+            <span class="icon-label">ex_aggregate</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_append"></span>
+            <span class="icon-label">ex_append</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_and"></span>
+            <span class="icon-label">ex_bmp_and</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_heap"></span>
+            <span class="icon-label">ex_bmp_heap</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_index"></span>
+            <span class="icon-label">ex_bmp_index</span>
+
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_bmp_or"></span>
+            <span class="icon-label">ex_bmp_or</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_cte_scan"></span>
+            <span class="icon-label">ex_cte_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_delete"></span>
+            <span class="icon-label">ex_delete</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_foreign_scan"></span>
+            <span class="icon-label">ex_foreign_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_gather_merge"></span>
+            <span class="icon-label">ex_gather_merge</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_gather_motion"></span>
+            <span class="icon-label">ex_gather_motion</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_group"></span>
+            <span class="icon-label">ex_group</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_intersect_all"></span>
+            <span class="icon-label">ex_hash_setop_intersect_all</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_intersect"></span>
+            <span class="icon-label">ex_hash_setop_intersect</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_unknown"></span>
+            <span class="icon-label">ex_hash_setop_unknown</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash"></span>
+            <span class="icon-label">ex_hash</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_index_only_scan"></span>
+            <span class="icon-label">ex_index_only_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_index_scan"></span>
+            <span class="icon-label">ex_index_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_materialize"></span>
+            <span class="icon-label">ex_materialize</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge_anti_join"></span>
+            <span class="icon-label">ex_merge_anto_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge_append"></span>
+            <span class="icon-label">ex_merge_append</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge_semi_join"></span>
+            <span class="icon-label">ex_merge_semi_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_merge"></span>
+            <span class="icon-label">ex_merge</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_named_tuplestore_scan"></span>
+            <span class="icon-label">ex_named_tuplestore_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_recursive_union"></span>
+            <span class="icon-label">ex_recursive_union</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_redistribute_motion"></span>
+            <span class="icon-label">ex_redistribute_motion</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_result"></span>
+            <span class="icon-label">ex_result</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_scan"></span>
+            <span class="icon-label">ex_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_seek"></span>
+            <span class="icon-label">ex_seek</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_setop"></span>
+            <span class="icon-label">ex_setop</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_values_scan"></span>
+            <span class="icon-label">ex_values_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_lock_rows"></span>
+            <span class="icon-label">ex_lock_rows</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_projectset"></span>
+            <span class="icon-label">e_projectset</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_update"></span>
+            <span class="icon-label">ex_update</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_tid_scan"></span>
+            <span class="icon-label">ex_tid_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_window_aggregate"></span>
+            <span class="icon-label">ex_window_aggregate</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_except_all"></span>
+            <span class="icon-label">ex_hash_setop_except_all</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_limit"></span>
+            <span class="icon-label">ex_limit</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_table_func_scan"></span>
+            <span class="icon-label">ex_table_func_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_semi_join"></span>
+            <span class="icon-label">ex_hash_semi_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_subplan"></span>
+            <span class="icon-label">ex_subplan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_nested_loop_semi_join"></span>
+            <span class="icon-label">ex_nested_loop_semi_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_unique"></span>
+            <span class="icon-label">ex_unique</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_setop_except"></span>
+            <span class="icon-label">ex_hash_setop_except</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_broadcast_motion"></span>
+            <span class="icon-label">ex_broadcast_motion</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_hash_anti_join"></span>
+            <span class="icon-label">ex_hash_anti_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_insert"></span>
+            <span class="icon-label">ex_insert</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_nested_loop_anti_join"></span>
+            <span class="icon-label">ex_nested_loop_anti_join</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_worktable_scan"></span>
+            <span class="icon-label">ex_worktable_scan</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_sort"></span>
+            <span class="icon-label">ex_sort</span>
         </div>
         <div class="iconography-query-icon">
             <span class="pg-icon-query ex_join"></span>
+            <span class="icon-label">ex_join</span>
         </div>
     </div>
 </div>
diff --git a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html
index f99dc93..bac7f0d 100644
--- a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html
+++ b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html
@@ -1,5 +1,5 @@
 {% load static %}
-<p class="color-header">Primary Buttons</p>
+<p class="color-header">Toggle On</p>
 <div class="btn-container">
     <table>
         <tr class="sd-btn-row">
diff --git a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html
index b5b18fe..8f06e0c 100644
--- a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html
+++ b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html
@@ -1,5 +1,5 @@
 {% load static %}
-<p class="color-header">Primary Buttons</p>
+<p class="color-header">Toggle On</p>
 <div class="btn-container">
     <table>
         <tr class="sd-btn-row">
diff --git a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html
index d84d528..4e79bf8 100644
--- a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html
+++ b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html
@@ -1,5 +1,5 @@
 {% load static %}
-<p class="color-header">Primary Buttons</p>
+<p class="color-header">Toggle On</p>
 <div class="btn-container">
     <table>
         <tr class="sd-btn-row">
diff --git a/pgaweb/templates/pgaweb/styleguide/typography.html b/pgaweb/templates/pgaweb/styleguide/typography.html
index a7486fc..2f1b930 100644
--- a/pgaweb/templates/pgaweb/styleguide/typography.html
+++ b/pgaweb/templates/pgaweb/styleguide/typography.html
@@ -19,14 +19,14 @@
     </p>
 
     <p class="typg-font-normal-sample">
-        <span>Roboto Regular</span><br/>
+        <span class="typg-font-style">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 class="typg-font-style">Roboto Regular</span><br/>
         <span>ABCDEFGHIJKLMNOPQRSTUVWXYZ</span><br/>
         <span>abcdefghijklmnopqrstuvwxyz</span><br/>
         <span>0123456789</span><br/>
@@ -45,9 +45,9 @@
 <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>
+        <p class="font-size-16-style">16px<span class="tab-16px">Lorem ipsum is dummy text.</span></p>
+        <p class="font-size-14-style">14px<span class="tab-14px">Lorem ipsum is dummy text.</span></p>
+        <p class="font-size-13-style">13px<span class="tab-13px">Lorem ipsum is dummy text.</span></p>
     </div>
 </div>
 {% endblock %}
\ No newline at end of file