From 717f7080d17df72d2b21409a3f4e8aa62cdb65cd Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sat, 18 Oct 2025 22:41:50 +0100
Subject: [PATCH] Fixes on icons

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 docs-ui/src/app/iconography/page.mdx          | 24 -------------
 .../components/CustomTheme/customTheme.tsx    |  9 +++--
 .../components/IconLibrary/IconLibrary.tsx    | 22 ------------
 docs-ui/src/components/IconLibrary/index.ts   |  1 -
 .../components/IconLibrary/styles.module.css  | 28 ---------------
 .../src/components/PropsTable/PropsTable.tsx  |  7 ++--
 docs-ui/src/content/components/icon.mdx       | 36 -------------------
 docs-ui/src/content/components/icon.props.ts  | 25 -------------
 docs-ui/src/utils/data.ts                     |  4 ---
 docs-ui/src/utils/playground-context.tsx      |  2 +-
 10 files changed, 10 insertions(+), 148 deletions(-)
 delete mode 100644 docs-ui/src/app/iconography/page.mdx
 delete mode 100644 docs-ui/src/components/IconLibrary/IconLibrary.tsx
 delete mode 100644 docs-ui/src/components/IconLibrary/index.ts
 delete mode 100644 docs-ui/src/components/IconLibrary/styles.module.css
 delete mode 100644 docs-ui/src/content/components/icon.mdx
 delete mode 100644 docs-ui/src/content/components/icon.props.ts

