Make IconButton composable

21 files changed, 167 insertions, 120 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
index adc3ef8c1c..c7c675f584 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
@@ -55,7 +55,6 @@ export default function ClipboardLabel(props: IProps) {
       <Flex $gap={Spacings.spacing5}>
         {obscureValue !== false && (
           <IconButton
-            icon={obscured ? 'show' : 'hide'}
             onClick={toggleObscured}
             aria-label={
               obscured
@@ -67,21 +66,22 @@ export default function ClipboardLabel(props: IProps) {
                   // TRANSLATORS: Provided to accessibility tools such as screenreaders to describe
                   // TRANSLATORS: the button which obscures the account number.
                   messages.pgettext('accessibility', 'Hide account number')
-            }
-          />
+            }>
+            {obscured ? <IconButton.Icon icon="show" /> : <IconButton.Icon icon="hide" />}
+          </IconButton>
         )}
         {justCopied ? (
           <Icon icon="checkmark" color={Colors.green}></Icon>
         ) : (
           <IconButton
-            icon={'copy'}
             onClick={onCopy}
             aria-label={
               // TRANSLATORS: Provided to accessibility tools such as screenreaders to describe a button
               // TRANSLATORS: which copies the account number to the clipboard.
               messages.pgettext('accessibility', 'Copy account number')
-            }
-          />
+            }>
+            <IconButton.Icon icon={'copy'} />
+          </IconButton>
         )}
       </Flex>
     </StyledLabelContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
