diff --git a/packages/components/icon/README.mdx b/packages/components/icon/README.mdx
index ee076f5124..063fa327bb 100644
--- a/packages/components/icon/README.mdx
+++ b/packages/components/icon/README.mdx
@@ -28,7 +28,7 @@ Forma 36 provides a list of built-in icons that can be used as regular React com
 
 The icon components can be configured in different ways using variations in color and size:
 
-```jsx file=./examples/IconVariantsExample.tsx
+```jsx file=./examples/IconColorsExample.tsx
 
 ```
 
diff --git a/packages/components/icon/examples/IconColorsExample.tsx b/packages/components/icon/examples/IconColorsExample.tsx
new file mode 100644
index 0000000000..4e4438377d
--- /dev/null
+++ b/packages/components/icon/examples/IconColorsExample.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { CalendarBlankIcon } from '@contentful/f36-icons';
+import { Flex } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+
+export default function IconColorsExample() {
+  return (
+    <Flex flexDirection="column">
+      <CalendarBlankIcon variant={tokens.gray900} />
+
+      <CalendarBlankIcon color={tokens.blue500} />
+
+      <div style={{ backgroundColor: '#8091a5' }}>
+        <CalendarBlankIcon color={tokens.colorWhite} />
+      </div>
+    </Flex>
+  );
+}
diff --git a/packages/components/icon/examples/IconSizesExample.tsx b/packages/components/icon/examples/IconSizesExample.tsx
index c10c474fda..d7fe5f6a4f 100644
--- a/packages/components/icon/examples/IconSizesExample.tsx
+++ b/packages/components/icon/examples/IconSizesExample.tsx
@@ -1,24 +1,18 @@
 import * as React from 'react';
-import { CalendarIcon } from '@contentful/f36-icons';
+import { CalendarBlankIcon } from '@contentful/f36-icons';
 import { Stack, Flex, Text } from '@contentful/f36-components';
 
 export default function IconSizesExample() {
   return (
     <Stack>
       <Flex alignItems="center">
-        <CalendarIcon size="tiny" /> <Text>Tiny</Text>
+        <CalendarBlankIcon size="tiny" /> <Text>Tiny</Text>
       </Flex>
       <Flex alignItems="center">
-        <CalendarIcon size="small" /> <Text>Small</Text>
+        <CalendarBlankIcon size="small" /> <Text>Small</Text>
       </Flex>
       <Flex alignItems="center">
-        <CalendarIcon size="medium" /> <Text>Medium</Text>
-      </Flex>
-      <Flex alignItems="center">
-        <CalendarIcon size="large" /> <Text>Large</Text>
-      </Flex>
-      <Flex alignItems="center">
-        <CalendarIcon size="xlarge" /> <Text>Extra large</Text>
+        <CalendarBlankIcon size="medium" /> <Text>Medium</Text>
       </Flex>
     </Stack>
   );
diff --git a/packages/components/icon/examples/IconVariantsExample.tsx b/packages/components/icon/examples/IconVariantsExample.tsx
deleted file mode 100644
index ebe9f37584..0000000000
--- a/packages/components/icon/examples/IconVariantsExample.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { CalendarIcon } from '@contentful/f36-icons';
-import { Stack, Flex, Text } from '@contentful/f36-components';
-
-export default function IconVariantsExample() {
-  return (
-    <Stack>
-      <Flex alignItems="center">
-        <Flex marginRight="spacingS">
-          <CalendarIcon variant="primary" />
-        </Flex>{' '}
-        <Text>Primary</Text>
-      </Flex>
-      <Flex alignItems="center">
-        <Flex marginRight="spacingS">
-          <CalendarIcon variant="positive" />
-        </Flex>{' '}
-        <Text>Positive</Text>
-      </Flex>
-      <Flex alignItems="center">
-        <Flex marginRight="spacingS">
-          <CalendarIcon variant="negative" />
-        </Flex>{' '}
-        <Text>Negative</Text>
-      </Flex>
-      <Flex alignItems="center">
-        <Flex marginRight="spacingS">
-          <CalendarIcon variant="warning" />
-        </Flex>{' '}
-        <Text>Warning</Text>
-      </Flex>
-      <Flex alignItems="center">
-        <Flex marginRight="spacingS">
-          <CalendarIcon variant="secondary" />
-        </Flex>{' '}
-        <Text>Secondary</Text>
-      </Flex>
-      <Flex alignItems="center">
-        <Flex marginRight="spacingS">
-          <CalendarIcon variant="muted" />
-        </Flex>{' '}
-        <Text>Muted</Text>
-      </Flex>
-      <Flex
-        style={{ backgroundColor: '#8091a5' }}
-        alignItems="center"
-        padding="spacingS"
-      >
-        <Flex marginRight="spacingS">
-          <CalendarIcon variant="white" />
-        </Flex>{' '}
-        <Text>White</Text>
-      </Flex>
-    </Stack>
-  );
-}