digdir · oddvernes · Mar 5, 2026 · Feb 23, 2026 · Feb 23, 2026 · Feb 23, 2026
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-react": patch
+"@digdir/designsystemet-css": patch
+---
+
+**Badge, Button, Spinner, Tabs, Tag**: Icons now scale in Safari when zooming
@@ -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>

@@ -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>
   );

@@ -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>

@@ -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>
               }

@@ -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}>

@@ -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 />

@@ -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(

@@ -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>
   );

@@ -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}>

@@ -31,7 +31,7 @@ export const TokenModal = () => {
           return modalRef.current?.showModal();
         }}
       >
-        <StarIcon aria-hidden fontSize='1.5rem' />
+        <StarIcon aria-hidden 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'>

@@ -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'],

@@ -77,15 +77,15 @@ 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>
             <Button data-color='neutral' variant='secondary' asChild>
               <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>

@@ -34,7 +34,8 @@
     }
     svg {
       color: var(--ds-color-base-default);
-      font-size: 2rem;
+      height: 2rem;
+      width: auto;
     }
   }
   .footer {

@@ -73,7 +73,7 @@ const Image = ({
             icon
             variant='tertiary'
           >
-            <XMarkIcon fontSize='1.5rem' />
+            <XMarkIcon />
           </Button>
           <div className={classes.dialogMessage}>
             {t('image.enlarged-text')}

@@ -27,8 +27,8 @@
 }
 
 .iconContainer {
-  height: 54px;
-  width: 54px;
+  height: 3.375rem;
+  width: 3.375rem;
   border-radius: var(--ds-border-radius-sm);
   transform: rotate(45deg);
   margin: 0 auto;
@@ -37,12 +37,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 32px;
 }
 
 .iconContainer svg,
 .iconContainer img {
   transform: rotate(-45deg);
+  height: 2.125rem;
+  width: auto;
 }
 
 .red {

@@ -58,7 +58,8 @@
   align-items: center;
   gap: var(--gap);
   > svg {
-    font-size: var(--icon-size);
+    height: var(--icon-size);
+    width: auto;
   }
 }
 

@@ -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 : (

@@ -27,8 +27,7 @@
 .title {
   margin-block: 0;
   a {
-    text-decoration-thickness: 1px;
-    text-underline-offset: 4px;
+    color: inherit;
   }
 }
 

@@ -11,7 +11,8 @@
   }
 
   & a svg {
-    font-size: 1.5rem;
+    height: 1.5rem;
+    width: auto;
     margin-inline-end: var(--ds-size-1);
   }
 

@@ -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={'4.375rem'} width={'4.375rem'}/>
       <span data-size='lg' data-color='success' style={{
       marginTop: "0", 
     }}>Read the article about \

@@ -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={'4.375rem'} width={'4.375rem'} />
       <span data-size='lg' data-color='success' style={{
       marginTop: "0", 
     }}>Les artikkelen om deaktiverte \

@@ -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={'4.375rem'} width={'4.375rem'} />
       <span data-size='lg' data-color='success' style={{
       marginTop: "0", 
     }}>What does this mean for your organisation?  
@@ -64,7 +64,7 @@ The full Cost–Benefit Analysis (CBA), including methodology, figures and asses
       gap: "0.45rem",
     }}
   >
-    <FileTextIcon aria-hidden style={{ width: 96, height: 96 }} />
+    <FileTextIcon aria-hidden height={'6rem'} width={'6rem'} />
     <span data-size='lg' data-color='success'>
       Cost–Benefit Analysis (CBA):  
       Designsystemet as a shared solution

@@ -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={'4.375rem'} width={'4.375rem'} />
       <span data-size='lg' data-color='success' style={{
       marginTop: "0", 
     }}>Hva betyr dette for din virksomhet? \
@@ -63,8 +63,7 @@ Hele rapporten med metode, tall og vurderinger ligger åpent tilgjengelig. Analy
       alignItems: "center",
       gap: "0.45rem",
     }}>
-      <FileTextIcon aria-hidden 
-      style={{ width: 96, height: 96 }}/>
+      <FileTextIcon aria-hidden height={'6rem'} width={'6rem'} />
       <span data-size='lg' data-color='success'> Samfunnsøkonomisk analyse:
       \
       Designsystemet som fellesløsning </span>

@@ -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>
   </>
 );

@@ -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={'1.5rem'} width={'1.5rem'} />
       <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={'1.5rem'} width={'1.5rem'} />
       <span>Find available jobs</span>
     </Link>
   );

@@ -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={'1.5rem'} width={'1.5rem'} />
       <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={'1.5rem'} width={'1.5rem'} />
       <span>Talk to us on Slack</span>
     </Link>
   );

@@ -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='3rem' height='3rem' />
       <Textfield label={`type="${type}"`} type={type} />
     </div>
   );

@@ -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={'4.375rem'} width={'4.375rem'} />
     <span data-size='lg' data-color='success' style={{
       marginTop: "0",
     }}>