diff --git a/.changeset/chatty-shrimps-battle.md b/.changeset/chatty-shrimps-battle.md
new file mode 100644
index 0000000000..76f6aa7a82
--- /dev/null
+++ b/.changeset/chatty-shrimps-battle.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-react": patch
+"@digdir/designsystemet-css": patch
+---
+
+**Badge, Button, Spinner, Tabs, Tag**: Icons now scale in Safari when zooming
diff --git a/apps/themebuilder/app/_components/appearance-toggle/appearance-toggle.tsx b/apps/themebuilder/app/_components/appearance-toggle/appearance-toggle.tsx
index b98fc94372..4b38ca09a5 100644
--- a/apps/themebuilder/app/_components/appearance-toggle/appearance-toggle.tsx
+++ b/apps/themebuilder/app/_components/appearance-toggle/appearance-toggle.tsx
@@ -53,12 +53,8 @@ export const AppearanceToggle = ({
           role='radio'
         >
           {' '}
-          {scheme.value === 'light' && (
-            <SunIcon aria-hidden fontSize='1.5rem' />
-          )}
-          {scheme.value === 'dark' && (
-            <MoonIcon aria-hidden fontSize='1.5rem' />
-          )}
+          {scheme.value === 'light' && <SunIcon aria-hidden />}
+          {scheme.value === 'dark' && <MoonIcon aria-hidden />}
           {scheme.name}
           {showLabel && <>{scheme.name}</>}
         </Button>
diff --git a/apps/themebuilder/app/_components/color-input/color-input.tsx b/apps/themebuilder/app/_components/color-input/color-input.tsx
index 616dc39566..a8a47fd55a 100644
--- a/apps/themebuilder/app/_components/color-input/color-input.tsx
+++ b/apps/themebuilder/app/_components/color-input/color-input.tsx
@@ -27,7 +27,7 @@ export const ColorInput = ({ name, color, onClick }: ColorInputProps) => {
           ></span>
           <span className={classes.hex}>{color}</span>
         </span>
-        <PencilIcon aria-hidden fontSize='1.5rem' />
+        <PencilIcon aria-hidden />
       </Button>
     </div>
   );
diff --git a/apps/themebuilder/app/_components/previews/landing/landing.tsx b/apps/themebuilder/app/_components/previews/landing/landing.tsx
index 0621f7b88e..ead6c25f9f 100644
--- a/apps/themebuilder/app/_components/previews/landing/landing.tsx
+++ b/apps/themebuilder/app/_components/previews/landing/landing.tsx
@@ -40,11 +40,11 @@ export const Landing = () => {
           </div>
           <div className={classes.headerRight}>
             <Button variant='tertiary'>
-              <MagnifyingGlassIcon aria-hidden fontSize='1.6rem' />
+              <MagnifyingGlassIcon aria-hidden />
               {t('overview.search')}
             </Button>
             <Button variant='tertiary'>
-              <MenuHamburgerIcon aria-hidden fontSize='1.6rem' />
+              <MenuHamburgerIcon aria-hidden />
               {t('overview.menu')}
             </Button>
           </div>
diff --git a/apps/themebuilder/app/_components/sidebar/color-page/color-page.tsx b/apps/themebuilder/app/_components/sidebar/color-page/color-page.tsx
index 87202ffe03..2fc2b9c185 100644
--- a/apps/themebuilder/app/_components/sidebar/color-page/color-page.tsx
+++ b/apps/themebuilder/app/_components/sidebar/color-page/color-page.tsx
@@ -216,7 +216,7 @@ export const ColorPage = () => {
                   aria-label={`${t('colorPane.add')} ${t('colorPane.main-color')}`}
                 >
                   {t('colorPane.add')} {t('themeModal.color')}
-                  <PlusIcon aria-hidden fontSize='1.5rem' />
+                  <PlusIcon aria-hidden />
                 </Button>
               )}{' '}
               {colors.main.length >= 40 && (
@@ -262,7 +262,7 @@ export const ColorPage = () => {
                   aria-label={`${t('colorPane.add')} ${t('colorPane.support-color')}`}
                 >
                   {t('colorPane.add')} {t('themeModal.color')}
-                  <PlusIcon aria-hidden fontSize='1.5rem' />
+                  <PlusIcon aria-hidden />
                 </Button>
               )}{' '}
               {colors.support.length >= 40 && (
@@ -334,7 +334,7 @@ export const ColorPage = () => {
                   data-size='sm'
                   className={classes.overridesBtn}
                 >
-                  <PencilIcon aria-hidden fontSize='1.25rem' />
+                  <PencilIcon aria-hidden />
                   Token Overrides
                 </Button>
               }
diff --git a/apps/themebuilder/app/_components/sidebar/color-pane/color-pane.tsx b/apps/themebuilder/app/_components/sidebar/color-pane/color-pane.tsx
index 49007cbed6..6cb073cf8f 100644
--- a/apps/themebuilder/app/_components/sidebar/color-pane/color-pane.tsx
+++ b/apps/themebuilder/app/_components/sidebar/color-pane/color-pane.tsx
@@ -90,7 +90,7 @@ export const ColorPane = ({
           }}
           className={classes.back}
         >
-          <ChevronLeftIcon aria-hidden fontSize='1.5rem' />
+          <ChevronLeftIcon aria-hidden />
           {t('colorPane.save')}
         </Button>
         <Button
@@ -120,7 +120,7 @@ export const ColorPane = ({
           }
         >
           {t('colorPane.remove-color')}
-          <TrashIcon title='trash' fontSize='1.5rem' />
+          <TrashIcon title='trash' />
         </Button>
       </div>
       <Heading data-size='xs' className={classes.title}>
diff --git a/apps/themebuilder/app/_components/sidebar/finish-page/finish-page.tsx b/apps/themebuilder/app/_components/sidebar/finish-page/finish-page.tsx
index 0655813078..0d1d4ab09d 100644
--- a/apps/themebuilder/app/_components/sidebar/finish-page/finish-page.tsx
+++ b/apps/themebuilder/app/_components/sidebar/finish-page/finish-page.tsx
@@ -37,7 +37,7 @@ export const FinishPage = ({ onPrevClick }: FinishPageProps) => {
             onClick={() => onPrevClick()}
             variant='secondary'
           >
-            <ChevronLeftIcon aria-hidden fontSize='1.5rem' />
+            <ChevronLeftIcon aria-hidden />
             Border radius
           </Button>
           <TokenModal />
diff --git a/apps/themebuilder/app/_components/sidebar/sidebar.tsx b/apps/themebuilder/app/_components/sidebar/sidebar.tsx
index 259333b061..b1fac072a8 100644
--- a/apps/themebuilder/app/_components/sidebar/sidebar.tsx
+++ b/apps/themebuilder/app/_components/sidebar/sidebar.tsx
@@ -54,7 +54,7 @@ export const Sidebar = () => {
           aria-label='Toggle sidebar'
           aria-expanded={showSidebar}
         >
-          <CogIcon aria-hidden fontSize='1.5rem' />
+          <CogIcon aria-hidden height='1.5rem' width='1.5rem' />
         </button>
         <div
           className={cl(
diff --git a/apps/themebuilder/app/_components/size-input/size-input.tsx b/apps/themebuilder/app/_components/size-input/size-input.tsx
index 8902d8d538..d6c73fdee9 100644
--- a/apps/themebuilder/app/_components/size-input/size-input.tsx
+++ b/apps/themebuilder/app/_components/size-input/size-input.tsx
@@ -13,7 +13,12 @@ export const SizeInput = ({ onChange, size, name }: SizeInputProps) => {
       <div className={classes.label}>{name}</div>
       <button className={classes.box} onClick={() => onChange(size)}>
         {size}
-        <PencilIcon aria-hidden fontSize='1.4rem' className={classes.icon} />
+        <PencilIcon
+          aria-hidden
+          height='1.4rem'
+          width='1.4rem'
+          className={classes.icon}
+        />
       </button>
     </div>
   );
diff --git a/apps/themebuilder/app/_components/theme-header/theme-header.tsx b/apps/themebuilder/app/_components/theme-header/theme-header.tsx
index 8e40ad9400..8fadc22bcb 100644
--- a/apps/themebuilder/app/_components/theme-header/theme-header.tsx
+++ b/apps/themebuilder/app/_components/theme-header/theme-header.tsx
@@ -26,7 +26,7 @@ export const ThemeHeader = () => {
     <div className={classes.header}>
       <div className={classes.textContainer}>
         <RRLink data-size='sm' className={classes.backLink} to={`/${lang}/`}>
-          <ChevronLeftIcon aria-hidden fontSize='1.5rem' />
+          <ChevronLeftIcon aria-hidden height='1.5rem' width='1.5rem' />
           {t('header.back-to-home')}
         </RRLink>
         <Heading data-size='md' level={1}>
diff --git a/apps/themebuilder/app/_components/token-modal/token-modal.tsx b/apps/themebuilder/app/_components/token-modal/token-modal.tsx
index 7011d625a2..bf6238df41 100644
--- a/apps/themebuilder/app/_components/token-modal/token-modal.tsx
+++ b/apps/themebuilder/app/_components/token-modal/token-modal.tsx
@@ -31,7 +31,7 @@ export const TokenModal = () => {
           return modalRef.current?.showModal();
         }}
       >
-        <StarIcon aria-hidden fontSize='1.5rem' />
+        <StarIcon aria-hidden width='1.5rem' height='auto' />
         {t('themeModal.use-theme')}
       </Dialog.Trigger>
       <Dialog
@@ -94,7 +94,11 @@ export const TokenModal = () => {
               <Divider />
               <div className={classes.contact}>
                 <div className={classes.contact__icon}>
-                  <InformationSquareIcon aria-hidden='true' fontSize='1.5rem' />
+                  <InformationSquareIcon
+                    aria-hidden='true'
+                    height='1.5rem'
+                    width='1.5rem'
+                  />
                 </div>
                 <div className={classes.contact__content}>
                   <Heading data-size='2xs'>
diff --git a/apps/themebuilder/app/layouts/root/layout.tsx b/apps/themebuilder/app/layouts/root/layout.tsx
index ff2870a744..16d8399086 100644
--- a/apps/themebuilder/app/layouts/root/layout.tsx
+++ b/apps/themebuilder/app/layouts/root/layout.tsx
@@ -18,7 +18,9 @@ const rightLinks: FooterLinkListItemProps[] = [
   {
     text: 'designsystem@digdir.no' as unknown as FooterLinkListItemProps['text'],
     url: 'mailto:designsystem@digdir.no',
-    prefix: <EnvelopeClosedIcon aria-hidden='true' fontSize='1.5em' />,
+    prefix: (
+      <EnvelopeClosedIcon aria-hidden='true' height='1.5em' width='1.5em' />
+    ),
   },
   {
     text: ['footer.slack'] as unknown as FooterLinkListItemProps['text'],
diff --git a/apps/themebuilder/app/routes/home/home.tsx b/apps/themebuilder/app/routes/home/home.tsx
index 4cf7644f30..c808d26978 100644
--- a/apps/themebuilder/app/routes/home/home.tsx
+++ b/apps/themebuilder/app/routes/home/home.tsx
@@ -77,7 +77,7 @@ export default function Home({ params: { lang } }: Route.ComponentProps) {
           <div className={classes.btnGroup}>
             <Button data-color='neutral' asChild>
               <Link to={`/${lang}/themebuilder`}>
-                <PaletteIcon fontSize='1.5rem' aria-hidden />
+                <PaletteIcon aria-hidden />
                 {t('themeBuilder.build-theme')}
               </Link>
             </Button>
@@ -85,7 +85,7 @@ export default function Home({ params: { lang } }: Route.ComponentProps) {
               <Link
                 to={`https://www.designsystemet.no/${lang}/fundamentals/start-here/own-theme`}
               >
-                <BookIcon fontSize='1.5rem' aria-hidden />
+                <BookIcon aria-hidden />
                 {t('themeBuilder.documentation')}
               </Link>
             </Button>
diff --git a/apps/www/app/_components/do-dont/do-dont.module.css b/apps/www/app/_components/do-dont/do-dont.module.css
index 332d7df7aa..6caac1f41f 100644
--- a/apps/www/app/_components/do-dont/do-dont.module.css
+++ b/apps/www/app/_components/do-dont/do-dont.module.css
@@ -34,7 +34,8 @@
     }
     svg {
       color: var(--ds-color-base-default);
-      font-size: 2rem;
+      height: 2rem;
+      width: auto;
     }
   }
   .footer {
diff --git a/apps/www/app/_components/image/image.tsx b/apps/www/app/_components/image/image.tsx
index 9779601cd9..a19a6202a4 100644
--- a/apps/www/app/_components/image/image.tsx
+++ b/apps/www/app/_components/image/image.tsx
@@ -73,7 +73,7 @@ const Image = ({
             icon
             variant='tertiary'
           >
-            <XMarkIcon fontSize='1.5rem' />
+            <XMarkIcon />
           </Button>
           <div className={classes.dialogMessage}>
             {t('image.enlarged-text')}
diff --git a/apps/www/app/_components/search-dialog/search-dialog.module.css b/apps/www/app/_components/search-dialog/search-dialog.module.css
index edd1719c80..677ef1670a 100644
--- a/apps/www/app/_components/search-dialog/search-dialog.module.css
+++ b/apps/www/app/_components/search-dialog/search-dialog.module.css
@@ -58,7 +58,8 @@
   align-items: center;
   gap: var(--gap);
   > svg {
-    font-size: var(--icon-size);
+    height: var(--icon-size);
+    width: auto;
   }
 }
 
diff --git a/apps/www/app/_components/sidebar/sidebar.tsx b/apps/www/app/_components/sidebar/sidebar.tsx
index ef60f7f94d..0d8d0dae23 100644
--- a/apps/www/app/_components/sidebar/sidebar.tsx
+++ b/apps/www/app/_components/sidebar/sidebar.tsx
@@ -48,7 +48,7 @@ export const Sidebar = ({
         popoverTargetAction='show'
       >
         {t('sidebar.show')} {t(`sidebar.sidebar`)}
-        <ChevronRightLastIcon aria-hidden fontSize={26} />
+        <ChevronRightLastIcon aria-hidden />
       </Button>
 
       <nav popover='auto' id='sidebar-nav' className={cl(classes.menu)}>
@@ -62,7 +62,7 @@ export const Sidebar = ({
           aria-label={t('header.close-menu')}
           className={classes.closeButton}
         >
-          <XMarkIcon aria-hidden fontSize={26} />
+          <XMarkIcon aria-hidden />
           {/* {t('sidebar.hide')} {t(`sidebar.sidebar`)} */}
         </Button>
         {hideCatTitle ? null : (
diff --git a/apps/www/app/_components/video-card/video-card.module.css b/apps/www/app/_components/video-card/video-card.module.css
index edbf9cb923..7365f7dfec 100644
--- a/apps/www/app/_components/video-card/video-card.module.css
+++ b/apps/www/app/_components/video-card/video-card.module.css
@@ -11,7 +11,8 @@
   }
 
   & a svg {
-    font-size: 1.5rem;
+    height: 1.5rem;
+    width: auto;
     margin-inline-end: var(--ds-size-1);
   }
 
diff --git a/apps/www/app/content/best-practices/en/accessibility/disabled-states.mdx b/apps/www/app/content/best-practices/en/accessibility/disabled-states.mdx
index 8af6dd5303..8ceb5afc05 100644
--- a/apps/www/app/content/best-practices/en/accessibility/disabled-states.mdx
+++ b/apps/www/app/content/best-practices/en/accessibility/disabled-states.mdx
@@ -20,7 +20,7 @@ We recommend avoiding disabled states, and instead following the guidance and so
       gap: "0.75rem",
       textDecoration: 'underline'
     }}>
-      <BrailleIcon aria-hidden fontSize={70}/>
+      <BrailleIcon aria-hidden height={70} width={70}/>
       <span data-size='lg' data-color='success' style={{
       marginTop: "0", 
     }}>Read the article about \
diff --git a/apps/www/app/content/best-practices/no/accessibility/disabled-states.mdx b/apps/www/app/content/best-practices/no/accessibility/disabled-states.mdx
index a356ba8eb4..0e86ba1250 100644
--- a/apps/www/app/content/best-practices/no/accessibility/disabled-states.mdx
+++ b/apps/www/app/content/best-practices/no/accessibility/disabled-states.mdx
@@ -20,7 +20,7 @@ Vi anbefaler å unngå deaktiverte tilstander, og heller følge anbefalingene og
       gap: "0.75rem",
       textDecoration: 'underline'
     }}>
-      <BrailleIcon aria-hidden fontSize={70}/>
+      <BrailleIcon aria-hidden height={70} width={70} />
       <span data-size='lg' data-color='success' style={{
       marginTop: "0", 
     }}>Les artikkelen om deaktiverte \
diff --git a/apps/www/app/content/blog/en/cba.mdx b/apps/www/app/content/blog/en/cba.mdx
index 876898949c..2397288ba7 100644
--- a/apps/www/app/content/blog/en/cba.mdx
+++ b/apps/www/app/content/blog/en/cba.mdx
@@ -31,7 +31,7 @@ The Cost-Benefit Analysis is based on a **conservative assumption of a 25 per ce
       gap: "0.75rem",
       textDecoration: 'underline'
     }}>
-      <CalculatorIcon aria-hidden fontSize={70}/>
+      <CalculatorIcon aria-hidden height={70} width={70} />
       <span data-size='lg' data-color='success' style={{
       marginTop: "0", 
     }}>What does this mean for your organisation?  
diff --git a/apps/www/app/content/blog/no/cba.mdx b/apps/www/app/content/blog/no/cba.mdx
index 3f40891237..e52fc08a33 100644
--- a/apps/www/app/content/blog/no/cba.mdx
+++ b/apps/www/app/content/blog/no/cba.mdx
@@ -33,7 +33,7 @@ I analysen er det lagt til grunn et konservativt anslag på 25 prosent tidsbespa
       gap: "0.75rem",
       textDecoration: 'underline'
     }}>
-      <CalculatorIcon aria-hidden fontSize={70}/>
+      <CalculatorIcon aria-hidden height={70} width={70} />
       <span data-size='lg' data-color='success' style={{
       marginTop: "0", 
     }}>Hva betyr dette for din virksomhet? \
diff --git a/apps/www/app/content/components/badge/badge.stories.tsx b/apps/www/app/content/components/badge/badge.stories.tsx
index 36e393ddba..aa51af3657 100644
--- a/apps/www/app/content/components/badge/badge.stories.tsx
+++ b/apps/www/app/content/components/badge/badge.stories.tsx
@@ -16,7 +16,10 @@ export const Floating = () => (
   <>
     <Badge.Position placement='top-right'>
       <Badge data-color='danger' count={2}></Badge>
-      <EnvelopeClosedFillIcon title='Meldinger' style={{ fontSize: '2rem' }} />
+      <EnvelopeClosedFillIcon
+        title='Meldinger'
+        style={{ height: '2rem', width: 'auto' }}
+      />
     </Badge.Position>
   </>
 );
diff --git a/apps/www/app/content/components/link/link.dodont.tsx b/apps/www/app/content/components/link/link.dodont.tsx
index 00e47515b6..011fff9a2f 100644
--- a/apps/www/app/content/components/link/link.dodont.tsx
+++ b/apps/www/app/content/components/link/link.dodont.tsx
@@ -11,7 +11,7 @@ export const DoIcon = () => {
 export const DontIcon = () => {
   return (
     <Link href='https://arbeidsplassen.nav.no/stillinger'>
-      <ExternalLinkIcon aria-hidden fontSize={24} />
+      <ExternalLinkIcon aria-hidden height={24} width={24} />
       <span>Finn ledige stillinger</span>
     </Link>
   );
@@ -28,7 +28,7 @@ export const DoIconEn = () => {
 export const DontIconEn = () => {
   return (
     <Link href='https://arbeidsplassen.nav.no/stillinger'>
-      <ExternalLinkIcon aria-hidden fontSize={24} />
+      <ExternalLinkIcon aria-hidden height={24} width={24} />
       <span>Find available jobs</span>
     </Link>
   );
diff --git a/apps/www/app/content/components/link/link.stories.tsx b/apps/www/app/content/components/link/link.stories.tsx
index 61954a0b1a..67e01ffac9 100644
--- a/apps/www/app/content/components/link/link.stories.tsx
+++ b/apps/www/app/content/components/link/link.stories.tsx
@@ -47,7 +47,7 @@ export const InTextEn = () => {
 export const WithIcon = () => {
   return (
     <Link href='https://designsystemet.no/slack'>
-      <Chat2Icon aria-hidden fontSize={24} />
+      <Chat2Icon aria-hidden height={24} width={24} />
       <span>Snakk med oss på Slack</span>
     </Link>
   );
@@ -56,7 +56,7 @@ export const WithIcon = () => {
 export const WithIconEn = () => {
   return (
     <Link href='https://designsystemet.no/slack'>
-      <Chat2Icon aria-hidden fontSize={24} />
+      <Chat2Icon aria-hidden height={24} width={24} />
       <span>Talk to us on Slack</span>
     </Link>
   );
diff --git a/apps/www/app/content/components/textfield/textfield.stories.tsx b/apps/www/app/content/components/textfield/textfield.stories.tsx
index 25f2a0934e..945a7d7409 100644
--- a/apps/www/app/content/components/textfield/textfield.stories.tsx
+++ b/apps/www/app/content/components/textfield/textfield.stories.tsx
@@ -122,7 +122,7 @@ export const InputType = () => {
           <Select.Option value='week'>week</Select.Option>
         </Select>
       </Field>
-      <ArrowRightIcon aria-hidden fontSize={48} />
+      <ArrowRightIcon aria-hidden width='48px' height='48px' />
       <Textfield label={`type="${type}"`} type={type} />
     </div>
   );
diff --git a/apps/www/app/content/intro/en/about-the-design-system.mdx b/apps/www/app/content/intro/en/about-the-design-system.mdx
index 66fef2acb9..4f1c1363aa 100644
--- a/apps/www/app/content/intro/en/about-the-design-system.mdx
+++ b/apps/www/app/content/intro/en/about-the-design-system.mdx
@@ -72,7 +72,7 @@ By reusing common building blocks, we avoid solving the same problems over and o
     textDecoration: 'underline',
     marginBottom: "1.5rem"
   }}>
-    <CalculatorIcon aria-hidden fontSize={70}/>
+    <CalculatorIcon aria-hidden height={70} width={70} />
     <span data-size='lg' data-color='success' style={{
       marginTop: "0",
     }}>
diff --git a/apps/www/app/content/intro/en/join-the-community.mdx b/apps/www/app/content/intro/en/join-the-community.mdx
index ac09ad97e0..8678933cd7 100644
--- a/apps/www/app/content/intro/en/join-the-community.mdx
+++ b/apps/www/app/content/intro/en/join-the-community.mdx
@@ -18,7 +18,7 @@ Join the community to stay informed about updates and receive invitations to eve
 
 <Card data-color='success' variant="tinted" asChild>
   <Link href='https://designsystemet.no/slack' style={{ color:'var(--ds-color-success-text-default)', textDecoration: 'underline' }}>
-    <Chat2Icon aria-hidden fontSize={50} />
+    <Chat2Icon aria-hidden height={50} width={50} />
     <span data-size='lg' style={{ verticalAlign: 'middle' }}>Join us in Slack</span>
   </Link>
 </Card>
diff --git a/apps/www/app/content/intro/no/about-the-design-system.mdx b/apps/www/app/content/intro/no/about-the-design-system.mdx
index 68da07e0ac..8d02ba70c6 100644
--- a/apps/www/app/content/intro/no/about-the-design-system.mdx
+++ b/apps/www/app/content/intro/no/about-the-design-system.mdx
@@ -72,7 +72,7 @@ Ved å ta utgangspunkt i felles byggeklosser kan vi unngå å løse de samme pro
       textDecoration: 'underline',
       marginBottom: "1.5rem"
     }}>
-      <CalculatorIcon aria-hidden fontSize={70}/>
+      <CalculatorIcon aria-hidden height={70} width={70} />
       <span data-size='lg' data-color='success' style={{
       marginTop: "0", 
     }}>Hva kan din virksomhet spare? \
diff --git a/apps/www/app/content/intro/no/join-the-community.mdx b/apps/www/app/content/intro/no/join-the-community.mdx
index f1a640b5a6..7693c5a1f3 100644
--- a/apps/www/app/content/intro/no/join-the-community.mdx
+++ b/apps/www/app/content/intro/no/join-the-community.mdx
@@ -20,7 +20,7 @@ Du kan ta del i fellesskapet for å få med deg nyheter og invitasjoner til arra
 
 <Card data-color='success' variant="tinted" asChild>
   <Link href='https://designsystemet.no/slack' style={{ color:'var(--ds-color-success-text-default)', textDecoration: 'underline' }}>
-    <Chat2Icon aria-hidden fontSize={50} />
+    <Chat2Icon aria-hidden height={50} width={50} />
     <span data-size='lg' style={{ verticalAlign: 'middle' }}>Bli med i Slack</span>
   </Link>
 </Card>
diff --git a/apps/www/app/layouts/root/layout.tsx b/apps/www/app/layouts/root/layout.tsx
index 602cb08f1c..dbff89347f 100644
--- a/apps/www/app/layouts/root/layout.tsx
+++ b/apps/www/app/layouts/root/layout.tsx
@@ -28,7 +28,9 @@ const rightLinks: FooterLinkListItemProps[] = [
   {
     text: 'designsystem@digdir.no' as unknown as FooterLinkListItemProps['text'],
     url: 'mailto:designsystem@digdir.no',
-    prefix: <EnvelopeClosedIcon aria-hidden='true' fontSize='1.5em' />,
+    prefix: (
+      <EnvelopeClosedIcon aria-hidden='true' height='1.5em' width='1.5em' />
+    ),
   },
   {
     text: ['footer.slack'] as unknown as FooterLinkListItemProps['text'],
diff --git a/apps/www/app/routes/home/home.tsx b/apps/www/app/routes/home/home.tsx
index 64ade976ae..a82e047e45 100644
--- a/apps/www/app/routes/home/home.tsx
+++ b/apps/www/app/routes/home/home.tsx
@@ -150,7 +150,7 @@ export default function Home({ loaderData: { posts } }: Route.ComponentProps) {
                 description={t('frontpage.get-started.description')}
                 color='blue'
                 url='fundamentals/introduction/get-started'
-                icon={<PaletteIcon fontSize={36} aria-hidden='true' />}
+                icon={<PaletteIcon height={36} width={36} aria-hidden='true' />}
                 level={2}
               />
 
@@ -159,7 +159,9 @@ export default function Home({ loaderData: { posts } }: Route.ComponentProps) {
                 description={t('frontpage.components.description')}
                 color='red'
                 url='components'
-                icon={<ComponentIcon fontSize={34} aria-hidden='true' />}
+                icon={
+                  <ComponentIcon height={34} width={34} aria-hidden='true' />
+                }
                 level={2}
               />
 
@@ -168,7 +170,7 @@ export default function Home({ loaderData: { posts } }: Route.ComponentProps) {
                 description={t('frontpage.patterns.description')}
                 color='yellow'
                 url='patterns'
-                icon={<WrenchIcon fontSize={36} aria-hidden='true' />}
+                icon={<WrenchIcon height={36} width={36} aria-hidden='true' />}
                 level={2}
               />
             </div>
@@ -296,20 +298,24 @@ export default function Home({ loaderData: { posts } }: Route.ComponentProps) {
             <div data-links>
               <Link href='/slack'>
                 <span>
-                  <PersonChatIcon fontSize={24} aria-hidden='true' />
+                  <PersonChatIcon height={24} width={24} aria-hidden='true' />
                 </span>
 
                 {t('frontpage.join-section.buttons.slack')}
               </Link>
               <Link href='https://github.com/digdir/designsystemet'>
                 <span>
-                  <BranchingIcon fontSize={24} aria-hidden='true' />
+                  <BranchingIcon height={24} width={24} aria-hidden='true' />
                 </span>
                 {t('frontpage.join-section.buttons.github')}
               </Link>
               <Link href='mailto:designsystem@digdir.no'>
                 <span>
-                  <EnvelopeClosedIcon fontSize={24} aria-hidden='true' />
+                  <EnvelopeClosedIcon
+                    height={24}
+                    width={24}
+                    aria-hidden='true'
+                  />
                 </span>
                 {t('frontpage.join-section.buttons.email')}
               </Link>
diff --git a/internal/components/src/clipboard-button/clipboard-button.tsx b/internal/components/src/clipboard-button/clipboard-button.tsx
index 2b826838e3..c3446ea69b 100644
--- a/internal/components/src/clipboard-button/clipboard-button.tsx
+++ b/internal/components/src/clipboard-button/clipboard-button.tsx
@@ -48,7 +48,7 @@ export const ClipboardButton = ({
           data-size='sm'
           aria-label={ariaLabel}
         >
-          <ClipboardIcon fontSize={'1.4rem'} aria-hidden='true' />
+          <ClipboardIcon aria-hidden='true' />
           {text && <span className={classes.text}>{text}</span>}
         </Button>
       </Tooltip>
diff --git a/internal/components/src/header/header.module.css b/internal/components/src/header/header.module.css
index f9a612fb61..b85339f956 100644
--- a/internal/components/src/header/header.module.css
+++ b/internal/components/src/header/header.module.css
@@ -168,7 +168,7 @@
 }
 
 .toggleButton svg {
-  font-size: 1.5em;
+  height: 1.5em;
 }
 @media (max-width: 600px) {
   .toggleButton span {
diff --git a/internal/components/src/header/header.tsx b/internal/components/src/header/header.tsx
index 8b346d853d..888bf9040d 100644
--- a/internal/components/src/header/header.tsx
+++ b/internal/components/src/header/header.tsx
@@ -274,9 +274,9 @@ const Header = ({
                   className={classes.toggleButton}
                 >
                   {theme === 'dark' ? (
-                    <SunIcon fontSize='1.75em' aria-hidden />
+                    <SunIcon aria-hidden />
                   ) : (
-                    <MoonIcon fontSize='1.75em' aria-hidden />
+                    <MoonIcon aria-hidden />
                   )}
                 </Button>
               </Tooltip>
@@ -294,7 +294,6 @@ const Header = ({
                 >
                   <MenuHamburgerIcon
                     aria-hidden
-                    fontSize={26}
                     color='var(--ds-color-neutral-text-default)'
                   />
                 </Button>
@@ -325,7 +324,6 @@ const Header = ({
                     >
                       <XMarkIcon
                         aria-hidden
-                        fontSize={26}
                         color='var(--ds-color-neutral-text-default)'
                       />
                     </Button>
diff --git a/packages/css/src/avatar-stack.css b/packages/css/src/avatar-stack.css
index b70364da2c..f9be319b53 100644
--- a/packages/css/src/avatar-stack.css
+++ b/packages/css/src/avatar-stack.css
@@ -1,9 +1,3 @@
-@property --captured-length {
-  syntax: '<length>';
-  inherits: true;
-  initial-value: 0px;
-}
-
 .ds-avatar-stack {
   --dsc-avatar-stack-size: var(--ds-size-12);
   --dsc-avatar-stack-gap: 2px;
@@ -14,14 +8,14 @@
   --_gap: var(--dsc-avatar-stack-gap);
   --_overlap: calc(((var(--dsc-avatar-stack-size) / 100) * var(--dsc-avatar-stack-overlap)) * -1);
 
-  --captured-length: var(--_overlap);
+  --ds-captured-length: var(--_overlap);
   display: flex;
   align-items: center;
   isolation: isolate;
   padding-block: 1px;
   width: max-content;
   margin: 0; /*remove user-agent default for figure*/
-  transition: --captured-length 0.2s ease;
+  transition: --ds-captured-length 0.2s ease;
 
   &:focus-visible {
     @composes ds-focus--visible from './base.css';
@@ -30,7 +24,7 @@
   &[data-expandable] {
     &:hover,
     &:focus-visible {
-      --captured-length: var(--_gap);
+      --ds-captured-length: var(--_gap);
     }
   }
 
@@ -52,13 +46,17 @@
   .ds-avatar {
     --dsc-avatar-size: var(--dsc-avatar-stack-size);
     --_font-size: max(0.75rem, calc(var(--dsc-avatar-stack-size) * 0.5));
-    mask: radial-gradient(50% 50% at calc(150% + var(--captured-length)), transparent calc(100% - 1px + var(--_gap)), #000 calc(100% + var(--_gap)));
+    mask: radial-gradient(50% 50% at calc(150% + var(--ds-captured-length)), transparent calc(100% - 1px + var(--_gap)), #000 calc(100% + var(--_gap)));
     &[data-variant='square'] {
-      mask: linear-gradient(to right, #000 calc(100% + var(--captured-length) - var(--_gap)), transparent calc(100% + var(--captured-length) - var(--_gap)));
+      mask: linear-gradient(
+        to right,
+        #000 calc(100% + var(--ds-captured-length) - var(--_gap)),
+        transparent calc(100% + var(--ds-captured-length) - var(--_gap))
+      );
     }
 
     &:not(:first-child) {
-      margin-left: var(--captured-length);
+      margin-left: var(--ds-captured-length);
     }
 
     &:nth-last-child(1 of .ds-avatar) {
diff --git a/packages/css/src/badge.css b/packages/css/src/badge.css
index 2adc64be4a..80df39764a 100644
--- a/packages/css/src/badge.css
+++ b/packages/css/src/badge.css
@@ -51,6 +51,7 @@
   position: relative;
   height: fit-content;
   width: fit-content;
+  --ds-captured-length: 1em;
 
   &:not([hidden]) {
     display: inline-flex;
@@ -65,9 +66,10 @@
     z-index: 1; /*prevent focus-ring overlaying badge in certain cases*/
   }
 
-  & :where(img, svg) {
+  > :where(img, svg) {
     flex-shrink: 0; /* Never shrink icon */
-    font-size: 1.25em; /* Auto scale icon based on font-size */
+    /* using --ds-captured-length fixes svg not scaling with zoom in Safari */
+    font-size: calc(var(--ds-captured-length) * 1.25); /* Auto scale icon based on font-size */
   }
 
   &[data-placement='top-right'] .ds-badge::before {
diff --git a/packages/css/src/base.css b/packages/css/src/base.css
index bc84b84e8a..f325cf2039 100644
--- a/packages/css/src/base.css
+++ b/packages/css/src/base.css
@@ -194,3 +194,10 @@ body {
 [data-size] {
   font-size: var(--ds-body-md-font-size);
 }
+
+/* Capture a length value, e.g. 1em, at the element where the variable is set */
+@property --ds-captured-length {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
diff --git a/packages/css/src/button.css b/packages/css/src/button.css
index a0966da051..29656e2822 100644
--- a/packages/css/src/button.css
+++ b/packages/css/src/button.css
@@ -10,6 +10,7 @@
   --dsc-button-gap: var(--ds-size-2);
   --dsc-button-padding: var(--ds-size-2) var(--ds-size-4);
   --dsc-button-size: var(--ds-size-12);
+  --ds-captured-length: 1em;
 
   align-items: center;
   background: var(--dsc-button-background);
@@ -52,9 +53,10 @@
     font-size: inherit; /* Ensure inheriting font-size when <button> */
   }
 
-  & :where(img, svg) {
+  & :where(img, svg):not(.ds-spinner) {
     flex-shrink: 0;
-    font-size: 1.3em;
+    /* using --ds-captured-length fixes svg not scaling with zoom in Safari */
+    font-size: calc(var(--ds-captured-length) * 1.3);
   }
 
   &:focus-visible {
@@ -70,8 +72,9 @@
     height: var(--dsc-button-size); /* Ensure it keeps square shape */
     padding: 0;
 
-    & :where(img, svg) {
-      font-size: 1.5em;
+    & :where(img, svg):not(.ds-spinner) {
+      /* using --ds-captured-length fixes svg not scaling with zoom in Safari */
+      font-size: calc(var(--ds-captured-length) * 1.5);
     }
   }
 
@@ -82,7 +85,7 @@
 
   /* Style spinner when in button */
   & .ds-spinner {
-    font-size: 1.4em;
+    height: 1.4em;
   }
 
   /**
diff --git a/packages/css/src/spinner.css b/packages/css/src/spinner.css
index f4b551e2c1..00e360a89b 100644
--- a/packages/css/src/spinner.css
+++ b/packages/css/src/spinner.css
@@ -6,33 +6,32 @@
 
   animation: ds-spinner-rotate-animation linear infinite var(--dsc-spinner-animation-duration);
   box-sizing: border-box;
-  font-size: var(--ds-size-11);
-  height: 1em;
-  width: 1em;
+  height: var(--ds-size-11);
+  width: auto;
 
-  /* Using font-size to ensure consistent size when explicitly setting data-size */
+  /* Ensure consistent size when explicitly setting data-size */
   &[data-size='2xs'] {
-    font-size: 0.75rem;
+    height: 0.75rem;
   }
 
   &[data-size='xs'] {
-    font-size: 1.25rem;
+    height: 1.25rem;
   }
 
   &[data-size='sm'] {
-    font-size: 2rem;
+    height: 2rem;
   }
 
   &[data-size='md'] {
-    font-size: 2.75rem;
+    height: 2.75rem;
   }
 
   &[data-size='lg'] {
-    font-size: 3.75rem;
+    height: 3.75rem;
   }
 
   &[data-size='xl'] {
-    font-size: 5.5rem;
+    height: 5.5rem;
   }
 }
 
diff --git a/packages/css/src/tabs.css b/packages/css/src/tabs.css
index 7d2012eee9..0b6e2c7d64 100644
--- a/packages/css/src/tabs.css
+++ b/packages/css/src/tabs.css
@@ -44,6 +44,7 @@
       position: relative;
       text-align: center;
       white-space: nowrap;
+      --ds-captured-length: 1em;
 
       @composes ds-focus--inset from './base.css';
 
@@ -57,7 +58,8 @@
 
       & :where(img, svg) {
         flex-shrink: 0; /* Never shrink icon */
-        font-size: 1.25em; /* Auto scale icon based on font-size */
+        /* using --ds-captured-length fixes svg not scaling with zoom in Safari */
+        font-size: calc(var(--ds-captured-length) * 1.25); /* Auto scale icon based on font-size */
       }
 
       &::after {
diff --git a/packages/css/src/tag.css b/packages/css/src/tag.css
index 9c1ea0842c..3ec08392a4 100644
--- a/packages/css/src/tag.css
+++ b/packages/css/src/tag.css
@@ -7,6 +7,8 @@
   --dsc-tag-border-color: transparent;
   --dsc-tag-border-style: solid;
 
+  --ds-captured-length: 1em;
+
   align-items: center;
   background: var(--dsc-tag-background);
   border-radius: var(--ds-border-radius-sm);
@@ -26,7 +28,8 @@
 
   & :where(img, svg) {
     flex-shrink: 0;
-    font-size: 1.25em;
+    /* using --ds-captured-length fixes svg not scaling with zoom in Safari */
+    font-size: calc(var(--ds-captured-length) * 1.25);
   }
 
   &:not([hidden]) {
diff --git a/packages/react/src/components/Combobox/internal/ComboboxClearButton.tsx b/packages/react/src/components/Combobox/internal/ComboboxClearButton.tsx
index 317733aff4..f5ecd61411 100644
--- a/packages/react/src/components/Combobox/internal/ComboboxClearButton.tsx
+++ b/packages/react/src/components/Combobox/internal/ComboboxClearButton.tsx
@@ -39,7 +39,7 @@ const ComboboxClearButton = forwardRef<
       type='button'
       aria-label={clearButtonLabel}
     >
-      <XMarkIcon fontSize='1.5em' title='Clear selection' />
+      <XMarkIcon height='1.5em' width='1.5em' title='Clear selection' />
     </button>
   );
 });
diff --git a/packages/react/src/components/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/Combobox/internal/ComboboxInput.tsx
index 27d52ab58a..289b13c8e8 100644
--- a/packages/react/src/components/Combobox/internal/ComboboxInput.tsx
+++ b/packages/react/src/components/Combobox/internal/ComboboxInput.tsx
@@ -155,9 +155,9 @@ const ComboboxInput = ({
         {/* Arrow for combobox. Click is handled by the wrapper */}
         <div className={'ds-combobox__arrow'}>
           {open ? (
-            <ChevronUpIcon title='arrow up' fontSize='1.5em' />
+            <ChevronUpIcon title='arrow up' height='1.5em' width='1.5em' />
           ) : (
-            <ChevronDownIcon title='arrow down' fontSize='1.5em' />
+            <ChevronDownIcon title='arrow down' height='1.5em' width='1.5em' />
           )}
         </div>
       </div>
diff --git a/packages/react/src/components/link/link.stories.tsx b/packages/react/src/components/link/link.stories.tsx
index 163dc1c5ee..afdc3c58d3 100644
--- a/packages/react/src/components/link/link.stories.tsx
+++ b/packages/react/src/components/link/link.stories.tsx
@@ -46,28 +46,28 @@ export const InText: StoryFn = (args) => (
 
 export const WithIcon: StoryFn = (args) => (
   <Link href='mailto:designsystem@digdir.no' {...args}>
-    <EnvelopeClosedIcon aria-hidden fontSize={24} />
+    <EnvelopeClosedIcon aria-hidden height={24} width={24} />
     <span>Kontakt oss</span>
   </Link>
 );
 export const WithIconRight: StoryFn = (args) => (
   <Link href='mailto:designsystem@digdir.no' {...args}>
     <span>Kontakt oss</span>
-    <EnvelopeClosedIcon aria-hidden fontSize={24} />
+    <EnvelopeClosedIcon aria-hidden height={24} width={24} />
   </Link>
 );
 export const WithMultipleIcons: StoryFn = (args) => (
   <Link href={designsystemetLink} {...args}>
-    <ComponentIcon aria-hidden fontSize={24} />
+    <ComponentIcon aria-hidden height={24} width={24} />
     <span>Komponenter og</span>
-    <BookIcon aria-hidden fontSize={24} />
+    <BookIcon aria-hidden height={24} width={24} />
     <span>dokumentasjon på designsystemet.no</span>
-    <ExternalLinkIcon aria-hidden fontSize={24} />
+    <ExternalLinkIcon aria-hidden height={24} width={24} />
   </Link>
 );
 export const WithOnlyIcon: StoryFn = (args) => (
   <Link href={designsystemetLink} {...args}>
-    <ComponentIcon title='Designsystemet' fontSize={52} />
+    <ComponentIcon title='Designsystemet' height={52} width={52} />
   </Link>
 );