Skip to content

fix: icons now scale when zooming in Safari #4484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
unekinn wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix: icons now scale when zooming in Safari #4484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf83182
fix: icons now scale when zooming in Safari
unekinn Feb 10, 2026
d7c53d3
refactor(www,themebuilder): remove fontSize from svg where it had no …
unekinn Feb 10, 2026
096b7da
refactor: width='auto' is sometimes problematic
unekinn Feb 10, 2026
b1780fa
also replace svg width auto in mdx files
unekinn Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/chatty-shrimps-battle.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@digdir/designsystemet-react": patch
"@digdir/designsystemet-css": patch
---

**Badge, Button, Spinner, Tabs, Tag**: Icons now scale in Safari when zooming
Copy link
Collaborator

@oddvernes oddvernes Feb 12, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a side effect with how this was implemented that fontSize on the svg in these components now has an effect? Because I think it should be mentined here if so (considering how many examples there were of this in our own code)

8 changes: 2 additions & 6 deletions apps/themebuilder/app/_components/appearance-toggle/appearance-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/themebuilder/app/_components/color-input/color-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/themebuilder/app/_components/previews/landing/landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions apps/themebuilder/app/_components/sidebar/color-page/color-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down Expand Up @@ -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 && (
Expand Down Expand Up @@ -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>
}
Expand Down
4 changes: 2 additions & 2 deletions apps/themebuilder/app/_components/sidebar/color-pane/color-pane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const ColorPane = ({
}}
className={classes.back}
>
<ChevronLeftIcon aria-hidden fontSize='1.5rem' />
<ChevronLeftIcon aria-hidden />
{t('colorPane.save')}
</Button>
<Button
Expand Down Expand Up @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion apps/themebuilder/app/_components/sidebar/finish-page/finish-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
2 changes: 1 addition & 1 deletion apps/themebuilder/app/_components/sidebar/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
7 changes: 6 additions & 1 deletion apps/themebuilder/app/_components/size-input/size-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/themebuilder/app/_components/theme-header/theme-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
8 changes: 6 additions & 2 deletions apps/themebuilder/app/_components/token-modal/token-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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'>
Expand Down
4 changes: 3 additions & 1 deletion apps/themebuilder/app/layouts/root/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down
4 changes: 2 additions & 2 deletions apps/themebuilder/app/routes/home/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion apps/www/app/_components/do-dont/do-dont.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
}
svg {
color: var(--ds-color-base-default);
font-size: 2rem;
height: 2rem;
width: auto;
}
}
.footer {
Expand Down
2 changes: 1 addition & 1 deletion apps/www/app/_components/image/image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const Image = ({
icon
variant='tertiary'
>
<XMarkIcon fontSize='1.5rem' />
<XMarkIcon />
</Button>
<div className={classes.dialogMessage}>
{t('image.enlarged-text')}
Expand Down
3 changes: 2 additions & 1 deletion apps/www/app/_components/search-dialog/search-dialog.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@
align-items: center;
gap: var(--gap);
> svg {
font-size: var(--icon-size);
height: var(--icon-size);
width: auto;
}
}

Expand Down
4 changes: 2 additions & 2 deletions apps/www/app/_components/sidebar/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}>
Expand All @@ -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 : (
Expand Down
3 changes: 2 additions & 1 deletion apps/www/app/_components/video-card/video-card.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
}

& a svg {
font-size: 1.5rem;
height: 1.5rem;
width: auto;
margin-inline-end: var(--ds-size-1);
}

Expand Down
2 changes: 1 addition & 1 deletion apps/www/app/content/best-practices/en/accessibility/disabled-states.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 \
Expand Down
2 changes: 1 addition & 1 deletion apps/www/app/content/best-practices/no/accessibility/disabled-states.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 \
Expand Down
2 changes: 1 addition & 1 deletion apps/www/app/content/blog/en/cba.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand Down
2 changes: 1 addition & 1 deletion apps/www/app/content/blog/no/cba.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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? \
Expand Down
5 changes: 4 additions & 1 deletion apps/www/app/content/components/badge/badge.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/www/app/content/components/link/link.dodont.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/www/app/content/components/link/link.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/www/app/content/intro/en/about-the-design-system.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}}>
Expand Down
2 changes: 1 addition & 1 deletion apps/www/app/content/intro/en/join-the-community.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/www/app/content/intro/no/about-the-design-system.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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? \
Expand Down
2 changes: 1 addition & 1 deletion apps/www/app/content/intro/no/join-the-community.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion apps/www/app/layouts/root/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down
Loading
Loading