fix(button): centre icons via flex gap instead of margin

frontend/documentation/components/Button.stories.tsx

@@ -7,6 +7,7 @@ import {
   sizeClassNames,
 } from 'components/base/forms/Button'
 import type { ButtonType } from 'components/base/forms/Button'
+import { Icon } from 'components/icons'
 
 const themeOptions = Object.keys(themeClassNames) as Array<
   keyof typeof themeClassNames
@@ -19,7 +20,7 @@ const meta: Meta<ButtonType> = {
   argTypes: {
     children: {
       control: 'text',
-      description: 'Button label content.',
+      description: 'Button label content. Compose icons via `<Icon>` children.',
     },
     disabled: {
       control: 'boolean',
@@ -60,7 +61,7 @@ export const Variants: Story = {
     docs: {
       description: {
         story:
-          'All available button themes. Use `primary` for main actions, `secondary` for alternatives, `outline` for low-emphasis actions, `danger` for destructive actions, and `success` for positive confirmations. `icon` is for icon-only buttons (copy, action triggers in tables); `project` is the avatar-style button used in the project picker.',
+          'All available button themes. Use `primary` for main actions, `secondary` for alternatives, `outline` for low-emphasis actions, `danger` for destructive actions, and `success` for positive confirmations. `icon` is for icon-only buttons (copy, action triggers in tables).',
       },
     },
   },
@@ -73,10 +74,9 @@ export const Variants: Story = {
       <Button theme='success'>Success</Button>
       <Button theme='tertiary'>Tertiary</Button>
       <Button theme='text'>Text</Button>
-      <Button theme='icon' iconLeft='copy'>
-        {''}
+      <Button theme='icon'>
+        <Icon name='copy' />
       </Button>
-      <Button theme='project'>Project</Button>
     </div>
   ),
 }
@@ -130,20 +130,47 @@ export const WithIcons: Story = {
     docs: {
       description: {
         story:
-          'Buttons support `iconLeft` and `iconRight` props. Pass any `IconName` from the icon system.',
+          'Icons compose via children — pass `<Icon>` JSX directly. Spacing between icon and label is handled by the button wrapper (`display: flex; gap: 0.5rem`).',
       },
     },
   },
   render: () => (
     <div className='d-flex align-items-center flex-wrap gap-2'>
-      <Button theme='primary' iconLeft='plus'>
+      <Button theme='primary'>
+        <Icon name='plus' />
         Add Item
       </Button>
-      <Button theme='danger' iconLeft='trash-2'>
+      <Button theme='danger'>
+        <Icon name='trash-2' />
         Delete
       </Button>
-      <Button theme='outline' iconRight='chevron-right'>
+      <Button theme='outline'>
         Next
+        <Icon name='chevron-right' />
+      </Button>
+    </div>
+  ),
+}
+
+export const IconOnly: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Icon-only buttons via `theme="icon"` (32×32) or `className="btn-with-icon"` (table-row affordances). Pass the icon as children.',
+      },
+    },
+  },
+  render: () => (
+    <div className='d-flex align-items-center flex-wrap gap-2'>
+      <Button theme='icon'>
+        <Icon name='copy' />
+      </Button>
+      <Button className='btn btn-with-icon' type='button'>
+        <Icon name='trash-2' width={20} />
+      </Button>
+      <Button className='btn btn-with-icon' type='button'>
+        <Icon name='edit' width={20} />
       </Button>
     </div>
   ),

frontend/web/components/EditIdentity.tsx

@@ -2,6 +2,7 @@ import React, { FC, useEffect, useRef, useState } from 'react'
 import { Identity } from 'common/types/responses'
 import { useUpdateIdentityMutation } from 'common/services/useIdentity'
 import Button from './base/forms/Button'
+import { Icon } from './icons'
 import ErrorMessage from './ErrorMessage'
 import GhostInput from './base/forms/GhostInput'
 
