diff --git a/docs/app/views/examples/components/icon/_preview.html.erb b/docs/app/views/examples/components/icon/_preview.html.erb
index 09ba0b8274..b4d9ab5b97 100644
--- a/docs/app/views/examples/components/icon/_preview.html.erb
+++ b/docs/app/views/examples/components/icon/_preview.html.erb
@@ -12,7 +12,6 @@
   <%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "primary-300" } %>
   <%= sage_component SageIcon, { icon: "preview-on", label: "Preview", color: "sage-300" } %>
   <%= sage_component SageIcon, { icon: "trash", label: "Delete", color: "red-300" } %>
-  <pds-icon icon="youtube" color="#006699"></pds-icon>
 </div>
 
 <%= sage_component SageDivider, {} %>
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_icon.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_icon.html.erb
index e8fcbd718a..31cdeaf45b 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_icon.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_icon.html.erb
@@ -23,21 +23,16 @@ end
     <% end %>
   >
 <% end %>
-  <i class="
-      sage-icon
+  <pds-icon
+    name="<%= "#{component.icon}"%>"
+    class="
+      <%= "t-sage--color-#{component.color}" if component.color.present? %>
       <%= "sage-icon-#{component.icon}" %><%= "-#{component.size}" if component.size.present? %>
       <%= "sage-icon--adjacent-type-#{component.adjacent_type}" if component.adjacent_type %>
-      <%= "t-sage--color-#{component.color}" if component.color.present? %>
       <%= component.generated_css_classes %>
     "
-    <% if component.label.present? %>
-      aria-label="<%= component.label %>"
-      role="img"
-    <% else %>
-      aria-hidden=true
-    <% end %>
-    <%= component.generated_html_attributes.html_safe %>
-  ></i>
+    size="<%= "#{component.size}" if component.size.present? %>"
+    ></pds-icon>
 <% if component.card_color.present? %>
   </div>
 <% end %>
diff --git a/packages/sage-assets/lib/stylesheets/components/_icon.scss b/packages/sage-assets/lib/stylesheets/components/_icon.scss
index 385870e667..6417c9e347 100644
--- a/packages/sage-assets/lib/stylesheets/components/_icon.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_icon.scss
@@ -63,7 +63,7 @@ $-icon-beside-type: (
       height: $size;
 
       &::before {
-        @include sage-icon-base($icon-name, $size-name);
+        @include sage-icon-base($icon-name, $size-name, pine);
       }
     }
   }