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 57bab7a3b0..5bd843e9d0 100644
--- a/apps/www/app/_components/image/image.tsx
+++ b/apps/www/app/_components/image/image.tsx
@@ -77,7 +77,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 7bbe4d7302..439b1bb455 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 d48a6724aa..16d7f9fd00 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 accf47c77a..1be799c5f2 100644
--- a/apps/www/app/content/blog/en/cba.mdx
+++ b/apps/www/app/content/blog/en/cba.mdx
@@ -33,7 +33,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 662d92fc46..82c3f43066 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/intro/en/about-the-design-system.mdx b/apps/www/app/content/intro/en/about-the-design-system.mdx
index 54eaec3add..79ad63c6a4 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 8238c04b09..a8984b308d 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 d05f1ac56a..0f9cd06e07 100644
--- a/apps/www/app/layouts/root/layout.tsx
+++ b/apps/www/app/layouts/root/layout.tsx
@@ -26,7 +26,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 5074e5302c..c417045b81 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/badge.css b/packages/css/src/badge.css
index 62c10d3b61..185f86130d 100644
--- a/packages/css/src/badge.css
+++ b/packages/css/src/badge.css
@@ -66,7 +66,8 @@
 
   & :where(img, svg) {
     flex-shrink: 0; /* Never shrink icon */
-    font-size: 1.25em; /* Auto scale icon based on font-size */
+    height: 1.25em; /* Auto scale icon based on font-size */
+    width: auto;
   }
 
   &[data-placement='top-right'] .ds-badge::before {
diff --git a/packages/css/src/button.css b/packages/css/src/button.css
index a0966da051..b07d3c78b3 100644
--- a/packages/css/src/button.css
+++ b/packages/css/src/button.css
@@ -54,7 +54,8 @@
 
   & :where(img, svg) {
     flex-shrink: 0;
-    font-size: 1.3em;
+    height: 1.3em;
+    width: auto;
   }
 
   &:focus-visible {
@@ -71,7 +72,8 @@
     padding: 0;
 
     & :where(img, svg) {
-      font-size: 1.5em;
+      height: 1.5em;
+      width: auto;
     }
   }
 
@@ -82,7 +84,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 f4a79a23f6..2319857f1f 100644
--- a/packages/css/src/tabs.css
+++ b/packages/css/src/tabs.css
@@ -60,7 +60,8 @@
 
       & :where(img, svg) {
         flex-shrink: 0; /* Never shrink icon */
-        font-size: 1.25em; /* Auto scale icon based on font-size */
+        height: 1.25em; /* Auto scale icon based on font-size */
+        width: auto;
       }
 
       &::after {
diff --git a/packages/css/src/tag.css b/packages/css/src/tag.css
index 9c1ea0842c..e4ed88f100 100644
--- a/packages/css/src/tag.css
+++ b/packages/css/src/tag.css
@@ -26,7 +26,8 @@
 
   & :where(img, svg) {
     flex-shrink: 0;
-    font-size: 1.25em;
+    height: 1.25em;
+    width: auto;
   }
 
   &: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>
 );