@@ -62,15 +63,13 @@ const EditIdentity: FC<EditIdentityType> = ({ data, environmentId }) => {
       />
       <Button
         disabled={!data}
-        iconSize={16}
         theme='text'
         style={{ lineHeight: 'inherit' }}
         className='text-primary d-flex align-items-center'
-        iconRightColour='primary'
-        iconRight={'edit'}
         onClick={handleFocus}
       >
         Edit
+        <Icon name='edit' width={16} />
       </Button>
       <ErrorMessage>{error}</ErrorMessage>
     </>

frontend/web/components/GoogleButton.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react'
 import { TokenResponse, useGoogleLogin } from '@react-oauth/google'
 import Button from './base/forms/Button'
+import { Icon } from './icons'
 
 type GoogleButtonProps = {
   className?: string
@@ -22,10 +23,10 @@ const GoogleButton: FC<GoogleButtonProps> = ({ className, onSuccess }) => {
     <Button
       className={className}
       theme='secondary'
-      iconLeft='google'
       key='google'
       onClick={() => login()}
     >
+      <Icon name='google' />
       Google
     </Button>
   )

frontend/web/components/JSONReference.tsx

@@ -5,7 +5,7 @@ import Highlight from './Highlight'
 import Button from './base/forms/Button'
 import Switch from './Switch'
 import flagsmith from '@flagsmith/flagsmith'
-import Icon from './icons/Icon'
+import { Icon } from './icons'
 import Utils from 'common/utils/utils'
 
 type JSONReferenceType = {
@@ -146,9 +146,8 @@ const JSONReference: FC<JSONReferenceType> = ({
                   Utils.copyToClipboard(condensed ? idsOnly : value)
                 }}
                 size='xSmall'
-                iconLeft='copy'
-                iconLeftColour='white'
               >
+                <Icon name='copy' />
                 Copy JSON
               </Button>
             </Row>

frontend/web/components/base/forms/Button.tsx

@@ -1,21 +1,12 @@
 import React from 'react'
 import cn from 'classnames'
 import { ButtonHTMLAttributes, HTMLAttributeAnchorTarget } from 'react'
-import Icon, { IconName } from 'components/icons/Icon'
-
-const iconColours = {
-  primary: '#6837fc',
-  white: '#ffffff',
-} as const
-
-export type IconColour = keyof typeof iconColours
 
 export const themeClassNames = {
   danger: 'btn btn-danger',
   icon: 'btn-icon',
   outline: 'btn--outline',
   primary: 'btn-primary',
-  project: 'btn-project',
   secondary: 'btn btn-secondary',
   success: 'btn btn-success',
   tertiary: 'btn-tertiary',
@@ -31,15 +22,10 @@ export const sizeClassNames = {
 }
 
 export type ButtonType = ButtonHTMLAttributes<HTMLButtonElement> & {
-  iconRight?: IconName
-  iconRightColour?: IconColour
-  iconLeftColour?: IconColour
-  iconLeft?: IconName
   href?: string
   target?: HTMLAttributeAnchorTarget
   theme?: keyof typeof themeClassNames
   size?: keyof typeof sizeClassNames
-  iconSize?: number
 }
 
 export const Button = React.forwardRef<
@@ -51,11 +37,6 @@ export const Button = React.forwardRef<
       children,
       className,
       href,
-      iconLeft,
-      iconLeftColour,
-      iconRight,
-      iconRightColour,
-      iconSize = 24,
       onMouseUp,
       size = 'default',
       target,
@@ -65,6 +46,14 @@ export const Button = React.forwardRef<
     },
     ref,
   ) => {
+    const content =
+      React.Children.count(children) > 1 ? (
+        <span className='d-flex h-100 align-items-center justify-content-center gap-2'>
+          {children}
+        </span>
+      ) : (
+        children
+      )
     return href ? (
       <a
         onClick={rest.onClick as React.MouseEventHandler}
@@ -74,24 +63,7 @@ export const Button = React.forwardRef<
         rel='noreferrer'
         ref={ref as React.RefObject<HTMLAnchorElement>}
       >
-        <div className='d-flex h-100 align-items-center justify-content-center gap-2'>
-          {!!iconLeft && (
-            <Icon
-              fill={iconLeftColour ? iconColours[iconLeftColour] : undefined}
-              name={iconLeft}
-              width={iconSize}
-            />
-          )}
-          {children}
-        </div>
-        {!!iconRight && (
-          <Icon
-            fill={iconRightColour ? iconColours[iconRightColour] : undefined}
-            className='ml-2'
-            name={iconRight}
-            width={iconSize}
-          />
-        )}
+        {content}
       </a>
     ) : (
       <button
@@ -106,23 +78,7 @@ export const Button = React.forwardRef<
         )}
         ref={ref as React.RefObject<HTMLButtonElement>}
       >
-        {!!iconLeft && (
-          <Icon
-            fill={iconLeftColour ? iconColours[iconLeftColour] : undefined}
-            className='mr-2'
-            name={iconLeft}
-            width={iconSize}
-          />
-        )}
-        {children}
-        {!!iconRight && (
-          <Icon
-            fill={iconRightColour ? iconColours[iconRightColour] : undefined}
-            className='ml-2'
-            name={iconRight}
-            width={iconSize}
-          />
-        )}
+        {content}
       </button>
     )
   },

