Add Icon component

6 files changed, 68 insertions, 21 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
index d2496447ed..35af1724c5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
@@ -87,7 +87,7 @@ export function NotificationCloseAction(props: NotificationActionProps) {
       aria-label={messages.pgettext('accessibility', 'Close notification')}
       onClick={props.onClick}
       icon="icon-close"
-      size="small"
+      size="medium"
       variant="secondary"
     />
   );
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 9ab08bf576..e30f5f4dbe 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
@@ -23,7 +23,6 @@ export const AppNavigationHeaderBackButton = () => {
   return (
     <IconButton
       variant="secondary"
-      size="medium"
       icon={iconSource}
       aria-label={ariaLabel}
       onClick={parentBackAction}
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 586ab0e76d..18cf773b40 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
@@ -1,14 +1,14 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import ImageView from '../../../components/ImageView';
 import { Colors } from '../../foundations';
 import { buttonReset } from '../../styles';
+import { Icon, IconProps } from '../icon/Icon';
 
 export interface IconButtonProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   variant?: 'primary' | 'secondary';
-  size?: 'small' | 'medium';
+  size?: IconProps['size'];
   icon: string;
 }
 
@@ -26,14 +26,11 @@ const variants = {
 } as const;
 
 const sizes = {
-  small: 16,
-  medium: 24,
-};
-
-// TODO: This should be removed when we have updated to the new icons from design system
-const iconSizes = {
-  small: 14,
-  medium: 20,
+  small: 12,
+  medium: 16,
+  large: 24,
+  big: 32,
+  huge: 48,
 };
 
 const StyledButton = styled.button({
@@ -48,11 +45,20 @@ 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) => {
+  ({ icon, variant = 'primary', size: sizeProp = 'large', disabled, style, ...props }, ref) => {
     const styles = variants[variant];
     const size = sizes[sizeProp];
-    const iconSize = iconSizes[sizeProp];
     return (
       <StyledButton
         ref={ref}
@@ -64,13 +70,12 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
           } as React.CSSProperties
         }
         {...props}>
-        <ImageView
-          source={icon}
-          tintColor={styles.background}
-          tintHoverColor={styles.hover}
-          disabled={disabled}
-          height={iconSize}
-          width={iconSize}
+        <StyledIcon
+          src={icon}
+          color={styles.background}
+          size={sizeProp}
+          $hoverColor={styles.hover}
+          $disabled={disabled}
         />
       </StyledButton>
     );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx
new file mode 100644
index 0000000000..888d8105e9
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx
@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+import { TransientProps } from '../../types';
+
+export type IconProps = {
+  src: string;
+  size?: 'small' | 'medium' | 'large' | 'big' | 'huge';
+  color?: string;
+  alt?: string;
+  className?: string;
+};
+
+const StyledIcon = styled.div<TransientProps<Pick<IconProps, 'color' | 'src'>> & { $size: number }>`
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  mask: url(${({ $src }) => $src}) no-repeat center;
+  mask-size: contain;
+  background-color: ${({ $color }) => $color || 'currentColor'};
+`;
+
+const sizes = {
+  small: 12,
+  medium: 16,
+  large: 24,
+  big: 32,
+  huge: 48,
+};
+
+export const Icon = ({ src: srcProp, size = 'large', color, alt, ...props }: IconProps) => {
+  const src = srcProp.startsWith('data:') ? srcProp : `../../assets/images/${srcProp}.svg`;
+  return (
+    <StyledIcon
+      $src={src}
+      $size={sizes[size]}
+      $color={color}
+      role="img"
+      aria-label={alt || srcProp}
+      {...props}
+    />
+  );
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/index.ts
new file mode 100644
index 0000000000..e263cc0e6d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/index.ts
@@ -0,0 +1 @@
+export * from './Icon';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts
index 6ca0b4a51c..924d8b826d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts
@@ -2,6 +2,7 @@ export * from './box';
 export * from './button';
 export * from './container';
 export * from './flex';
+export * from './icon';
 export * from './icon-button';
 export * from './layout';
 export * from './logo';