diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx
index a03c6d43d3..af9cd9be76 100644
--- a/packages/canon/src/components/Box/Docs.mdx
+++ b/packages/canon/src/components/Box/Docs.mdx
@@ -16,8 +16,11 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   of our components. It provides a consistent API for styling and layout.
 </Text>
 
-<Title type="h2">Installation</Title>
-<Source code={`import { Box } from "@backstage/canon";`} language="tsx" dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Box } from "@backstage/canon";
+
+<Box>Hello World!</Box>
+`} language="tsx" dark />
 
 <Title type="h2">API reference</Title>
 
diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx
index 4ddce0c982..9f0e623c55 100644
--- a/packages/canon/src/components/Button/Docs.mdx
+++ b/packages/canon/src/components/Button/Docs.mdx
@@ -12,7 +12,11 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
 
 <Canvas of={ButtonStories.Primary} />
 
-<Source of={ButtonStories.Primary} dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Button } from "@backstage/canon";
+
+<Button>Click me</Button>
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference
diff --git a/packages/canon/src/components/Checkbox/Docs.mdx b/packages/canon/src/components/Checkbox/Docs.mdx
index 9d9b4e4915..12e13abf03 100644
--- a/packages/canon/src/components/Checkbox/Docs.mdx
+++ b/packages/canon/src/components/Checkbox/Docs.mdx
@@ -12,7 +12,11 @@ import { PropsTable } from '../../../docs/components/PropsTable';
 
 <Canvas of={CheckboxStories.Primary} />
 
-<Source of={CheckboxStories.Primary} dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Checkbox } from "@backstage/canon";
+
+<Checkbox label="Checkbox" />
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference
diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx
index d4dcf694da..ca81477d44 100644
--- a/packages/canon/src/components/Container/Docs.mdx
+++ b/packages/canon/src/components/Container/Docs.mdx
@@ -15,12 +15,12 @@ import { containerProperties } from './sprinkles.css';
   content on the page.
 </Text>
 
-<Title type="h2">Installation</Title>
+<Title type="h2">Usage</Title>
 <Source
-  code={`import { Container } from "@backstage/canon";`}
-  language="tsx"
-  dark
-/>
+  code={`import { Container } from "@backstage/canon";
+
+<Container>Hello World!</Container>
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference
diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx
index 7a4ef4de2f..14e3bfb922 100644
--- a/packages/canon/src/components/Grid/Docs.mdx
+++ b/packages/canon/src/components/Grid/Docs.mdx
@@ -13,24 +13,13 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   more complex ones.
 </Text>
 
-<Title type="h2">Installation</Title>
-<Source code={`import { Grid } from "@backstage/canon";`} language="tsx" dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Grid } from "@backstage/canon";
 
