diff --git a/docs/app/views/examples/components/icon/_preview.html.erb b/docs/app/views/examples/components/icon/_preview.html.erb
index e3b5cf5168..b4d9ab5b97 100644
--- a/docs/app/views/examples/components/icon/_preview.html.erb
+++ b/docs/app/views/examples/components/icon/_preview.html.erb
@@ -1,111 +1,83 @@
-<h3>Basic Usage</h3>
+<h2>Default</h2>
+
 <%= sage_component SageIcon, { icon: "pen", label: "Edit" } %>
 
-<h3>Colors</h3>
-<%= sage_component SageCardList, {} do %>
-  <% SageTokens::COLORS.each do | color | %>
-    <%= sage_component SageCardListItem, { grid_template: "et" } do %>
-      <%= sage_component SageIcon, { icon: "pen", color: color } %>
-      <%= color %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<h3>Sizes</h3>
-<%= sage_component SageCardList, {} do %>
-  <% SageTokens::ICON_SIZES.each do | size | %>
-    <%= sage_component SageCardListItem, { grid_template: "et" } do %>
-      <%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size) } %>
-      <%= size == "md" ? "Default (#{size})" : size %>
-    <% end %>
-  <% end %>
-<% end %>
+<h2>Variants</h2>
 
-<h3>Alignment next to Type</h3>
-<%= md("
-Since a common use is to place an icon inline next to text in a variety of forms, we provide the opportunity to indicate that an icon is beside content a particular type spec.
-The effect is that the icon's `height` and `line-height` are updated to match the spec responsively.
-This can be used in combination with the different icon sizes.
-and also be used with a vareity of layout techniques or components such as CSS flexbox (used below) or grid templates within `SageCardRow` or `SagePanelRow`.
-") %>
-<div style="display: flex;">
-  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h2", spacer: { right: "xs" } } %>
-  <h2 class="<%= SageClassnames::TYPE::HEADING_2 %>">Heading 2 Lorem ipsum dolor sit</h2>
-</div>
-<div style="display: flex;">
-  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h4", spacer: { right: "xs" } } %>
-  <h4 class="<%= SageClassnames::TYPE::HEADING_4 %>">Heading 4 Lorem ipsum dolor sit</h4>
-</div>
-<div style="display: flex;">
-  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "body", spacer: { right: "xs" } } %>
-  <p class="<%= SageClassnames::TYPE::BODY %>">Body Lorem ipsum dolor sit</p>
+<h3>Color</h3>
+
+<p>To change the color of the icon, pass a color name to the <code>color</code> prop. Color values are <a href="https://www.figma.com/file/SHwMHKJXzMRn0tPZXEkfc5/%F0%9F%8E%A8-Sage-styles?type=design&node-id=3%3A1401&mode=design&t=Ri1acMQCzmfaaR9r-1" target="_blank">defined in Figma</a> and include values like <code>primary-300</code>, <code>sage-300</code>, <code>red-300</code>, etc.</p>
+
+<div style="display:flex;gap:16px">
+  <%= 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" } %>
 </div>
-<div style="display: flex;">
-  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "body-sm", spacer: { right: "xs" } } %>
-  <p class="<%= SageClassnames::TYPE::BODY_SMALL %>">Body Small Lorem ipsum dolor sit</p>
+
+<%= sage_component SageDivider, {} %>
+
+<h3>Size</h3>
+<p>Size can be used to increase or decrease the size of the icon. The default size is <code>md</code>. See Property tab for available values.</p>
+
+<div style="display:flex;gap:16px">
+  <%= sage_component SageIcon, { icon: "pen", label: "Edit", size: "xs" } %>
+  <%= sage_component SageIcon, { icon: "preview-on", label: "Edit" } %>
+  <%= sage_component SageIcon, { icon: "trash", label: "Edit", size: "xl" } %>
 </div>
 
