diff --git a/packages/components/icon/package.json b/packages/components/icon/package.json
index 55cd4a71fa..9ba3b0d5aa 100644
--- a/packages/components/icon/package.json
+++ b/packages/components/icon/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-icon",
-  "version": "4.56.2",
+  "version": "5.0.0-alpha.0",
   "description": "Forma 36: Icon component",
   "license": "MIT",
   "scripts": {
diff --git a/packages/components/icon/src/Icon.tsx b/packages/components/icon/src/Icon.tsx
index 1d7a630a80..c743c7c163 100644
--- a/packages/components/icon/src/Icon.tsx
+++ b/packages/components/icon/src/Icon.tsx
@@ -1,8 +1,7 @@
 import { css, cx } from 'emotion';
 import React, {
   forwardRef,
-  type ComponentType,
-  type ExoticComponent,
+  type ElementType,
   type ReactElement,
   type SVGAttributes,
 } from 'react';
@@ -14,84 +13,42 @@ import {
   type PolymorphicProps,
   type ExpandProps,
 } from '@contentful/f36-core';
+import type { IconComponent, IconSize } from './types';
 
 const ICON_DEFAULT_TAG = 'svg';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type IconComponent = ExoticComponent<any> | ComponentType<any>;
-
-export type IconSize = 'xlarge' | 'large' | 'medium' | 'small' | 'tiny';
-
-export type IconVariant =
-  | 'negative'
-  | 'positive'
-  | 'primary'
-  | 'secondary'
-  | 'warning'
-  | 'muted'
-  | 'white'
-  | 'premium';
-
-const sizes: { [key in IconSize]: { [key in 'height' | 'width']: string } } = {
-  xlarge: {
-    height: '48px',
-    width: '48px',
-  },
-  large: {
-    height: '32px',
-    width: '32px',
-  },
-  medium: {
-    height: '24px',
-    width: '24px',
-  },
-  small: {
-    height: '18px',
-    width: '18px',
-  },
-  tiny: {
-    height: '16px',
-    width: '16px',
-  },
-};
-
-const fills: { [key in IconVariant]: string } = {
-  muted: tokens.gray600,
-  negative: tokens.red600,
-  positive: tokens.green600,
-  primary: tokens.blue600,
-  secondary: tokens.gray900,
-  warning: tokens.colorWarning,
-  white: tokens.colorWhite,
-  premium: tokens.purple500,
+export const sizes: { [key in IconSize]: `${number}px` } = {
+  tiny: '14px',
+  small: '16px',
+  medium: '20px',
 };
 
 export type IconInternalProps = CommonProps & {
   children?: ReactElement | ReactElement[];
   /**
-   * Determines the size of the icon
+   * Determines the color of the icon
    */
-  size?: IconSize;
+  // @todo: We can't use the ColorTokens type here yet. Maybe fix in v5;
+  color?: string;
   /**
-   * Whether or not to trim the icon width, i.e. set `width` to `auto`
+   * Determines the active state of the icon
    */
-  trimmed?: boolean;
+  isActive?: boolean;
   /**
-   * Determines the fill color used
+   * Determines the size of the icon
    */
-  variant?: IconVariant;
+  size?: IconSize;
   /**
    * Custom SVG viewBox attribute to use
    */
   viewBox?: SVGAttributes<SVGSVGElement>['viewBox'];
 };
 
-export type IconProps<E extends React.ElementType = IconComponent> =
-  PolymorphicProps<
-    IconInternalProps,
-    E,
-    'as' | 'children' | 'width' | 'height'
-  >;
+export type IconProps<E extends ElementType = IconComponent> = PolymorphicProps<
+  IconInternalProps,
+  E,
+  'as' | 'children' | 'width' | 'height'
+>;
 
 const useAriaHidden = (
   props: Pick<
@@ -111,27 +68,29 @@ const useAriaHidden = (
   };
 };
 
-export function _Icon<E extends React.ElementType = IconComponent>(
+export function _Icon<E extends ElementType = IconComponent>(
   {
     as,
     children,
     className,
-    variant = 'primary',
+    isActive = false,
+    color = isActive ? tokens.blue500 : tokens.gray900,
     role = 'img',
-    size = 'small',
+    size = 'medium',
     testId = 'cf-ui-icon',
-    trimmed,
-    viewBox = '0 0 24 24',
+    viewBox = '0 0 20 20',
     ...otherProps
   }: IconProps<E>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   forwardedRef: React.Ref<any>,
 ) {
   const shared = {
     className: cx(
       css({
-        fill: fills[variant],
-        height: sizes[size].height,
-        width: trimmed ? 'auto' : sizes[size].width,
+        color,
+        fill: color,
+        height: sizes[size],
+        width: sizes[size],
       }),
       className,
     ),
diff --git a/packages/components/icon/src/generateIcon.tsx b/packages/components/icon/src/generateIcon.tsx
deleted file mode 100644
index 9b2717cc79..0000000000
--- a/packages/components/icon/src/generateIcon.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { type ReactElement } from 'react';
-import type { Icon as PhosphorIcon } from '@phosphor-icons/react';
-
-import { Icon, type IconProps } from './Icon';
-
-export type GeneratedIconProps = Omit<
-  IconProps,
-  'as' | 'children' | 'name' | 'viewBox'
-> & {
-  children?: never;
-  isActive?: boolean;
-};
-
-type GenerateIconParameters = {
-  /**
-   * Icon name is used as the generated icon's component display name
-   */
-  name?: string;
-  /**
-   * The SVG path(s) to render in the icon wrapper
-   */
-  path: ReactElement;
-  /**
-   * A collection of default props to set on the generated icon
-   */
-  props?: GeneratedIconProps;
-  /**
-   * Whether or not to trim the icon width, i.e. set `width` to `auto`
-   */
-  trimmed?: IconProps['trimmed'];
-  /**
-   * Custom SVG viewBox attribute to use for the generated icon
-   */
-  viewBox?: IconProps['viewBox'];
-};
-
-export function generateIcon({
-  name,
-  path,
-  props: defaultProps,
-  trimmed,
-  viewBox,
-}: GenerateIconParameters) {
-  const Component = function (props: IconProps) {
-    return (
-      <Icon viewBox={viewBox} {...defaultProps} {...props} trimmed={trimmed}>
-        {path}
-      </Icon>
-    );
-  };
-
-  if (name) {
-    Component.displayName = name;
-  }
-
-  return Component;
-}
-
-// @todo: Extract
-const sizes = {
-  tiny: '14px',
-  small: '16px',
-  medium: '20px',
-};
-
-// We need to pass the `size` prop directly to the Phosphor icon to render the
-// right sizes
-export function wrapPhosphorIcon(PhosphorIcon: PhosphorIcon) {
-  const Component = ({
-    size = 'medium',
-    ...props
-  }: GeneratedIconProps & { weight?: 'fill' }) => (
-    <Icon as={() => <PhosphorIcon {...props} size={sizes[size]} />} />
-  );
-
-  return Component;
-}
-
-export enum IconVariant {
-  Active = 'active',
-  Default = 'default',
-}
-
-export function generateComponentWithVariants({
-  variants,
-}: {
-  variants: Record<IconVariant, React.FunctionComponent<GeneratedIconProps>>;
-}) {
-  const Component = function ({
-    isActive = false,
-    ...props
-  }: GeneratedIconProps & { isActive?: boolean }) {
-    if (isActive) {
-      return variants[IconVariant.Active](props);
-    }
-
-    // This can easily be extended with more variants in the future, but for now
-    // we can just return the default
-    return variants[IconVariant.Default](props);
-  };
-
-  return Component;
-}
-
-export function generateForma36Icon(PhosphorIcon) {
-  const Icon = wrapPhosphorIcon(PhosphorIcon);
-
-  return generateComponentWithVariants({
-    variants: {
-      [IconVariant.Active]: (props) => <Icon {...props} weight="fill" />,
-      [IconVariant.Default]: Icon,
-    },
-  });
-}
diff --git a/packages/components/icon/src/index.ts b/packages/components/icon/src/index.ts
index 5029aa9df6..9e3b4c567e 100644
--- a/packages/components/icon/src/index.ts
+++ b/packages/components/icon/src/index.ts
@@ -1,4 +1,3 @@
-export { generateIcon } from './generateIcon';
-export type { GeneratedIconProps } from './generateIcon';
-export { Icon } from './Icon';
-export type { IconProps, IconComponent, IconSize, IconVariant } from './Icon';
+export * from './utils';
+export { Icon, type IconProps } from './Icon';
+export * from './types';
diff --git a/packages/components/icon/src/types.ts b/packages/components/icon/src/types.ts
new file mode 100644
index 0000000000..1aef16f06c
--- /dev/null
+++ b/packages/components/icon/src/types.ts
@@ -0,0 +1,11 @@
+import { type ComponentType, type ExoticComponent } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type IconComponent = ExoticComponent<any> | ComponentType<any>;
+
+export type IconSize = 'medium' | 'small' | 'tiny';
+
+export enum IconVariant {
+  Active = 'active',
+  Default = 'default',
+}
diff --git a/packages/components/icon/src/utils/generateComponentWithVariants.ts b/packages/components/icon/src/utils/generateComponentWithVariants.ts
new file mode 100644
index 0000000000..a4c4eae6b8
--- /dev/null
+++ b/packages/components/icon/src/utils/generateComponentWithVariants.ts
@@ -0,0 +1,18 @@
+import { IconVariant } from '../types';
+import type { GeneratedIconProps } from './generateIconComponent';
+
+export function generateComponentWithVariants({
+  variants,
+}: {
+  variants: Record<IconVariant, React.FunctionComponent<GeneratedIconProps>>;
+}) {
+  const Component = function (props: GeneratedIconProps) {
+    if (props.isActive) {
+      return variants[IconVariant.Active](props);
+    }
+
+    return variants[IconVariant.Default](props);
+  };
+
+  return Component;
+}
diff --git a/packages/components/icon/src/utils/generateForma36Icon.tsx b/packages/components/icon/src/utils/generateForma36Icon.tsx
new file mode 100644
index 0000000000..4e55c165ff
--- /dev/null
+++ b/packages/components/icon/src/utils/generateForma36Icon.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { IconVariant } from '../types';
+import { generateComponentWithVariants } from './generateComponentWithVariants';
+import { wrapPhosphorIcon } from './wrapPhosphorIcon';
+
+/**
+ * Helper function to generate a Forma 36 icon component from a Phosphor icon component
+ */
+export function generateForma36Icon(PhosphorIcon) {
+  const Icon = wrapPhosphorIcon(PhosphorIcon);
+
+  return generateComponentWithVariants({
+    variants: {
+      [IconVariant.Active]: (props) => <Icon {...props} weight="fill" />,
+      [IconVariant.Default]: Icon,
+    },
+  });
+}
diff --git a/packages/components/icon/src/utils/generateIconComponent.tsx b/packages/components/icon/src/utils/generateIconComponent.tsx
new file mode 100644
index 0000000000..44387f2955
--- /dev/null
+++ b/packages/components/icon/src/utils/generateIconComponent.tsx
@@ -0,0 +1,49 @@
+import React, { type ReactElement } from 'react';
+import { Icon, type IconProps } from '../Icon';
+
+export type GeneratedIconProps = Omit<
+  IconProps,
+  'as' | 'children' | 'name' | 'viewBox'
+> & {
+  children?: never;
+};
+
+type GenerateIconComponentParameters = {
+  /**
+   * Icon name is used as the generated icon's component display name
+   */
+  name?: string;
+  /**
+   * The SVG path(s) to render in the icon wrapper
+   */
+  path: ReactElement;
+  /**
+   * A collection of default props to set on the generated icon
+   */
+  props?: GeneratedIconProps;
+  /**
+   * Custom SVG viewBox attribute to use for the generated icon
+   */
+  viewBox?: IconProps['viewBox'];
+};
+
+export function generateIconComponent({
+  name,
+  path,
+  props: defaultProps,
+  viewBox,
+}: GenerateIconComponentParameters) {
+  const Component = function (props: IconProps) {
+    return (
+      <Icon viewBox={viewBox} {...defaultProps} {...props}>
+        {path}
+      </Icon>
+    );
+  };
+
+  if (name) {
+    Component.displayName = name;
+  }
+
+  return Component;
+}
diff --git a/packages/components/icon/src/utils/index.ts b/packages/components/icon/src/utils/index.ts
new file mode 100644
index 0000000000..aeb5208020
--- /dev/null
+++ b/packages/components/icon/src/utils/index.ts
@@ -0,0 +1,3 @@
+export * from './generateComponentWithVariants';
+export * from './generateForma36Icon';
+export * from './generateIconComponent';
diff --git a/packages/components/icon/src/utils/wrapPhosphorIcon.tsx b/packages/components/icon/src/utils/wrapPhosphorIcon.tsx
new file mode 100644
index 0000000000..1baf6bf7d7
--- /dev/null
+++ b/packages/components/icon/src/utils/wrapPhosphorIcon.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Icon as PhosphorIcon } from '@phosphor-icons/react';
+import tokens from '@contentful/f36-tokens';
+import { Icon, sizes } from '../Icon';
+import type { GeneratedIconProps } from './generateIconComponent';
+
+// Unfortunately we have to pass props directly to the Phosphor icon
+export function wrapPhosphorIcon(PhosphorIcon: PhosphorIcon) {
+  const Component = ({
+    isActive = false,
+    color = isActive ? tokens.blue500 : tokens.gray900,
+    size = 'medium',
+    ...props
+  }: GeneratedIconProps & { weight?: 'fill' }) => {
+    return (
+      <Icon
+        {...props}
+        as={() => <PhosphorIcon {...props} color={color} size={sizes[size]} />}
+      />
+    );
+  };
+
+  return Component;
+}
diff --git a/packages/components/icon/stories/Icon.stories.tsx b/packages/components/icon/stories/Icon.stories.tsx
index ba42254ad2..a5e76715a3 100644
--- a/packages/components/icon/stories/Icon.stories.tsx
+++ b/packages/components/icon/stories/Icon.stories.tsx
@@ -68,65 +68,12 @@ export const Overview: Story = () => {
         return (
           <Flex marginBottom="spacingM" alignItems="center" key={size}>
             <Flex marginRight="spacingS">
-              <CustomIcon variant="primary" size={size} />
+              <CustomIcon size={size} />
             </Flex>
             <Text>{size}</Text>
           </Flex>
         );
       })}
-
-      <SectionHeading as="h3" marginBottom="spacingS" marginTop="spacingM">
-        Icon variants
-      </SectionHeading>
-
-      <Flex marginBottom="spacingM" alignItems="center">
-        <Flex marginRight="spacingS">
-          <CustomIcon variant="primary" />
-        </Flex>
-        <Text>primary</Text>
-      </Flex>
-
-      <Flex marginBottom="spacingM" alignItems="center">
-        <Flex marginRight="spacingS">
-          <CustomIcon variant="positive" />
-        </Flex>
-        <Text>positive</Text>
-      </Flex>
-
-      <Flex marginBottom="spacingM" alignItems="center">
-        <Flex marginRight="spacingS">
-          <CustomIcon variant="negative" />
-        </Flex>
-        <Text>negative</Text>
-      </Flex>
-
-      <Flex marginBottom="spacingM" alignItems="center">
-        <Flex marginRight="spacingS">
-          <CustomIcon variant="warning" />
-        </Flex>
-        <Text>warning</Text>
-      </Flex>
-
-      <Flex marginBottom="spacingM" alignItems="center">
-        <Flex marginRight="spacingS">
-          <CustomIcon variant="secondary" />
-        </Flex>
-        <Text>secondary</Text>
-      </Flex>
-
-      <Flex marginBottom="spacingM" alignItems="center">
-        <Flex marginRight="spacingS">
-          <CustomIcon variant="muted" />
-        </Flex>
-        <Text>muted</Text>
-      </Flex>
-
-      <Flex marginBottom="spacingM" alignItems="center">
-        <Flex marginRight="spacingS">
-          <CustomIcon variant="white" />
-        </Flex>
-        <Text>white</Text>
-      </Flex>
     </Fragment>
   );
 };
