Icons become unusable in safari due to stroke not scaling

[annaruble]

Package

• lucide
• lucide-angular
• lucide-flutter
• lucide-preact
• lucide-react
• lucide-react-native
• lucide-solid
• lucide-svelte
• lucide-vue
• lucide-vue-next
• Figma plugin
• source/main
• other/not relevant

Version

0.465.0

Can you reproduce this in the latest version?

• Yes
• No

Browser

• Chrome/Chromium
• Firefox
• Safari
• Edge
• iOS Safari
• Opera
• Other/not relevant

Operating system

• Windows
• Linux
• macOS
• ChromeOS
• iOS
• Android
• Other/not relevant

Description

When using the browser zoom in Safari with Lucide icons, the stroke width doesn't appear to scale with the size of the icon, which makes things appear incredibly distorted. This is happening both with my implementation of Lucide icons, as well as with your main site. https://lucide.dev/icons/

Steps to reproduce

1. Open up Safari & view icons
2. Zoom in the browser window (cmd +)
3. See the icons scaling poorly

Checklist

• I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)

[jamiemlaw]

Looks very much like a Safari bug.

As an atrocious workaround, you could set a font size on the SVG element, and then specify the stroke in ems, and that should fix it in most cases.

.lucide {
  font-size: 2px;
  stroke-width: 1em;
}

I wouldn't exactly call this solution robust. It exploits another scaling bug in Safari's SVG renderer, in which items do not scale up when they should. In order for it to work, you can't specify the width and height of your SVG in ems. Instead, use rem or px.

[annaruble]

What's curious is that I have some custom svg icons in my repository as well (with very similar markup to what I see when inspecting the Lucide markup), and those seem to scale fine in Safari compared to the icons coming from Lucide -

I'm going to continue doing some digging on what's different to the custom SVGs vs. the ones coming from Lucide, and will report back with any findings!

[annaruble]

Okay, I think I've sorted out what the key differences are. My custom image icon is slightly different to the one Lucide provides, but I think it illustrates the point well! I noticed that turning on the "absoluteStrokeWidth" option in Lucide was helpful, but didn't completely fix the problem, as it made the stroke thinner than I wanted it to appear in Chrome, and still was slightly too thick in Safari:

Zoomed in using Safari:

Zoomed in using Chrome:

After examining the svg markup differences between my custom icon and the ones coming from the Lucide library, I noticed that the custom icons (with svg markup copied from Figma) does not include a stroke value at all, and has much more robust path information. This is also true when you compare the svg markup from the browser in Lucide to a Lucide icon that's pulled into Figma & copied that way, see the differences between the 'flag' icon:

Copied from Lucide -

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-flag"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>

Lucide flag icon pulled into figma, then use figma to copy the svg markup:

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.3333 1.66602C10.6455 1.66602 8.76581 2.11464 7.50602 2.61855C6.87759 2.86992 6.41067 3.13221 6.08071 3.35218C5.87195 3.49136 5.66606 3.64293 5.48816 3.82084C5.17559 4.1334 5 4.55732 5 4.99935V36.666C5 37.5865 5.74619 38.3327 6.66667 38.3327C7.58714 38.3327 8.33333 37.5865 8.33333 36.666V25.8961C9.04964 25.541 10.5759 24.9993 13.3333 24.9993C15.492 24.9993 17.5008 25.7945 19.4739 26.584C21.5055 27.3969 23.8443 28.3327 26.6667 28.3327C29.3545 28.3327 31.2342 27.8841 32.494 27.3801C33.1224 27.1288 33.5893 26.8665 33.9193 26.6465C34.1281 26.5073 34.3339 26.3558 34.5118 26.1779C34.8244 25.8653 35 25.4414 35 24.9993V4.99935C35 4.32525 34.5939 3.71752 33.9711 3.45955C33.3644 3.20823 32.6684 3.33709 32.1921 3.78467C32.1526 3.81719 31.8751 4.03758 31.256 4.28522C30.4325 4.61464 28.9788 4.99935 26.6667 4.99935C24.5322 4.99935 22.7325 4.29729 20.619 3.45189C18.2732 2.51336 15.8946 1.66602 13.3333 1.66602ZM8.33333 22.3274V5.8961C9.04964 5.54099 10.5759 4.99935 13.3333 4.99935C15.492 4.99935 17.5008 5.79457 19.4739 6.58396C21.5055 7.39688 23.8443 8.33268 26.6667 8.33268C28.8196 8.33268 30.454 8.04486 31.6667 7.67134V24.1026C30.9504 24.4577 29.4241 24.9993 26.6667 24.9993C24.5322 24.9993 22.7325 24.2973 20.619 23.4519C18.2732 22.5133 15.8946 21.666 13.3333 21.666C11.1804 21.666 9.54601 21.9538 8.33333 22.3274Z" fill="#333333"/> </svg>

Zoomed out (ignore the fact that one is 24px & the other is 40px, that shouldn't make a difference with this bug):

Zoomed in:

The one coming straight from Lucide gets cut off and distorted, while the "custom" svg with the more robust path stays as expected.

With the custom icons, we still have the ability once the markup is pulled into our codebase to control the width/height and color of the icon, but the rest is left alone & it scales perfectly across all browsers. If Lucide were to ship out icons to applications that had a more defined svg path, I think that would solve the scaling issue. Would that be something that would be possible to investigate? I am concerned that leaving it as is could pose usability issues & accessibility issues for folks who may need to have their screens zoomed in in order to navigate a website.