-<h3>Background Colors</h3>
-<%= sage_component SageCardList, {} do %>
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "danger" %></p>
-    <%= sage_component SageIcon, { icon: "danger", card_color: "danger" } %>
-    <%= sage_component SageIcon, { icon: "danger", card_color: "danger", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "draft" %></p>
-    <%= sage_component SageIcon, { icon: "draft", card_color: "draft" } %>
-    <%= sage_component SageIcon, { icon: "draft", card_color: "draft", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "info" %></p>
-    <%= sage_component SageIcon, { icon: "info-circle", card_color: "info" } %>
-    <%= sage_component SageIcon, { icon: "info-circle", card_color: "info", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "locked" %></p>
-    <%= sage_component SageIcon, { icon: "lock", card_color: "locked" } %>
-    <%= sage_component SageIcon, { icon: "lock", card_color: "locked", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "published" %></p>
-    <%= sage_component SageIcon, { icon: "window-paragraph", card_color: "published" } %>
-    <%= sage_component SageIcon, { icon: "window-paragraph", card_color: "published", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "warning" %></p>
-    <%= sage_component SageIcon, { icon: "warning", card_color: "warning" } %>
-    <%= sage_component SageIcon, { icon: "warning", card_color: "warning", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "kajabi" %></p>
-    <%= sage_component SageIcon, { icon: "kajabi-filled", card_color: "primary" } %>
-    <%= sage_component SageIcon, { icon: "kajabi-filled", card_color: "primary", circular: true } %>
-  <% end %>
-<% end %>
+<%= sage_component SageDivider, {} %>
+
+<h3>Card Color</h3>
+<p>Icons can be placed on a background by setting the <code>card_color</code> property. See Property tab for available values.</p>
 
+<div style="display:flex;gap:16px">
+  <%= sage_component SageIcon, { icon: "danger", card_color: "danger" } %>
+  <%= sage_component SageIcon, { icon: "warning", card_color: "warning" } %>
+  <%= sage_component SageIcon, { icon: "check-circle", card_color: "published" } %>
+</div>
+
+<%= sage_component SageDivider, {} %>
 
 <h3>Background Sizes</h3>
-<%= sage_component SageCardList, {} do %>
-  <% SageTokens::ICON_SIZES.each do | size | %>
-    <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-      <p><%= size == "md" ? "Default (#{size})" : size %></p>
-      <%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size), card_color: "draft" } %>
-      <%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size), card_color: "draft", circular: true, } %>
-    <% end %>
-  <% end %>
-<% end %>
+<p>Background sizes can be applied by setting the <code>size</code> property. See Property tab for available values.</p>
+
+<div style="display:flex;gap:16px">
+  <%= sage_component SageIcon, { icon: "pen", size: "sm", card_color: "draft" } %>
+  <%= sage_component SageIcon, { icon: "preview-on", size: "lg", card_color: "draft" } %>
+  <%= sage_component SageIcon, { icon: "trash", size: "xl", card_color: "draft" } %>
+</div>
+
+<%= sage_component SageDivider, {} %>
 
 <h3>Custom Background Sizes</h3>
-<%= sage_component SageCardList, {} do %>
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <%= sage_component SageIcon, { icon: "pen", size: "2xl", background_width: "128px", background_height: "64px", card_color: "draft" } %>
-    <%= sage_component SageIcon, { icon: "pen", size: "xl", background_height: "64px", card_color: "draft", circular: true, } %>
-  <% end %>
-<% end %>
+<p>Custom background sizes can be applied by setting the <code>background_width</code> and <code>background_height</code> properties. These values are applied as inline styles, so they can be any valid CSS value. The <code>background_width</code> property is required when using <code>background_height</code>.</p>
+
+
+<div style="display:flex;gap:16px">
+  <%= sage_component SageIcon, { icon: "pen", background_width: "128px", background_height: "128px", card_color: "draft" } %>
+  <%= sage_component SageIcon, { icon: "preview-on", background_width: "64px", background_height: "128px", card_color: "warning" } %>
+  <%= sage_component SageIcon, { icon: "trash", background_width: "240px", background_height: "80px", card_color: "danger" } %>
+</div>
+
+<%= sage_component SageDivider, {} %>
+
+<h3>Circular</h3>
+<p>Icons can be made circular by setting the <code>circular</code> property to <code>true</code>.</p>
+
+<div style="display:flex;gap:16px">
+  <%= sage_component SageIcon, { icon: "pen", card_color: "draft", circular: true } %>
+  <%= sage_component SageIcon, { icon: "preview-on", card_color: "published", circular: true } %>
+  <%= sage_component SageIcon, { icon: "trash", card_color: "danger", circular: true } %>
+</div>
+
+<%= sage_component SageDivider, {} %>
+
+<h3>Alignment next to Type</h3>
+
+<p>The <code>adjacent_type</code> property can be used to align an icon next to a heading or paragraph. This is useful for placing an icon next to a heading or paragraph in a variety of forms. The effect is that the icon's <code>height</code> and <code>line-height</code> are updated to match the spec responsively. This can be used in combination with the different icon sizes and also be used with a vareity of layout techniques or components such as CSS flexbox (used below) or grid templates within <code>SageCardRow</code> or <code>SagePanelRow</code>.
+</p>
+
+<div style="display:flex">
+  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h2", spacer: { right: "xs" } } %>
+  <h2 class="<%= SageClassnames::TYPE::HEADING_2 %>">Heading 2 Lorem ipsum dolor sit</h2>
+</div>