Converted all icons

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/src/components/Button/Button.stories.tsx

@@ -18,7 +18,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from './Button';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
-import { Icon } from '../Icon';
+import { RiArrowRightSLine, RiCloudLine } from '@remixicon/react';
 
 const meta = {
   title: 'Backstage UI/Button',
@@ -57,13 +57,13 @@ export const Variants: Story = {
   },
   render: () => (
     <Flex align="center">
-      <Button iconStart={<Icon name="cloud" />} variant="primary">
+      <Button iconStart={<RiCloudLine />} variant="primary">
         Button
       </Button>
-      <Button iconStart={<Icon name="cloud" />} variant="secondary">
+      <Button iconStart={<RiCloudLine />} variant="secondary">
         Button
       </Button>
-      <Button iconStart={<Icon name="cloud" />} variant="tertiary">
+      <Button iconStart={<RiCloudLine />} variant="tertiary">
         Button
       </Button>
     </Flex>
@@ -76,10 +76,10 @@ export const Sizes: Story = {
   },
   render: () => (
     <Flex align="center">
-      <Button size="small" iconStart={<Icon name="cloud" />}>
+      <Button size="small" iconStart={<RiCloudLine />}>
         Small
       </Button>
-      <Button size="medium" iconStart={<Icon name="cloud" />}>
+      <Button size="medium" iconStart={<RiCloudLine />}>
         Medium
       </Button>
     </Flex>
@@ -92,12 +92,12 @@ export const WithIcons: Story = {
   },
   render: args => (
     <Flex align="center">
-      <Button {...args} iconStart={<Icon name="cloud" />} />
-      <Button {...args} iconEnd={<Icon name="chevron-right" />} />
+      <Button {...args} iconStart={<RiCloudLine />} />
+      <Button {...args} iconEnd={<RiArrowRightSLine />} />
       <Button
         {...args}
-        iconStart={<Icon name="cloud" />}
-        iconEnd={<Icon name="chevron-right" />}
+        iconStart={<RiCloudLine />}
+        iconEnd={<RiArrowRightSLine />}
       />
     </Flex>
   ),
@@ -109,12 +109,12 @@ export const FullWidth: Story = {
   },
   render: args => (
     <Flex direction="column" gap="4" style={{ width: '300px' }}>
-      <Button {...args} iconStart={<Icon name="cloud" />} />
-      <Button {...args} iconEnd={<Icon name="chevron-right" />} />
+      <Button {...args} iconStart={<RiCloudLine />} />
+      <Button {...args} iconEnd={<RiArrowRightSLine />} />
       <Button
         {...args}
-        iconStart={<Icon name="cloud" />}
-        iconEnd={<Icon name="chevron-right" />}
+        iconStart={<RiCloudLine />}
+        iconEnd={<RiArrowRightSLine />}
       />
     </Flex>
   ),
@@ -167,23 +167,19 @@ export const Playground: Story = {
               <Button variant={variant} size={size}>
                 Button
               </Button>
+              <Button iconStart={<RiCloudLine />} variant={variant} size={size}>
+                Button
+              </Button>
               <Button
-                iconStart={<Icon name="cloud" />}
+                iconEnd={<RiArrowRightSLine />}
                 variant={variant}
                 size={size}
               >
                 Button
               </Button>
               <Button
-                iconEnd={<Icon name="chevron-right" />}
-                variant={variant}
-                size={size}
-              >
-                Button
-              </Button>
-              <Button
-                iconStart={<Icon name="cloud" />}
-                iconEnd={<Icon name="chevron-right" />}
+                iconStart={<RiCloudLine />}
+                iconEnd={<RiArrowRightSLine />}
                 style={{ width: '200px' }}
                 variant={variant}
                 size={size}
@@ -194,7 +190,7 @@ export const Playground: Story = {
                 Button
               </Button>
               <Button
-                iconStart={<Icon name="cloud" />}
+                iconStart={<RiCloudLine />}
                 variant={variant}
                 size={size}
                 isDisabled
@@ -202,7 +198,7 @@ export const Playground: Story = {
                 Button
               </Button>
               <Button
-                iconEnd={<Icon name="chevron-right" />}
+                iconEnd={<RiArrowRightSLine />}
                 variant={variant}
                 size={size}
                 isDisabled

packages/ui/src/components/ButtonIcon/ButtonIcon.stories.tsx

@@ -17,7 +17,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { ButtonIcon } from './ButtonIcon';
 import { Flex } from '../Flex';
-import { Icon } from '../Icon';
+import { RiCloudLine } from '@remixicon/react';
 
 const meta = {
   title: 'Backstage UI/ButtonIcon',
@@ -38,15 +38,15 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: () => <ButtonIcon icon={<Icon name="cloud" />} />,
+  render: () => <ButtonIcon icon={<RiCloudLine />} />,
 };
 
 export const Variants: Story = {
   render: () => (
     <Flex align="center" gap="2">
-      <ButtonIcon icon={<Icon name="cloud" />} variant="primary" />
-      <ButtonIcon icon={<Icon name="cloud" />} variant="secondary" />
-      <ButtonIcon icon={<Icon name="cloud" />} variant="tertiary" />
+      <ButtonIcon icon={<RiCloudLine />} variant="primary" />
+      <ButtonIcon icon={<RiCloudLine />} variant="secondary" />
+      <ButtonIcon icon={<RiCloudLine />} variant="tertiary" />
     </Flex>
   ),
 };
@@ -54,8 +54,8 @@ export const Variants: Story = {
 export const Sizes: Story = {
   render: () => (
     <Flex align="center" gap="2">
-      <ButtonIcon icon={<Icon name="cloud" />} size="small" />
-      <ButtonIcon icon={<Icon name="cloud" />} size="medium" />
+      <ButtonIcon icon={<RiCloudLine />} size="small" />
+      <ButtonIcon icon={<RiCloudLine />} size="medium" />
     </Flex>
   ),
 };
@@ -63,9 +63,9 @@ export const Sizes: Story = {
 export const Disabled: Story = {
   render: () => (
     <Flex direction="row" gap="2">
-      <ButtonIcon isDisabled icon={<Icon name="cloud" />} variant="primary" />
-      <ButtonIcon isDisabled icon={<Icon name="cloud" />} variant="secondary" />
-      <ButtonIcon isDisabled icon={<Icon name="cloud" />} variant="tertiary" />
+      <ButtonIcon isDisabled icon={<RiCloudLine />} variant="primary" />
+      <ButtonIcon isDisabled icon={<RiCloudLine />} variant="secondary" />
+      <ButtonIcon isDisabled icon={<RiCloudLine />} variant="tertiary" />
     </Flex>
   ),
 };
@@ -81,5 +81,5 @@ export const Responsive: Story = {
       sm: 'medium',
     },
   },
-  render: args => <ButtonIcon {...args} icon={<Icon name="cloud" />} />,
+  render: args => <ButtonIcon {...args} icon={<RiCloudLine />} />,
 };

packages/ui/src/components/ButtonLink/ButtonLink.stories.tsx

@@ -17,8 +17,8 @@
 import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
 import { ButtonLink } from './ButtonLink';
 import { Flex } from '../Flex';
-import { Icon } from '../Icon';
 import { MemoryRouter } from 'react-router-dom';
+import { RiArrowRightSLine, RiCloudLine } from '@remixicon/react';
 
 const meta = {
   title: 'Backstage UI/ButtonLink',
@@ -55,7 +55,7 @@ export const Variants: Story = {
   render: () => (
     <Flex align="center">
       <ButtonLink
-        iconStart={<Icon name="cloud" />}
+        iconStart={<RiCloudLine />}
         variant="primary"
         href="https://ui.backstage.io"
         target="_blank"
@@ -63,7 +63,7 @@ export const Variants: Story = {
         Button
       </ButtonLink>
       <ButtonLink
-        iconStart={<Icon name="cloud" />}
+        iconStart={<RiCloudLine />}
         variant="secondary"
         href="https://ui.backstage.io"
         target="_blank"
@@ -71,7 +71,7 @@ export const Variants: Story = {
         Button
       </ButtonLink>
       <ButtonLink
-        iconStart={<Icon name="cloud" />}
+        iconStart={<RiCloudLine />}
         variant="tertiary"
         href="https://ui.backstage.io"
         target="_blank"
@@ -88,10 +88,10 @@ export const Sizes: Story = {
   },
   render: () => (
     <Flex align="center">
-      <ButtonLink size="small" iconStart={<Icon name="cloud" />}>
+      <ButtonLink size="small" iconStart={<RiCloudLine />}>
         Small
       </ButtonLink>
-      <ButtonLink size="medium" iconStart={<Icon name="cloud" />}>
+      <ButtonLink size="medium" iconStart={<RiCloudLine />}>
         Medium
       </ButtonLink>
     </Flex>
@@ -104,12 +104,12 @@ export const WithIcons: Story = {
   },
   render: args => (
     <Flex align="center">
-      <ButtonLink {...args} iconStart={<Icon name="cloud" />} />
-      <ButtonLink {...args} iconEnd={<Icon name="chevron-right" />} />
+      <ButtonLink {...args} iconStart={<RiCloudLine />} />
+      <ButtonLink {...args} iconEnd={<RiArrowRightSLine />} />
       <ButtonLink
         {...args}
-        iconStart={<Icon name="cloud" />}
-        iconEnd={<Icon name="chevron-right" />}
+        iconStart={<RiCloudLine />}
+        iconEnd={<RiArrowRightSLine />}
       />
     </Flex>
   ),
@@ -121,12 +121,12 @@ export const FullWidth: Story = {
   },
   render: args => (
     <Flex direction="column" gap="4" style={{ width: '300px' }}>
-      <ButtonLink {...args} iconStart={<Icon name="cloud" />} />
-      <ButtonLink {...args} iconEnd={<Icon name="chevron-right" />} />
+      <ButtonLink {...args} iconStart={<RiCloudLine />} />
+      <ButtonLink {...args} iconEnd={<RiArrowRightSLine />} />
       <ButtonLink
         {...args}
-        iconStart={<Icon name="cloud" />}
-        iconEnd={<Icon name="chevron-right" />}
+        iconStart={<RiCloudLine />}
+        iconEnd={<RiArrowRightSLine />}
       />
     </Flex>
   ),

packages/ui/src/components/Checkbox/Checkbox.tsx

@@ -16,11 +16,11 @@
 
 import { forwardRef } from 'react';
 import { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';
-import { Icon } from '../..';
 import type { CheckboxProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 import clsx from 'clsx';
 import styles from './Checkbox.module.css';
+import { RiCheckLine } from '@remixicon/react';
 
 /** @public */
 export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
@@ -38,7 +38,7 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
         <CheckboxPrimitive.Indicator
           className={clsx(classNames.indicator, styles[classNames.indicator])}
         >
-          <Icon name="check" size={12} />
+          <RiCheckLine size={12} />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
     );

packages/ui/src/components/Collapsible/Collapsible.stories.tsx

@@ -19,7 +19,7 @@ import { Collapsible } from './Collapsible';
 import { Button } from '../Button';
 import { Box } from '../Box';
 import { Text } from '../Text';
-import { Icon } from '../Icon';
+import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react';
 
 const meta = {
   title: 'Backstage UI/Collapsible',
@@ -43,13 +43,7 @@ export const Default: Story = {
           render={(props, state) => (
             <Button
               variant="secondary"
-              iconEnd={
-                state.open ? (
-                  <Icon name="chevron-up" />
-                ) : (
-                  <Icon name="chevron-down" />
-                )
-              }
+              iconEnd={state.open ? <RiArrowUpSLine /> : <RiArrowDownSLine />}
               {...props}
             >
               {state.open ? 'Close Panel' : 'Open Panel'}

packages/ui/src/components/PasswordField/PasswordField.stories.tsx

@@ -17,9 +17,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { PasswordField } from './PasswordField';
 import { Form } from 'react-aria-components';
-import { Icon } from '../Icon';
 import { Flex } from '../Flex';
 import { FieldLabel } from '../FieldLabel';
+import { RiSparklingLine } from '@remixicon/react';
 
 const meta = {
   title: 'Backstage UI/PasswordField',
@@ -53,8 +53,8 @@ export const Sizes: Story = {
   },
   render: args => (
     <Flex direction="row" gap="4" style={{ width: '100%', maxWidth: '600px' }}>
-      <PasswordField {...args} size="small" icon={<Icon name="sparkling" />} />
-      <PasswordField {...args} size="medium" icon={<Icon name="sparkling" />} />
+      <PasswordField {...args} size="small" icon={<RiSparklingLine />} />
+      <PasswordField {...args} size="medium" icon={<RiSparklingLine />} />
     </Flex>
   ),
 };
@@ -99,7 +99,7 @@ export const WithIcon: Story = {
     ...Default.args,
   },
   render: args => (
-    <PasswordField {...args} size="small" icon={<Icon name="sparkling" />} />
+    <PasswordField {...args} size="small" icon={<RiSparklingLine />} />
   ),
 };
 

packages/ui/src/components/SearchField/SearchField.stories.tsx

@@ -17,11 +17,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { SearchField } from './SearchField';
 import { Form } from 'react-aria-components';
-import { Icon } from '../Icon';
 import { Flex } from '../Flex';
 import { FieldLabel } from '../FieldLabel';
 import { ButtonIcon } from '../ButtonIcon';
-import { RiCactusLine } from '@remixicon/react';
+import { RiCactusLine, RiEBike2Line } from '@remixicon/react';
 import { Button } from '../Button';
 import { Header } from '../Header';
 import { MemoryRouter } from 'react-router-dom';
@@ -111,7 +110,7 @@ export const WithIcon: Story = {
       {...args}
       placeholder="Enter a URL"
       size="small"
-      icon={<Icon name="eye" />}
+      icon={<RiEBike2Line />}
     />
   ),
 };

packages/ui/src/components/Select/Select.tsx

@@ -28,10 +28,10 @@ import clsx from 'clsx';
 import { SelectProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 import { FieldLabel } from '../FieldLabel';
-import { Icon } from '../Icon';
 import { FieldError } from '../FieldError';
 import styles from './Select.module.css';
 import stylesPopover from '../Popover/Popover.module.css';
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react';
 
 /** @public */
 export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
@@ -91,7 +91,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
         <SelectValue
           className={clsx(classNames.value, styles[classNames.value])}
         />
-        <Icon aria-hidden="true" name="chevron-down" />
+        <RiArrowDownSLine aria-hidden="true" />
       </Button>
       <FieldError />
       <Popover
@@ -113,7 +113,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
                   styles[classNames.itemIndicator],
                 )}
               >
-                <Icon name="check" />
+                <RiCheckLine />
               </div>
               <Text
                 slot="label"

packages/ui/src/components/Table/components/Column.tsx

@@ -15,11 +15,11 @@
  */
 
 import { Column as ReactAriaColumn } from 'react-aria-components';
-import { Icon } from '../../Icon';
 import { useStyles } from '../../../hooks/useStyles';
 import styles from '../Table.module.css';
 import clsx from 'clsx';
 import { ColumnProps } from '../types';
+import { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';
 
 /** @public */
 export const Column = (props: ColumnProps) => {
@@ -51,9 +51,9 @@ export const Column = (props: ColumnProps) => {
               )}
             >
               {sortDirection === 'ascending' ? (
-                <Icon name="arrow-up" size={16} />
+                <RiArrowUpLine size={16} />
               ) : (
-                <Icon name="arrow-down" size={16} />
+                <RiArrowDownLine size={16} />
               )}
             </span>
           )}

packages/ui/src/components/TablePagination/TablePagination.tsx

@@ -15,10 +15,11 @@
  */
 
 import clsx from 'clsx';
-import { Text, ButtonIcon, Select, Icon } from '../..';
+import { Text, ButtonIcon, Select } from '../..';
 import type { TablePaginationProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 import styles from './TablePagination.module.css';
+import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
 
 /**
  * Pagination controls for Table components with page navigation and size selection.
@@ -109,7 +110,7 @@ export function TablePagination(props: TablePaginationProps) {
           size="small"
           onClick={previousPage}
           isDisabled={currentOffset === 0}
-          icon={<Icon name="chevron-left" />}
+          icon={<RiArrowLeftSLine />}
           aria-label="Previous"
         />
         <ButtonIcon
@@ -120,7 +121,7 @@ export function TablePagination(props: TablePaginationProps) {
             rowCount !== undefined &&
             currentOffset + currentPageSize >= rowCount
           }
-          icon={<Icon name="chevron-right" />}
+          icon={<RiArrowRightSLine />}
           aria-label="Next"
         />
       </div>

packages/ui/src/components/TagGroup/TagGroup.stories.tsx

@@ -18,14 +18,20 @@ import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { TagGroup, Tag } from '.';
 import type { Selection } from 'react-aria-components';
-import { Flex, Icon, IconNames } from '../../';
+import { Flex } from '../../';
 import { useListData } from 'react-stately';
 import { MemoryRouter } from 'react-router-dom';
+import {
+  RiAccountCircleLine,
+  RiBugLine,
+  RiEyeLine,
+  RiHeartLine,
+} from '@remixicon/react';
 
 export interface ListItem {
   id: string;
   name: string;
-  icon: IconNames;
+  icon: React.ReactNode;
   isDisabled?: boolean;
 }
 
@@ -54,13 +60,13 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const initialList: ListItem[] = [
-  { id: 'banana', name: 'Banana', icon: 'bug' },
-  { id: 'apple', name: 'Apple', icon: 'account-circle', isDisabled: true },
-  { id: 'orange', name: 'Orange', icon: 'eye', isDisabled: true },
-  { id: 'pear', name: 'Pear', icon: 'heart' },
-  { id: 'grape', name: 'Grape', icon: 'bug' },
-  { id: 'pineapple', name: 'Pineapple', icon: 'eye' },
-  { id: 'strawberry', name: 'Strawberry', icon: 'heart' },
+  { id: 'banana', name: 'Banana', icon: <RiBugLine /> },
+  { id: 'apple', name: 'Apple', icon: <RiAccountCircleLine /> },
+  { id: 'orange', name: 'Orange', icon: <RiEyeLine /> },
+  { id: 'pear', name: 'Pear', icon: <RiHeartLine /> },
+  { id: 'grape', name: 'Grape', icon: <RiBugLine /> },
+  { id: 'pineapple', name: 'Pineapple', icon: <RiEyeLine /> },
+  { id: 'strawberry', name: 'Strawberry', icon: <RiHeartLine /> },
 ];
 
 export const Default: Story = {
@@ -84,14 +90,14 @@ export const Sizes: Story = {
     <Flex direction="column">
       <TagGroup {...args}>
         {initialList.map(item => (
-          <Tag key={item.id} size="small" icon={<Icon name={item.icon} />}>
+          <Tag key={item.id} size="small" icon={item.icon}>
             {item.name}
           </Tag>
         ))}
       </TagGroup>
       <TagGroup {...args}>
         {initialList.map(item => (
-          <Tag key={item.id} size="medium" icon={<Icon name={item.icon} />}>
+          <Tag key={item.id} size="medium" icon={item.icon}>
             {item.name}
           </Tag>
         ))}
@@ -151,10 +157,7 @@ export const WithIcon: Story = {
   render: args => (
     <TagGroup {...args}>
       {initialList.map(item => (
-        <Tag
-          key={item.id}
-          icon={item.icon ? <Icon name={item.icon} /> : undefined}
-        >
+        <Tag key={item.id} icon={item.icon ? item.icon : undefined}>
           {item.name}
         </Tag>
       ))}
@@ -231,9 +234,7 @@ export const WithIconAndRemoveButton: Story = {
         {...args}
       >
         {item => (
-          <Tag icon={item.icon ? <Icon name={item.icon} /> : undefined}>
-            {item.name}
-          </Tag>
+          <Tag icon={item.icon ? item.icon : undefined}>{item.name}</Tag>
         )}
       </TagGroup>
     );

packages/ui/src/components/TextField/TextField.stories.tsx

@@ -17,9 +17,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { TextField } from './TextField';
 import { Form } from 'react-aria-components';
-import { Icon } from '../Icon';
 import { Flex } from '../Flex';
 import { FieldLabel } from '../FieldLabel';
+import { RiEyeLine, RiSparklingLine } from '@remixicon/react';
 
 const meta = {
   title: 'Backstage UI/TextField',
@@ -53,8 +53,8 @@ export const Sizes: Story = {
   },
   render: args => (
     <Flex direction="row" gap="4" style={{ width: '100%', maxWidth: '600px' }}>
-      <TextField {...args} size="small" icon={<Icon name="sparkling" />} />
-      <TextField {...args} size="medium" icon={<Icon name="sparkling" />} />
+      <TextField {...args} size="small" icon={<RiSparklingLine />} />
+      <TextField {...args} size="medium" icon={<RiSparklingLine />} />
     </Flex>
   ),
 };
@@ -103,7 +103,7 @@ export const WithIcon: Story = {
       {...args}
       placeholder="Enter a URL"
       size="small"
-      icon={<Icon name="eye" />}
+      icon={<RiEyeLine />}
     />
   ),
 };