frontend/web/components/icons/index.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon'
+export type { IconName } from './Icon'

frontend/web/components/modals/base/ModalConfirm.tsx

@@ -68,7 +68,6 @@ const Confirm: FC<Confirm> = ({
             theme='danger'
             id='confirm-btn-yes'
             disabled={disabled || disabledYes}
-            iconRight='fas fa-trash'
             onClick={yes}
           >
             {yesText}

frontend/web/components/pages/FlagEnvironmentsPage.tsx

@@ -6,7 +6,7 @@ import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 import { useGetFeatureStatesQuery } from 'common/services/useFeatureState'
 import { useGetProjectQuery } from 'common/services/useProject'
 import Panel from 'components/base/grid/Panel'
-import Icon from 'components/icons/Icon'
+import { Icon } from 'components/icons'
 import TagValues from 'components/tags/TagValues'
 import Switch from 'components/Switch'
 import Button from 'components/base/forms/Button'
@@ -271,7 +271,8 @@ const FlagEnvironmentsPage: FC = () => {
                 : '',
             }}
           >
-            <Button theme='text' size='small' iconLeft='arrow-left'>
+            <Button theme='text' size='small'>
+              <Icon name='arrow-left' />
               Back to Release Manager
             </Button>
           </Link>

frontend/web/components/pages/HomePage.tsx

@@ -11,6 +11,7 @@ import Button from 'components/base/forms/Button'
 import PasswordRequirements from 'components/PasswordRequirements'
 import { informationCircleOutline } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
+import { Icon } from 'components/icons'
 import classNames from 'classnames'
 import InfoMessage from 'components/InfoMessage'
 import OnboardingPage from './OnboardingPage'
@@ -206,9 +207,9 @@ const HomePage: React.FC = () => {
           <Button
             theme='secondary'
             className='w-100'
-            iconLeft='github'
             href={JSON.parse(Utils.getFlagsmithValue('oauth_github')).url}
           >
+            <Icon name='github' />
             GitHub
           </Button>
         </div>,

frontend/web/components/release-pipelines/PipelineStageActions.tsx

@@ -4,6 +4,7 @@ import { StageActionBody, StageActionRequest } from 'common/types/requests'
 import { useMemo } from 'react'
 import SinglePipelineStageAction from './SinglePipelineStageAction'
 import Button from 'components/base/forms/Button'
+import { Icon } from 'components/icons'
 import { StageActionType } from 'common/types/responses'
 
 interface PipelineStageActionsProps {
@@ -60,7 +61,8 @@ const PipelineStageActions = ({
           onRemoveAction={index > 0 ? onRemoveAction : undefined}
         />
       ))}
-      <Button iconLeft='plus' className='w-100' onClick={onAddAction}>
+      <Button className='w-100' onClick={onAddAction}>
+        <Icon name='plus' />
         Add Flag Action
       </Button>
     </>

frontend/web/styles/project/_buttons.scss

@@ -152,19 +152,22 @@ button.btn {
       height: 18px;
     }
     path {
-      fill: $text-muted;
+      fill: var(--color-icon-secondary);
     }
     &:hover,&:focus {
       background-color: $bg-light300;
       path {
-        fill: $body-color;
+        fill: var(--color-icon-default);
       }
     }
   }
   &-with-icon {
     padding: 0 14px;
     background-color: $basic-alpha-8;
     border-radius: $border-radius;
+    svg path {
+      fill: var(--color-icon-secondary);
+    }
     &:hover,
     &:active,
     &:disabled {
@@ -349,14 +352,8 @@ $add-btn-size: 34px;
     }
     &.btn-icon {
       color: $body-color-dark;
-      path {
-        fill: $text-muted;
-      }
       &:hover,&:focus {
         background-color: $bg-dark300;
-        path {
-          fill: $body-color-dark;
-        }
       }
     }
     &.btn-secondary {