diff --git a/canon-docs/src/app/(docs)/components/icon/page.mdx b/canon-docs/src/app/(docs)/components/icon/page.mdx
index b85b33190d..cb7c0df626 100644
--- a/canon-docs/src/app/(docs)/components/icon/page.mdx
+++ b/canon-docs/src/app/(docs)/components/icon/page.mdx
@@ -1,5 +1,4 @@
 import { PropsTable } from '@/components/PropsTable';
-import { icons } from '@backstage/canon';
 import { IconPreview } from '@/snippets/icon';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
@@ -44,7 +43,7 @@ Icons are used to represent an action or a state.
 <PropsTable
   data={{
     name: {
-      type: Object.keys(icons),
+      type: 'icon',
       responsive: false,
     },
     size: {
diff --git a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
index 6d3a727333..8401cafd78 100644
--- a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
+++ b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
@@ -1,6 +1,7 @@
+'use client';
+
+import { Icon, Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import { Icon } from '../../../../packages/canon/src/components/Icon';
 
 interface BaseUIProps {
   href: string;
diff --git a/canon-docs/src/components/IconLibrary/IconLibrary.tsx b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
index b8ca8acdea..be666fc896 100644
--- a/canon-docs/src/components/IconLibrary/IconLibrary.tsx
+++ b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
@@ -13,12 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use client';
 
-import React from 'react';
-import { Icon } from '../../../../packages/canon/src/components/Icon';
-import type { IconNames } from '../../../../packages/canon/src/components/Icon';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import { icons } from '../../../../packages/canon/src/components/Icon/icons';
+import { Text, Icon, icons } from '../../../../packages/canon';
+import type { IconNames } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const IconLibrary = () => {
diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx
index 555df84903..69bff9ffe6 100644
--- a/canon-docs/src/components/PropsTable/PropsTable.tsx
+++ b/canon-docs/src/components/PropsTable/PropsTable.tsx
@@ -1,6 +1,8 @@
-import React from 'react';
+'use client';
+
 import * as Table from '../Table';
 import { Chip } from '../Chip';
+import { icons } from '../../../../packages/canon';
 
 // Define a more specific type for the data object
 type PropData = {
@@ -33,7 +35,9 @@ export const PropsTable = <T extends Record<string, PropData>>({
               <div
                 style={{ display: 'flex', flexWrap: 'wrap', gap: '0.375rem' }}
               >
-                {Array.isArray(data[n].type) ? (
+                {data[n].type === 'icon' ? (
+                  Object.keys(icons).map(icon => <Chip key={icon}>{icon}</Chip>)
+                ) : Array.isArray(data[n].type) ? (
                   data[n].type.map(t => <Chip key={t}>{t}</Chip>)
                 ) : (
                   <Chip>{data[n].type}</Chip>
diff --git a/canon-docs/src/components/Snippet/index.tsx b/canon-docs/src/components/Snippet/index.tsx
index 2c7c4c5a02..e1af88cb12 100644
--- a/canon-docs/src/components/Snippet/index.tsx
+++ b/canon-docs/src/components/Snippet/index.tsx
@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { CodeBlock } from '../CodeBlock';
-import { Text } from '../../../../packages/canon/src/components/Text';
 import { Collapsible } from '@base-ui-components/react/collapsible';
 import styles from './styles.module.css';
 
@@ -31,7 +30,7 @@ export const Snippet = ({
           {preview}
         </div>
         <Collapsible.Trigger className={styles.trigger}>
-          <Text variant="body">View code</Text>
+          View code
         </Collapsible.Trigger>
       </div>
       <Collapsible.Panel className={styles.panel}>
diff --git a/canon-docs/src/components/Snippet/styles.module.css b/canon-docs/src/components/Snippet/styles.module.css
index 65bdc62d05..dc892e099c 100644
--- a/canon-docs/src/components/Snippet/styles.module.css
+++ b/canon-docs/src/components/Snippet/styles.module.css
@@ -33,6 +33,7 @@
   right: 16px;
   bottom: 12px;
   cursor: pointer;
+  font-size: 14px;
 }
 
 [data-theme='dark'] .previewContent {
diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx
index 41dfadf2ea..cdf9ddd63c 100644
--- a/canon-docs/src/components/Tabs/parts.tsx
+++ b/canon-docs/src/components/Tabs/parts.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
+import { Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
-import { Text } from '../../../../packages/canon/src/components/Text';
 
 export const Root = ({
   className,
diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx
index 4c14880e48..e801d85641 100644
--- a/canon-docs/src/snippets/field.tsx
+++ b/canon-docs/src/snippets/field.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Input, Field } from '../../../packages/canon';
 
 export const FieldPreview = () => {
diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx
index d320f3a24a..69d0b62b7f 100644
--- a/canon-docs/src/snippets/input.tsx
+++ b/canon-docs/src/snippets/input.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Input, Grid } from '../../../packages/canon';
 
 export const InputPreview = () => {