docs: v5 examples

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
 
 ```
 

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>
+  );
+}

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>
   );