transparent icons show overlapping internal shapes

[danawoodman]

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.378.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

If you add an opacity less than 1.0 for an icon, you will start to see the internal shapes of the icons. You can see this on the Lucide site itself in the small previews of the icons by zooming in using your browser

It seems that icons should be pre-processed to flatten/merge all shapes rather than shipping versions of the icons with the individual overlapping shape components

Steps to reproduce

1. Go to any icon on the Lucide site
2. Click see in action
3. Increase stroke width
4. Zoom in on icon

Link to a video: https://a.cl.ly/eDuKop7L

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.)

[jguddas]

Solved by #2135

[danawoodman]

awesome! looks like i was just a bit late to the game on this one but glad its being addressed!