fix: icons now scale when zooming in Safari

[unekinn]

Summary

Changes icon sizing css from using font-size, which breaks scaling when zooming in Safari, to using height and width

Fixes #4038

Checks

• I have read the contribution guidelines
• I have added a changeset (run pnpm changeset if relevant)

[changeset-bot]

🦋 Changeset detected

Latest commit: fccaae4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@digdir/designsystemet-react	Patch
@digdir/designsystemet-css	Patch
@digdir/designsystemet	Patch
@digdir/designsystemet-types	Patch
@digdir/designsystemet-web	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Preview deployments for this pull request:

storybook - 27. Feb 2026 - 09:56

themebuilder - 27. Feb 2026 - 09:56

www - 27. Feb 2026 - 10:02

[oddvernes]

Just noticed a lot of icons on the front page don't scale on firefox

But this is also the case in the prod version. But the icons in the 3 cards at the top of the page scale in prod but not in this pr 🤷

[unekinn]

@oddvernes how strange. It scales fine in my Firefox (147.0.3)

Cards:

Footer:

[oddvernes]

Weird, Im on same firefox, macbook. But its seems to mainly be noticeable at pretty high zoom like 200% (with cmd +) and above so it is not as bad as safari. perhaps it is flex-shrink or something

[oddvernes]

After some discussion at a daily, it was decided that the fontSize attribute on icon becoming active in these components constitutes too much of a risk of visual changes downstream. It was pointed out that when you copy icons from aksel there is a fontSize="1.5rem" already set that you have to actively remove.

@eirikbacker suggested setting font-size to unset and this seems to do the trick. inherit also works. Now the fontSize attribute has no effect without messing up anything else

[unekinn]

@eirikbacker suggested setting font-size to unset and this seems to do the trick. inherit also works. Now the fontSize attribute has no effect without messing up anything else

Unfortunately that doesn't work. If you set font-size: unset or inherit in & :where(img, svg) {...} the icons no longer scale in Safari.

We did fix this downstream using the font-size: <magic value>ex trick, since we only use Inter. It might be fine upstream as well? Not sure how much it varies from font to font.

If it varies too much, we could potentially calculate the magic value in the theme builder when we add official support for using other fonts 🤔

[oddvernes]

Ah, of course I forgot to test in safari 🤦...

For ex variation: The most extreme difference in my small sample of test fonts is between roboto and courier new
font-size: 18px, 1ex = 9,5px roboto, 7,6px courier-new (using this)

by the way there is one other fix, but it requires a registered custom property

@property --captured-em {
  syntax: '<length>';
  initial-value: 0px;
  inherits: true;
}
.ds-button {
 --captured-em: 1em;
  & :where(img, svg) {
    flex-shrink: 0;
    font-size: calc(var(--captured-em) * 1.3);
  }
}

Technically we already have one with the needed type in avatar-stack (--captured-length). It could be moved to base.css and used for this as well since they are reusable. 🤔

[oddvernes]

Looks like we still have some issues in the visual tests, icons missing in badge, spinner too large

I am going over these. Spinner fixed (using width/height), fixed badge, tabs, tag, all should be good now 👍

[oddvernes]

This also fixes a bug where badge--position would override svg size of nested children