diff --git a/docs-ui/src/app/iconography/page.mdx b/docs-ui/src/app/iconography/page.mdx
deleted file mode 100644
index b4b1aa2183..0000000000
--- a/docs-ui/src/app/iconography/page.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { CodeBlock } from '@/components/CodeBlock';
-import { IconLibrary } from '@/components/IconLibrary';
-
-# Iconography
-
-All our default icons are provided by [Remix Icon](https://remixicon.com/). We
-don't import all icons to reduce the bundle size but we cherry pick a nice
-selection for you to use in your application. The list of names is set down
-below. To use an icon, you can use the `Icon` component and pass the name of
-the icon you want to use.
-
-<CodeBlock code={`<Icon name="heart" />`} />
-
-## Icon overrides
-
-You can override any icons in our library by using the `IconProvider` at the root of your application.
-
-<CodeBlock
-  code={`<IconProvider overrides={{ heart: () => <div>Custom Icon</div> }} />`}
-/>
-
-## Icon library
-
-<IconLibrary />
diff --git a/docs-ui/src/components/CustomTheme/customTheme.tsx b/docs-ui/src/components/CustomTheme/customTheme.tsx
index c70d59173a..ae765d7d88 100644
--- a/docs-ui/src/components/CustomTheme/customTheme.tsx
+++ b/docs-ui/src/components/CustomTheme/customTheme.tsx
@@ -6,9 +6,9 @@ import { sass } from '@codemirror/lang-sass';
 import styles from './styles.module.css';
 import { usePlayground } from '@/utils/playground-context';
 import { AnimatePresence, motion } from 'motion/react';
-import { Icon } from '../../../../packages/ui';
 import { createTheme } from '@uiw/codemirror-themes';
 import { tags as t } from '@lezer/highlight';
+import { RiArrowDownSLine } from '@remixicon/react';
 
 const defaultTheme = `:root {
   --bui-bg-solid: #000;
@@ -125,7 +125,12 @@ export const CustomTheme = () => {
                 className={styles.buttonClose}
                 onClick={() => setOpen(!open)}
               >
-                <Icon name={open ? 'chevron-down' : 'chevron-up'} />
+                <RiArrowDownSLine
+                  aria-hidden="true"
+                  style={{
+                    transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+                  }}
+                />
               </button>
             </div>
           </div>
diff --git a/docs-ui/src/components/IconLibrary/IconLibrary.tsx b/docs-ui/src/components/IconLibrary/IconLibrary.tsx
deleted file mode 100644
index bad51e62bf..0000000000
--- a/docs-ui/src/components/IconLibrary/IconLibrary.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client';
-
-import { Text, Icon, icons } from '../../../../packages/ui';
-import type { IconNames } from '../../../../packages/ui';
-import styles from './styles.module.css';
-
-export const IconLibrary = () => {
-  const list = Object.keys(icons);
-
-  return (
-    <div className={styles.library}>
-      {list.map(icon => (
-        <div key={icon} className={styles.item}>
-          <div className={styles.icon}>
-            <Icon name={icon as IconNames} />
-          </div>
-          <Text variant="body">{icon}</Text>
-        </div>
-      ))}
-    </div>
-  );
-};
diff --git a/docs-ui/src/components/IconLibrary/index.ts b/docs-ui/src/components/IconLibrary/index.ts
deleted file mode 100644
index b21b4511d3..0000000000
--- a/docs-ui/src/components/IconLibrary/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { IconLibrary } from './IconLibrary';
diff --git a/docs-ui/src/components/IconLibrary/styles.module.css b/docs-ui/src/components/IconLibrary/styles.module.css
deleted file mode 100644
index c9f317ef6a..0000000000
--- a/docs-ui/src/components/IconLibrary/styles.module.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.library {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 1rem;
-}
-
-.item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.icon {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  height: 80px;
-  border-radius: 0.5rem;
-  border: 1px solid var(--border);
-  background-color: var(--panel);
-  transition: background-color 0.2s ease-in-out;
-
-  &:hover {
-    background-color: var(--surface-1);
-  }
-}
diff --git a/docs-ui/src/components/PropsTable/PropsTable.tsx b/docs-ui/src/components/PropsTable/PropsTable.tsx
index bd54b1e245..86b7b274ef 100644
--- a/docs-ui/src/components/PropsTable/PropsTable.tsx
+++ b/docs-ui/src/components/PropsTable/PropsTable.tsx
@@ -3,7 +3,6 @@
 import * as Table from '../Table';
 import { Chip } from '../Chip';
 import { TypePopup } from './TypePopup';
-import { icons } from '../../../../packages/ui';
 
 import { PropDef } from '@/utils/propDefs';
 
@@ -33,10 +32,8 @@ export const PropsTable = <T extends Record<string, PropData>>({
       <Table.Body>
         {Object.keys(data).map(n => {
           const enumValues =
-            data[n].values === 'icon'
-              ? Object.keys(icons).map(icon => <Chip key={icon}>{icon}</Chip>)
-              : Array.isArray(data[n].values) &&
-                data[n].values.map(t => <Chip key={t}>{t}</Chip>);
+            Array.isArray(data[n].values) &&
+            data[n].values.map(t => <Chip key={t}>{t}</Chip>);
 
           return (
             <Table.Row key={n}>
diff --git a/docs-ui/src/content/components/icon.mdx b/docs-ui/src/content/components/icon.mdx
deleted file mode 100644
index 91860a7e5e..0000000000
--- a/docs-ui/src/content/components/icon.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { IconSnippet } from '@/snippets/stories-snippets';
-import { Snippet } from '@/components/Snippet';
-import { CodeBlock } from '@/components/CodeBlock';
-import {
-  iconPropDefs,
-  iconUsageSnippet,
-  iconDefaultSnippet,
-} from './icon.props';
-import { PageTitle } from '@/components/PageTitle';
-import { Theming } from '@/components/Theming';
-import { ChangelogComponent } from '@/components/ChangelogComponent';
-
-<PageTitle
-  title="Icon"
-  description="Icons are used to represent an action or a state."
-/>
-
-<Snippet
-  py={4}
-  align="center"
-  preview={<IconSnippet story="Default" />}
-  code={iconDefaultSnippet}
-/>
-
-## Usage
-
-<CodeBlock code={iconUsageSnippet} />
-
-## API reference
-
-<PropsTable data={iconPropDefs} />
-
-<Theming component="Icon" />
-
-<ChangelogComponent component="icon" />
diff --git a/docs-ui/src/content/components/icon.props.ts b/docs-ui/src/content/components/icon.props.ts
deleted file mode 100644
index 7bec0980f6..0000000000
--- a/docs-ui/src/content/components/icon.props.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {
-  classNamePropDefs,
-  stylePropDefs,
-  type PropDef,
-} from '@/utils/propDefs';
-
-export const iconPropDefs: Record<string, PropDef> = {
-  name: {
-    type: 'enum',
-    values: 'icon',
-    responsive: false,
-  },
-  size: {
-    type: 'number',
-    responsive: false,
-  },
-  ...classNamePropDefs,
-  ...stylePropDefs,
-};
-
-export const iconUsageSnippet = `import { Icon } from '@backstage/ui';
-
-<Icon />`;
-
-export const iconDefaultSnippet = `<Icon name="heart" />`;
diff --git a/docs-ui/src/utils/data.ts b/docs-ui/src/utils/data.ts
index d28a10d5f2..bd5b7b1ba1 100644
--- a/docs-ui/src/utils/data.ts
+++ b/docs-ui/src/utils/data.ts
@@ -24,10 +24,6 @@ export const overview: Page[] = [
 ];
 
 export const coreConcepts: Page[] = [
-  {
-    title: 'Iconography',
-    slug: 'iconography',
-  },
   {
     title: 'Layout',
     slug: 'layout',
diff --git a/docs-ui/src/utils/playground-context.tsx b/docs-ui/src/utils/playground-context.tsx
index 56ed9dc48a..2f8ffbaee4 100644
--- a/docs-ui/src/utils/playground-context.tsx
+++ b/docs-ui/src/utils/playground-context.tsx
@@ -8,7 +8,7 @@ import {
 import { components } from './data';
 
 type Theme = 'light' | 'dark';
-type ThemeName = 'backstage' | 'spotify';
+type ThemeName = 'backstage' | 'spotify' | 'custom';
 
 // Create a context with an empty array as the default value
 const PlaygroundContext = createContext<{