diff --git a/docs/app/views/pages/grid_templates.html.erb b/docs/app/views/pages/grid_templates.html.erb
index 2ec731e84d..bacaad9af5 100644
--- a/docs/app/views/pages/grid_templates.html.erb
+++ b/docs/app/views/pages/grid_templates.html.erb
@@ -101,12 +101,12 @@ dashes = [
 ]
 
 dots = [
-  %(<i class="sage-icon-check-circle t-sage--color-sage"></i>).html_safe,
+  %(<pds-icon name="check-circle" class="sage-icon-check-circle t-sage--color-sage"></pds-icon>).html_safe,
   sage_component(SageBadge, { value: "In progress", color: "warning" }).html_safe,
-  %(<i class="sage-icon-star t-sage--color-orange"></i>).html_safe,
+  %(<pds-icon name="star" class="sage-icon-star t-sage--color-orange"></pds-icon>).html_safe,
   sage_component(SageBadge, { value: "Verified", color: "published" }).html_safe,
   %(<span class="t-sage-body-small-semi">$5.99</span>).html_safe,
-  %(<i class="sage-icon-dot-menu-horizontal t-sage--color-grey"></i>).html_safe
+  %(<pds-icon name="dot-menu-horizontal" class="sage-icon-dot-menu-horizontal t-sage--color-charcoal"></pds-icon>).html_safe
 ]
 %>