-<Title type="h2">Anatomy</Title>
-<Text>
-  The grid component is made of two parts: the grid container and the grid item. Import all parts and piece them together.
-</Text>
-<Source
-  code={`import { Grid } from "@backstage/canon/grid";
-
-export default () => (
-  <Grid>
-    <Grid.Item />
-  </Grid>
-);`}
-  language="tsx"
-  dark
-/>
+<Grid>
+  <Grid.Item>Hello World</Grid.Item>
+</Grid>
+`} language="tsx" dark />
 
 <Title type="h2">API reference</Title>
 
diff --git a/packages/canon/src/components/Heading/Docs.mdx b/packages/canon/src/components/Heading/Docs.mdx
index 489c023bda..dd64bd59b2 100644
--- a/packages/canon/src/components/Heading/Docs.mdx
+++ b/packages/canon/src/components/Heading/Docs.mdx
@@ -13,7 +13,11 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
 
 <Canvas of={HeadingStories.Title1} />
 
-<Source of={HeadingStories.Title1} dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Heading } from "@backstage/canon";
+
+<Heading variant="title1">Hello World!</Heading>
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference
diff --git a/packages/canon/src/components/Icon/Docs.mdx b/packages/canon/src/components/Icon/Docs.mdx
new file mode 100644
index 0000000000..463fe60133
--- /dev/null
+++ b/packages/canon/src/components/Icon/Docs.mdx
@@ -0,0 +1,48 @@
+import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
+import * as IconStories from './Icon.stories';
+import { Title, Text } from '../../../docs/components';
+import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
+import { defaultIcons } from './icons';
+
+<Meta of={IconStories} />
+
+<Unstyled>
+
+<Title type="h1">Icon</Title>
+
+<Text>Icons are used to represent an action or a state.</Text>
+
+<Canvas of={IconStories.Primary} />
+
+<Title type="h2">Usage</Title>
+<Source code={`import { Icon } from "@backstage/canon";
+
+<Icon name="icon-name" />
+`} language="tsx" dark />
+
+<Title type="h2" style={{ marginBottom: '16px' }}>
+  API reference
+</Title>
+
+<PropsTable
+  data={{
+    name: {
+      type: Object.keys(defaultIcons),
+      responsive: false,
+    },
+    size: {
+      type: 'number',
+      responsive: false,
+    },
+    className: {
+      type: 'string',
+      responsive: false,
+    },
+    style: {
+      type: 'CSSProperties',
+      responsive: false,
+    },
+  }}
+/>
+
+</Unstyled>
diff --git a/packages/canon/src/components/Icon/Icon.tsx b/packages/canon/src/components/Icon/Icon.tsx
index 587e3c0a23..a45cd6f27e 100644
--- a/packages/canon/src/components/Icon/Icon.tsx
+++ b/packages/canon/src/components/Icon/Icon.tsx
@@ -16,10 +16,10 @@
 
 import React from 'react';
 import { useTheme } from '../../theme/context';
-import type { IconNames } from './types';
+import type { IconProps } from './types';
 
 /** @public */
-export const Icon = (props: { name: IconNames; size?: number }) => {
+export const Icon = (props: IconProps) => {
   const { name, size = 16 } = props;
   const { icons } = useTheme();
 
diff --git a/packages/canon/src/components/Icon/types.ts b/packages/canon/src/components/Icon/types.ts
index bac853257b..a65a9f0913 100644
--- a/packages/canon/src/components/Icon/types.ts
+++ b/packages/canon/src/components/Icon/types.ts
@@ -36,3 +36,9 @@ export type IconNames =
 
 /** @public */
 export type IconMap = Partial<Record<IconNames, React.ComponentType>>;
+
+/** @public */
+export type IconProps = {
+  name: IconNames;
+  size?: number;
+};
diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx
index 9850dedf7a..8ff19747f0 100644
--- a/packages/canon/src/components/Inline/Docs.mdx
+++ b/packages/canon/src/components/Inline/Docs.mdx
@@ -16,12 +16,16 @@ import { inlineProperties } from './sprinkles.css';
   responsively.
 </Text>
 
-<Title type="h2">Installation</Title>
+<Title type="h2">Usage</Title>
 <Source
-  code={`import { Inline } from "@backstage/canon";`}
-  language="tsx"
-  dark
-/>
+  code={`import { Inline } from "@backstage/canon";
+
+<Inline>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Inline>
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference
diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx
index d5bdb0fc82..f1776e0262 100644
--- a/packages/canon/src/components/Stack/Docs.mdx
+++ b/packages/canon/src/components/Stack/Docs.mdx
@@ -15,12 +15,16 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   columns. All values are responsive.
 </Text>
 
-<Title type="h2">Installation</Title>
+<Title type="h2">Usage</Title>
 <Source
-  code={`import { Stack } from "@backstage/canon";`}
-  language="tsx"
-  dark
-/>
+  code={`import { Stack } from "@backstage/canon";
+
+<Stack>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+  <Box>Hello World</Box>
+</Stack>
+`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference
diff --git a/packages/canon/src/components/Text/Docs.mdx b/packages/canon/src/components/Text/Docs.mdx
index 0daf16891b..685a00a33f 100644
--- a/packages/canon/src/components/Text/Docs.mdx
+++ b/packages/canon/src/components/Text/Docs.mdx
@@ -13,7 +13,10 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
 
 <Canvas of={TextStories.Default} />
 
-<Source of={TextStories.Default} dark />
+<Title type="h2">Usage</Title>
+<Source code={`import { Text } from "@backstage/canon";
+
+<Text>Hello World!</Text>`} language="tsx" dark />
 
 <Title type="h2" style={{ marginBottom: '16px' }}>
   API reference