index c3d1e4845b..24a78472a2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
@@ -90,7 +90,11 @@ export function ContextMenuContainer(props: React.PropsWithChildren) {
 export function ContextMenuTrigger() {
   const { toggleVisibility } = useContext(menuContext);
 
-  return <IconButton icon="more-horizontal-circle" onClick={toggleVisibility} />;
+  return (
+    <IconButton onClick={toggleVisibility}>
+      <IconButton.Icon icon="more-horizontal-circle" />
+    </IconButton>
+  );
 }
 
 interface StyledMenuProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx
index f264806aae..1be8d0be2e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx
@@ -251,7 +251,9 @@ export default function CustomDnsSettings() {
               {messages.pgettext('vpn-settings-view', 'Add a server')}
             </StyledAddCustomDnsLabel>
           </StyledButton>
-          <IconButton variant="secondary" icon="add-circle" onClick={showInput} />
+          <IconButton variant="secondary" onClick={showInput}>
+            <IconButton.Icon icon="add-circle" />
+          </IconButton>
         </AddServerContainer>
       </Accordion>
 
@@ -356,11 +358,11 @@ function CellListItem(props: ICellListItemProps) {
           </StyledButton>
           <AriaDescribed>
             <IconButton
-              icon="cross-circle"
               variant="secondary"
               onClick={onRemove}
-              aria-label={messages.pgettext('accessibility', 'Remove item')}
-            />
+              aria-label={messages.pgettext('accessibility', 'Remove item')}>
+              <IconButton.Icon icon="cross-circle" />
+            </IconButton>
           </AriaDescribed>
         </StyledItemContainer>
       )}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceInfoButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceInfoButton.tsx
index fa1be49127..6100fe292c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceInfoButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceInfoButton.tsx
@@ -10,10 +10,11 @@ export default function DeviceInfoButton() {
   return (
     <>
       <IconButton
-        icon="info-circle"
+        size="small"
         onClick={showDeviceHelp}
-        aria-label={messages.pgettext('accessibility', 'More information')}
-      />
+        aria-label={messages.pgettext('accessibility', 'More information')}>
+        <IconButton.Icon icon="info-circle" />
+      </IconButton>
       <ModalAlert
         isOpen={deviceHelpVisible}
         type={ModalAlertType.info}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
index 6b89a6c2f2..4c4b991829 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
@@ -15,11 +15,11 @@ export default function InfoButton({ title, message, children, ...props }: InfoB
   return (
     <>
       <IconButton
-        icon="info-circle"
         onClick={show}
         aria-label={messages.pgettext('accessibility', 'More information')}
-        {...props}
-      />
+        {...props}>
+        <IconButton.Icon icon="info-circle" />
+      </IconButton>
       <ModalAlert
         isOpen={isOpen}
         title={title}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
index 0ae7a65da4..9ce77d8e78 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
@@ -73,12 +73,12 @@ export function NotificationCloseAction(props: NotificationActionProps) {
   return (
     <IconButton
       aria-describedby={NOTIFICATION_AREA_ID}
+      variant="secondary"
       aria-label={messages.pgettext('accessibility', 'Close notification')}
       onClick={props.onClick}
-      icon="cross-circle"
-      variant="secondary"
-      size="small"
-    />
+      size="small">
+      <IconButton.Icon icon="cross-circle" />
+    </IconButton>
   );
 }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
index f029c890d8..897297a243 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
@@ -185,18 +185,12 @@ function Controls(props: ControlsProps) {
         ))}
       </StyledPageIndicators>
       <StyledArrows>
-        <IconButton
-          icon="chevron-left"
-          size="medium"
-          disabled={!props.hasPrev}
-          onClick={props.prev}
-        />
-        <IconButton
-          icon="chevron-right"
-          size="medium"
-          disabled={!props.hasNext}
-          onClick={props.next}
-        />
+        <IconButton disabled={!props.hasPrev} onClick={props.prev}>
+          <IconButton.Icon icon="chevron-left" />
+        </IconButton>
+        <IconButton disabled={!props.hasNext} onClick={props.next}>
+          <IconButton.Icon icon="chevron-right" />
+        </IconButton>
       </StyledArrows>
     </StyledControlsContainer>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
index 9a730ebb2c..5d4a672676 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
@@ -98,7 +98,9 @@ export default function SearchBar(props: ISearchBarProps) {
       />
       <StyledSearchIcon icon="search" color={Colors.white60} />
       {props.searchTerm.length > 0 && (
-        <StyledClearButton icon="cross-circle" variant="secondary" onClick={onClear} />
+        <StyledClearButton variant="secondary" onClick={onClear}>
+          <IconButton.Icon icon="cross-circle" />
+        </StyledClearButton>
       )}
     </StyledSearchContainer>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
index 7b2fc60cc2..70d774d702 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { messages } from '../../shared/gettext';
 import useActions from '../lib/actionsHook';
+import { IconButton } from '../lib/components';
 import { Colors } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useCombinedRefs, useRefCallback, useStyledRef } from '../lib/utility-hooks';
@@ -59,11 +60,9 @@ export default function SettingsTextImport() {
               messages.pgettext('settings-import', 'Import via text')
             }
             titleVisible>
-            <AppNavigationHeader.IconButton
-              icon="checkmark"
-              onClick={save}
-              aria-label={messages.gettext('Save')}
-            />
+            <AppNavigationHeader.IconButton onClick={save} aria-label={messages.gettext('Save')}>
+              <IconButton.Icon icon="checkmark" />
+            </AppNavigationHeader.IconButton>
           </AppNavigationHeader>
 
           <StyledTextArea ref={combinedTextAreaRef} />
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
index 9257c1f8bb..f91504b746 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -651,11 +651,19 @@ function ApplicationRow(props: IApplicationRowProps) {
       <StyledCellLabel>{props.application.name}</StyledCellLabel>
       <Flex $gap={Spacings.spacing3}>
         {props.onDelete && (
-          <IconButton icon="cross-circle" variant="secondary" onClick={onDelete} />
+          <IconButton variant="secondary" onClick={onDelete}>
+            <IconButton.Icon icon="cross-circle" />
+          </IconButton>
+        )}
+        {props.onAdd && (
+          <IconButton variant="secondary" onClick={onAdd}>
+            <IconButton.Icon icon="add-circle" />
+          </IconButton>
         )}
-        {props.onAdd && <IconButton icon="add-circle" variant="secondary" onClick={onAdd} />}
         {props.onRemove && (
-          <IconButton icon="remove-circle" variant="secondary" onClick={onRemove} />
+          <IconButton variant="secondary" onClick={onRemove}>
+            <IconButton.Icon icon="remove-circle" />
+          </IconButton>
         )}
       </Flex>
     </StyledContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
index 75460290c6..a020980def 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
@@ -235,7 +235,6 @@ function Device(props: IDeviceProps) {
           <Spinner />
         ) : (
           <IconButton
-            icon="cross-circle"
             variant="secondary"
             onClick={showConfirmation}
             aria-label={sprintf(
@@ -245,8 +244,9 @@ function Device(props: IDeviceProps) {
               // TRANSLATORS: %(deviceName)s - The device name to remove.
               messages.pgettext('accessibility', 'Remove device named %(deviceName)s'),
               { deviceName: props.device.name },
-            )}
-          />
+            )}>
+            <IconButton.Icon icon="cross-circle" />
+          </IconButton>
         )}
       </Cell.Container>
       <ModalAlert
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx
index be10808816..7eee31e980 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { messages } from '../../../../shared/gettext';
-import { IconButtonProps, MainHeader } from '../../../lib/components';
+import { IconButton, IconButtonProps, MainHeader } from '../../../lib/components';
 import { transitions, useHistory } from '../../../lib/history';
 import { RoutePath } from '../../../lib/routes';
 import { useSelector } from '../../../redux/store';
@@ -22,11 +22,11 @@ export const AppMainHeaderBarAccountButton = (props: MainHeaderBarAccountButtonP
 
   return (
     <MainHeader.IconButton
-      icon="account-circle"
       onClick={openAccount}
       data-testid="account-button"
       aria-label={messages.gettext('Account settings')}
-      {...props}
-    />
+      {...props}>
+      <IconButton.Icon icon="account-circle" />
+    </MainHeader.IconButton>
   );
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx
index 9ecaab479e..f7bb352b04 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { messages } from '../../../../shared/gettext';
-import { IconButtonProps, MainHeader } from '../../../lib/components';
+import { IconButton, IconButtonProps, MainHeader } from '../../../lib/components';
 import { transitions, useHistory } from '../../../lib/history';
 import { RoutePath } from '../../../lib/routes';
 
@@ -17,10 +17,8 @@ export function AppMainHeaderSettingsButton(props: MainHeaderSettingsButtonProps
   }, [history, props.disabled]);
 
   return (
-    <MainHeader.IconButton
-      icon="settings-filled"
-      onClick={openSettings}
-      aria-label={messages.gettext('Settings')}
-    />
+    <MainHeader.IconButton onClick={openSettings} aria-label={messages.gettext('Settings')}>
+      <IconButton.Icon icon="settings-filled" />{' '}
+    </MainHeader.IconButton>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx
index 13e26f3444..73bcd69d46 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx
@@ -21,11 +21,8 @@ export const AppNavigationHeaderBackButton = () => {
   const ariaLabel = backIcon ? messages.gettext('Back') : messages.gettext('Close');
 
   return (
-    <IconButton
-      variant="secondary"
-      icon={iconSource}
-      aria-label={ariaLabel}
-      onClick={parentBackAction}
-    />
+    <IconButton variant="secondary" aria-label={ariaLabel} onClick={parentBackAction}>
+      <IconButton.Icon icon={iconSource} />
+    </IconButton>
   );
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
index c3fe16002f..7d219a533f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
@@ -399,12 +399,9 @@ export function RowInput(props: IRowInputProps) {
             placeholder={props.placeholder}
           />
         </StyledInputWrapper>
-        <StyledIconButton
-          variant="secondary"
-          icon="checkmark-circle"
-          onClick={submit}
-          $disabled={value === ''}
-        />
+        <StyledIconButton variant="secondary" onClick={submit} $disabled={value === ''}>
+          <IconButton.Icon icon="checkmark-circle" />
+        </StyledIconButton>
       </StyledCellInputRowContainer>
     </BackAction>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx
index f6d3af51ed..8a5685b35e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanel.tsx
@@ -97,10 +97,10 @@ export default function ConnectionPanel() {
       <StyledConnectionPanel $expanded={expanded}>
         {allowExpand && (
           <StyledConnectionPanelChevron
-            icon={expanded ? 'chevron-down' : 'chevron-up'}
             onClick={toggleExpanded}
-            data-testid="connection-panel-chevron"
-          />
+            data-testid="connection-panel-chevron">
+            <IconButton.Icon icon={expanded ? 'chevron-down' : 'chevron-up'} />
+          </StyledConnectionPanelChevron>
         )}
         <StyledConnectionStatusContainer
           $expanded={expanded}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
index 549bba93c1..069197bb81 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
@@ -133,11 +133,11 @@ export default function SelectLocation() {
               }
               titleVisible>
               <IconButton
-                icon="filter-circle"
                 variant="secondary"
                 onClick={onViewFilter}
-                aria-label={messages.gettext('Filter')}
-              />
+                aria-label={messages.gettext('Filter')}>
+                <IconButton.Icon icon="filter-circle" />
+              </IconButton>
             </AppNavigationHeader>
 
             <StyledNavigationBarAttachment>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
index 9bc022af8a..819151706a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
@@ -3,28 +3,15 @@ import styled from 'styled-components';
 
 import { Colors } from '../../foundations';
 import { buttonReset } from '../../styles';
-import { Icon, IconProps } from '../icon/Icon';
+import { IconProps } from '../icon/Icon';
+import { IconButtonIcon } from './components/IconButtonIcon';
+import { IconButtonProvider } from './IconButtonContext';
 
-export interface IconButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary';
   size?: IconProps['size'];
-  icon: IconProps['icon'];
 }
 
-const variants = {
-  primary: {
-    background: Colors.white,
-    hover: Colors.white60,
-    disabled: Colors.white50,
-  },
-  secondary: {
-    background: Colors.white60,
-    hover: Colors.white80,
-    disabled: Colors.white50,
-  },
-} as const;
-
 const sizes = {
   tiny: 12,
   small: 16,
@@ -46,41 +33,31 @@ const StyledButton = styled.button({
   },
 });
 
-const StyledIcon = styled(Icon)<IconProps & { $hoverColor: string; $disabled?: boolean }>(
-  ({ $hoverColor, $disabled }) => ({
-    ...(!$disabled && {
-      '&&:hover': {
-        backgroundColor: $hoverColor,
-      },
-    }),
-  }),
-);
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, variant = 'primary', size: sizeProp = 'medium', disabled, style, ...props }, ref) => {
-    const styles = variants[variant];
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ variant = 'primary', size: sizeProp = 'medium', disabled, style, ...props }, ref) => {
     const size = sizes[sizeProp];
     return (
-      <StyledButton
-        ref={ref}
-        disabled={disabled}
-        style={
-          {
-            '--size': `${size}px`,
-            ...style,
-          } as React.CSSProperties
-        }
-        {...props}>
-        <StyledIcon
-          icon={icon}
-          color={disabled ? styles.disabled : styles.background}
-          size={sizeProp}
-          $hoverColor={styles.hover}
-          $disabled={disabled}
+      <IconButtonProvider size={sizeProp} variant={variant} disabled={disabled}>
+        <StyledButton
+          ref={ref}
+          disabled={disabled}
+          style={
+            {
+              '--size': `${size}px`,
+              ...style,
+            } as React.CSSProperties
+          }
+          {...props}
         />
-      </StyledButton>
+      </IconButtonProvider>
     );
   },
 );
 
+const IconButtonNamespace = Object.assign(IconButton, {
+  Icon: IconButtonIcon,
+});
+
+export { IconButtonNamespace as IconButton };
+
 IconButton.displayName = 'Button';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButtonContext.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButtonContext.tsx
new file mode 100644
index 0000000000..ebe100b1d5
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButtonContext.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { IconButtonProps } from './IconButton';
+interface IconButtonContextProps {
+  disabled?: boolean;
+  variant: IconButtonProps['variant'];
+  size: IconButtonProps['size'];
+}
+
+const IconButtonContext = React.createContext<IconButtonContextProps | undefined>(undefined);
+
+export const useIconButtonContext = (): IconButtonContextProps => {
+  const context = React.useContext(IconButtonContext);
+  if (!context) {
+    throw new Error('useButtonContext must be used within a IconButtonProvider');
+  }
+  return context;
+};
+interface IconButtonProviderProps extends IconButtonContextProps {
+  children: React.ReactNode;
+}
+export const IconButtonProvider = ({ children, ...props }: IconButtonProviderProps) => {
+  return <IconButtonContext.Provider value={props}>{children}</IconButtonContext.Provider>;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx
new file mode 100644
index 0000000000..a65d887469
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx
@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+import { Colors } from '../../../foundations';
+import { Icon, IconProps } from '../../icon/Icon';
+import { useIconButtonContext } from '../IconButtonContext';
+export type IconButtonIconProps = IconProps;
+
+const variants = {
+  primary: {
+    background: Colors.white,
+    hover: Colors.white60,
+    disabled: Colors.white50,
+  },
+  secondary: {
+    background: Colors.white60,
+    hover: Colors.white80,
+    disabled: Colors.white50,
+  },
+} as const;
+
+const StyledIcon = styled(Icon)<IconButtonIconProps & { $hoverColor: string; $disabled?: boolean }>(
+  ({ $hoverColor, $disabled }) => ({
+    ...(!$disabled && {
+      '&&:hover': {
+        backgroundColor: $hoverColor,
+      },
+    }),
+  }),
+);
+
+export const IconButtonIcon = (props: IconButtonIconProps) => {
+  const { variant = 'primary', size, disabled } = useIconButtonContext();
+  const styles = variants[variant];
+  return (
+    <StyledIcon
+      color={disabled ? styles.disabled : styles.background}
+      size={size}
+      $hoverColor={styles.hover}
+      $disabled={disabled}
+      {...props}
+    />
+  );
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/index.ts
index 1a85f0f725..cfe09746a9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/index.ts
@@ -1 +1,2 @@
 export * from './IconButton';
+export * from './IconButtonContext';