diff --git a/packages/components/icons/src/Appearance.tsx b/packages/components/icons/src/Appearance.tsx
deleted file mode 100644
index 1d86ba0a23..0000000000
--- a/packages/components/icons/src/Appearance.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Appearance = /*#__PURE__*/ generateIcon({
-  name: 'Appearance',
-  viewBox: '0 0 16 16',
-  path: (
-    <>
-      <path d="M8 1.25C6.66498 1.25 5.35994 1.64588 4.2499 2.38758C3.13987 3.12928 2.27471 4.18349 1.76382 5.41689C1.25292 6.65029 1.11925 8.00749 1.3797 9.31686C1.64015 10.6262 2.28303 11.829 3.22703 12.773C4.17104 13.717 5.37377 14.3599 6.68314 14.6203C7.99252 14.8808 9.34971 14.7471 10.5831 14.2362C11.8165 13.7253 12.8707 12.8601 13.6124 11.7501C14.3541 10.6401 14.75 9.33502 14.75 8C14.748 6.2104 14.0362 4.49466 12.7708 3.22922C11.5053 1.96378 9.78961 1.25199 8 1.25ZM8.75 2.80437C9.26995 2.87909 9.77565 3.03185 10.25 3.2575V12.7425C9.77565 12.9681 9.26995 13.1209 8.75 13.1956V2.80437ZM2.75 8C2.75169 6.73808 3.2072 5.51886 4.03338 4.56498C4.85955 3.6111 6.00125 2.98619 7.25 2.80437V13.1956C6.00125 13.0138 4.85955 12.3889 4.03338 11.435C3.2072 10.4811 2.75169 9.26192 2.75 8ZM11.75 11.6694V4.33063C12.7114 5.31002 13.25 6.6276 13.25 8C13.25 9.3724 12.7114 10.69 11.75 11.6694Z" />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/Archive.tsx b/packages/components/icons/src/Archive.tsx
deleted file mode 100644
index 64a5f34eaf..0000000000
--- a/packages/components/icons/src/Archive.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Archive = /*#__PURE__*/ generateIcon({
-  name: 'Archive',
-  viewBox: '0 0 24 24',
-  path: (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M.5 0a.5.5 0 00-.5.5v23a.5.5 0 00.5.5h19a.5.5 0 00.5-.5v-17a.5.5 0 00-.146-.354l-6-6A.5.5 0 0013.5 0H.5zM1 23V1h12v5.5a.5.5 0 00.5.5H19v16H1zM18.293 6L14 1.707V6h4.293z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6 1H5v6h1v1h1v1H6v1h1v1H6v1h1v1H6v1h1v1H6v1h1v1H6v1h1v1h2v-1H8v-1h1v-1H8v-1h1v-1H8v-1h1v-1H8v-1h1v-1H8V9h1V8H8V7h1V1H8v5H6V5h1V4H6V1z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/ArrowBackward.tsx b/packages/components/icons/src/ArrowBackward.tsx
deleted file mode 100644
index 95934f1aa0..0000000000
--- a/packages/components/icons/src/ArrowBackward.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ArrowBackward = /*#__PURE__*/ generateIcon({
-  name: 'ArrowBackward',
-  path: (
-    <>
-      <path d="m12 20 1.41-1.41L7.83 13H20v-2H7.83l5.58-5.59L12 4l-8 8 8 8Z" />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/ArrowDown.tsx b/packages/components/icons/src/ArrowDown.tsx
deleted file mode 100644
index 1977d8d3cd..0000000000
--- a/packages/components/icons/src/ArrowDown.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ArrowDown = /*#__PURE__*/ generateIcon({
-  name: 'ArrowDown',
-  path: (
-    <Fragment>
-      <path d="M7 10l5 5 5-5z" />,
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ArrowDownTrimmed.tsx b/packages/components/icons/src/ArrowDownTrimmed.tsx
deleted file mode 100644
index de116b7e44..0000000000
--- a/packages/components/icons/src/ArrowDownTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ArrowDownTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ArrowDownTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 10l5 5 5-5H0z" />
-      <path d="M0 0h10v24H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 10 24',
-});
diff --git a/packages/components/icons/src/ArrowDownward.tsx b/packages/components/icons/src/ArrowDownward.tsx
deleted file mode 100644
index e1e6265671..0000000000
--- a/packages/components/icons/src/ArrowDownward.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ArrowDownward = /*#__PURE__*/ generateIcon({
-  name: 'ArrowDownward',
-  path: (
-    <Fragment>
-      <path d="M13.3333 8.00008L12.3933 7.06008L8.66667 10.7801V2.66675H7.33333L7.33333 10.7801L3.60667 7.06008L2.66667 8.00008L8 13.3334L13.3333 8.00008Z" />
-    </Fragment>
-  ),
-  viewBox: '0 0 16 16',
-});
diff --git a/packages/components/icons/src/ArrowForward.tsx b/packages/components/icons/src/ArrowForward.tsx
deleted file mode 100644
index 5d4017fe52..0000000000
--- a/packages/components/icons/src/ArrowForward.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ArrowForward = /*#__PURE__*/ generateIcon({
-  name: 'ArrowForward',
-  path: (
-    <>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/ArrowForwardTrimmed.tsx b/packages/components/icons/src/ArrowForwardTrimmed.tsx
deleted file mode 100644
index fbfa3a34aa..0000000000
--- a/packages/components/icons/src/ArrowForwardTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ArrowForwardTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ArrowForwardTrimmed',
-  viewBox: '0 0 24 24',
-  trimmed: true,
-  path: (
-    <>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/ArrowUp.tsx b/packages/components/icons/src/ArrowUp.tsx
deleted file mode 100644
index 176e01c764..0000000000
--- a/packages/components/icons/src/ArrowUp.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ArrowUp = /*#__PURE__*/ generateIcon({
-  name: 'ArrowUp',
-  path: (
-    <Fragment>
-      <path d="M7 14l5-5 5 5z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ArrowUpTrimmed.tsx b/packages/components/icons/src/ArrowUpTrimmed.tsx
deleted file mode 100644
index 081db50aa6..0000000000
--- a/packages/components/icons/src/ArrowUpTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ArrowUpTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ArrowUpTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 14l5-5 5 5H0z" />
-      <path d="M0 0h10v24H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 10 24',
-});
diff --git a/packages/components/icons/src/ArrowUpward.tsx b/packages/components/icons/src/ArrowUpward.tsx
deleted file mode 100644
index bb76e82a0d..0000000000
--- a/packages/components/icons/src/ArrowUpward.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ArrowUpward = /*#__PURE__*/ generateIcon({
-  name: 'ArrowUpward',
-  path: (
-    <Fragment>
-      <path d="M21.65 40.55V16.45L10.8 27.35L7.45 24L24 7.45L40.55 24L37.25 27.35L26.35 16.45V40.55Z" />
-    </Fragment>
-  ),
-  viewBox: '0 0 48 48',
-});
diff --git a/packages/components/icons/src/Asset.tsx b/packages/components/icons/src/Asset.tsx
deleted file mode 100644
index c7eeeb3c73..0000000000
--- a/packages/components/icons/src/Asset.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Asset = /*#__PURE__*/ generateIcon({
-  name: 'Asset',
-  path: (
-    <Fragment>
-      <path fill="none" d="M0 0h24v24H0V0z" />
-      <g>
-        <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
-        <path d="M14.14 11.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" />
-      </g>
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/AssetTrimmed.tsx b/packages/components/icons/src/AssetTrimmed.tsx
deleted file mode 100644
index 8ff5f43525..0000000000
--- a/packages/components/icons/src/AssetTrimmed.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const AssetTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'AssetTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h18v24H0V0z" fill="none" />
-      <g>
-        <path d="M16 5v14H2V5h14m0-2H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
-        <path d="M11.1 11.9l-3 3.9L6 13.1 3 17h12l-3.9-5.1z" />
-      </g>
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 18 24',
-});
diff --git a/packages/components/icons/src/Audio.tsx b/packages/components/icons/src/Audio.tsx
deleted file mode 100644
index 57ef32f6b6..0000000000
--- a/packages/components/icons/src/Audio.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Audio = /*#__PURE__*/ generateIcon({
-  name: 'Audio',
-  viewBox: '0 0 24 24',
-  path: (
-    <g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M.5 0a.5.5 0 00-.5.5v23a.5.5 0 00.5.5h19a.5.5 0 00.5-.5v-17a.5.5 0 00-.146-.354l-6-6A.5.5 0 0013.5 0H.5zM1 23V1h12v5.5a.5.5 0 00.5.5H19v16H1zM18.293 6L14 1.707V6h4.293z"
-      />
-      <path d="M10.4413 9.03807C10.6282 9.11547 10.75 9.29778 10.75 9.50001V19.0833C10.75 19.2856 10.6282 19.4679 10.4413 19.5453C10.2545 19.6227 10.0394 19.5799 9.89645 19.4369L6.68873 16.2292H5.21875C4.54586 16.2292 4 15.6833 4 15.0104V13.5729C4 13.2497 4.1284 12.9397 4.35696 12.7111C4.58552 12.4826 4.89552 12.3542 5.21875 12.3542H6.68873L9.89645 9.14646C10.0394 9.00346 10.2545 8.96068 10.4413 9.03807ZM9.75 10.7071L7.24939 13.2077C7.15562 13.3015 7.02844 13.3542 6.89583 13.3542H5.21875C5.16073 13.3542 5.10509 13.3772 5.06407 13.4183C5.02305 13.4593 5 13.5149 5 13.5729V15.0104C5 15.131 5.09814 15.2292 5.21875 15.2292H6.89583C7.02844 15.2292 7.15562 15.2819 7.24939 15.3756L9.75 17.8762V10.7071ZM13.2185 11.0985C13.3942 10.8855 13.7093 10.8553 13.9223 11.031C14.8125 11.7653 15.5417 12.9972 15.5417 14.2917C15.5417 15.5848 14.8092 16.8181 13.923 17.5518C13.7103 17.7279 13.3951 17.6982 13.219 17.4855C13.0429 17.2728 13.0726 16.9576 13.2853 16.7815C13.9919 16.1966 14.5417 15.2277 14.5417 14.2917C14.5417 13.3533 13.9943 12.3867 13.286 11.8024C13.073 11.6267 13.0427 11.3115 13.2185 11.0985ZM11.2832 12.3204C11.4457 12.0971 11.7584 12.0478 11.9817 12.2103C12.5976 12.6585 13.1458 13.359 13.1458 14.2917C13.1458 15.2243 12.5976 15.9248 11.9817 16.373C11.7584 16.5355 11.4457 16.4863 11.2832 16.263C11.1207 16.0397 11.17 15.727 11.3933 15.5645C11.8546 15.2288 12.1458 14.7946 12.1458 14.2917C12.1458 13.7888 11.8546 13.3546 11.3933 13.0189C11.17 12.8564 11.1207 12.5437 11.2832 12.3204Z" />
-    </g>
-  ),
-});
diff --git a/packages/components/icons/src/Calendar.tsx b/packages/components/icons/src/Calendar.tsx
deleted file mode 100644
index 912f9bed00..0000000000
--- a/packages/components/icons/src/Calendar.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Calendar = /*#__PURE__*/ generateIcon({
-  name: 'Calendar',
-  path: (
-    <path d="M8 0a1 1 0 011 1v1h6V1a1 1 0 112 0v1h2.778A3.222 3.222 0 0123 5.222v15.556A3.222 3.222 0 0119.778 24H4.222A3.222 3.222 0 011 20.778V5.222A3.222 3.222 0 014.222 2H7V1a1 1 0 011-1zM7 4H4.222C3.547 4 3 4.547 3 5.222V9h18V5.222C21 4.547 20.453 4 19.778 4H17v1a1 1 0 11-2 0V4H9v1a1 1 0 01-2 0V4zm14 7H3v9.778C3 21.453 3.547 22 4.222 22h15.556c.675 0 1.222-.547 1.222-1.222V11z" />
-  ),
-});
diff --git a/packages/components/icons/src/ChatBubble.tsx b/packages/components/icons/src/ChatBubble.tsx
deleted file mode 100644
index 5bec30bd7c..0000000000
--- a/packages/components/icons/src/ChatBubble.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ChatBubble = /*#__PURE__*/ generateIcon({
-  name: 'ChatBubble',
-  path: (
-    <Fragment>
-      <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ChatBubbleTrimmed.tsx b/packages/components/icons/src/ChatBubbleTrimmed.tsx
deleted file mode 100644
index eb8e931ce2..0000000000
--- a/packages/components/icons/src/ChatBubbleTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ChatBubbleTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ChatBubbleTrimmed',
-  path: (
-    <Fragment>
-      <path d="M13.5 1.5h-12C.7 1.5 0 2.2 0 3v13.5l3-3h10.5c.8 0 1.5-.7 1.5-1.5V3c0-.8-.7-1.5-1.5-1.5z" />
-      <path d="M0 0h15v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/CheckCircle.tsx b/packages/components/icons/src/CheckCircle.tsx
deleted file mode 100644
index 12a36a4ed2..0000000000
--- a/packages/components/icons/src/CheckCircle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const CheckCircle = /*#__PURE__*/ generateIcon({
-  name: 'CheckCircle',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/CheckCircleTrimmed.tsx b/packages/components/icons/src/CheckCircleTrimmed.tsx
deleted file mode 100644
index 90d40d756f..0000000000
--- a/packages/components/icons/src/CheckCircleTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const CheckCircleTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'CheckCircleTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h15v18H0V0z" fill="none" />
-      <path d="M7.5 1.5C3.4 1.5 0 4.9 0 9s3.4 7.5 7.5 7.5S15 13.1 15 9s-3.4-7.5-7.5-7.5zM6 12.8L2.2 9l1.1-1.1L6 10.6l5.7-5.7L12.8 6 6 12.8z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/ChevronDown.tsx b/packages/components/icons/src/ChevronDown.tsx
deleted file mode 100644
index 24a1923b29..0000000000
--- a/packages/components/icons/src/ChevronDown.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ChevronDown = /*#__PURE__*/ generateIcon({
-  name: 'ChevronDown',
-  path: (
-    <path d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" />
-  ),
-});
diff --git a/packages/components/icons/src/ChevronDownTrimmed.tsx b/packages/components/icons/src/ChevronDownTrimmed.tsx
deleted file mode 100644
index 7e89f28335..0000000000
--- a/packages/components/icons/src/ChevronDownTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ChevronDownTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ChevronDownTrimmed',
-  path: (
-    <Fragment>
-      <path d="M1.1 5.9l3.4 3.4 3.4-3.4 1.1 1-4.5 4.5L0 6.9l1.1-1z" />
-      <path d="M0 0h9v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 9 18',
-});
diff --git a/packages/components/icons/src/ChevronLeft.tsx b/packages/components/icons/src/ChevronLeft.tsx
deleted file mode 100644
index 03c9333223..0000000000
--- a/packages/components/icons/src/ChevronLeft.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ChevronLeft = /*#__PURE__*/ generateIcon({
-  name: 'ChevronLeft',
-  path: (
-    <path d="M15.3738 5.29289C15.7643 5.68342 15.7643 6.31658 15.3738 6.70711L10.0809 12L15.3738 17.2929C15.7643 17.6834 15.7643 18.3166 15.3738 18.7071C14.9833 19.0976 14.3501 19.0976 13.9596 18.7071L7.95956 12.7071C7.56904 12.3166 7.56904 11.6834 7.95956 11.2929L13.9596 5.29289C14.3501 4.90237 14.9833 4.90237 15.3738 5.29289Z" />
-  ),
-});
diff --git a/packages/components/icons/src/ChevronLeftTrimmed.tsx b/packages/components/icons/src/ChevronLeftTrimmed.tsx
deleted file mode 100644
index ae78bc74b0..0000000000
--- a/packages/components/icons/src/ChevronLeftTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ChevronLeftTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ChevronLeftTrimmed',
-  path: (
-    <Fragment>
-      <path d="M5.6 5.6L4.5 4.5 0 9l4.5 4.5 1.1-1.1L2.1 9l3.5-3.4z" />
-      <path d="M0 0h5.6v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 5.6 18',
-});
diff --git a/packages/components/icons/src/ChevronRight.tsx b/packages/components/icons/src/ChevronRight.tsx
deleted file mode 100644
index 371995c125..0000000000
--- a/packages/components/icons/src/ChevronRight.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ChevronRight = /*#__PURE__*/ generateIcon({
-  name: 'ChevronRight',
-  path: (
-    <path d="M8.62623 18.7071C8.2357 18.3166 8.2357 17.6834 8.62623 17.2929L13.9191 12L8.62623 6.70711C8.2357 6.31658 8.2357 5.68342 8.62623 5.29289C9.01675 4.90237 9.64992 4.90237 10.0404 5.29289L16.0404 11.2929C16.431 11.6834 16.431 12.3166 16.0404 12.7071L10.0404 18.7071C9.64992 19.0976 9.01675 19.0976 8.62623 18.7071Z" />
-  ),
-});
diff --git a/packages/components/icons/src/ChevronRightTrimmed.tsx b/packages/components/icons/src/ChevronRightTrimmed.tsx
deleted file mode 100644
index 87ed18513a..0000000000
--- a/packages/components/icons/src/ChevronRightTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ChevronRightTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ChevronRightTrimmed',
-  path: (
-    <Fragment>
-      <path d="M1.1 4.5L0 5.6 3.4 9 0 12.4l1.1 1.1L5.6 9 1.1 4.5z" />
-      <path d="M0 0h5.6v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 5.6 18',
-});
diff --git a/packages/components/icons/src/ChevronUp.tsx b/packages/components/icons/src/ChevronUp.tsx
deleted file mode 100644
index a861a5ad05..0000000000
--- a/packages/components/icons/src/ChevronUp.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ChevronUp = /*#__PURE__*/ generateIcon({
-  name: 'ChevronUp',
-  path: (
-    <path d="M18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31659 16.0976 5.68342 16.0976 5.2929 15.7071C4.90237 15.3166 4.90237 14.6834 5.2929 14.2929L11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071Z" />
-  ),
-});
diff --git a/packages/components/icons/src/ChevronUpTrimmed.tsx b/packages/components/icons/src/ChevronUpTrimmed.tsx
deleted file mode 100644
index 2483e2de2f..0000000000
--- a/packages/components/icons/src/ChevronUpTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ChevronUpTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ChevronUpTrimmed',
-  path: (
-    <Fragment>
-      <path d="M1.1 11.6l3.4-3.4 3.4 3.4L9 10.5 4.5 6 0 10.5l1.1 1.1z" />
-      <path d="M0 0h9v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 9 18',
-});
diff --git a/packages/components/icons/src/Clock.tsx b/packages/components/icons/src/Clock.tsx
deleted file mode 100644
index 1ef9aa0f3b..0000000000
--- a/packages/components/icons/src/Clock.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Clock = /*#__PURE__*/ generateIcon({
-  name: 'Clock',
-  path: (
-    <Fragment>
-      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ClockTrimmed.tsx b/packages/components/icons/src/ClockTrimmed.tsx
deleted file mode 100644
index e8ec1c3135..0000000000
--- a/packages/components/icons/src/ClockTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ClockTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ClockTrimmed',
-  path: (
-    <Fragment>
-      <path d="M9.99 0C4.47 0 0 4.48 0 10s4.47 10 9.99 10C15.52 20 20 15.52 20 10S15.52 0 9.99 0zM10 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
-      <path d="M10.5 5H9v6l5.25 3.15.75-1.23-4.5-2.67V5z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 20 24',
-});
diff --git a/packages/components/icons/src/Close.tsx b/packages/components/icons/src/Close.tsx
deleted file mode 100644
index 25887d25b7..0000000000
--- a/packages/components/icons/src/Close.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Close = /*#__PURE__*/ generateIcon({
-  name: 'Close',
-  path: (
-    <path d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z" />
-  ),
-});
diff --git a/packages/components/icons/src/CloseTrimmed.tsx b/packages/components/icons/src/CloseTrimmed.tsx
deleted file mode 100644
index 41c6375238..0000000000
--- a/packages/components/icons/src/CloseTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const CloseTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'CloseTrimmed',
-  path: (
-    <Fragment>
-      <path d="M14 6.4L12.6 5 7 10.6 1.4 5 0 6.4 5.6 12 0 17.6 1.4 19 7 13.4l5.6 5.6 1.4-1.4L8.4 12 14 6.4z" />
-      <path d="M0 0h14v24H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 14 24',
-});
diff --git a/packages/components/icons/src/CloudUpload.tsx b/packages/components/icons/src/CloudUpload.tsx
deleted file mode 100644
index 53f550cea0..0000000000
--- a/packages/components/icons/src/CloudUpload.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const CloudUpload = /*#__PURE__*/ generateIcon({
-  name: 'CloudUpload',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l4.65-4.65c.2-.2.51-.2.71 0L17 13h-3z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 24 24',
-});
diff --git a/packages/components/icons/src/Code.tsx b/packages/components/icons/src/Code.tsx
deleted file mode 100644
index c77b171c2d..0000000000
--- a/packages/components/icons/src/Code.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Code = /*#__PURE__*/ generateIcon({
-  name: 'Code',
-  path: (
-    <Fragment>
-      <path fill="none" d="M0 0h24v24H0V0z" />
-      <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/CodeIllustration.tsx b/packages/components/icons/src/CodeIllustration.tsx
deleted file mode 100644
index 4e403ffc74..0000000000
--- a/packages/components/icons/src/CodeIllustration.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const CodeIllustration = /*#__PURE__*/ generateIcon({
-  name: 'CodeIllustration',
-  viewBox: '0 0 24 24',
-  path: (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M.5 0a.5.5 0 00-.5.5v23a.5.5 0 00.5.5h19a.5.5 0 00.5-.5v-17a.5.5 0 00-.146-.354l-6-6A.5.5 0 0013.5 0H.5zM1 23V1h12v5.5a.5.5 0 00.5.5H19v16H1zM18.293 6L14 1.707V6h4.293z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M13.1133 8.91158C13.3622 9.31598 13.5 9.85137 13.5 10.5408C13.5 11.7245 13.7365 12.3844 13.9341 12.7302C14.0332 12.9037 14.1256 13.0037 14.1816 13.055C14.2099 13.081 14.2298 13.0953 14.2378 13.1007C14.2386 13.1012 14.2392 13.1017 14.2398 13.1021C14.3998 13.1895 14.5 13.3575 14.5 13.5408C14.5 13.7241 14.3998 13.8921 14.2399 13.9795C14.2393 13.9799 14.2386 13.9804 14.2378 13.9809C14.2298 13.9864 14.2099 14.0007 14.1816 14.0266C14.1256 14.0779 14.0332 14.178 13.9341 14.3514C13.7365 14.6972 13.5 15.3571 13.5 16.5408C13.5 17.2294 13.3625 17.7622 13.1098 18.1609C12.8523 18.5671 12.5011 18.7928 12.1556 18.906C11.8197 19.016 11.4962 19.0181 11.2681 18.9977C11.1519 18.9874 11.0543 18.9706 10.984 18.956C10.9487 18.9487 10.9199 18.9418 10.8985 18.9363C10.8878 18.9336 10.879 18.9312 10.8721 18.9293L10.8633 18.9268L10.86 18.9258L10.8586 18.9254C10.8583 18.9253 10.8574 18.9251 11 18.4458C11.1426 17.9666 11.1423 17.9665 11.1421 17.9664L11.1408 17.966L11.1396 17.9657L11.1464 17.9675C11.1543 17.9695 11.1685 17.973 11.1879 17.977C11.2269 17.9851 11.2856 17.9953 11.3569 18.0017C11.5038 18.0148 11.6803 18.0094 11.8444 17.9556C11.9989 17.905 12.1477 17.8108 12.2652 17.6255C12.3875 17.4326 12.5 17.1023 12.5 16.5408C12.5 15.2245 12.7635 14.3844 13.0659 13.8552C13.1354 13.7336 13.2064 13.6295 13.2755 13.5408C13.2064 13.4522 13.1354 13.3481 13.0659 13.2264C12.7635 12.6972 12.5 11.8571 12.5 10.5408C12.5 9.98026 12.3878 9.64065 12.2617 9.43568C12.1393 9.23685 11.9835 9.13114 11.8244 9.07148C11.6571 9.00872 11.4791 8.99525 11.3333 9.00132C11.2623 9.00428 11.2039 9.01167 11.1653 9.01788C11.1461 9.02097 11.1322 9.02369 11.1244 9.0253L11.1177 9.02676C11.1175 9.02682 11.1172 9.02689 11.1177 9.02676L11.1194 9.02636L11.1207 9.02602C11.121 9.02596 11.1213 9.02589 11 8.54082C10.8787 8.05575 10.879 8.05568 10.8793 8.0556L10.8813 8.0551L10.8847 8.05428L10.8937 8.05217C10.9007 8.05056 10.9097 8.04857 10.9205 8.04632C10.942 8.04183 10.9711 8.03626 11.0066 8.03055C11.0773 8.01919 11.1752 8.00704 11.2917 8.00219C11.5209 7.99264 11.8429 8.01041 12.1756 8.13515C12.5165 8.26299 12.8607 8.50103 13.1133 8.91158ZM8.64201 8.08247C8.6423 8.08256 8.64257 8.08264 8.5 8.56188C8.35743 9.04112 8.35769 9.0412 8.35794 9.04128L8.35923 9.04166L8.36036 9.04199L8.35362 9.04021C8.34567 9.03818 8.33154 9.03474 8.31214 9.0307C8.27305 9.02256 8.21435 9.01236 8.14309 9.006C7.99625 8.99291 7.81971 8.99831 7.65562 9.05205C7.50106 9.10267 7.3523 9.19689 7.2348 9.38225C7.11253 9.57513 7 9.90544 7 10.4669C7 11.7832 6.73652 12.6233 6.43412 13.1525C6.36459 13.2741 6.29363 13.3782 6.22447 13.4669C6.29363 13.5555 6.36459 13.6596 6.43412 13.7813C6.73652 14.3105 7 15.1506 7 16.4669C7 17.0274 7.11219 17.367 7.23833 17.572C7.36068 17.7708 7.51646 17.8766 7.67556 17.9362C7.84292 17.999 8.02088 18.0125 8.16668 18.0064C8.2377 18.0034 8.29606 17.996 8.33472 17.9898C8.35391 17.9867 8.36783 17.984 8.37556 17.9824L8.38182 17.981L8.38062 17.9813L8.37927 17.9817C8.379 17.9817 8.37873 17.9818 8.5 18.4669C8.62127 18.952 8.62098 18.952 8.62069 18.9521L8.61866 18.9526L8.61528 18.9534L8.60626 18.9555C8.59927 18.9571 8.59031 18.9591 8.57952 18.9614C8.55795 18.9659 8.5289 18.9714 8.4934 18.9771C8.42269 18.9885 8.3248 19.0007 8.20832 19.0055C7.97912 19.0151 7.65708 18.9973 7.32444 18.8726C6.98354 18.7447 6.63932 18.5067 6.38667 18.0961C6.13781 17.6917 6 17.1563 6 16.4669C6 15.2832 5.76348 14.6233 5.56588 14.2775C5.46679 14.104 5.37439 14.004 5.31839 13.9527C5.29012 13.9267 5.27024 13.9124 5.26222 13.907C5.2614 13.9064 5.2607 13.906 5.26012 13.9056C5.10018 13.8182 5 13.6501 5 13.4669C5 13.2837 5.10017 13.1156 5.26012 13.0282C5.26069 13.0278 5.26139 13.0273 5.26222 13.0268C5.27024 13.0213 5.29011 13.007 5.31839 12.9811C5.37438 12.9298 5.46679 12.8297 5.56588 12.6563C5.76348 12.3105 6 11.6506 6 10.4669C6 9.77834 6.13747 9.24552 6.3902 8.84684C6.6477 8.44064 6.99894 8.21485 7.34438 8.10172C7.68029 7.99171 8.00375 7.98961 8.23191 8.00995C8.34815 8.02032 8.4457 8.03706 8.51598 8.0517C8.55127 8.05904 8.58011 8.06595 8.60146 8.07141C8.61215 8.07415 8.621 8.07653 8.62789 8.07844L8.63674 8.08094L8.64004 8.08189L8.64201 8.08247ZM8.38182 17.981C8.38211 17.981 8.38241 17.9809 8.38182 17.981V17.981Z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/CodeTrimmed.tsx b/packages/components/icons/src/CodeTrimmed.tsx
deleted file mode 100644
index e8e2858199..0000000000
--- a/packages/components/icons/src/CodeTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const CodeTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'CodeTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h15v18H0V0z" fill="none" />
-      <path d="M5.5 12.5L2.1 9l3.4-3.4-1-1.1L0 9l4.5 4.5 1-1zm3.9 0L12.9 9 9.4 5.6l1.1-1.1L15 9l-4.5 4.5s-1-1-1.1-1z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/Copy.tsx b/packages/components/icons/src/Copy.tsx
deleted file mode 100644
index b94586d1ab..0000000000
--- a/packages/components/icons/src/Copy.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Copy = /*#__PURE__*/ generateIcon({
-  name: 'Copy',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/CopyTrimmed.tsx b/packages/components/icons/src/CopyTrimmed.tsx
deleted file mode 100644
index aa9404ce35..0000000000
--- a/packages/components/icons/src/CopyTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const CopyTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'CopyTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h14.2v18H0V0z" fill="none" />
-      <path d="M10.5.8h-9C.7.8 0 1.4 0 2.2v10.5h1.5V2.2h9V.8zm2.3 3H4.5c-.8 0-1.5.6-1.5 1.4v10.5c0 .8.7 1.5 1.5 1.5h8.2c.8 0 1.5-.7 1.5-1.5V5.2c0-.8-.6-1.4-1.4-1.4zm0 12H4.5V5.2h8.2v10.6z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 14.2 18',
-});
diff --git a/packages/components/icons/src/Cycle.tsx b/packages/components/icons/src/Cycle.tsx
deleted file mode 100644
index fa69e748ff..0000000000
--- a/packages/components/icons/src/Cycle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Cycle = /*#__PURE__*/ generateIcon({
-  name: 'Cycle',
-  path: (
-    <Fragment>
-      <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0020 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 004 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/CycleTrimmed.tsx b/packages/components/icons/src/CycleTrimmed.tsx
deleted file mode 100644
index 5e6591fd9a..0000000000
--- a/packages/components/icons/src/CycleTrimmed.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const CycleTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'CycleTrimmed',
-  path: (
-    <path d="M8 4V1L4 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0016 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L1.24 7.74A7.93 7.93 0 000 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" />
-  ),
-  props: {
-    fillRule: 'nonzero',
-    clipRule: 'evenodd',
-    strokeLinejoin: 'round',
-    strokeMiterlimit: 1.414,
-  },
-  trimmed: true,
-  viewBox: '0 0 16 24',
-});
diff --git a/packages/components/icons/src/Delete.tsx b/packages/components/icons/src/Delete.tsx
deleted file mode 100644
index 67f9965b9b..0000000000
--- a/packages/components/icons/src/Delete.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Delete = /*#__PURE__*/ generateIcon({
-  name: 'Delete',
-  path: (
-    <Fragment>
-      <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/DeleteTrimmed.tsx b/packages/components/icons/src/DeleteTrimmed.tsx
deleted file mode 100644
index fa3eed6ba2..0000000000
--- a/packages/components/icons/src/DeleteTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const DeleteTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'DeleteTrimmed',
-  path: (
-    <Fragment>
-      <path d="M1 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H1v12zM14 4h-3.5l-1-1h-5l-1 1H0v2h14V4z" />
-      <path fill="none" d="M-5 0h24v24H-5V0z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 14 24',
-});
diff --git a/packages/components/icons/src/Diamond.tsx b/packages/components/icons/src/Diamond.tsx
deleted file mode 100644
index 81ad4cdc8d..0000000000
--- a/packages/components/icons/src/Diamond.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Diamond = /*#__PURE__*/ generateIcon({
-  name: 'Diamond',
-  viewBox: '0 0 24 24',
-  trimmed: true,
-  path: (
-    <path d="M21.7582 8.82051L17.2415 3.35043C17.151 3.24071 17.0394 3.15271 16.9142 3.09228C16.789 3.03186 16.6531 3.0004 16.5156 3H7.48207C7.34452 3.0004 7.20864 3.03186 7.08346 3.09228C6.9583 3.15271 6.84672 3.24071 6.75617 3.35043L2.23941 8.82051C2.08152 9.01176 1.99625 9.25833 2.00013 9.5124C2.004 9.76647 2.09675 10.01 2.26038 10.1957L11.2939 20.4522C11.3844 20.5549 11.494 20.6368 11.6156 20.6929C11.7373 20.7488 11.8686 20.7778 12.0012 20.7778C12.1339 20.7778 12.2652 20.7488 12.3869 20.6929C12.5085 20.6368 12.618 20.5549 12.7086 20.4522L21.7421 10.1957C21.9051 10.0093 21.997 9.76548 21.9999 9.51141C22.0029 9.25734 21.9168 9.01113 21.7582 8.82051ZM18.899 8.47009H16.3542L13.9346 5.05128H16.076L18.899 8.47009ZM7.47239 10.5214L9.18149 15.0513L5.19223 10.5214H7.47239ZM14.4411 10.5214L11.9988 16.9906L9.55655 10.5214H14.4411ZM10.0631 8.47009L11.9988 5.73504L13.9346 8.47009H10.0631ZM16.5252 10.5214H18.8054L14.8161 15.0513L16.5252 10.5214ZM7.92164 5.05128H10.0631L7.64338 8.47009H5.09867L7.92164 5.05128Z" />
-  ),
-});
diff --git a/packages/components/icons/src/Done.tsx b/packages/components/icons/src/Done.tsx
deleted file mode 100644
index 292f782110..0000000000
--- a/packages/components/icons/src/Done.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Done = /*#__PURE__*/ generateIcon({
-  name: 'Done',
-  path: (
-    <path d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.51957 17.8946 9.26522 18 9 18C8.73478 18 8.48043 17.8946 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" />
-  ),
-});
diff --git a/packages/components/icons/src/DoubleArrow.tsx b/packages/components/icons/src/DoubleArrow.tsx
deleted file mode 100644
index 37357e5671..0000000000
--- a/packages/components/icons/src/DoubleArrow.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const DoubleArrow = /*#__PURE__*/ generateIcon({
-  name: 'DoubleArrow',
-  path: (
-    <Fragment>
-      <path d="M 7 14 L 12 20 L 17 14 Z" />
-      <path d="M 6.989 9.951 L 11.989 4 L 16.989 9.951 Z" />
-      <path d="M 0 0 L 24 0 L 24 24 L 0 24 Z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/Download.tsx b/packages/components/icons/src/Download.tsx
deleted file mode 100644
index dec8eed459..0000000000
--- a/packages/components/icons/src/Download.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Download = /*#__PURE__*/ generateIcon({
-  name: 'Download',
-  path: (
-    <Fragment>
-      <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/DownloadTrimmed.tsx b/packages/components/icons/src/DownloadTrimmed.tsx
deleted file mode 100644
index 2098b8d081..0000000000
--- a/packages/components/icons/src/DownloadTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const DownloadTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'DownloadTrimmed',
-  path: (
-    <Fragment>
-      <path d="M10.5 6.8h-3V2.2H3v4.5H0L5.2 12l5.3-5.2zM0 13.5V15h10.5v-1.5H0z" />
-      <path d="M0 0h10.5v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 10.5 18',
-});
diff --git a/packages/components/icons/src/Drag.tsx b/packages/components/icons/src/Drag.tsx
deleted file mode 100644
index c574b8ccd8..0000000000
--- a/packages/components/icons/src/Drag.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Drag = /*#__PURE__*/ generateIcon({
-  name: 'Drag',
-  path: (
-    <Fragment>
-      <path fill="none" d="M0 0h24v24H0V0z" />
-      <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/DragTrimmed.tsx b/packages/components/icons/src/DragTrimmed.tsx
deleted file mode 100644
index e657c5e56a..0000000000
--- a/packages/components/icons/src/DragTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const DragTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'DragTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h10v24H0V0z" fill="none" />
-      <path d="M4 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 4 0 4.9 0 6s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 10 24',
-});
diff --git a/packages/components/icons/src/Edit.tsx b/packages/components/icons/src/Edit.tsx
deleted file mode 100644
index e5e18c5809..0000000000
--- a/packages/components/icons/src/Edit.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Edit = /*#__PURE__*/ generateIcon({
-  name: 'Edit',
-  path: (
-    <Fragment>
-      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 000-1.41l-2.34-2.34a.996.996 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/EditTrimmed.tsx b/packages/components/icons/src/EditTrimmed.tsx
deleted file mode 100644
index 496ef49310..0000000000
--- a/packages/components/icons/src/EditTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const EditTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'EditTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 12.9v2.8h2.8l8.3-8.3-2.8-2.8L0 12.9zm13.3-7.6c.3-.3.3-.8 0-1.1l-1.8-1.8c-.3-.3-.8-.3-1.1 0L9.1 3.8l2.8 2.8c0 .1 1.4-1.3 1.4-1.3z" />
-      <path d="M0 0h13.5v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 13.5 18',
-});
diff --git a/packages/components/icons/src/EmbeddedBlockIcon.tsx b/packages/components/icons/src/EmbeddedBlockIcon.tsx
new file mode 100644
index 0000000000..605ebf4a6e
--- /dev/null
+++ b/packages/components/icons/src/EmbeddedBlockIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  IconVariant,
+  generateComponentWithVariants,
+} from '@contentful/f36-icon';
+import { generateIconComponent } from '@contentful/f36-icon/src';
+
+export const EmbeddedBlockIcon = generateComponentWithVariants({
+  variants: {
+    [IconVariant.Active]: generateIconComponent({
+      path: (
+        <path
+          d="M4.375 3.125c0-.345.28-.625.625-.625h10a.625.625 0 1 1 0 1.25H5a.625.625 0 0 1-.625-.625ZM4.375 16.875c0-.345.28-.625.625-.625h10a.625.625 0 1 1 0 1.25H5a.625.625 0 0 1-.625-.625ZM3.125 6.875c-.69 0-1.25.56-1.25 1.25v3.75c0 .69.56 1.25 1.25 1.25h13.75c.69 0 1.25-.56 1.25-1.25v-3.75c0-.69-.56-1.25-1.25-1.25H3.125Z"
+          fill="currentColor"
+        />
+      ),
+    }),
+    [IconVariant.Default]: generateIconComponent({
+      path: (
+        <g fill="currentColor">
+          <path d="M4.375 3.125c0-.345.28-.625.625-.625h10a.625.625 0 1 1 0 1.25H5a.625.625 0 0 1-.625-.625ZM4.375 16.875c0-.345.28-.625.625-.625h10a.625.625 0 1 1 0 1.25H5a.625.625 0 0 1-.625-.625Z" />
+          <path d="M3.125 6.875c-.69 0-1.25.56-1.25 1.25v3.75c0 .69.56 1.25 1.25 1.25h13.75c.69 0 1.25-.56 1.25-1.25v-3.75c0-.69-.56-1.25-1.25-1.25H3.125Zm0 1.25h13.75v3.75H3.125v-3.75Z" />
+        </g>
+      ),
+    }),
+  },
+});
diff --git a/packages/components/icons/src/EmbeddedEntryBlock.tsx b/packages/components/icons/src/EmbeddedEntryBlock.tsx
deleted file mode 100644
index 15a850163f..0000000000
--- a/packages/components/icons/src/EmbeddedEntryBlock.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const EmbeddedEntryBlock = /*#__PURE__*/ generateIcon({
-  name: 'EmbeddedEntryBlock',
-  path: (
-    <path d="M21 15H3c-.6 0-1-.4-1-1v-4c0-.6.4-1 1-1h18c.5 0 1 .4 1 1v4c0 .6-.5 1-1 1zM19.5 7h-15c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h15c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5zM19.5 19h-15c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h15c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5zM17.6 23H6.4c-.2 0-.4-.2-.4-.4v-1.1c0-.3.2-.5.4-.5h11.1c.2 0 .4.2.4.4v1.1c.1.3-.1.5-.3.5zM17.6 3H6.4c-.2 0-.4-.2-.4-.4V1.4c0-.2.2-.4.4-.4h11.1c.3 0 .5.2.5.4v1.1c0 .3-.2.5-.4.5z" />
-  ),
-});
diff --git a/packages/components/icons/src/EmbeddedEntryBlockTrimmed.tsx b/packages/components/icons/src/EmbeddedEntryBlockTrimmed.tsx
deleted file mode 100644
index b7002de269..0000000000
--- a/packages/components/icons/src/EmbeddedEntryBlockTrimmed.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const EmbeddedEntryBlockTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'EmbeddedEntryBlockTrimmed',
-  path: (
-    <path d="M19 15H1c-.6 0-1-.4-1-1v-4c0-.6.4-1 1-1h18c.5 0 1 .4 1 1v4c0 .6-.5 1-1 1zM17.5 7h-15c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h15c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5zM17.5 19h-15c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h15c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5zM15.6 23H4.4c-.2 0-.4-.2-.4-.4v-1.1c0-.3.2-.5.4-.5h11.1c.2 0 .4.2.4.4v1.1c.1.3-.1.5-.3.5zM15.6 3H4.4c-.2 0-.4-.2-.4-.4V1.4c0-.2.2-.4.4-.4h11.1c.3 0 .5.2.5.4v1.1c0 .3-.2.5-.4.5z" />
-  ),
-  trimmed: true,
-  viewBox: '0 0 20 24',
-});
diff --git a/packages/components/icons/src/EmbeddedEntryInline.tsx b/packages/components/icons/src/EmbeddedEntryInline.tsx
deleted file mode 100644
index cbc6ec62c7..0000000000
--- a/packages/components/icons/src/EmbeddedEntryInline.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const EmbeddedEntryInline = /*#__PURE__*/ generateIcon({
-  name: 'EmbeddedEntryInline',
-  path: (
-    <Fragment>
-      <path d="M13.4 17H6.6c-.3 0-.6-.3-.6-.6v-2.8c0-.3.3-.6.6-.6h6.8c.3 0 .6.3.6.6v2.8c0 .3-.3.6-.6.6zM22.5 11h-21c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h20.9c.4 0 .6.2.6.5v.9c0 .4-.2.6-.5.6zM4.5 16h-3c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5zM12.6 21H1.4c-.2 0-.4-.2-.4-.4v-1.1c0-.3.2-.5.4-.5h11.1c.2 0 .4.2.4.4v1.1c.1.3-.1.5-.3.5zM15.6 6H1.4c-.2 0-.4-.2-.4-.4V4.4c0-.2.2-.4.4-.4h14.1c.3 0 .5.2.5.4v1.1c0 .3-.2.5-.4.5z" />
-      <path d="M4.5 16h-3c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5zM19.5 16h-4c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h4c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/EmbeddedEntryInlineTrimmed.tsx b/packages/components/icons/src/EmbeddedEntryInlineTrimmed.tsx
deleted file mode 100644
index 7ff547e3d5..0000000000
--- a/packages/components/icons/src/EmbeddedEntryInlineTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const EmbeddedEntryInlineTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'EmbeddedEntryInlineTrimmed',
-  path: (
-    <Fragment>
-      <path d="M12.4 17H5.6c-.3 0-.6-.3-.6-.6v-2.8c0-.3.3-.6.6-.6h6.8c.3 0 .6.3.6.6v2.8c0 .3-.3.6-.6.6zM21.5 11H.5c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h20.9c.4 0 .6.2.6.5v.9c0 .4-.2.6-.5.6zM3.5 16h-3c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5zM11.6 21H.4c-.2 0-.4-.2-.4-.4v-1.1c0-.3.2-.5.4-.5h11.1c.2 0 .4.2.4.4v1.1c.1.3-.1.5-.3.5zM14.6 6H.4C.2 6 0 5.8 0 5.6V4.4c0-.2.2-.4.4-.4h14.1c.3 0 .5.2.5.4v1.1c0 .3-.2.5-.4.5z" />
-      <path d="M3.5 16h-3c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5zM18.5 16h-4c-.3 0-.5-.2-.5-.5v-1c0-.3.2-.5.5-.5h4c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 22 24',
-});
diff --git a/packages/components/icons/src/EmbeddedLineIcon.tsx b/packages/components/icons/src/EmbeddedLineIcon.tsx
new file mode 100644
index 0000000000..30874b2f60
--- /dev/null
+++ b/packages/components/icons/src/EmbeddedLineIcon.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  IconVariant,
+  generateComponentWithVariants,
+} from '@contentful/f36-icon';
+import { generateIconComponent } from '@contentful/f36-icon/src';
+
+export const EmbeddedLineIcon = generateComponentWithVariants({
+  variants: {
+    [IconVariant.Active]: generateIconComponent({
+      path: (
+        <path
+          d="M5.625 2.5c-.69 0-1.25.56-1.25 1.25v2.5c0 .69.56 1.25 1.25 1.25h8.75c.69 0 1.25-.56 1.25-1.25v-2.5c0-.69-.56-1.25-1.25-1.25h-8.75ZM1.875 10c0-.345.28-.625.625-.625h15a.625.625 0 1 1 0 1.25h-15A.625.625 0 0 1 1.875 10ZM5.625 12.5c-.69 0-1.25.56-1.25 1.25v2.5c0 .69.56 1.25 1.25 1.25h8.75c.69 0 1.25-.56 1.25-1.25v-2.5c0-.69-.56-1.25-1.25-1.25h-8.75Z"
+          fill="currentColor"
+        />
+      ),
+    }),
+    [IconVariant.Default]: generateIconComponent({
+      path: (
+        <g fill="currentColor">
+          <path d="M4.375 3.75c0-.69.56-1.25 1.25-1.25h8.75c.69 0 1.25.56 1.25 1.25v2.5c0 .69-.56 1.25-1.25 1.25h-8.75c-.69 0-1.25-.56-1.25-1.25v-2.5Zm10 0h-8.75v2.5h8.75v-2.5Z" />
+          <path d="M1.875 10c0-.345.28-.625.625-.625h15a.625.625 0 1 1 0 1.25h-15A.625.625 0 0 1 1.875 10Z" />
+          <path d="M5.625 12.5c-.69 0-1.25.56-1.25 1.25v2.5c0 .69.56 1.25 1.25 1.25h8.75c.69 0 1.25-.56 1.25-1.25v-2.5c0-.69-.56-1.25-1.25-1.25h-8.75Zm0 1.25h8.75v2.5h-8.75v-2.5Z" />
+        </g>
+      ),
+    }),
+  },
+});
diff --git a/packages/components/icons/src/Entry.tsx b/packages/components/icons/src/Entry.tsx
deleted file mode 100644
index 052f1ee133..0000000000
--- a/packages/components/icons/src/Entry.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Entry = /*#__PURE__*/ generateIcon({
-  name: 'Entry',
-  path: (
-    <Fragment>
-      <path d="M3 13.5V11C3 10.4477 3.44772 10 4 10H6.5C7.05228 10 7.5 10.4477 7.5 11V13.5C7.5 14.0523 7.05228 14.5 6.5 14.5H4C3.44772 14.5 3 14.0523 3 13.5Z" />
-      <path d="M11 13.5V11C11 10.4477 11.4477 10 12 10H14.5C15.0523 10 15.5 10.4477 15.5 11V13.5C15.5 14.0523 15.0523 14.5 14.5 14.5H12C11.4477 14.5 11 14.0523 11 13.5Z" />
-      <path d="M7 6.5V4C7 3.44772 7.44772 3 8 3H10.5C11.0523 3 11.5 3.44772 11.5 4V6.5C11.5 7.05228 11.0523 7.5 10.5 7.5H8C7.44772 7.5 7 7.05228 7 6.5Z" />
-    </Fragment>
-  ),
-  viewBox: '0 0 18 18',
-});
diff --git a/packages/components/icons/src/EntryIcon.tsx b/packages/components/icons/src/EntryIcon.tsx
new file mode 100644
index 0000000000..11214af5ed
--- /dev/null
+++ b/packages/components/icons/src/EntryIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  IconVariant,
+  generateComponentWithVariants,
+} from '@contentful/f36-icon';
+import { generateIconComponent } from '@contentful/f36-icon/src';
+
+export const EntryIcon = generateComponentWithVariants({
+  variants: {
+    [IconVariant.Active]: generateIconComponent({
+      path: (
+        <path
+          d="M8.125 2.5c-.69 0-1.25.56-1.25 1.25V7.5c0 .69.56 1.25 1.25 1.25h3.75c.69 0 1.25-.56 1.25-1.25V3.75c0-.69-.56-1.25-1.25-1.25h-3.75ZM3.125 11.25c-.69 0-1.25.56-1.25 1.25v3.75c0 .69.56 1.25 1.25 1.25h3.75c.69 0 1.25-.56 1.25-1.25V12.5c0-.69-.56-1.25-1.25-1.25h-3.75ZM13.125 11.25c-.69 0-1.25.56-1.25 1.25v3.75c0 .69.56 1.25 1.25 1.25h3.75c.69 0 1.25-.56 1.25-1.25V12.5c0-.69-.56-1.25-1.25-1.25h-3.75Z"
+          fill="currentColor"
+        />
+      ),
+    }),
+    [IconVariant.Default]: generateIconComponent({
+      path: (
+        <path
+          d="M6.875 3.75c0-.69.56-1.25 1.25-1.25h3.75c.69 0 1.25.56 1.25 1.25V7.5c0 .69-.56 1.25-1.25 1.25h-3.75c-.69 0-1.25-.56-1.25-1.25V3.75Zm5 0h-3.75V7.5h3.75V3.75ZM1.875 12.5c0-.69.56-1.25 1.25-1.25h3.75c.69 0 1.25.56 1.25 1.25v3.75c0 .69-.56 1.25-1.25 1.25h-3.75c-.69 0-1.25-.56-1.25-1.25V12.5Zm5 0h-3.75v3.75h3.75V12.5ZM13.125 11.25c-.69 0-1.25.56-1.25 1.25v3.75c0 .69.56 1.25 1.25 1.25h3.75c.69 0 1.25-.56 1.25-1.25V12.5c0-.69-.56-1.25-1.25-1.25h-3.75Zm0 1.25h3.75v3.75h-3.75V12.5Z"
+          fill="currentColor"
+        />
+      ),
+    }),
+  },
+});
diff --git a/packages/components/icons/src/EntryTrimmed.tsx b/packages/components/icons/src/EntryTrimmed.tsx
deleted file mode 100644
index 3ae5271c3c..0000000000
--- a/packages/components/icons/src/EntryTrimmed.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const EntryTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'EntryTrimmed',
-  path: (
-    <Fragment>
-      <path d="M3 13.5V11C3 10.4477 3.44772 10 4 10H6.5C7.05228 10 7.5 10.4477 7.5 11V13.5C7.5 14.0523 7.05228 14.5 6.5 14.5H4C3.44772 14.5 3 14.0523 3 13.5Z" />
-      <path d="M11 13.5V11C11 10.4477 11.4477 10 12 10H14.5C15.0523 10 15.5 10.4477 15.5 11V13.5C15.5 14.0523 15.0523 14.5 14.5 14.5H12C11.4477 14.5 11 14.0523 11 13.5Z" />
-      <path d="M7 6.5V4C7 3.44772 7.44772 3 8 3H10.5C11.0523 3 11.5 3.44772 11.5 4V6.5C11.5 7.05228 11.0523 7.5 10.5 7.5H8C7.44772 7.5 7 7.05228 7 6.5Z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 18 18',
-});
diff --git a/packages/components/icons/src/Environment.tsx b/packages/components/icons/src/Environment.tsx
deleted file mode 100644
index 578bd344e1..0000000000
--- a/packages/components/icons/src/Environment.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Environment = /*#__PURE__*/ generateIcon({
-  name: 'Environment',
-  path: (
-    <path d="M10.5 3.75a.75.75 0 0 1 .75-.75h2.992c.419 0 .758.34.758.757V6.75a.75.75 0 0 1-1.5 0V5.56L9.97 9.092a2.25 2.25 0 0 1-1.591.659H3.75a.75.75 0 0 1 0-1.5h4.629a.75.75 0 0 0 .53-.22l3.53-3.53H11.25a.75.75 0 0 1-.75-.75Zm.22 8.03a.75.75 0 1 1 1.06-1.06l1.72 1.72v-1.19a.75.75 0 0 1 1.5 0v2.992c0 .419-.34.758-.758.758H11.25a.75.75 0 0 1 0-1.5h1.19l-1.72-1.72Z" />
-  ),
-  viewBox: '0 0 18 18',
-});
diff --git a/packages/components/icons/src/EnvironmentAlias.tsx b/packages/components/icons/src/EnvironmentAlias.tsx
deleted file mode 100644
index 304b6d244d..0000000000
--- a/packages/components/icons/src/EnvironmentAlias.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const EnvironmentAlias = /*#__PURE__*/ generateIcon({
-  name: 'EnvironmentAlias',
-  path: (
-    <path d="M12.75 3C12.3358 3 12 3.33579 12 3.75C12 4.16421 12.3358 4.5 12.75 4.5H13.9393L10.409 8.03033C10.2684 8.17098 10.0776 8.25 9.87868 8.25H6.75C6.33579 8.25 6 8.58579 6 9C6 9.41421 6.33579 9.75 6.75 9.75H9.87868C10.4754 9.75 11.0477 9.51295 11.4697 9.09099L15 5.56066V6.75C15 7.16421 15.3358 7.5 15.75 7.5C16.1642 7.5 16.5 7.16421 16.5 6.75V3.7575C16.5 3.33914 16.1609 3 15.7425 3H12.75ZM12.2197 10.7197C11.9268 11.0126 11.9268 11.4874 12.2197 11.7803L13.9393 13.5H12.75C12.3358 13.5 12 13.8358 12 14.25C12 14.6642 12.3358 15 12.75 15H15.7425C16.1609 15 16.5 14.6609 16.5 14.2425V11.25C16.5 10.8358 16.1642 10.5 15.75 10.5C15.3358 10.5 15 10.8358 15 11.25V12.4393L13.2803 10.7197C12.9874 10.4268 12.5126 10.4268 12.2197 10.7197ZM3 9C3 6.95749 4.73373 5.25 6.9375 5.25C7.83237 5.25 8.65324 5.53347 9.31134 6.00801C9.64731 6.25027 10.1161 6.17431 10.3583 5.83833C10.6006 5.50236 10.5246 5.0336 10.1887 4.79133C9.27989 4.13603 8.15314 3.75 6.9375 3.75C3.9636 3.75 1.5 6.07194 1.5 9C1.5 11.9281 3.9636 14.25 6.9375 14.25C8.15314 14.25 9.27989 13.864 10.1887 13.2087C10.5246 12.9664 10.6006 12.4976 10.3583 12.1617C10.1161 11.8257 9.64731 11.7497 9.31134 11.992C8.65324 12.4665 7.83237 12.75 6.9375 12.75C4.73373 12.75 3 11.0425 3 9Z" />
-  ),
-  viewBox: '0 0 18 18',
-});
diff --git a/packages/components/icons/src/EnvironmentAliasIcon.tsx b/packages/components/icons/src/EnvironmentAliasIcon.tsx
new file mode 100644
index 0000000000..4afaa7694c
--- /dev/null
+++ b/packages/components/icons/src/EnvironmentAliasIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  IconVariant,
+  generateComponentWithVariants,
+} from '@contentful/f36-icon';
+import { generateIconComponent } from '@contentful/f36-icon/src';
+
+export const EnvironmentAliasIcon = generateComponentWithVariants({
+  variants: {
+    [IconVariant.Active]: generateIconComponent({
+      path: (
+        <g fill="currentColor">
+          <path d="M17.292 3.284a.625.625 0 0 1 .208.466V7.5a.625.625 0 0 1-1.067.442L15 6.509l-3.75 3.75a1.25 1.25 0 0 1-.884.366H6.875a.625.625 0 1 1 0-1.25h3.491l3.75-3.75-1.433-1.433a.625.625 0 0 1 .442-1.067h3.75c.16 0 .306.06.417.16ZM17.5 12.5a.625.625 0 0 0-1.067-.442L15 13.491l-2.058-2.058a.625.625 0 1 0-.884.884l2.058 2.058-1.433 1.433a.625.625 0 0 0 .442 1.067h3.75a.622.622 0 0 0 .625-.625V12.5Z" />
+          <path d="M8.125 14.375c-2.833 0-5-2.026-5-4.375 0-2.35 2.167-4.375 5-4.375.594 0 1.162.09 1.688.256a.625.625 0 1 0 .374-1.193 6.876 6.876 0 0 0-2.062-.313c-3.38 0-6.25 2.451-6.25 5.625s2.87 5.625 6.25 5.625c.721 0 1.415-.11 2.062-.313a.625.625 0 0 0-.374-1.193 5.625 5.625 0 0 1-1.688.256Z" />
+        </g>
+      ),
+    }),
+    [IconVariant.Default]: generateIconComponent({
+      path: (
+        <path
+          d="M12.5 3.75c0-.345.28-.625.625-.625h3.75c.345 0 .625.28.625.625V7.5a.625.625 0 1 1-1.25 0V5.259l-5 5a1.25 1.25 0 0 1-.884.366H6.875a.625.625 0 1 1 0-1.25h3.491l5-5h-2.241a.625.625 0 0 1-.625-.625ZM8.125 5.625c-2.833 0-5 2.026-5 4.375 0 2.35 2.167 4.375 5 4.375.594 0 1.162-.09 1.688-.256a.625.625 0 0 1 .374 1.193 6.879 6.879 0 0 1-2.062.313c-3.38 0-6.25-2.451-6.25-5.625s2.87-5.625 6.25-5.625c.721 0 1.415.11 2.062.313a.625.625 0 0 1-.374 1.193 5.627 5.627 0 0 0-1.688-.256Zm3.933 6.692a.625.625 0 1 1 .884-.884l3.308 3.308V12.5a.625.625 0 1 1 1.25 0v3.75c0 .345-.28.625-.625.625h-3.75a.625.625 0 1 1 0-1.25h2.241l-3.308-3.308Z"
+          fill="currentColor"
+        />
+      ),
+    }),
+  },
+});
diff --git a/packages/components/icons/src/EnvironmentIcon.tsx b/packages/components/icons/src/EnvironmentIcon.tsx
new file mode 100644
index 0000000000..1d93d759b3
--- /dev/null
+++ b/packages/components/icons/src/EnvironmentIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  IconVariant,
+  generateComponentWithVariants,
+} from '@contentful/f36-icon';
+import { generateIconComponent } from '@contentful/f36-icon/src';
+
+export const EnvironmentIcon = generateComponentWithVariants({
+  variants: {
+    [IconVariant.Active]: generateIconComponent({
+      path: (
+        <path
+          d="M11.875 3.75a.625.625 0 0 0-.442 1.067l1.46 1.46L9.87 9.376H3.75a.625.625 0 1 0 0 1.25h6.12c.336 0 .659-.136.894-.377l3.014-3.086 1.405 1.405a.625.625 0 0 0 1.067-.442v-3.75a.623.623 0 0 0-.625-.625h-3.75ZM15.864 11.298a.625.625 0 0 1 .386.577v3.75a.622.622 0 0 1-.625.625h-3.75a.625.625 0 0 1-.442-1.067l1.433-1.433-1.433-1.433a.625.625 0 1 1 .884-.884l1.433 1.433 1.433-1.433a.625.625 0 0 1 .681-.135Z"
+          fill="currentColor"
+        />
+      ),
+    }),
+    [IconVariant.Default]: generateIconComponent({
+      path: (
+        <path
+          d="M11.875 3.75a.625.625 0 1 0 0 1.25h2.266L9.87 9.375H3.75a.625.625 0 1 0 0 1.25h6.12c.336 0 .659-.136.894-.377L15 5.91v2.215a.625.625 0 1 0 1.25 0v-3.75a.624.624 0 0 0-.186-.445l-.01-.01a.623.623 0 0 0-.429-.17h-3.75ZM15 11.875a.625.625 0 1 1 1.25 0v3.754a.623.623 0 0 1-.621.621h-3.754a.625.625 0 1 1 0-1.25h2.241l-2.683-2.683a.625.625 0 1 1 .884-.884L15 14.116v-2.241Z"
+          fill="currentColor"
+        />
+      ),
+    }),
+  },
+});
diff --git a/packages/components/icons/src/ErrorCircle.tsx b/packages/components/icons/src/ErrorCircle.tsx
deleted file mode 100644
index 387a58708f..0000000000
--- a/packages/components/icons/src/ErrorCircle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ErrorCircle = /*#__PURE__*/ generateIcon({
-  name: 'ErrorCircle',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ErrorCircleOutline.tsx b/packages/components/icons/src/ErrorCircleOutline.tsx
deleted file mode 100644
index f027635c50..0000000000
--- a/packages/components/icons/src/ErrorCircleOutline.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ErrorCircleOutline = /*#__PURE__*/ generateIcon({
-  name: 'ErrorCircleOutline',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ErrorCircleTrimmed.tsx b/packages/components/icons/src/ErrorCircleTrimmed.tsx
deleted file mode 100644
index 98b2f470f7..0000000000
--- a/packages/components/icons/src/ErrorCircleTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ErrorCircleTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ErrorCircleTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h15v18H0V0z" fill="none" />
-      <path d="M7.5 1.5C3.4 1.5 0 4.9 0 9s3.4 7.5 7.5 7.5S15 13.1 15 9s-3.4-7.5-7.5-7.5zm.7 11.3H6.8v-1.5h1.5v1.5zm0-3H6.8V5.2h1.5v4.6z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/ExternalLink.tsx b/packages/components/icons/src/ExternalLink.tsx
deleted file mode 100644
index 36c2fe8208..0000000000
--- a/packages/components/icons/src/ExternalLink.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ExternalLink = /*#__PURE__*/ generateIcon({
-  name: 'ExternalLink',
-  path: (
-    <Fragment>
-      <path d="M19 19H5V5h7V3H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ExternalLinkTrimmed.tsx b/packages/components/icons/src/ExternalLinkTrimmed.tsx
deleted file mode 100644
index 6cc2f9e8ee..0000000000
--- a/packages/components/icons/src/ExternalLinkTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ExternalLinkTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ExternalLinkTrimmed',
-  path: (
-    <Fragment>
-      <path d="M12 14.2H1.5V3.8h5.2V2.2H1.5C.7 2.2 0 2.9 0 3.8v10.5c0 .8.7 1.5 1.5 1.5H12c.8 0 1.5-.7 1.5-1.5V9H12v5.2zm-3.8-12v1.5h2.7l-7.4 7.4 1.1 1.1L12 4.8v2.7h1.5V2.2H8.2z" />
-      <path d="M0 0h13.5v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 13.5 18',
-});
diff --git a/packages/components/icons/src/FaceHappy.tsx b/packages/components/icons/src/FaceHappy.tsx
deleted file mode 100644
index 5752ca71fc..0000000000
--- a/packages/components/icons/src/FaceHappy.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FaceHappy = /*#__PURE__*/ generateIcon({
-  name: 'FaceHappy',
-  path: (
-    <Fragment>
-      <path d="M11.99 2C6.47 2 2 6.47 2 12s4.47 10 9.99 10S22 17.53 22 12 17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm1-10.06L14.06 11l1.06-1.06L16.18 11l1.06-1.06-2.12-2.12zm-4.12 0L9.94 11 11 9.94 8.88 7.82 6.76 9.94 7.82 11zM12 17.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/FaceHappyTrimmed.tsx b/packages/components/icons/src/FaceHappyTrimmed.tsx
deleted file mode 100644
index 04ac75e5ac..0000000000
--- a/packages/components/icons/src/FaceHappyTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FaceHappyTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'FaceHappyTrimmed',
-  path: (
-    <Fragment>
-      <path d="M7.5 1.5C3.4 1.5 0 4.9 0 9s3.4 7.5 7.5 7.5S15 13.1 15 9s-3.4-7.5-7.5-7.5zm0 13.5c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm.7-7.5l.8.7.8-.8.8.8.8-.8-1.6-1.5-1.6 1.6zm-3 0l.8.7.8-.8-1.6-1.5-1.6 1.6.8.8.8-.8zm2.3 5.6c1.7 0 3.2-1.1 3.8-2.6H3.7c.6 1.5 2.1 2.6 3.8 2.6z" />
-      <path d="M0 0h15v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/Filter.tsx b/packages/components/icons/src/Filter.tsx
deleted file mode 100644
index f6d81bf176..0000000000
--- a/packages/components/icons/src/Filter.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Filter = /*#__PURE__*/ generateIcon({
-  name: 'Filter',
-  path: (
-    <Fragment>
-      <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/FilterTrimmed.tsx b/packages/components/icons/src/FilterTrimmed.tsx
deleted file mode 100644
index 735d33db95..0000000000
--- a/packages/components/icons/src/FilterTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FilterTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'FilterTrimmed',
-  path: (
-    <Fragment>
-      <path d="M5.2 13.5h3V12h-3v1.5zM0 4.5V6h13.5V4.5H0zm2.2 5.3h9V8.2h-9v1.6z" />
-      <path d="M0 0h13.5v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 13.5 18',
-});
diff --git a/packages/components/icons/src/Folder.tsx b/packages/components/icons/src/Folder.tsx
deleted file mode 100644
index 47df27033c..0000000000
--- a/packages/components/icons/src/Folder.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Folder = /*#__PURE__*/ generateIcon({
-  name: 'Folder',
-  path: (
-    <Fragment>
-      <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/FolderCreate.tsx b/packages/components/icons/src/FolderCreate.tsx
deleted file mode 100644
index 1d50eecb5e..0000000000
--- a/packages/components/icons/src/FolderCreate.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FolderCreate = /*#__PURE__*/ generateIcon({
-  name: 'FolderCreate',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path d="M20 6h-8l-2-2H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-1 8h-3v3h-2v-3h-3v-2h3V9h2v3h3v2z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/FolderCreateTrimmed.tsx b/packages/components/icons/src/FolderCreateTrimmed.tsx
deleted file mode 100644
index 7dd84ebbab..0000000000
--- a/packages/components/icons/src/FolderCreateTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FolderCreateTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'FolderCreateTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h15v18H0V0z" fill="none" />
-      <path d="M13.5 4.5h-6L6 3H1.5C.7 3 0 3.7 0 4.5v9c0 .8.7 1.5 1.5 1.5h12c.8 0 1.5-.7 1.5-1.5V6c0-.8-.7-1.5-1.5-1.5zm-.7 6h-2.2v2.2H9v-2.2H6.8V9H9V6.8h1.5V9h2.2v1.5z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/FolderOpen.tsx b/packages/components/icons/src/FolderOpen.tsx
deleted file mode 100644
index 78f0fef16d..0000000000
--- a/packages/components/icons/src/FolderOpen.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FolderOpen = /*#__PURE__*/ generateIcon({
-  name: 'FolderOpen',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/FolderOpenTrimmed.tsx b/packages/components/icons/src/FolderOpenTrimmed.tsx
deleted file mode 100644
index ccbdf90934..0000000000
--- a/packages/components/icons/src/FolderOpenTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FolderOpenTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'FolderOpenTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h15v18H0V0z" fill="none" />
-      <path d="M13.5 4.5h-6L6 3H1.5C.7 3 0 3.7 0 4.5v9c0 .8.7 1.5 1.5 1.5h12c.8 0 1.5-.7 1.5-1.5V6c0-.8-.7-1.5-1.5-1.5zm0 9h-12V6h12v7.5z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/FolderTrimmed.tsx b/packages/components/icons/src/FolderTrimmed.tsx
deleted file mode 100644
index c87d13c7b4..0000000000
--- a/packages/components/icons/src/FolderTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FolderTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'FolderTrimmed',
-  path: (
-    <Fragment>
-      <path d="M6 3H1.5C.7 3 0 3.7 0 4.5v9c0 .8.7 1.5 1.5 1.5h12c.8 0 1.5-.7 1.5-1.5V6c0-.8-.7-1.5-1.5-1.5h-6L6 3z" />
-      <path d="M0 0h15v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/FormatBold.tsx b/packages/components/icons/src/FormatBold.tsx
deleted file mode 100644
index 229420ec48..0000000000
--- a/packages/components/icons/src/FormatBold.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FormatBold = /*#__PURE__*/ generateIcon({
-  name: 'FormatBold',
-  path: (
-    <Fragment>
-      <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/FormatBoldTrimmed.tsx b/packages/components/icons/src/FormatBoldTrimmed.tsx
deleted file mode 100644
index a119f0a99a..0000000000
--- a/packages/components/icons/src/FormatBoldTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FormatBoldTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'FormatBoldTrimmed',
-  path: (
-    <Fragment>
-      <path d="M8.6 10.8c1-.7 1.6-1.8 1.6-2.8 0-2.3-1.8-4-4-4H0v14h7c2.1 0 3.7-1.7 3.7-3.8.1-1.5-.8-2.8-2.1-3.4zM3 6.5h3c.8 0 1.5.7 1.5 1.5S6.8 9.5 6 9.5H3v-3zm3.5 9H3v-3h3.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5z" />
-      <path d="M0 0h10.8v24H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 10.8 24',
-});
diff --git a/packages/components/icons/src/FormatItalic.tsx b/packages/components/icons/src/FormatItalic.tsx
deleted file mode 100644
index a877b59652..0000000000
--- a/packages/components/icons/src/FormatItalic.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FormatItalic = /*#__PURE__*/ generateIcon({
-  name: 'FormatItalic',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/FormatItalicTrimmed.tsx b/packages/components/icons/src/FormatItalicTrimmed.tsx
deleted file mode 100644
index a43712fcb8..0000000000
--- a/packages/components/icons/src/FormatItalicTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FormatItalicTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'FormatItalicTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h12v24H0V0z" fill="none" />
-      <path d="M4 4v3h2.2l-3.4 8H0v3h8v-3H5.8l3.4-8H12V4H4z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 12 24',
-});
diff --git a/packages/components/icons/src/FormatUnderlined.tsx b/packages/components/icons/src/FormatUnderlined.tsx
deleted file mode 100644
index 50c6c7c903..0000000000
--- a/packages/components/icons/src/FormatUnderlined.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FormatUnderlined = /*#__PURE__*/ generateIcon({
-  name: 'FormatUnderlined',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/FormatUnderlinedTrimmed.tsx b/packages/components/icons/src/FormatUnderlinedTrimmed.tsx
deleted file mode 100644
index 7f8eddc9ce..0000000000
--- a/packages/components/icons/src/FormatUnderlinedTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const FormatUnderlinedTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'FormatUnderlinedTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h14v24H0V0z" fill="none" />
-      <path d="M7 17c3.3 0 6-2.7 6-6V3h-2.5v8c0 1.9-1.6 3.5-3.5 3.5S3.5 12.9 3.5 11V3H1v8c0 3.3 2.7 6 6 6zm-7 2v2h14v-2H0z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 14 24',
-});
diff --git a/packages/components/icons/src/Gift.tsx b/packages/components/icons/src/Gift.tsx
deleted file mode 100644
index b70dd346a2..0000000000
--- a/packages/components/icons/src/Gift.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Gift = /*#__PURE__*/ generateIcon({
-  name: 'Gift',
-  viewBox: '0 0 18 18',
-  path: (
-    <Fragment>
-      <g clipPath="url(#prefix__clip0)" fillRule="evenodd" clipRule="evenodd">
-        <path d="M3 9.25a.75.75 0 01.75.75v6.75h10.5V10a.75.75 0 011.5 0v7.5a.75.75 0 01-.75.75H3a.75.75 0 01-.75-.75V10A.75.75 0 013 9.25z" />
-        <path d="M.75 6.25a.75.75 0 01.75-.75h15a.75.75 0 01.75.75V10a.75.75 0 01-.75.75h-15A.75.75 0 01.75 10V6.25zm1.5.75v2.25h13.5V7H2.25z" />
-        <path d="M9 5.5a.75.75 0 01.75.75V17.5a.75.75 0 01-1.5 0V6.25A.75.75 0 019 5.5z" />
-        <path d="M5.625 3.25a1.125 1.125 0 000 2.25h2.366a6.15 6.15 0 00-.351-.764C7.168 3.88 6.52 3.25 5.625 3.25zM9 6.25l.735-.148v-.006l-.003-.012-.01-.04a7.962 7.962 0 00-.166-.607 8.02 8.02 0 00-.602-1.423c-.56-1.018-1.6-2.264-3.329-2.264a2.625 2.625 0 000 5.25H9a.75.75 0 00.735-.897L9 6.25z" />
-        <path d="M9.046 4.014c.56-1.018 1.6-2.264 3.329-2.264a2.625 2.625 0 010 5.25H9a.75.75 0 01-.735-.897L9 6.25a101.52 101.52 0 01-.735-.148v-.006l.003-.012.01-.04a7.977 7.977 0 01.166-.607c.12-.382.314-.899.602-1.423zm.963 1.486h2.366a1.125 1.125 0 000-2.25c-.895 0-1.543.629-2.015 1.486a6.15 6.15 0 00-.35.764zm-.274.898z" />
-      </g>
-      <defs>
-        <clipPath id="prefix__clip0">
-          <path fill="#fff" d="M0 0h18v18H0z" />
-        </clipPath>
-      </defs>
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/Heading.tsx b/packages/components/icons/src/Heading.tsx
deleted file mode 100644
index 0d9c0613a2..0000000000
--- a/packages/components/icons/src/Heading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Heading = /*#__PURE__*/ generateIcon({
-  name: 'Heading',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path d="M14.8 5v5.5H9.2V5H6.4v14h2.8v-6.1h5.6V19h2.8V5z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/HeadingOne.tsx b/packages/components/icons/src/HeadingOne.tsx
deleted file mode 100644
index 350dfb9229..0000000000
--- a/packages/components/icons/src/HeadingOne.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const HeadingOne = /*#__PURE__*/ generateIcon({
-  name: 'HeadingOne',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path d="M11.7 5v5.5H6.1V5H3.3v14h2.8v-6.1h5.6V19h2.8V5zM18.6 19v-6.3L17.1 14l-1-1.4 2.8-2.1h1.8V19h-2.1z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/HeadingOneTrimmed.tsx b/packages/components/icons/src/HeadingOneTrimmed.tsx
deleted file mode 100644
index c542039a38..0000000000
--- a/packages/components/icons/src/HeadingOneTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const HeadingOneTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'HeadingOneTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h13v18H0V0z" fill="none" />
-      <path d="M6.3 3.8v4.1H2.1V3.8H0V14.2h2.1V9.7h4.2v4.5h2.1V3.8zM11.5 14.2V9.5l-1.1 1-.8-1 2.1-1.6H13v6.4h-1.5z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 13 18',
-});
diff --git a/packages/components/icons/src/HeadingTrimmed.tsx b/packages/components/icons/src/HeadingTrimmed.tsx
deleted file mode 100644
index 9d9145e7ad..0000000000
--- a/packages/components/icons/src/HeadingTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const HeadingTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'HeadingTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h8.4v18H0V0z" fill="none" />
-      <path d="M6.3 3.8v4.1H2.1V3.8H0V14.2h2.1V9.7h4.2v4.5h2.1V3.8z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 8.4 18',
-});
diff --git a/packages/components/icons/src/HeadingTwo.tsx b/packages/components/icons/src/HeadingTwo.tsx
deleted file mode 100644
index 8f10dd2dec..0000000000
--- a/packages/components/icons/src/HeadingTwo.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const HeadingTwo = /*#__PURE__*/ generateIcon({
-  name: 'HeadingTwo',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path d="M10.8 5v5.5H5.3V5H2.4v14h2.9v-6.1h5.5V19h2.9V5zM15.4 19v-1.7l3.3-3c.2-.2.4-.4.5-.6.1-.2.2-.4.2-.7 0-.3-.1-.6-.3-.7-.2-.2-.4-.3-.8-.3-.3 0-.6.1-.8.4-.2.2-.3.5-.4.9l-1.9-.3c0-.4.2-.8.4-1.2.2-.3.4-.6.7-.9.3-.2.6-.4 1-.5s.8-.2 1.2-.2c.4 0 .8.1 1.1.2.4.1.7.3 1 .5.3.2.5.5.7.8.2.3.3.7.3 1.2 0 .3 0 .6-.1.8-.1.2-.2.5-.3.7-.1.2-.3.4-.5.6-.2.2-.4.4-.6.5l-2 1.8h3.5V19h-6.2z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/HeadingTwoTrimmed.tsx b/packages/components/icons/src/HeadingTwoTrimmed.tsx
deleted file mode 100644
index 0c20dce3e8..0000000000
--- a/packages/components/icons/src/HeadingTwoTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const HeadingTwoTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'HeadingTwoTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h14.4v18H0V0z" fill="none" />
-      <path d="M6.3 3.8v4.1H2.2V3.8H0V14.2h2.2V9.7h4.1v4.5h2.2V3.8zM9.8 14.2V13l2.5-2.2c.2-.1.3-.3.4-.4.1-.2.2-.3.2-.5s-.1-.4-.2-.5c-.3-.3-.5-.4-.8-.4-.2 0-.5.1-.6.3-.1.1-.2.4-.3.7l-1.4-.2c0-.3.2-.6.3-.9.1-.2.3-.5.5-.7.2-.1.5-.3.8-.4.3-.1.6-.1.9-.1.3 0 .6.1.8.1.3.1.5.2.8.4.2.2.4.4.5.6s.2.5.2.9c0 .2 0 .5-.1.6-.1.1-.2.4-.2.5-.1.2-.2.3-.4.5-.2.1-.3.3-.4.4L11.8 13h2.6v1.3H9.8z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 14.4 18',
-});
diff --git a/packages/components/icons/src/HelpCircle.tsx b/packages/components/icons/src/HelpCircle.tsx
deleted file mode 100644
index d029d6271e..0000000000
--- a/packages/components/icons/src/HelpCircle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const HelpCircle = /*#__PURE__*/ generateIcon({
-  name: 'HelpCircle',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/HelpCircleInverted.tsx b/packages/components/icons/src/HelpCircleInverted.tsx
deleted file mode 100644
index 981c0a344e..0000000000
--- a/packages/components/icons/src/HelpCircleInverted.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const HelpCircleInverted = /*#__PURE__*/ generateIcon({
-  name: 'HelpCircleInverted',
-  path: (
-    <Fragment>
-      <path
-        d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z"
-        stroke="white"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="none"
-      />
-      <path
-        d="M11.545 12.4267L11.545 12.4267L11.5452 12.424C11.5617 12.1009 11.6251 11.8675 11.7824 11.6526C11.9426 11.4337 12.2066 11.225 12.6445 10.967L12.6451 10.9667C13.5697 10.4133 14.1293 9.65976 14.1293 8.55664C14.1293 7.77191 13.8071 7.1048 13.2522 6.63544C12.6986 6.16714 11.919 5.9 11.0078 5.9C9.61504 5.9 8.53153 6.48625 8.09344 7.47641C7.96552 7.75376 7.9 8.00709 7.9 8.31738C7.9 8.54471 7.96551 8.73994 8.10111 8.87863C8.23704 9.01765 8.43116 9.0873 8.66309 9.0873C8.84907 9.0873 9.01208 9.0461 9.14782 8.9371C9.28176 8.82955 9.37718 8.66547 9.44869 8.44379L9.44872 8.4438L9.44947 8.44125C9.55376 8.08601 9.73402 7.81728 9.9808 7.63674C10.2278 7.45603 10.5494 7.35781 10.9463 7.35781C11.3808 7.35781 11.7386 7.48996 11.9864 7.71024C12.2333 7.92968 12.3775 8.24212 12.3775 8.61816C12.3775 8.93652 12.3083 9.18522 12.1457 9.41384C11.9806 9.64593 11.7141 9.8647 11.3048 10.1116C10.8536 10.3824 10.5122 10.67 10.2841 11.0077C10.0546 11.3474 9.94395 11.7314 9.94395 12.1865V12.3438C9.94395 12.5858 10.0081 12.8107 10.1466 12.9769C10.2871 13.1456 10.496 13.2436 10.7617 13.2436C11.0072 13.2436 11.1991 13.1631 11.3325 13.0113C11.463 12.8626 11.527 12.6575 11.545 12.4267ZM10.7617 16.1488C11.3276 16.1488 11.7641 15.7232 11.7641 15.167C11.7641 14.6107 11.3276 14.1852 10.7617 14.1852C10.2095 14.1852 9.76621 14.6107 9.76621 15.167C9.76621 15.7232 10.2095 16.1488 10.7617 16.1488Z"
-        fill="white"
-        stroke="white"
-        strokeWidth="0.2"
-      />
-    </Fragment>
-  ),
-  viewBox: '0 0 22 22',
-});
diff --git a/packages/components/icons/src/HelpCircleTrimmed.tsx b/packages/components/icons/src/HelpCircleTrimmed.tsx
deleted file mode 100644
index 5b2e303d33..0000000000
--- a/packages/components/icons/src/HelpCircleTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const HelpCircleTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'HelpCircleTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h15v18H0V0z" fill="none" />
-      <path d="M7.5 1.5C3.4 1.5 0 4.9 0 9s3.4 7.5 7.5 7.5S15 13.1 15 9s-3.4-7.5-7.5-7.5zm.7 12.7H6.8v-1.5h1.5v1.5zm1.6-5.8l-.7.7c-.5.5-.9 1-.9 2.1H6.8v-.4c0-.8.3-1.6.9-2.1l.9-.9c.2-.3.4-.6.4-1 0-.8-.7-1.5-1.5-1.5S6 5.9 6 6.8H4.5c0-1.7 1.3-3 3-3s3 1.3 3 3c0 .6-.3 1.2-.7 1.6z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/HorizontalRule.tsx b/packages/components/icons/src/HorizontalRule.tsx
deleted file mode 100644
index 1117d446d3..0000000000
--- a/packages/components/icons/src/HorizontalRule.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const HorizontalRule = /*#__PURE__*/ generateIcon({
-  name: 'HorizontalRule',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path d="M3.6 11.2h16.8v1.7H3.6z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/HorizontalRuleTrimmed.tsx b/packages/components/icons/src/HorizontalRuleTrimmed.tsx
deleted file mode 100644
index 316cdb04f5..0000000000
--- a/packages/components/icons/src/HorizontalRuleTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const HorizontalRuleTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'HorizontalRuleTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h12.6v18H0V0z" fill="none" />
-      <path d="M0 8.4h12.6v1.3H0z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 12.6 18',
-});
diff --git a/packages/components/icons/src/Image.tsx b/packages/components/icons/src/Image.tsx
deleted file mode 100644
index f0d05db24d..0000000000
--- a/packages/components/icons/src/Image.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Image = /*#__PURE__*/ generateIcon({
-  name: 'Image',
-  viewBox: '0 0 24 24',
-  path: (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M.5 0a.5.5 0 00-.5.5v23a.5.5 0 00.5.5h19a.5.5 0 00.5-.5v-17a.5.5 0 00-.146-.354l-6-6A.5.5 0 0013.5 0H.5zM1 23V1h12v5.5a.5.5 0 00.5.5H19v16H1zM18.293 6L14 1.707V6h4.293z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.053 10.503a.5.5 0 01.427.356l2.5 8.5a.5.5 0 01-.48.641h-10a.5.5 0 01-.447-.724l2.5-5a.5.5 0 01.8-.13l1.528 1.528 2.68-4.913a.5.5 0 01.492-.258zm-.192 1.796l-2.422 4.44a.5.5 0 01-.793.114l-1.509-1.509L5.309 19h8.523l-1.971-6.7zM6 8a1 1 0 100 2 1 1 0 000-2zM4 9a2 2 0 114 0 2 2 0 01-4 0z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/InfoCircle.tsx b/packages/components/icons/src/InfoCircle.tsx
deleted file mode 100644
index 6eeead97d1..0000000000
--- a/packages/components/icons/src/InfoCircle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const InfoCircle = /*#__PURE__*/ generateIcon({
-  name: 'InfoCircle',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/InfoCircleTrimmed.tsx b/packages/components/icons/src/InfoCircleTrimmed.tsx
deleted file mode 100644
index 8f7d0f9ff5..0000000000
--- a/packages/components/icons/src/InfoCircleTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const InfoCircleTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'InfoCircleTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h15v18H0V0z" fill="none" />
-      <path d="M7.5 1.5C3.4 1.5 0 4.9 0 9s3.4 7.5 7.5 7.5S15 13.1 15 9s-3.4-7.5-7.5-7.5zm.7 11.3H6.8V8.2h1.5v4.6zm0-6H6.8V5.2h1.5v1.6z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/Language.tsx b/packages/components/icons/src/Language.tsx
deleted file mode 100644
index e9f985d5ec..0000000000
--- a/packages/components/icons/src/Language.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Language = /*#__PURE__*/ generateIcon({
-  name: 'Language',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 00-1.38-3.56A8.03 8.03 0 0118.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 015.08 16zm2.95-8H5.08a7.987 7.987 0 014.33-3.56A15.65 15.65 0 008.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 01-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/Link.tsx b/packages/components/icons/src/Link.tsx
deleted file mode 100644
index b6b72ce01b..0000000000
--- a/packages/components/icons/src/Link.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Link = /*#__PURE__*/ generateIcon({
-  name: 'Link',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/LinkAlternate.tsx b/packages/components/icons/src/LinkAlternate.tsx
deleted file mode 100644
index 8237882665..0000000000
--- a/packages/components/icons/src/LinkAlternate.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const LinkAlternate = /*#__PURE__*/ generateIcon({
-  name: 'LinkAlternate',
-  path: (
-    <path d="m10.4744 13.5256c.4436.4219.4436 1.1144 0 1.5363-.4219.422-1.11438.422-1.53634 0-2.10982-2.1098-2.10982-5.53958 0-7.6494l3.83014-3.83014c2.1098-2.10981 5.5396-2.10981 7.6494 0 2.1099 2.10982 2.1099 5.53963 0 7.64944l-1.6121 1.6121c.0108-.8872-.1298-1.7744-.4328-2.6183l.5086-.51935c1.2767-1.26589 1.2767-3.32161 0-4.58751-1.2659-1.27671-3.3217-1.27671-4.5875 0l-3.8194 3.81932c-1.27667 1.26584-1.27667 3.32164 0 4.58754zm3.0512-4.58754c.4219-.42197 1.1144-.42197 1.5363 0 2.1099 2.10984 2.1099 5.53964 0 7.64944l-3.8301 3.8301c-2.10981 2.1099-5.53962 2.1099-7.64944 0-2.10981-2.1098-2.10981-5.5396 0-7.6494l1.61212-1.6121c-.01082.8872.12984 1.7744.43279 2.6291l-.50853.5086c-1.27671 1.2658-1.27671 3.3216 0 4.5875 1.2659 1.2767 3.32162 1.2767 4.58751 0l3.81935-3.8194c1.2767-1.2658 1.2767-3.3216 0-4.5875-.4436-.4219-.4436-1.11438 0-1.53634z" />
-  ),
-});
diff --git a/packages/components/icons/src/LinkTrimmed.tsx b/packages/components/icons/src/LinkTrimmed.tsx
deleted file mode 100644
index a81612dac2..0000000000
--- a/packages/components/icons/src/LinkTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const LinkTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'LinkTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h15v18H0V0z" fill="none" />
-      <path d="M1.4 9c0-1.3 1-2.3 2.3-2.3h3V5.2h-3C1.7 5.2 0 6.9 0 9s1.7 3.8 3.8 3.8h3v-1.4h-3c-1.3-.1-2.4-1.1-2.4-2.4zm3.1.8h6V8.2h-6v1.6zm6.7-4.6h-3v1.4h3c1.3 0 2.3 1 2.3 2.3s-1 2.3-2.3 2.3h-3v1.4h3c2.1 0 3.8-1.7 3.8-3.8s-1.7-3.6-3.8-3.6z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/ListBulleted.tsx b/packages/components/icons/src/ListBulleted.tsx
deleted file mode 100644
index 70f66c18f8..0000000000
--- a/packages/components/icons/src/ListBulleted.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ListBulleted = /*#__PURE__*/ generateIcon({
-  name: 'ListBulleted',
-  path: (
-    <Fragment>
-      <path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" />
-      <path fill="none" d="M0 0h24v24H0V0z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ListBulletedTrimmed.tsx b/packages/components/icons/src/ListBulletedTrimmed.tsx
deleted file mode 100644
index 1d4690021c..0000000000
--- a/packages/components/icons/src/ListBulletedTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ListBulletedTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ListBulletedTrimmed',
-  path: (
-    <Fragment>
-      <path d="M1.1 7.9C.5 7.9 0 8.4 0 9s.5 1.1 1.1 1.1S2.2 9.6 2.2 9s-.5-1.1-1.1-1.1zm0-4.5C.5 3.4 0 3.9 0 4.5s.5 1.1 1.1 1.1 1.1-.5 1.1-1.1-.5-1.1-1.1-1.1zm0 9c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1 1.1-.5 1.1-1.1-.5-1.1-1.1-1.1zm2.3 1.8h10.5v-1.5H3.4v1.5zm0-4.4h10.5V8.2H3.4v1.6zm0-6v1.5h10.5V3.8H3.4z" />
-      <path d="M0 0h13.9v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 13.9 18',
-});
diff --git a/packages/components/icons/src/ListNumbered.tsx b/packages/components/icons/src/ListNumbered.tsx
deleted file mode 100644
index 5020c3428d..0000000000
--- a/packages/components/icons/src/ListNumbered.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ListNumbered = /*#__PURE__*/ generateIcon({
-  name: 'ListNumbered',
-  path: (
-    <Fragment>
-      <path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ListNumberedTrimmed.tsx b/packages/components/icons/src/ListNumberedTrimmed.tsx
deleted file mode 100644
index b6f9de5566..0000000000
--- a/packages/components/icons/src/ListNumberedTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ListNumberedTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ListNumberedTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 12.8h1.5v.4H.8v.8h.8v.4H0v.6h2.2v-3H0v.8zM.8 6h.8V3H0v.8h.8V6zM0 8.2h1.3L0 9.8v.7h2.2v-.7H.9l1.3-1.6v-.7H0v.7zm3.8-4.4v1.5h10.5V3.8H3.8zm0 10.4h10.5v-1.5H3.8v1.5zm0-4.4h10.5V8.2H3.8v1.6z" />
-      <path d="M0 0h14.2v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 14.2 18',
-});
diff --git a/packages/components/icons/src/Lock.tsx b/packages/components/icons/src/Lock.tsx
deleted file mode 100644
index ca637c39c4..0000000000
--- a/packages/components/icons/src/Lock.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Lock = /*#__PURE__*/ generateIcon({
-  name: 'Lock',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/LockTrimmed.tsx b/packages/components/icons/src/LockTrimmed.tsx
deleted file mode 100644
index 2096b9ad7e..0000000000
--- a/packages/components/icons/src/LockTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const LockTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'LockTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h12v18H0V0z" fill="none" />
-      <path d="M10.5 6h-.7V4.5C9.8 2.4 8.1.7 6 .7S2.2 2.4 2.2 4.5V6h-.7C.7 6 0 6.7 0 7.5V15c0 .8.7 1.5 1.5 1.5h9c.8 0 1.5-.7 1.5-1.5V7.5c0-.8-.7-1.5-1.5-1.5zM6 12.8c-.8 0-1.5-.7-1.5-1.5S5.2 9.8 6 9.8s1.5.7 1.5 1.5-.7 1.5-1.5 1.5zM8.3 6H3.7V4.5c0-1.3 1-2.3 2.3-2.3s2.3 1 2.3 2.3V6z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 12 18',
-});
diff --git a/packages/components/icons/src/Logout.tsx b/packages/components/icons/src/Logout.tsx
deleted file mode 100644
index 5bc6a287d3..0000000000
--- a/packages/components/icons/src/Logout.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Logout = /*#__PURE__*/ generateIcon({
-  name: 'Logout',
-  path: (
-    <Fragment>
-      <path
-        clipRule="evenodd"
-        d="M5 4a1 1 0 00-1 1v14a1 1 0 001 1h4a1 1 0 110 2H5a3 3 0 01-3-3V5a3 3 0 013-3h4a1 1 0 010 2H5zM15.293 6.293a1 1 0 011.414 0l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414-1.414L19.586 12l-4.293-4.293a1 1 0 010-1.414z"
-      />
-      <path
-        clipRule="evenodd"
-        d="M8 12a1 1 0 011-1h12a1 1 0 110 2H9a1 1 0 01-1-1z"
-      />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/LooksOne.tsx b/packages/components/icons/src/LooksOne.tsx
deleted file mode 100644
index f83ceb1018..0000000000
--- a/packages/components/icons/src/LooksOne.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const LooksOne = /*#__PURE__*/ generateIcon({
-  name: 'LooksOne',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2V9h-2V7h4v10z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/LooksOneTrimmed.tsx b/packages/components/icons/src/LooksOneTrimmed.tsx
deleted file mode 100644
index 83c61b7a34..0000000000
--- a/packages/components/icons/src/LooksOneTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const LooksOneTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'LooksOneTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h18v24H0V0z" fill="none" />
-      <path d="M16 3H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H9V9H7V7h4v10z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 18 24',
-});
diff --git a/packages/components/icons/src/LooksTwo.tsx b/packages/components/icons/src/LooksTwo.tsx
deleted file mode 100644
index 7e8969e855..0000000000
--- a/packages/components/icons/src/LooksTwo.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const LooksTwo = /*#__PURE__*/ generateIcon({
-  name: 'LooksTwo',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8a2 2 0 01-2 2h-2v2h4v2H9v-4a2 2 0 012-2h2V9H9V7h4a2 2 0 012 2v2z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/LooksTwoTrimmed.tsx b/packages/components/icons/src/LooksTwoTrimmed.tsx
deleted file mode 100644
index b5ca1e1f4d..0000000000
--- a/packages/components/icons/src/LooksTwoTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const LooksTwoTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'LooksTwoTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h18v24H0V0z" fill="none" />
-      <path d="M16 3H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8c0 1.1-.9 2-2 2H8v2h4v2H6v-4c0-1.1.9-2 2-2h2V9H6V7h4c1.1 0 2 .9 2 2v2z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 18 24',
-});
diff --git a/packages/components/icons/src/Markup.tsx b/packages/components/icons/src/Markup.tsx
deleted file mode 100644
index dd132f98d4..0000000000
--- a/packages/components/icons/src/Markup.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Markup = /*#__PURE__*/ generateIcon({
-  name: 'Markup',
-  viewBox: '0 0 24 24',
-  path: (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M.5 0a.5.5 0 00-.5.5v23a.5.5 0 00.5.5h19a.5.5 0 00.5-.5v-17a.5.5 0 00-.146-.354l-6-6A.5.5 0 0013.5 0H.5zM1 23V1h12v5.5a.5.5 0 00.5.5H19v16H1zM18.293 6L14 1.707V6h4.293z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.854 10.139a.5.5 0 010 .707l-3.647 3.646 3.647 3.646a.5.5 0 11-.708.708l-4-4a.5.5 0 010-.707l4-4a.5.5 0 01.708 0zM12 18.846a.5.5 0 010-.707l3.646-3.647L12 10.846a.5.5 0 11.707-.707l4 4a.5.5 0 010 .707l-4 4a.5.5 0 01-.707 0z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/Menu.tsx b/packages/components/icons/src/Menu.tsx
deleted file mode 100644
index 192e849c4f..0000000000
--- a/packages/components/icons/src/Menu.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Menu = /*#__PURE__*/ generateIcon({
-  name: 'Menu',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/MenuTrimmed.tsx b/packages/components/icons/src/MenuTrimmed.tsx
deleted file mode 100644
index d159a205b0..0000000000
--- a/packages/components/icons/src/MenuTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const MenuTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'MenuTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h13.5v18H0V0z" fill="none" />
-      <path d="M0 13.5h13.5V12H0v1.5zm0-3.7h13.5V8.2H0v1.6zm0-5.3V6h13.5V4.5H0z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 13.5 18',
-});
diff --git a/packages/components/icons/src/Minus.tsx b/packages/components/icons/src/Minus.tsx
deleted file mode 100644
index 808072cda3..0000000000
--- a/packages/components/icons/src/Minus.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Minus = /*#__PURE__*/ generateIcon({
-  name: 'Minus',
-  path: <rect x="4" y="11" width="16" height="2" rx="1" />,
-});
diff --git a/packages/components/icons/src/MoreHorizontal.tsx b/packages/components/icons/src/MoreHorizontal.tsx
deleted file mode 100644
index 296b679e53..0000000000
--- a/packages/components/icons/src/MoreHorizontal.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const MoreHorizontal = /*#__PURE__*/ generateIcon({
-  name: 'MoreHorizontal',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/MoreHorizontalTrimmed.tsx b/packages/components/icons/src/MoreHorizontalTrimmed.tsx
deleted file mode 100644
index 7cf2a7d90e..0000000000
--- a/packages/components/icons/src/MoreHorizontalTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const MoreHorizontalTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'MoreHorizontalTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h12v18H0V0z" fill="none" />
-      <path d="M1.5 7.5C.7 7.5 0 8.2 0 9s.7 1.5 1.5 1.5S3 9.8 3 9s-.7-1.5-1.5-1.5zm9 0C9.7 7.5 9 8.2 9 9s.7 1.5 1.5 1.5S12 9.8 12 9s-.7-1.5-1.5-1.5zM6 7.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5S7.5 9.8 7.5 9 6.8 7.5 6 7.5z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 12 18',
-});
diff --git a/packages/components/icons/src/MoreVertical.tsx b/packages/components/icons/src/MoreVertical.tsx
deleted file mode 100644
index e9b91ba859..0000000000
--- a/packages/components/icons/src/MoreVertical.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const MoreVertical = /*#__PURE__*/ generateIcon({
-  name: 'MoreVertical',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/MoreVerticalTrimmed.tsx b/packages/components/icons/src/MoreVerticalTrimmed.tsx
deleted file mode 100644
index 8562f82fd3..0000000000
--- a/packages/components/icons/src/MoreVerticalTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const MoreVerticalTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'MoreVerticalTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h3v18H0V0z" fill="none" />
-      <path d="M1.5 6C2.3 6 3 5.3 3 4.5S2.3 3 1.5 3 0 3.7 0 4.5.7 6 1.5 6zm0 1.5C.7 7.5 0 8.2 0 9s.7 1.5 1.5 1.5S3 9.8 3 9s-.7-1.5-1.5-1.5zm0 4.5c-.8 0-1.5.7-1.5 1.5S.7 15 1.5 15 3 14.3 3 13.5 2.3 12 1.5 12z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 3 18',
-});
diff --git a/packages/components/icons/src/Page.tsx b/packages/components/icons/src/Page.tsx
deleted file mode 100644
index bbd6438de3..0000000000
--- a/packages/components/icons/src/Page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Page = /*#__PURE__*/ generateIcon({
-  name: 'Page',
-  path: (
-    <Fragment>
-      <path fill="none" d="M0 0h24v24H0V0z" />
-      <path d="M8 16h8v2H8zM8 12h8v2H8z" />
-      <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/PageTrimmed.tsx b/packages/components/icons/src/PageTrimmed.tsx
deleted file mode 100644
index 504ec936e7..0000000000
--- a/packages/components/icons/src/PageTrimmed.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const PageTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'PageTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h16v24H0V0z" fill="none" />
-      <path d="M4 16h8v2H4zM4 12h8v2H4z" />
-      <path d="M10 2H2C.9 2 0 2.9 0 4v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H2V4h7v5h5v11z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 16 24',
-});
diff --git a/packages/components/icons/src/Pdf.tsx b/packages/components/icons/src/Pdf.tsx
deleted file mode 100644
index f79431f196..0000000000
--- a/packages/components/icons/src/Pdf.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Pdf = /*#__PURE__*/ generateIcon({
-  name: 'Pdf',
-  viewBox: '0 0 24 24',
-  path: (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0 .5A.5.5 0 01.5 0h13a.5.5 0 01.354.146l6 6A.5.5 0 0120 6.5v17a.5.5 0 01-.5.5H.5a.5.5 0 01-.5-.5V.5zM1 1v22h18V7h-5.5a.5.5 0 01-.5-.5V1H1zm13 .707L18.293 6H14V1.707zM4 14.5a.5.5 0 01.5-.5h1.25a1.75 1.75 0 010 3.5H5v1.999a.5.5 0 01-1 0V14.5zm1.75 2a.75.75 0 100-1.5H5v1.5h.75zm2.75-2A.5.5 0 019 14h1c1.527 0 2.5 1.403 2.5 3s-.973 3-2.5 3H9a.5.5 0 01-.5-.5v-5zM10 19c.777 0 1.5-.733 1.5-2s-.723-2-1.5-2h-.5v4h.5zm4.013-5h2.5s.5 0 .5.5-.5.5-.5.5h-2v1h1s.5.013.5.5-.5.5-.5.5h-1v2.5s0 .5-.5.5-.5-.5-.5-.5-.026-4.473-.013-4.987c.013-.513.513-.513.513-.513z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/Person.tsx b/packages/components/icons/src/Person.tsx
deleted file mode 100644
index a3247c266b..0000000000
--- a/packages/components/icons/src/Person.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Person = /*#__PURE__*/ generateIcon({
-  name: 'Person',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/PhosphorIcons.tsx b/packages/components/icons/src/PhosphorIcons.tsx
new file mode 100644
index 0000000000..9bc4ce8f28
--- /dev/null
+++ b/packages/components/icons/src/PhosphorIcons.tsx
@@ -0,0 +1,205 @@
+import { generateForma36Icon } from '@contentful/f36-icon';
+import {
+  ArrowCounterClockwise,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowsLeftRight,
+  ArrowSquareOut,
+  ArrowUp,
+  BookmarkSimple,
+  BracketsCurly,
+  CalendarBlank,
+  CaretDown,
+  CaretLeft,
+  CaretRight,
+  CaretUp,
+  CaretUpDown,
+  Chat,
+  Check,
+  CheckCircle,
+  Clock,
+  ClockCounterClockwise,
+  CloudArrowUp,
+  CodeSimple,
+  CopySimple,
+  DotsSixVertical,
+  DotsThree,
+  DownloadSimple,
+  Eye,
+  EyeClosed,
+  File,
+  FileAudio,
+  FileCode,
+  FilePdf,
+  FileText,
+  FileVideo,
+  FolderOpen,
+  FolderSimple,
+  FolderSimplePlus,
+  FunnelSimple,
+  GearSix,
+  Globe,
+  HashStraight,
+  ImageSquare,
+  Info,
+  LinkSimpleHorizontal,
+  List,
+  ListBullets,
+  ListNumbers,
+  LockSimple,
+  LockSimpleOpen,
+  MagnifyingGlass,
+  MapPinLine,
+  Minus,
+  PaperPlaneTilt,
+  PencilSimple,
+  PenNib,
+  Plus,
+  Presentation,
+  PuzzlePiece,
+  Question,
+  Quotes,
+  Receipt,
+  Repeat,
+  RocketLaunch,
+  ShoppingCartSimple,
+  SignIn,
+  SignOut,
+  SketchLogo,
+  Smiley,
+  SortAscending,
+  SortDescending,
+  Sparkle,
+  Star,
+  Subtract,
+  Swap,
+  Table,
+  Tabs,
+  Tag,
+  TextB,
+  TextH,
+  TextHFive,
+  TextHFour,
+  TextHOne,
+  TextHSix,
+  TextHThree,
+  TextHTwo,
+  TextItalic,
+  TextT,
+  TextUnderline,
+  ThumbsDown,
+  ThumbsUp,
+  TrashSimple,
+  TreeStructure,
+  Triangle,
+  User,
+  Users,
+  Warning,
+  WarningOctagon,
+  X,
+} from '@phosphor-icons/react';
+
+export const ArrowCounterClockwiseIcon = generateForma36Icon(
+  ArrowCounterClockwise,
+);
+export const ArrowDownIcon = generateForma36Icon(ArrowDown);
+export const ArrowLeftIcon = generateForma36Icon(ArrowLeft);
+export const ArrowRightIcon = generateForma36Icon(ArrowRight);
+export const ArrowsLeftRightIcon = generateForma36Icon(ArrowsLeftRight);
+export const ArrowSquareOutIcon = generateForma36Icon(ArrowSquareOut);
+export const ArrowUpIcon = generateForma36Icon(ArrowUp);
+export const BookmarkSimpleIcon = generateForma36Icon(BookmarkSimple);
+export const BracketsCurlyIcon = generateForma36Icon(BracketsCurly);
+export const CalendarBlankIcon = generateForma36Icon(CalendarBlank);
+export const CaretDownIcon = generateForma36Icon(CaretDown);
+export const CaretLeftIcon = generateForma36Icon(CaretLeft);
+export const CaretRightIcon = generateForma36Icon(CaretRight);
+export const CaretUpDownIcon = generateForma36Icon(CaretUpDown);
+export const CaretUpIcon = generateForma36Icon(CaretUp);
+export const ChatIcon = generateForma36Icon(Chat);
+export const CheckCircleIcon = generateForma36Icon(CheckCircle);
+export const CheckIcon = generateForma36Icon(Check);
+export const ClockIcon = generateForma36Icon(Clock);
+export const ClockCounterClockwiseIcon = generateForma36Icon(
+  ClockCounterClockwise,
+);
+export const CloudArrowUpIcon = generateForma36Icon(CloudArrowUp);
+export const CodeSimpleIcon = generateForma36Icon(CodeSimple);
+export const CopySimpleIcon = generateForma36Icon(CopySimple);
+export const DotsSixVerticalIcon = generateForma36Icon(DotsSixVertical);
+export const DotsThreeIcon = generateForma36Icon(DotsThree);
+export const DownloadSimpleIcon = generateForma36Icon(DownloadSimple);
+export const EyeClosedIcon = generateForma36Icon(EyeClosed);
+export const EyeIcon = generateForma36Icon(Eye);
+export const FileAudioIcon = generateForma36Icon(FileAudio);
+export const FileCodeIcon = generateForma36Icon(FileCode);
+export const FileIcon = generateForma36Icon(File);
+export const FilePdfIcon = generateForma36Icon(FilePdf);
+export const FileTextIcon = generateForma36Icon(FileText);
+export const FileVideoIcon = generateForma36Icon(FileVideo);
+export const FolderOpenIcon = generateForma36Icon(FolderOpen);
+export const FolderSimpleIcon = generateForma36Icon(FolderSimple);
+export const FolderSimplePlusIcon = generateForma36Icon(FolderSimplePlus);
+export const FunnelSimpleIcon = generateForma36Icon(FunnelSimple);
+export const GearSixIcon = generateForma36Icon(GearSix);
+export const GlobeIcon = generateForma36Icon(Globe);
+export const HashStraightIcon = generateForma36Icon(HashStraight);
+export const ImageSquareIcon = generateForma36Icon(ImageSquare);
+export const InfoIcon = generateForma36Icon(Info);
+export const LinkSimpleHorizontalIcon =
+  generateForma36Icon(LinkSimpleHorizontal);
+export const ListBulletsIcon = generateForma36Icon(ListBullets);
+export const ListIcon = generateForma36Icon(List);
+export const ListNumbersIcon = generateForma36Icon(ListNumbers);
+export const LockSimpleIcon = generateForma36Icon(LockSimple);
+export const LockSimpleOpenIcon = generateForma36Icon(LockSimpleOpen);
+export const MagnifyingGlassIcon = generateForma36Icon(MagnifyingGlass);
+export const MapPinLineIcon = generateForma36Icon(MapPinLine);
+export const MinusIcon = generateForma36Icon(Minus);
+export const PaperPlaneTiltIcon = generateForma36Icon(PaperPlaneTilt);
+export const PencilSimpleIcon = generateForma36Icon(PencilSimple);
+export const PenNibIcon = generateForma36Icon(PenNib);
+export const PlusIcon = generateForma36Icon(Plus);
+export const PresentationIcon = generateForma36Icon(Presentation);
+export const PuzzlePieceIcon = generateForma36Icon(PuzzlePiece);
+export const QuestionIcon = generateForma36Icon(Question);
+export const QuotesIcon = generateForma36Icon(Quotes);
+export const ReceiptIcon = generateForma36Icon(Receipt);
+export const RepeatIcon = generateForma36Icon(Repeat);
+export const RocketLaunchIcon = generateForma36Icon(RocketLaunch);
+export const ShoppingCartSimpleIcon = generateForma36Icon(ShoppingCartSimple);
+export const SignInIcon = generateForma36Icon(SignIn);
+export const SignOutIcon = generateForma36Icon(SignOut);
+export const SketchLogoIcon = generateForma36Icon(SketchLogo);
+export const SmileyIcon = generateForma36Icon(Smiley);
+export const SortAscendingIcon = generateForma36Icon(SortAscending);
+export const SortDescendingIcon = generateForma36Icon(SortDescending);
+export const SparkleIcon = generateForma36Icon(Sparkle);
+export const StarIcon = generateForma36Icon(Star);
+export const SubtractIcon = generateForma36Icon(Subtract);
+export const SwapIcon = generateForma36Icon(Swap);
+export const TableIcon = generateForma36Icon(Table);
+export const TabsIcon = generateForma36Icon(Tabs);
+export const TagIcon = generateForma36Icon(Tag);
+export const TextBIcon = generateForma36Icon(TextB);
+export const TextHFiveIcon = generateForma36Icon(TextHFive);
+export const TextHFourIcon = generateForma36Icon(TextHFour);
+export const TextHIcon = generateForma36Icon(TextH);
+export const TextHOneIcon = generateForma36Icon(TextHOne);
+export const TextHSixIcon = generateForma36Icon(TextHSix);
+export const TextHThreeIcon = generateForma36Icon(TextHThree);
+export const TextHTwoIcon = generateForma36Icon(TextHTwo);
+export const TextItalicIcon = generateForma36Icon(TextItalic);
+export const TextTIcon = generateForma36Icon(TextT);
+export const TextUnderlineIcon = generateForma36Icon(TextUnderline);
+export const ThumbsDownIcon = generateForma36Icon(ThumbsDown);
+export const ThumbsUpIcon = generateForma36Icon(ThumbsUp);
+export const TrashSimpleIcon = generateForma36Icon(TrashSimple);
+export const TreeStructureIcon = generateForma36Icon(TreeStructure);
+export const TriangleIcon = generateForma36Icon(Triangle);
+export const UserIcon = generateForma36Icon(User);
+export const UsersIcon = generateForma36Icon(Users);
+export const WarningIcon = generateForma36Icon(Warning);
+export const WarningOctagonIcon = generateForma36Icon(WarningOctagon);
+export const XIcon = generateForma36Icon(X);
diff --git a/packages/components/icons/src/Plaintext.tsx b/packages/components/icons/src/Plaintext.tsx
deleted file mode 100644
index a24bf690a7..0000000000
--- a/packages/components/icons/src/Plaintext.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Plaintext = /*#__PURE__*/ generateIcon({
-  name: 'Plaintext',
-  viewBox: '0 0 24 24',
-  path: (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M.5 0a.5.5 0 00-.5.5v23a.5.5 0 00.5.5h19a.5.5 0 00.5-.5v-17a.5.5 0 00-.146-.354l-6-6A.5.5 0 0013.5 0H.5zM1 23V1h12v5.5a.5.5 0 00.5.5H19v16H1zM18.293 6L14 1.707V6h4.293z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4 7.5a.5.5 0 01.5-.5H9a.5.5 0 010 1H4.5a.5.5 0 01-.5-.5zm0 3a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5zm0 3a.5.5 0 01.5-.5h3a.5.5 0 010 1h-3a.5.5 0 01-.5-.5zm0 3a.5.5 0 01.5-.5h3a.5.5 0 010 1h-3a.5.5 0 01-.5-.5zm0 3a.5.5 0 01.5-.5h3a.5.5 0 010 1h-3a.5.5 0 01-.5-.5zM13.5 13h-4s-.5 0-.5.5v1c0 .5.5.5.5.5s.5 0 .5-.5V14h1v5h-1c-.5 0-.5.5-.5.5s0 .5.5.5h3c.5 0 .5-.5.5-.5s0-.5-.5-.5h-1v-5h1v.5c0 .5.5.5.5.5s.5 0 .5-.5v-1c0-.5-.5-.5-.5-.5z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/Plus.tsx b/packages/components/icons/src/Plus.tsx
deleted file mode 100644
index 4c9e854511..0000000000
--- a/packages/components/icons/src/Plus.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Plus = /*#__PURE__*/ generateIcon({
-  name: 'Plus',
-  path: (
-    <Fragment>
-      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/PlusCircle.tsx b/packages/components/icons/src/PlusCircle.tsx
deleted file mode 100644
index 5f3b9bc49d..0000000000
--- a/packages/components/icons/src/PlusCircle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const PlusCircle = /*#__PURE__*/ generateIcon({
-  name: 'PlusCircle',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/PlusCircleTrimmed.tsx b/packages/components/icons/src/PlusCircleTrimmed.tsx
deleted file mode 100644
index aa3f8a8a8a..0000000000
--- a/packages/components/icons/src/PlusCircleTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const PlusCircleTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'PlusCircleTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h15v18H0V0z" fill="none" />
-      <path d="M7.5 1.5C3.4 1.5 0 4.9 0 9s3.4 7.5 7.5 7.5S15 13.1 15 9s-3.4-7.5-7.5-7.5zm3.7 8.3h-3v3H6.8v-3h-3V8.2h3v-3h1.5v3h3v1.6z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/PlusTrimmed.tsx b/packages/components/icons/src/PlusTrimmed.tsx
deleted file mode 100644
index 1fdc5d83ad..0000000000
--- a/packages/components/icons/src/PlusTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const PlusTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'PlusTrimmed',
-  path: (
-    <Fragment>
-      <path d="M10.5 9.8H6v4.5H4.5V9.8H0V8.2h4.5V3.8H6v4.5h4.5v1.5z" />
-      <path d="M0 0h10.5v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 10.5 18',
-});
diff --git a/packages/components/icons/src/Presentation.tsx b/packages/components/icons/src/Presentation.tsx
deleted file mode 100644
index 7c9955af24..0000000000
--- a/packages/components/icons/src/Presentation.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Presentation = /*#__PURE__*/ generateIcon({
-  name: 'Presentation',
-  viewBox: '0 0 24 24',
-  path: (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0 .5A.5.5 0 01.5 0h22a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H.5a.5.5 0 01-.5-.5v-3zM1 1v2h21V1H1zM.021 17.5a.5.5 0 01.5-.5h21.958a.5.5 0 010 1H.521a.5.5 0 01-.5-.5z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2 3.5a.5.5 0 01.5-.5h18a.5.5 0 01.5.5v14a.5.5 0 01-.5.5H12v2.5h-1V18H2.5a.5.5 0 01-.5-.5v-14zM3 4v13h17V4H3z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M11.5 21a1 1 0 100 2 1 1 0 000-2zm-2 1a2 2 0 114 0 2 2 0 01-4 0zM10.268 7.785a.5.5 0 01.517.032l3.272 2.272a.5.5 0 010 .822l-3.272 2.272a.5.5 0 01-.785-.411V8.228a.5.5 0 01.268-.443zM11 9.184v2.632l1.895-1.316L11 9.184z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M11.5 6a4.5 4.5 0 100 9 4.5 4.5 0 000-9zM6 10.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/Preview.tsx b/packages/components/icons/src/Preview.tsx
deleted file mode 100644
index a589c2d4b7..0000000000
--- a/packages/components/icons/src/Preview.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Preview = /*#__PURE__*/ generateIcon({
-  name: 'Preview',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/PreviewOff.tsx b/packages/components/icons/src/PreviewOff.tsx
deleted file mode 100644
index 977ff0ab93..0000000000
--- a/packages/components/icons/src/PreviewOff.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const PreviewOff = /*#__PURE__*/ generateIcon({
-  name: 'PreviewOff',
-  path: (
-    <Fragment>
-      <path
-        d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z"
-        fill="none"
-      />
-      <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/Puzzle.tsx b/packages/components/icons/src/Puzzle.tsx
deleted file mode 100644
index d6efe1b3e8..0000000000
--- a/packages/components/icons/src/Puzzle.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Puzzle = /*#__PURE__*/ generateIcon({
-  name: 'Puzzle',
-  path: (
-    <Fragment>
-      <path d="M9.793.005a3.493 3.493 0 013.487 3.28l.006.212v.704h3.326a2.972 2.972 0 011.803.614l.15.123.143.134c.51.51.816 1.186.865 1.901l.008.196-.002 3.323h.703c.784 0 1.54.264 2.152.742l.163.135.155.147a3.494 3.494 0 01-2.258 5.957l-.212.007h-.704v3.325a2.974 2.974 0 01-.613 1.802l-.124.15-.134.144a2.974 2.974 0 01-1.9.865l-.196.007h-4.857V21.34a1.962 1.962 0 00-3.911-.176l-.012.166v2.443H2.975A2.974 2.974 0 01.012 21l-.007-.196v-4.856h2.433a1.962 1.962 0 00.176-3.91l-.166-.014H.018V7.17a2.965 2.965 0 012.76-2.961l.196-.007H6.3V3.5c0-.785.264-1.542.741-2.152l.136-.163.147-.155A3.493 3.493 0 019.793.005zm0 1.74c-.908 0-1.665.693-1.745 1.597l-.008.154V5.94H2.974c-.628 0-1.149.484-1.21 1.103l-.007.125-.001 3.115h.692c.913 0 1.791.336 2.468.941l.152.144a3.704 3.704 0 01-2.41 6.315l-.209.005h-.702v3.116c0 .634.492 1.163 1.11 1.222l.118.005H6.09v-.703c0-.912.338-1.789.941-2.465l.145-.152a3.704 3.704 0 016.314 2.408l.006.21v.702h3.114c.631 0 1.157-.487 1.22-1.103l.007-.124v-5.065h2.445a1.752 1.752 0 00.153-3.499l-.153-.005h-2.446V7.168c0-.634-.49-1.163-1.108-1.223l-.118-.006h-5.067V3.496a1.75 1.75 0 00-1.75-1.751z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/Quote.tsx b/packages/components/icons/src/Quote.tsx
deleted file mode 100644
index d75afee3ce..0000000000
--- a/packages/components/icons/src/Quote.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Quote = /*#__PURE__*/ generateIcon({
-  name: 'Quote',
-  path: (
-    <Fragment>
-      <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/QuoteTrimmed.tsx b/packages/components/icons/src/QuoteTrimmed.tsx
deleted file mode 100644
index a020d28d07..0000000000
--- a/packages/components/icons/src/QuoteTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const QuoteTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'QuoteTrimmed',
-  path: (
-    <Fragment>
-      <path d="M.8 12.8H3l1.5-3V5.2H0v4.5h2.2L.8 12.8zm6 0H9l1.5-3V5.2H6v4.5h2.2l-1.4 3.1z" />
-      <path d="M0 0h10.5v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 10.5 18',
-});
diff --git a/packages/components/icons/src/Receipt.tsx b/packages/components/icons/src/Receipt.tsx
deleted file mode 100644
index 003ec7313e..0000000000
--- a/packages/components/icons/src/Receipt.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Receipt = /*#__PURE__*/ generateIcon({
-  name: 'Receipt',
-  path: (
-    <Fragment>
-      <path d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ReceiptTrimmed.tsx b/packages/components/icons/src/ReceiptTrimmed.tsx
deleted file mode 100644
index 891c951870..0000000000
--- a/packages/components/icons/src/ReceiptTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ReceiptTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ReceiptTrimmed',
-  path: (
-    <Fragment>
-      <path d="M11.2 12.8h-9v-1.5h9v1.5zm0-3h-9V8.2h9v1.6zm0-3h-9V5.2h9v1.6zM0 16.5l1.1-1.1 1.1 1.1 1.1-1.1 1.1 1.1 1.1-1.1 1.1 1.1 1.1-1.1L9 16.5l1.1-1.1 1.1 1.1 1.1-1.1 1.1 1.1v-15l-1.1 1.1-1.1-1.1-1.1 1.1L9 1.5 7.9 2.6 6.8 1.5 5.6 2.6 4.5 1.5 3.4 2.6 2.2 1.5 1.1 2.6 0 1.5v15z" />
-      <path d="M0 0h13.5v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 13.5 18',
-});
diff --git a/packages/components/icons/src/References.tsx b/packages/components/icons/src/References.tsx
deleted file mode 100644
index 6c594aa4eb..0000000000
--- a/packages/components/icons/src/References.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const References = /*#__PURE__*/ generateIcon({
-  name: 'References',
-  path: (
-    <Fragment>
-      <path fill="none" d="M0 0h24v24H0z" />
-      <path d="M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3h7zM7 9H4V5h3v4zm10 6h3v4h-3v-4zm0-10h3v4h-3V5z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/Release.tsx b/packages/components/icons/src/Release.tsx
deleted file mode 100644
index 0a1c8295d3..0000000000
--- a/packages/components/icons/src/Release.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Release = /*#__PURE__*/ generateIcon({
-  name: 'Release',
-  path: (
-    <path d="M3.426 1.5C3.865.569 4.68 0 5.689 0h12.622c.995 0 1.95.666 2.294 1.57v.003s2.262 5.71 2.329 6.069C23 8 23 8 23 8.455v13.09C23 22.857 21.902 24 20.571 24H3.43C2.097 24 1 22.856 1 21.546V8.455C1 8 1 8 1.066 7.642c.067-.358 2.33-6.074 2.33-6.074a.997.997 0 01.03-.068zM3.838 6H11V2H5.69c-.152 0-.302.046-.441.324L3.839 6zM13 2v4h7.162l-1.426-3.715-.002-.006C18.688 2.156 18.48 2 18.311 2H13zM3.429 8C3.236 8 3 8.214 3 8.455v13.09c0 .241.236.455.429.455H20.57c.193 0 .429-.214.429-.454V8.455c0-.241-.236-.455-.429-.455H3.43zM13 19a1 1 0 011-1h5a1 1 0 110 2h-5a1 1 0 01-1-1z" />
-  ),
-});
diff --git a/packages/components/icons/src/ReleaseIcon.tsx b/packages/components/icons/src/ReleaseIcon.tsx
new file mode 100644
index 0000000000..2de5a3ca28
--- /dev/null
+++ b/packages/components/icons/src/ReleaseIcon.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  IconVariant,
+  generateComponentWithVariants,
+} from '@contentful/f36-icon';
+import { generateIconComponent } from '@contentful/f36-icon/src';
+
+export const ReleaseIcon = generateComponentWithVariants({
+  variants: {
+    [IconVariant.Active]: generateIconComponent({
+      path: (
+        <path
+          d="M3.816 2.845a.625.625 0 0 1 .559-.345h11.25c.237 0 .453.134.559.345l1.25 2.5a.625.625 0 0 1 .066.28V16.25a1.25 1.25 0 0 1-1.25 1.25H3.75a1.25 1.25 0 0 1-1.25-1.25V5.625c0-.097.023-.193.066-.28l1.25-2.5Zm.559 2.78C4.375 5.28 4.655 5 5 5h10a.625.625 0 1 1 0 1.25H5a.625.625 0 0 1-.625-.625ZM13.75 15a.625.625 0 1 0 0-1.25h-2.5a.625.625 0 1 0 0 1.25h2.5Z"
+          fill="currentColor"
+          fillRule="evenodd"
+        />
+      ),
+    }),
+    [IconVariant.Default]: generateIconComponent({
+      path: (
+        <path
+          d="M3.816 2.845a.625.625 0 0 1 .559-.345h11.25c.237 0 .453.134.559.345l1.25 2.5a.625.625 0 0 1 .066.28V16.25a1.25 1.25 0 0 1-1.25 1.25H3.75a1.25 1.25 0 0 1-1.25-1.25V5.625c0-.097.023-.193.066-.28l1.25-2.5Zm.945.905L4.136 5h11.728l-.625-1.25H4.76Zm11.489 2.5H3.75v10h12.5v-10Zm-5.625 7.5c0-.345.28-.625.625-.625h2.5a.625.625 0 1 1 0 1.25h-2.5a.625.625 0 0 1-.625-.625Z"
+          fill="currentColor"
+        />
+      ),
+    }),
+  },
+});
diff --git a/packages/components/icons/src/ReleaseTrimmed.tsx b/packages/components/icons/src/ReleaseTrimmed.tsx
deleted file mode 100644
index 8ce0efe1b6..0000000000
--- a/packages/components/icons/src/ReleaseTrimmed.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ReleaseTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ReleaseTrimmed',
-  path: (
-    <path d="M2.426 1.5C2.865.569 3.68 0 4.689 0h12.622c.995 0 1.95.666 2.294 1.57v.003s2.262 5.71 2.329 6.069C22 8 22 8 22 8.455v13.09C22 22.857 20.902 24 19.571 24H2.43C1.097 24 0 22.856 0 21.546V8.455C0 8 0 8 .066 7.642c.067-.358 2.33-6.074 2.33-6.074a.997.997 0 01.03-.068zM2.838 6H10V2H4.69c-.152 0-.302.046-.441.324L2.839 6zM12 2v4h7.162l-1.426-3.715-.002-.006C17.688 2.156 17.48 2 17.311 2H12zM2.429 8C2.236 8 2 8.214 2 8.455v13.09c0 .241.236.455.429.455H19.57c.193 0 .429-.214.429-.454V8.455c0-.241-.236-.455-.429-.455H2.43zM12 19a1 1 0 011-1h5a1 1 0 110 2h-5a1 1 0 01-1-1z" />
-  ),
-  trimmed: true,
-  viewBox: '0 0 22 24',
-});
diff --git a/packages/components/icons/src/RichTextIcon.tsx b/packages/components/icons/src/RichTextIcon.tsx
new file mode 100644
index 0000000000..127a597982
--- /dev/null
+++ b/packages/components/icons/src/RichTextIcon.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  IconVariant,
+  generateComponentWithVariants,
+} from '@contentful/f36-icon';
+import { generateIconComponent } from '@contentful/f36-icon/src';
+
+export const RichTextIcon = generateComponentWithVariants({
+  variants: {
+    [IconVariant.Active]: generateIconComponent({
+      path: (
+        <path
+          d="M1.25 4.375c0-.69.56-1.25 1.25-1.25h15c.69 0 1.25.56 1.25 1.25v11.25c0 .69-.56 1.25-1.25 1.25h-15c-.69 0-1.25-.56-1.25-1.25V4.375ZM5 7.5c0-.345.28-.625.625-.625h2.5c.345 0 .625.28.625.625V10c0 .345-.28.625-.625.625h-2.5A.625.625 0 0 1 5 10V7.5Zm6.25 1.875a.625.625 0 1 0 0 1.25h3.125a.625.625 0 1 0 0-1.25H11.25ZM10.625 7.5c0-.345.28-.625.625-.625h3.125a.625.625 0 1 1 0 1.25H11.25a.625.625 0 0 1-.625-.625Zm-5 4.375a.625.625 0 1 0 0 1.25h8.75a.625.625 0 1 0 0-1.25h-8.75Z"
+          fill="currentColor"
+          fillRule="evenodd"
+        />
+      ),
+    }),
+    [IconVariant.Default]: generateIconComponent({
+      path: (
+        <g fill="currentColor" fillRule="evenodd">
+          <path d="M5 7.5c0-.345.28-.625.625-.625h2.5c.345 0 .625.28.625.625V10c0 .345-.28.625-.625.625h-2.5A.625.625 0 0 1 5 10V7.5Zm1.25.625v1.25H7.5v-1.25H6.25Z" />
+          <path d="M11.25 9.375a.625.625 0 1 0 0 1.25h3.125a.625.625 0 1 0 0-1.25H11.25ZM10.625 7.5c0-.345.28-.625.625-.625h3.125a.625.625 0 1 1 0 1.25H11.25a.625.625 0 0 1-.625-.625ZM5.625 11.875a.625.625 0 1 0 0 1.25h8.75a.625.625 0 1 0 0-1.25h-8.75Z" />
+          <path d="M2.5 3.125c-.69 0-1.25.56-1.25 1.25v11.25c0 .69.56 1.25 1.25 1.25h15c.69 0 1.25-.56 1.25-1.25V4.375c0-.69-.56-1.25-1.25-1.25h-15Zm15 1.25h-15v11.25h15V4.375Z" />
+        </g>
+      ),
+    }),
+  },
+});
diff --git a/packages/components/icons/src/Richtext.tsx b/packages/components/icons/src/Richtext.tsx
deleted file mode 100644
index 9cbfff6f94..0000000000
--- a/packages/components/icons/src/Richtext.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Richtext = /*#__PURE__*/ generateIcon({
-  name: 'Richtext',
-  viewBox: '0 0 24 24',
-  path: (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M.5 0a.5.5 0 00-.5.5v23a.5.5 0 00.5.5h19a.5.5 0 00.5-.5v-17a.5.5 0 00-.146-.354l-6-6A.5.5 0 0013.5 0H.5zM1 23V1h12v5.5a.5.5 0 00.5.5H19v16H1zM18.293 6L14 1.707V6h4.293z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4.5 7a.5.5 0 000 1h5a.5.5 0 000-1h-5zm0 3a.5.5 0 000 1h9a.5.5 0 000-1h-9zm0 3a.5.5 0 000 1h2a.5.5 0 000-1h-2zm8.946 2.237a.5.5 0 00-.802-.065L10 18.212V14h5v3.744l-1.554-2.507zM16 19.5v-6a.5.5 0 00-.5-.5h-6a.5.5 0 00-.5.5v6a.5.5 0 00.5.5h6a.498.498 0 00.5-.5zm-1.398-.5l-1.649-2.66L10.64 19h3.962zM4.5 16a.5.5 0 000 1h2a.5.5 0 000-1h-2zm0 3a.5.5 0 000 1h2a.5.5 0 000-1h-2z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/Search.tsx b/packages/components/icons/src/Search.tsx
deleted file mode 100644
index 23630cfa4f..0000000000
--- a/packages/components/icons/src/Search.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Search = /*#__PURE__*/ generateIcon({
-  name: 'Search',
-  path: (
-    <Fragment>
-      <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/SearchTrimmed.tsx b/packages/components/icons/src/SearchTrimmed.tsx
deleted file mode 100644
index 640680d42a..0000000000
--- a/packages/components/icons/src/SearchTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const SearchTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'SearchTrimmed',
-  path: (
-    <Fragment>
-      <path d="M9.4 10.5h-.6l-.2-.2c.7-.9 1.2-2 1.2-3.2 0-2.7-2.2-4.9-4.9-4.9S0 4.4 0 7.1 2.2 12 4.9 12c1.2 0 2.3-.4 3.2-1.2l.1.2v.6l3.8 3.7 1.1-1.1-3.7-3.7zm-4.5 0C3 10.5 1.5 9 1.5 7.1S3 3.8 4.9 3.8s3.4 1.5 3.4 3.4-1.6 3.3-3.4 3.3z" />
-      <path d="M0 0h13.1v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 13.1 18',
-});
diff --git a/packages/components/icons/src/Settings.tsx b/packages/components/icons/src/Settings.tsx
deleted file mode 100644
index ee244f99ca..0000000000
--- a/packages/components/icons/src/Settings.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Settings = /*#__PURE__*/ generateIcon({
-  name: 'Settings',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0014 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/SettingsTrimmed.tsx b/packages/components/icons/src/SettingsTrimmed.tsx
deleted file mode 100644
index d89c906db6..0000000000
--- a/packages/components/icons/src/SettingsTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const SettingsTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'SettingsTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h14.6v18H0V0z" fill="none" />
-      <path d="M12.9 9.7c0-.2.1-.5.1-.7s0-.5-.1-.7L14.5 7c.1-.1.2-.3.1-.5L13 4c-.1-.2-.3-.2-.5-.2l-1.9.8c-.3-.4-.7-.6-1.2-.8l-.3-2c0-.2-.2-.3-.4-.3h-3c-.2 0-.3.1-.4.3l-.3 2c-.3.2-.7.4-1.1.7L2 3.8c-.2-.1-.4 0-.4.2L.1 6.5c-.1.2-.1.4 0 .5l1.6 1.2c0 .2-.1.5-.1.7s0 .5.1.7L.1 11c-.1.1-.1.3 0 .5L1.6 14c.1.2.3.2.5.2l1.9-.8c.4.3.8.5 1.3.7l.3 2c0 .2.2.3.4.3h3c.2 0 .3-.1.4-.3l.3-2c.5-.2.9-.4 1.3-.7l1.9.8c.2.1.4 0 .5-.2l1.5-2.6c.1-.2.1-.4-.1-.5l-1.9-1.2zm-5.6 1.9c-1.4 0-2.6-1.2-2.6-2.6s1.2-2.6 2.6-2.6S9.9 7.6 9.9 9s-1.2 2.6-2.6 2.6z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 14.6 18',
-});
diff --git a/packages/components/icons/src/ShoppingCart.tsx b/packages/components/icons/src/ShoppingCart.tsx
deleted file mode 100644
index d9d78c7485..0000000000
--- a/packages/components/icons/src/ShoppingCart.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ShoppingCart = /*#__PURE__*/ generateIcon({
-  name: 'ShoppingCart',
-  path: (
-    <Fragment>
-      <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0020 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ShoppingCartTrimmed.tsx b/packages/components/icons/src/ShoppingCartTrimmed.tsx
deleted file mode 100644
index a00e342f54..0000000000
--- a/packages/components/icons/src/ShoppingCartTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ShoppingCartTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ShoppingCartTrimmed',
-  path: (
-    <Fragment>
-      <path d="M4.5 13.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5S6 15.8 6 15s-.7-1.5-1.5-1.5zM0 1.5V3h1.5l2.7 5.7-1 1.8c-.1.2-.2.5-.2.7 0 .8.7 1.5 1.5 1.5h9v-1.5H4.8c-.1 0-.2-.1-.2-.2v-.1l.7-1.2h5.6c.6 0 1.1-.3 1.3-.8L14.9 4c.1 0 .1-.1.1-.2 0-.5-.3-.8-.8-.8h-11l-.7-1.5H0zm12 12c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5-.7-1.5-1.5-1.5z" />
-      <path d="M0 0h15v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/Sort.tsx b/packages/components/icons/src/Sort.tsx
deleted file mode 100644
index 7cf51ef047..0000000000
--- a/packages/components/icons/src/Sort.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Sort = /*#__PURE__*/ generateIcon({
-  name: 'Sort',
-  path: (
-    <>
-      <path d="M16.5 14.25h-9a.75.75 0 0 0-.53 1.28l4.5 4.5a.747.747 0 0 0 1.06 0l4.5-4.5a.75.75 0 0 0-.53-1.28ZM6.764 8.854a.75.75 0 0 0 .736.896h9a.75.75 0 0 0 .53-1.28l-4.5-4.5a.751.751 0 0 0-1.061 0l-4.5 4.5a.75.75 0 0 0-.205.384Z" />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/SortAscending.tsx b/packages/components/icons/src/SortAscending.tsx
deleted file mode 100644
index ae764466c0..0000000000
--- a/packages/components/icons/src/SortAscending.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const SortAscending = /*#__PURE__*/ generateIcon({
-  name: 'SortAscending',
-  path: (
-    <>
-      <path
-        fillOpacity={0.2}
-        d="M16.5 14.25h-9a.75.75 0 0 0-.53 1.28l4.5 4.5a.747.747 0 0 0 1.06 0l4.5-4.5a.75.75 0 0 0-.53-1.28Z"
-      />
-      <path d="M6.764 8.854a.75.75 0 0 0 .736.896h9a.75.75 0 0 0 .53-1.28l-4.5-4.5a.751.751 0 0 0-1.061 0l-4.5 4.5a.75.75 0 0 0-.205.384Z" />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/SortDescending.tsx b/packages/components/icons/src/SortDescending.tsx
deleted file mode 100644
index 2fafa546ec..0000000000
--- a/packages/components/icons/src/SortDescending.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const SortDescending = /*#__PURE__*/ generateIcon({
-  name: 'SortDescending',
-  path: (
-    <>
-      <path d="M16.5 14.25h-9a.75.75 0 0 0-.53 1.28l4.5 4.5a.747.747 0 0 0 1.06 0l4.5-4.5a.75.75 0 0 0-.53-1.28Z" />
-      <path
-        fillOpacity={0.2}
-        d="M6.764 8.854a.75.75 0 0 0 .736.896h9a.75.75 0 0 0 .53-1.28l-4.5-4.5a.751.751 0 0 0-1.061 0l-4.5 4.5a.75.75 0 0 0-.205.384Z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/Spreadsheet.tsx b/packages/components/icons/src/Spreadsheet.tsx
deleted file mode 100644
index 28cb34d4b2..0000000000
--- a/packages/components/icons/src/Spreadsheet.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Spreadsheet = /*#__PURE__*/ generateIcon({
-  name: 'Spreadsheet',
-  viewBox: '0 0 24 24',
-  path: (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M.5 0a.5.5 0 00-.5.5v23a.5.5 0 00.5.5h19a.5.5 0 00.5-.5v-17a.5.5 0 00-.146-.354l-6-6A.5.5 0 0013.5 0H.5zM1 23V1h12v5.5a.5.5 0 00.5.5H19v16H1zM18.293 6L14 1.707V6h4.293z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4 8.5a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v12a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-12zM5 12h3v2H5v-2zm0 3h3v2H5v-2zm0 3h3v2H5v-2zm4 2h6v-2H9v2zm0-3h6v-2H9v2zm0-3h6v-2H9v2zm0-3h6V9H9v2zM8 9H5v2h3V9z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/Star.tsx b/packages/components/icons/src/Star.tsx
deleted file mode 100644
index 8403e0f04d..0000000000
--- a/packages/components/icons/src/Star.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Star = /*#__PURE__*/ generateIcon({
-  name: 'Star',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/StarTrimmed.tsx b/packages/components/icons/src/StarTrimmed.tsx
deleted file mode 100644
index 07aaf0d5ee..0000000000
--- a/packages/components/icons/src/StarTrimmed.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const StarTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'StarTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h15v18H0V0z" fill="none" />
-      <path d="M7.5 13l4.6 2.8-1.2-5.3L15 6.9l-5.4-.4-2.1-5-2.1 5-5.4.4 4.1 3.5-1.2 5.3L7.5 13z" />
-      <path d="M0 0h15v18H0V0z" fill="none" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 15 18',
-});
diff --git a/packages/components/icons/src/Subscript.tsx b/packages/components/icons/src/Subscript.tsx
deleted file mode 100644
index d4a4ab8fef..0000000000
--- a/packages/components/icons/src/Subscript.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Subscript = /*#__PURE__*/ generateIcon({
-  name: 'Subscript',
-  path: (
-    <Fragment>
-      <rect fill="none" height="24" width="24" />
-      <path d="M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z" />
-    </Fragment>
-  ),
-  viewBox: '0 0 13 18',
-});
diff --git a/packages/components/icons/src/SubscriptTrimmed.tsx b/packages/components/icons/src/SubscriptTrimmed.tsx
deleted file mode 100644
index 7d73983f8a..0000000000
--- a/packages/components/icons/src/SubscriptTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const SubscriptTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'SubscriptTrimmed',
-  path: (
-    <Fragment>
-      <rect fill="none" height="24" width="24" />
-      <path d="M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 13 18',
-});
diff --git a/packages/components/icons/src/Superscript.tsx b/packages/components/icons/src/Superscript.tsx
deleted file mode 100644
index d2b959f591..0000000000
--- a/packages/components/icons/src/Superscript.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Superscript = /*#__PURE__*/ generateIcon({
-  name: 'Superscript',
-  path: (
-    <Fragment>
-      <rect fill="none" height="24" width="24" x="0" y="0" />
-      <path d="M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/SuperscriptTrimmed.tsx b/packages/components/icons/src/SuperscriptTrimmed.tsx
deleted file mode 100644
index 7365fcda3b..0000000000
--- a/packages/components/icons/src/SuperscriptTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const SuperscriptTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'SuperscriptTrimmed',
-  path: (
-    <Fragment>
-      <rect fill="none" height="24" width="24" x="0" y="0" />
-      <path d="M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 13 18',
-});
diff --git a/packages/components/icons/src/Tab.tsx b/packages/components/icons/src/Tab.tsx
deleted file mode 100644
index 91549931ac..0000000000
--- a/packages/components/icons/src/Tab.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Tab = /*#__PURE__*/ generateIcon({
-  name: 'Tab',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/Table.tsx b/packages/components/icons/src/Table.tsx
deleted file mode 100644
index 8ee659e8c7..0000000000
--- a/packages/components/icons/src/Table.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Table = /*#__PURE__*/ generateIcon({
-  name: 'Table',
-  path: (
-    <Fragment>
-      <path d="M5,4H19A2,2 0 0,1 21,6V18A2,2 0 0,1 19,20H5A2,2 0 0,1 3,18V6A2,2 0 0,1 5,4M5,8V12H11V8H5M13,8V12H19V8H13M5,14V18H11V14H5M13,14V18H19V14H13Z" />
-    </Fragment>
-  ),
-  viewBox: '0 0 24 24',
-});
diff --git a/packages/components/icons/src/Tags.tsx b/packages/components/icons/src/Tags.tsx
deleted file mode 100644
index afbe4bfb1a..0000000000
--- a/packages/components/icons/src/Tags.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Tags = /*#__PURE__*/ generateIcon({
-  name: 'Tags',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM13 20.01L4 11V4h7v-.01l9 9-7 7.02z" />
-      <circle cx={6.5} cy={6.5} r={1.5} />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/Text.tsx b/packages/components/icons/src/Text.tsx
deleted file mode 100644
index 4ed3833777..0000000000
--- a/packages/components/icons/src/Text.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Text = /*#__PURE__*/ generateIcon({
-  name: 'Text',
-  path: (
-    <Fragment>
-      <defs>
-        <path d="M24 24H0V0h24v24z" id="Text_svg__a" />
-      </defs>
-      <clipPath id="Text_svg__b">
-        <use overflow="visible" xlinkHref="#Text_svg__a" />
-      </clipPath>
-      <path
-        clipPath="url(#Text_svg__b)"
-        d="M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z"
-      />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/TextSubscriptIcon.tsx b/packages/components/icons/src/TextSubscriptIcon.tsx
new file mode 100644
index 0000000000..191129816b
--- /dev/null
+++ b/packages/components/icons/src/TextSubscriptIcon.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  IconVariant,
+  generateComponentWithVariants,
+} from '@contentful/f36-icon';
+import { generateIconComponent } from '@contentful/f36-icon/src';
+
+export const TextSubscriptIcon = generateComponentWithVariants({
+  variants: {
+    [IconVariant.Active]: generateIconComponent({
+      path: (
+        <path
+          d="M3.75 2.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V3.75c0-.69-.56-1.25-1.25-1.25H3.75Zm10.901 3.126a.25.25 0 0 0-.255.149.625.625 0 1 1-1.146-.5 1.5 1.5 0 1 1 2.573 1.502L15 7.875h.5a.625.625 0 1 1 0 1.25h-1.75a.625.625 0 0 1-.5-1l1.574-2.1a.249.249 0 0 0-.073-.366.25.25 0 0 0-.1-.033Zm-2.21 1.566a.625.625 0 1 0-.883-.884L8.5 9.366 5.442 6.308a.625.625 0 1 0-.884.884l3.058 3.058-3.058 3.058a.625.625 0 0 0 .884.884L8.5 11.134l3.058 3.058a.625.625 0 1 0 .884-.884L9.384 10.25l3.058-3.058Z"
+          fill="currentColor"
+          fillRule="evenodd"
+        />
+      ),
+    }),
+    [IconVariant.Default]: generateIconComponent({
+      path: (
+        <path
+          d="M2.058 3.308a.625.625 0 0 1 .884 0L7.5 7.866l4.558-4.558a.625.625 0 1 1 .884.884L8.384 8.75l4.558 4.558a.625.625 0 1 1-.884.884L7.5 9.634l-4.558 4.558a.625.625 0 1 1-.884-.884L6.616 8.75 2.058 4.192a.625.625 0 0 1 0-.884Zm14.258 8.57a.624.624 0 0 0-.64.372.625.625 0 1 1-1.145-.5 1.875 1.875 0 1 1 3.217 1.877v.001l-1.498 1.997h1.25a.625.625 0 1 1 0 1.25H15a.625.625 0 0 1-.5-1l2.248-2.998v-.001a.627.627 0 0 0-.183-.916.623.623 0 0 0-.249-.081Z"
+          fill="currentColor"
+        />
+      ),
+    }),
+  },
+});
diff --git a/packages/components/icons/src/TextSuperscriptIcon.tsx b/packages/components/icons/src/TextSuperscriptIcon.tsx
new file mode 100644
index 0000000000..7cb9dd221e
--- /dev/null
+++ b/packages/components/icons/src/TextSuperscriptIcon.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  IconVariant,
+  generateComponentWithVariants,
+} from '@contentful/f36-icon';
+import { generateIconComponent } from '@contentful/f36-icon/src';
+
+export const TextSuperscriptIcon = generateComponentWithVariants({
+  variants: {
+    [IconVariant.Active]: generateIconComponent({
+      path: (
+        <path
+          d="M3.75 2.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V3.75c0-.69-.56-1.25-1.25-1.25H3.75Zm10.901 3.126a.25.25 0 0 0-.255.149.625.625 0 1 1-1.146-.5 1.5 1.5 0 1 1 2.573 1.502L15 7.875h.5a.625.625 0 1 1 0 1.25h-1.75a.625.625 0 0 1-.5-1l1.574-2.1a.249.249 0 0 0-.073-.366.25.25 0 0 0-.1-.033Zm-2.21 1.566a.625.625 0 1 0-.883-.884L8.5 9.366 5.442 6.308a.625.625 0 1 0-.884.884l3.058 3.058-3.058 3.058a.625.625 0 0 0 .884.884L8.5 11.134l3.058 3.058a.625.625 0 1 0 .884-.884L9.384 10.25l3.058-3.058Z"
+          fill="currentColor"
+          fillRule="evenodd"
+        />
+      ),
+    }),
+    [IconVariant.Default]: generateIconComponent({
+      path: (
+        <path
+          d="M16.316 4.379a.625.625 0 0 0-.64.37.625.625 0 1 1-1.145-.5 1.876 1.876 0 1 1 3.217 1.878v.001L16.25 8.125h1.25a.625.625 0 1 1 0 1.25H15a.625.625 0 0 1-.5-1l2.248-2.998v-.001a.627.627 0 0 0-.432-.997ZM2.058 5.809a.625.625 0 0 1 .884 0L7.5 10.365l4.558-4.558a.625.625 0 1 1 .884.884L8.384 11.25l4.558 4.558a.625.625 0 1 1-.884.884L7.5 12.134l-4.558 4.558a.625.625 0 1 1-.884-.884l4.558-4.558-4.558-4.558a.625.625 0 0 1 0-.884Z"
+          fill="currentColor"
+        />
+      ),
+    }),
+  },
+});
diff --git a/packages/components/icons/src/TextTrimmed.tsx b/packages/components/icons/src/TextTrimmed.tsx
deleted file mode 100644
index 8049f94b3c..0000000000
--- a/packages/components/icons/src/TextTrimmed.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const TextTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'TextTrimmed',
-  path: (
-    <Fragment>
-      <defs>
-        <path id="TextTrimmed_svg__a" d="M0 0h14.2v18H0z" />
-      </defs>
-      <clipPath id="TextTrimmed_svg__b">
-        <use xlinkHref="#TextTrimmed_svg__a" overflow="visible" />
-      </clipPath>
-      <path
-        d="M0 3v2.2h3.8v9H6v-9h3.8V3H0zm14.2 3.8H7.5V9h2.2v5.2H12V9h2.2V6.8z"
-        clipPath="url(#TextTrimmed_svg__b)"
-      />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 14.2 18',
-});
diff --git a/packages/components/icons/src/ThumbDown.tsx b/packages/components/icons/src/ThumbDown.tsx
deleted file mode 100644
index 135f15b7d6..0000000000
--- a/packages/components/icons/src/ThumbDown.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ThumbDown = /*#__PURE__*/ generateIcon({
-  name: 'ThumbDown',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ThumbDownTrimmed.tsx b/packages/components/icons/src/ThumbDownTrimmed.tsx
deleted file mode 100644
index 40820b3b3e..0000000000
--- a/packages/components/icons/src/ThumbDownTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ThumbDownTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ThumbDownTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h16.5v18H0V0z" fill="none" />
-      <path d="M10.5 2.2H3.8c-.6 0-1.2.4-1.4.9L.1 8.5c-.1.1-.1.3-.1.5v1.5c0 .8.7 1.5 1.5 1.5h4.7l-.7 3.4v.2c0 .3.1.6.3.8l.8.8 4.9-4.9c.3-.3.4-.6.4-1.1V3.8c.1-.9-.6-1.6-1.4-1.6zm3 0v9h3v-9h-3z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 16.5 18',
-});
diff --git a/packages/components/icons/src/ThumbUp.tsx b/packages/components/icons/src/ThumbUp.tsx
deleted file mode 100644
index 69f17fbb77..0000000000
--- a/packages/components/icons/src/ThumbUp.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ThumbUp = /*#__PURE__*/ generateIcon({
-  name: 'ThumbUp',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/ThumbUpTrimmed.tsx b/packages/components/icons/src/ThumbUpTrimmed.tsx
deleted file mode 100644
index d09c6ed5d2..0000000000
--- a/packages/components/icons/src/ThumbUpTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const ThumbUpTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'ThumbUpTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h16.5v18H0V0z" fill="none" />
-      <path d="M0 15.8h3v-9H0v9zm16.5-8.3c0-.8-.7-1.5-1.5-1.5h-4.7l.7-3.4v-.2c0-.3-.1-.6-.3-.8L9.9.8l-5 4.9c-.2.3-.4.6-.4 1.1v7.5c0 .8.7 1.5 1.5 1.5h6.8c.6 0 1.2-.4 1.4-.9l2.3-5.3c.1-.2.1-.4.1-.5V7.5h-.1z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 16.5 18',
-});
diff --git a/packages/components/icons/src/Toggle.tsx b/packages/components/icons/src/Toggle.tsx
deleted file mode 100644
index 53e6ebe3e2..0000000000
--- a/packages/components/icons/src/Toggle.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Toggle = /*#__PURE__*/ generateIcon({
-  name: 'Toggle',
-  path: (
-    <>
-      <path d="M15.31 4.19 16.5 3 21 7.5 16.5 12l-1.19-1.19 2.458-2.466H4.125V6.656h13.643L15.31 4.19ZM8.69 19.81 7.5 21 3 16.5 7.5 12l1.19 1.19-2.458 2.466h13.643v1.688H6.232L8.69 19.81Z" />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/TriangleOutline.tsx b/packages/components/icons/src/TriangleOutline.tsx
deleted file mode 100644
index 751f698349..0000000000
--- a/packages/components/icons/src/TriangleOutline.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const TriangleOutline = /*#__PURE__*/ generateIcon({
-  name: 'TriangleOutline',
-  path: (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="m12 4 9 15.546H3L12 4ZM5.838 17.91 12 7.265l6.162 10.643H5.838Z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/Users.tsx b/packages/components/icons/src/Users.tsx
deleted file mode 100644
index ab6f0856e7..0000000000
--- a/packages/components/icons/src/Users.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Users = /*#__PURE__*/ generateIcon({
-  name: 'Users',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/UsersTrimmed.tsx b/packages/components/icons/src/UsersTrimmed.tsx
deleted file mode 100644
index dbcdfec897..0000000000
--- a/packages/components/icons/src/UsersTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const UsersTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'UsersTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h16.5v18H0V0z" fill="none" />
-      <path d="M11.2 8.2c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2S9 4.8 9 6s1 2.2 2.2 2.2zm-6 0c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2S3 4.8 3 6s1 2.2 2.2 2.2zm0 1.6c-1.7 0-5.2.8-5.2 2.6v1.9h10.5v-1.9c0-1.8-3.5-2.6-5.3-2.6zm6 0h-.7c.9.6 1.5 1.5 1.5 2.6v1.9h4.5v-1.9c0-1.8-3.5-2.6-5.3-2.6z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 16.5 18',
-});
diff --git a/packages/components/icons/src/Video.tsx b/packages/components/icons/src/Video.tsx
deleted file mode 100644
index bb5a0b55ec..0000000000
--- a/packages/components/icons/src/Video.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Video = /*#__PURE__*/ generateIcon({
-  name: 'Video',
-  viewBox: '0 0 24 24',
-  path: (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M.5 0a.5.5 0 00-.5.5v23a.5.5 0 00.5.5h19a.5.5 0 00.5-.5v-17a.5.5 0 00-.146-.354l-6-6A.5.5 0 0013.5 0H.5zM1 23V1h12v5.5a.5.5 0 00.5.5H19v16H1zM18.293 6L14 1.707V6h4.293z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.258 8.063a.5.5 0 01.507.013l8 5a.5.5 0 010 .848l-8 5A.5.5 0 016 18.5v-10a.5.5 0 01.258-.437zM7 9.403v8.195l6.557-4.098L7 9.402z"
-      />
-    </>
-  ),
-});
diff --git a/packages/components/icons/src/Warning.tsx b/packages/components/icons/src/Warning.tsx
deleted file mode 100644
index 4df05cba1d..0000000000
--- a/packages/components/icons/src/Warning.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Warning = /*#__PURE__*/ generateIcon({
-  name: 'Warning',
-  path: (
-    <Fragment>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
-    </Fragment>
-  ),
-});
diff --git a/packages/components/icons/src/WarningTrimmed.tsx b/packages/components/icons/src/WarningTrimmed.tsx
deleted file mode 100644
index e9eef61ab2..0000000000
--- a/packages/components/icons/src/WarningTrimmed.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Fragment } from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const WarningTrimmed = /*#__PURE__*/ generateIcon({
-  name: 'WarningTrimmed',
-  path: (
-    <Fragment>
-      <path d="M0 0h16.5v18H0V0z" fill="none" />
-      <path d="M0 15.8h16.5L8.2 1.5 0 15.8zm9-2.3H7.5V12H9v1.5zm0-3H7.5v-3H9v3z" />
-    </Fragment>
-  ),
-  trimmed: true,
-  viewBox: '0 0 16.5 18',
-});
diff --git a/packages/components/icons/src/Workflows.tsx b/packages/components/icons/src/Workflows.tsx
deleted file mode 100644
index 15ca5564bd..0000000000
--- a/packages/components/icons/src/Workflows.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { generateIcon } from '@contentful/f36-icon';
-
-export const Workflows = /*#__PURE__*/ generateIcon({
-  name: 'Workflows',
-  path: (
-    <path d="M18.6 4l-4.4 4.533h3.3v7.934c0 1.246-.99 2.266-2.2 2.266s-2.2-1.02-2.2-2.266V8.533C13.1 6.03 11.131 4 8.7 4S4.3 6.029 4.3 8.533v7.934H1L5.4 21l4.4-4.533H6.5V8.533c0-1.246.99-2.266 2.2-2.266s2.2 1.02 2.2 2.266v7.934C10.9 18.97 12.869 21 15.3 21s4.4-2.029 4.4-4.533V8.533H23z" />
-  ),
-});
diff --git a/packages/components/icons/src/WorkflowsIcon.tsx b/packages/components/icons/src/WorkflowsIcon.tsx
new file mode 100644
index 0000000000..c8a586179b
--- /dev/null
+++ b/packages/components/icons/src/WorkflowsIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  IconVariant,
+  generateComponentWithVariants,
+} from '@contentful/f36-icon';
+import { generateIconComponent } from '@contentful/f36-icon/src';
+
+export const WorkflowsIcon = generateComponentWithVariants({
+  variants: {
+    [IconVariant.Active]: generateIconComponent({
+      path: (
+        <path
+          fill="currentColor"
+          d="M5 6.565v4.685h1.875a.625.625 0 0 1 .442 1.067l-2.5 2.5a.625.625 0 0 1-.884 0l-2.5-2.5a.625.625 0 0 1 .442-1.067H3.75V6.56s.003-.109.007-.163c.007-.093.02-.223.046-.376.05-.305.153-.72.365-1.144.212-.426.542-.87 1.047-1.207.51-.34 1.16-.545 1.973-.545.812 0 1.463.205 1.972.545.506.337.835.781 1.047 1.207a4.076 4.076 0 0 1 .418 1.683v6.875a2.828 2.828 0 0 0 .035.339c.038.223.11.51.25.79.14.278.338.536.623.727.282.188.686.334 1.28.334.593 0 .997-.146 1.279-.334.285-.19.484-.45.622-.726a2.833 2.833 0 0 0 .286-1.13v-5.31h-1.875a.625.625 0 0 1-.442-1.067l2.5-2.5a.625.625 0 0 1 .884 0l2.5 2.5a.625.625 0 0 1-.442 1.067H16.25v5.316a4.061 4.061 0 0 1-.052.54c-.051.303-.154.72-.365 1.143-.213.425-.542.87-1.048 1.207-.509.34-1.16.544-1.972.544-.813 0-1.464-.205-1.973-.544a3.093 3.093 0 0 1-1.047-1.207 4.081 4.081 0 0 1-.418-1.68v-.005s.048.008 0 .006V6.552a2.83 2.83 0 0 0-.035-.326 2.832 2.832 0 0 0-.25-.79 1.844 1.844 0 0 0-.623-.726c-.282-.188-.686-.335-1.28-.335-.593 0-.997.147-1.279.335-.285.19-.484.449-.622.726A2.832 2.832 0 0 0 5 6.565Z"
+        />
+      ),
+    }),
+    [IconVariant.Default]: generateIconComponent({
+      path: (
+        <path
+          fill="currentColor"
+          d="M5 6.565v6.301l1.433-1.433a.625.625 0 1 1 .884.884l-2.5 2.5a.625.625 0 0 1-.884 0l-2.5-2.5a.625.625 0 1 1 .884-.884l1.433 1.433V6.561l.001-.05.006-.114a4.08 4.08 0 0 1 .41-1.52c.213-.426.542-.87 1.048-1.208.51-.34 1.16-.544 1.973-.544.812 0 1.463.205 1.972.544.506.337.835.782 1.047 1.208a4.083 4.083 0 0 1 .417 1.633l.001.046v6.879a2.828 2.828 0 0 0 .035.339c.038.223.11.51.25.79.14.278.338.536.623.726.282.188.686.335 1.28.335.593 0 .997-.147 1.279-.335.285-.19.484-.448.622-.726A2.833 2.833 0 0 0 15 13.448V6.51l-1.433 1.433a.625.625 0 1 1-.884-.884l2.5-2.5a.625.625 0 0 1 .884 0l2.5 2.5a.625.625 0 1 1-.884.884L16.25 6.509v6.93l-.001.05a4.061 4.061 0 0 1-.051.49 4.08 4.08 0 0 1-.365 1.144c-.213.426-.543.87-1.048 1.208-.51.34-1.16.544-1.973.544-.812 0-1.463-.205-1.972-.544a3.093 3.093 0 0 1-1.047-1.208 4.081 4.081 0 0 1-.418-1.678v-6.88a2.83 2.83 0 0 0-.035-.339 2.832 2.832 0 0 0-.25-.79 1.844 1.844 0 0 0-.623-.727c-.282-.187-.686-.334-1.28-.334-.593 0-.997.147-1.279.334-.285.19-.484.45-.622.727A2.832 2.832 0 0 0 5 6.565Z"
+        />
+      ),
+    }),
+  },
+});
diff --git a/packages/components/icons/src/index.ts b/packages/components/icons/src/index.ts
index 91e0f41f69..ac136c7fab 100644
--- a/packages/components/icons/src/index.ts
+++ b/packages/components/icons/src/index.ts
@@ -1,183 +1,19 @@
-/**
- * This file is autogenerated by a build script, don't change it manually.
- */
-
 export type {
   GeneratedIconProps as IconProps,
   IconComponent,
   IconSize,
   IconVariant,
 } from '@contentful/f36-icon';
-export { Appearance as AppearanceIcon } from './Appearance';
-export { Archive as ArchiveIcon } from './Archive';
-export { ArrowBackward as ArrowBackwardIcon } from './ArrowBackward';
-export { ArrowDown as ArrowDownIcon } from './ArrowDown';
-export { ArrowDownTrimmed as ArrowDownTrimmedIcon } from './ArrowDownTrimmed';
-export { ArrowForward as ArrowForwardIcon } from './ArrowForward';
-export { ArrowForwardTrimmed as ArrowForwardTrimmedIcon } from './ArrowForwardTrimmed';
-export { ArrowUp as ArrowUpIcon } from './ArrowUp';
-export { ArrowUpTrimmed as ArrowUpTrimmedIcon } from './ArrowUpTrimmed';
-export { ArrowUpward as ArrowUpwardIcon } from './ArrowUpward';
-export { ArrowDownward as ArrowDownwardIcon } from './ArrowDownward';
-export { Asset as AssetIcon } from './Asset';
-export { AssetTrimmed as AssetTrimmedIcon } from './AssetTrimmed';
-export { Audio as AudioIcon } from './Audio';
-export { Calendar as CalendarIcon } from './Calendar';
-export { ChatBubble as ChatBubbleIcon } from './ChatBubble';
-export { ChatBubbleTrimmed as ChatBubbleTrimmedIcon } from './ChatBubbleTrimmed';
-export { CheckCircle as CheckCircleIcon } from './CheckCircle';
-export { CheckCircleTrimmed as CheckCircleTrimmedIcon } from './CheckCircleTrimmed';
-export { ChevronDown as ChevronDownIcon } from './ChevronDown';
-export { ChevronDownTrimmed as ChevronDownTrimmedIcon } from './ChevronDownTrimmed';
-export { ChevronLeft as ChevronLeftIcon } from './ChevronLeft';
-export { ChevronLeftTrimmed as ChevronLeftTrimmedIcon } from './ChevronLeftTrimmed';
-export { ChevronRight as ChevronRightIcon } from './ChevronRight';
-export { ChevronRightTrimmed as ChevronRightTrimmedIcon } from './ChevronRightTrimmed';
-export { ChevronUp as ChevronUpIcon } from './ChevronUp';
-export { ChevronUpTrimmed as ChevronUpTrimmedIcon } from './ChevronUpTrimmed';
-export { Clock as ClockIcon } from './Clock';
-export { ClockTrimmed as ClockTrimmedIcon } from './ClockTrimmed';
-export { Close as CloseIcon } from './Close';
-export { CloseTrimmed as CloseTrimmedIcon } from './CloseTrimmed';
-export { CloudUpload as CloudUploadIcon } from './CloudUpload';
-export { Code as CodeIcon } from './Code';
-export { CodeIllustration as CodeIllustrationIcon } from './CodeIllustration';
-export { CodeTrimmed as CodeTrimmedIcon } from './CodeTrimmed';
-export { Copy as CopyIcon } from './Copy';
-export { CopyTrimmed as CopyTrimmedIcon } from './CopyTrimmed';
-export { Cycle as CycleIcon } from './Cycle';
-export { CycleTrimmed as CycleTrimmedIcon } from './CycleTrimmed';
-export { Delete as DeleteIcon } from './Delete';
-export { DeleteTrimmed as DeleteTrimmedIcon } from './DeleteTrimmed';
-export { Done as DoneIcon } from './Done';
-export { DoubleArrow as DoubleArrowIcon } from './DoubleArrow';
-export { Download as DownloadIcon } from './Download';
-export { DownloadTrimmed as DownloadTrimmedIcon } from './DownloadTrimmed';
-export { Drag as DragIcon } from './Drag';
-export { DragTrimmed as DragTrimmedIcon } from './DragTrimmed';
-export { Diamond as DiamondIcon } from './Diamond';
-export { Edit as EditIcon } from './Edit';
-export { EditTrimmed as EditTrimmedIcon } from './EditTrimmed';
-export { EmbeddedEntryBlock as EmbeddedEntryBlockIcon } from './EmbeddedEntryBlock';
-export { EmbeddedEntryBlockTrimmed as EmbeddedEntryBlockTrimmedIcon } from './EmbeddedEntryBlockTrimmed';
-export { EmbeddedEntryInline as EmbeddedEntryInlineIcon } from './EmbeddedEntryInline';
-export { EmbeddedEntryInlineTrimmed as EmbeddedEntryInlineTrimmedIcon } from './EmbeddedEntryInlineTrimmed';
-export { Entry as EntryIcon } from './Entry';
-export { EntryTrimmed as EntryTrimmedIcon } from './EntryTrimmed';
-export { Environment as EnvironmentIcon } from './Environment';
-export { EnvironmentAlias as EnvironmentAliasIcon } from './EnvironmentAlias';
-export { ErrorCircle as ErrorCircleIcon } from './ErrorCircle';
-export { ErrorCircleOutline as ErrorCircleOutlineIcon } from './ErrorCircleOutline';
-export { ErrorCircleTrimmed as ErrorCircleTrimmedIcon } from './ErrorCircleTrimmed';
-export { ExternalLink as ExternalLinkIcon } from './ExternalLink';
-export { ExternalLinkTrimmed as ExternalLinkTrimmedIcon } from './ExternalLinkTrimmed';
-export { FaceHappy as FaceHappyIcon } from './FaceHappy';
-export { FaceHappyTrimmed as FaceHappyTrimmedIcon } from './FaceHappyTrimmed';
-export { Filter as FilterIcon } from './Filter';
-export { FilterTrimmed as FilterTrimmedIcon } from './FilterTrimmed';
-export { Folder as FolderIcon } from './Folder';
-export { FolderCreate as FolderCreateIcon } from './FolderCreate';
-export { FolderCreateTrimmed as FolderCreateTrimmedIcon } from './FolderCreateTrimmed';
-export { FolderOpen as FolderOpenIcon } from './FolderOpen';
-export { FolderOpenTrimmed as FolderOpenTrimmedIcon } from './FolderOpenTrimmed';
-export { FolderTrimmed as FolderTrimmedIcon } from './FolderTrimmed';
-export { FormatBold as FormatBoldIcon } from './FormatBold';
-export { FormatBoldTrimmed as FormatBoldTrimmedIcon } from './FormatBoldTrimmed';
-export { FormatItalic as FormatItalicIcon } from './FormatItalic';
-export { FormatItalicTrimmed as FormatItalicTrimmedIcon } from './FormatItalicTrimmed';
-export { FormatUnderlined as FormatUnderlinedIcon } from './FormatUnderlined';
-export { FormatUnderlinedTrimmed as FormatUnderlinedTrimmedIcon } from './FormatUnderlinedTrimmed';
-export { Gift as GiftIcon } from './Gift';
-export { Heading as HeadingIcon } from './Heading';
-export { HeadingOne as HeadingOneIcon } from './HeadingOne';
-export { HeadingOneTrimmed as HeadingOneTrimmedIcon } from './HeadingOneTrimmed';
-export { HeadingTrimmed as HeadingTrimmedIcon } from './HeadingTrimmed';
-export { HeadingTwo as HeadingTwoIcon } from './HeadingTwo';
-export { HeadingTwoTrimmed as HeadingTwoTrimmedIcon } from './HeadingTwoTrimmed';
-export { HelpCircle as HelpCircleIcon } from './HelpCircle';
-export { HelpCircleInverted as HelpCircleInvertedIcon } from './HelpCircleInverted';
-export { HelpCircleTrimmed as HelpCircleTrimmedIcon } from './HelpCircleTrimmed';
-export { HorizontalRule as HorizontalRuleIcon } from './HorizontalRule';
-export { HorizontalRuleTrimmed as HorizontalRuleTrimmedIcon } from './HorizontalRuleTrimmed';
-export { Image as ImageIcon } from './Image';
-export { InfoCircle as InfoCircleIcon } from './InfoCircle';
-export { InfoCircleTrimmed as InfoCircleTrimmedIcon } from './InfoCircleTrimmed';
-export { Language as LanguageIcon } from './Language';
-export { Link as LinkIcon } from './Link';
-export { LinkAlternate as LinkAlternateIcon } from './LinkAlternate';
-export { LinkTrimmed as LinkTrimmedIcon } from './LinkTrimmed';
-export { ListBulleted as ListBulletedIcon } from './ListBulleted';
-export { ListBulletedTrimmed as ListBulletedTrimmedIcon } from './ListBulletedTrimmed';
-export { ListNumbered as ListNumberedIcon } from './ListNumbered';
-export { ListNumberedTrimmed as ListNumberedTrimmedIcon } from './ListNumberedTrimmed';
-export { Lock as LockIcon } from './Lock';
-export { LockTrimmed as LockTrimmedIcon } from './LockTrimmed';
-export { Logout as LogoutIcon } from './Logout';
-export { LooksOne as LooksOneIcon } from './LooksOne';
-export { LooksOneTrimmed as LooksOneTrimmedIcon } from './LooksOneTrimmed';
-export { LooksTwo as LooksTwoIcon } from './LooksTwo';
-export { LooksTwoTrimmed as LooksTwoTrimmedIcon } from './LooksTwoTrimmed';
-export { Markup as MarkupIcon } from './Markup';
-export { Menu as MenuIcon } from './Menu';
-export { MenuTrimmed as MenuTrimmedIcon } from './MenuTrimmed';
-export { Minus as MinusIcon } from './Minus';
-export { MoreHorizontal as MoreHorizontalIcon } from './MoreHorizontal';
-export { MoreHorizontalTrimmed as MoreHorizontalTrimmedIcon } from './MoreHorizontalTrimmed';
-export { MoreVertical as MoreVerticalIcon } from './MoreVertical';
-export { MoreVerticalTrimmed as MoreVerticalTrimmedIcon } from './MoreVerticalTrimmed';
-export { Page as PageIcon } from './Page';
-export { PageTrimmed as PageTrimmedIcon } from './PageTrimmed';
-export { Pdf as PdfIcon } from './Pdf';
-export { Person as PersonIcon } from './Person';
-export { Plaintext as PlaintextIcon } from './Plaintext';
-export { Plus as PlusIcon } from './Plus';
-export { PlusCircle as PlusCircleIcon } from './PlusCircle';
-export { PlusCircleTrimmed as PlusCircleTrimmedIcon } from './PlusCircleTrimmed';
-export { PlusTrimmed as PlusTrimmedIcon } from './PlusTrimmed';
-export { Presentation as PresentationIcon } from './Presentation';
-export { Preview as PreviewIcon } from './Preview';
-export { PreviewOff as PreviewOffIcon } from './PreviewOff';
-export { Puzzle as PuzzleIcon } from './Puzzle';
-export { Quote as QuoteIcon } from './Quote';
-export { QuoteTrimmed as QuoteTrimmedIcon } from './QuoteTrimmed';
-export { Receipt as ReceiptIcon } from './Receipt';
-export { ReceiptTrimmed as ReceiptTrimmedIcon } from './ReceiptTrimmed';
-export { References as ReferencesIcon } from './References';
-export { Release as ReleaseIcon } from './Release';
-export { ReleaseTrimmed as ReleaseTrimmedIcon } from './ReleaseTrimmed';
-export { Richtext as RichtextIcon } from './Richtext';
-export { Search as SearchIcon } from './Search';
-export { SearchTrimmed as SearchTrimmedIcon } from './SearchTrimmed';
-export { Settings as SettingsIcon } from './Settings';
-export { SettingsTrimmed as SettingsTrimmedIcon } from './SettingsTrimmed';
-export { ShoppingCart as ShoppingCartIcon } from './ShoppingCart';
-export { Sort as SortIcon } from './Sort';
-export { SortAscending as SortAscendingIcon } from './SortAscending';
-export { SortDescending as SortDescendingIcon } from './SortDescending';
-export { ShoppingCartTrimmed as ShoppingCartTrimmedIcon } from './ShoppingCartTrimmed';
-export { Spreadsheet as SpreadsheetIcon } from './Spreadsheet';
-export { Star as StarIcon } from './Star';
-export { StarTrimmed as StarTrimmedIcon } from './StarTrimmed';
-export { Subscript as SubscriptIcon } from './Subscript';
-export { SubscriptTrimmed as SubscriptTrimmedIcon } from './SubscriptTrimmed';
-export { Superscript as SuperscriptIcon } from './Superscript';
-export { SuperscriptTrimmed as SuperscriptTrimmedIcon } from './SuperscriptTrimmed';
-export { Tab as TabIcon } from './Tab';
-export { Table as TableIcon } from './Table';
-export { Tags as TagsIcon } from './Tags';
-export { Text as TextIcon } from './Text';
-export { TextTrimmed as TextTrimmedIcon } from './TextTrimmed';
-export { ThumbDown as ThumbDownIcon } from './ThumbDown';
-export { ThumbDownTrimmed as ThumbDownTrimmedIcon } from './ThumbDownTrimmed';
-export { ThumbUp as ThumbUpIcon } from './ThumbUp';
-export { ThumbUpTrimmed as ThumbUpTrimmedIcon } from './ThumbUpTrimmed';
-export { Toggle as ToggleIcon } from './Toggle';
-export { TriangleOutline as TriangleOutlineIcon } from './TriangleOutline';
-export { Users as UsersIcon } from './Users';
-export { UsersTrimmed as UsersTrimmedIcon } from './UsersTrimmed';
-export { Video as VideoIcon } from './Video';
-export { Warning as WarningIcon } from './Warning';
-export { WarningTrimmed as WarningTrimmedIcon } from './WarningTrimmed';
-export { Workflows as WorkflowsIcon } from './Workflows';
 
-export * from './v5/index';
+export * from './PhosphorIcons';
+
+export * from './EmbeddedBlockIcon';
+export * from './EmbeddedLineIcon';
+export * from './EntryIcon';
+export * from './EnvironmentAliasIcon';
+export * from './EnvironmentIcon';
+export * from './ReleaseIcon';
+export * from './RichTextIcon';
+export * from './TextSubscriptIcon';
+export * from './TextSuperscriptIcon';
+export * from './WorkflowsIcon';
diff --git a/packages/components/icons/src/v5/ArrowCounterClockwise.tsx b/packages/components/icons/src/v5/ArrowCounterClockwise.tsx
deleted file mode 100644
index 7d10f38836..0000000000
--- a/packages/components/icons/src/v5/ArrowCounterClockwise.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ArrowCounterClockwise as PhosphorIcon } from '@phosphor-icons/react';
-
-import { generateForma36Icon } from '../../../icon/src/generateIcon';
-
-export const ArrowCounterClockwiseIcon = generateForma36Icon(PhosphorIcon);
diff --git a/packages/components/icons/src/v5/index.ts b/packages/components/icons/src/v5/index.ts
deleted file mode 100644
index 78627b4915..0000000000
--- a/packages/components/icons/src/v5/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ArrowCounterClockwise';
diff --git a/packages/components/icons/stories/Icons.stories.tsx b/packages/components/icons/stories/Icons.stories.tsx
index a105725a7b..8c0e3f209d 100644
--- a/packages/components/icons/stories/Icons.stories.tsx
+++ b/packages/components/icons/stories/Icons.stories.tsx
@@ -1,10 +1,9 @@
 import React, { Fragment } from 'react';
-import { Flex, Grid } from '@contentful/f36-core';
-import { SectionHeading } from '@contentful/f36-typography';
+import { Box, Flex } from '@contentful/f36-core';
+import { SectionHeading, Text } from '@contentful/f36-typography';
 import type { Meta, Story } from '@storybook/react/types-6-0';
-
 import * as icons from '../src';
-import type { IconProps } from '../src';
+import type { IconProps, IconComponent } from '../src';
 
 export default {
   argTypes: {
@@ -41,25 +40,24 @@ export const Overview: Story = () => {
         Built-in icons
       </SectionHeading>
 
-      <Grid columns="auto 1fr 1fr 1fr 1fr">
-        {Object.keys(icons).map((icon) => {
-          const Component = icons[icon];
+      {Object.keys(icons).map((icon) => {
+        const Component = icons[icon] as IconComponent;
+
+        return (
+          <Box key={icon} marginTop="spacingM">
+            <Text>{icon}</Text>
 
-          return (
-            <Flex
-              key={icon}
-              padding="spacingS"
-              marginRight="spacingM"
-              alignItems="center"
-              justifyContent="flex-start"
-              flexGrow={0}
-            >
-              <Flex marginRight="spacingS">{icon}</Flex>
+            <Flex alignItems="center" flexDirection="row" gap="spacingL">
               <Component />
+              <Component isActive />
+              <Component size="small" />
+              <Component isActive size="small" />
+              <Component size="tiny" />
+              <Component isActive size="tiny" />
             </Flex>
-          );
-        })}
-      </Grid>
+          </Box>
+        );
+      })}
     </Fragment>
   );
 };
diff --git a/packages/components/icons/stories/NewIcon.stories.tsx b/packages/components/icons/stories/NewIcon.stories.tsx
deleted file mode 100644
index e6e0fbcecb..0000000000
--- a/packages/components/icons/stories/NewIcon.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { Fragment } from 'react';
-import { SectionHeading } from '@contentful/f36-typography';
-import type { Meta, Story } from '@storybook/react/types-6-0';
-
-import * as icons from '../src/v5';
-import type { IconProps } from '../src';
-
-export default {
-  argTypes: {
-    as: { control: { disable: true } },
-    className: { control: { disable: true } },
-    style: { control: { disable: true } },
-    testId: { control: { disable: true } },
-  },
-  component: icons.ArrowCounterClockwiseIcon,
-  parameters: {
-    propTypes: [icons.ArrowCounterClockwiseIcon['__docgenInfo']],
-  },
-  title: 'Components/Icons/new',
-} as Meta;
-
-export const Overview: Story<IconProps> = () => {
-  return (
-    <Fragment>
-      <SectionHeading as="h3" marginRight="spacingS" marginBottom="spacingS">
-        Forma 36 v5 icon proposal
-      </SectionHeading>
-
-      <icons.ArrowCounterClockwiseIcon />
-      <icons.ArrowCounterClockwiseIcon isActive />
-      <icons.ArrowCounterClockwiseIcon size="small" />
-      <icons.ArrowCounterClockwiseIcon isActive size="small" />
-    </Fragment>
-  );
-};