Post

🌠 The best icon pack in the world right now, IMO, is Lucide (lucide.dev). It builds on @colebemis.com’s incredible work with Feather Icons, extending it from ~300 icons to >1500. It has fully-typed bindings for React and many other frameworks. And I just found out: they’re even more optimized! 🧵

59 reposts829 likes

Until now, I had stuck with react-feather, occasionally downloading an SVG from Lucide when I needed it. I decided to try migrating my blog to Lucide, and it was super smooth. Took 2 minutes, pretty much a drop-in replacement. Not only that, my bundle got a tiny bit smaller! 😄

For example, the Github icon I had been using was previously 2.3kb, gzipping down to ~800 bytes. The same icon in Lucide is 800 bytes, gzipping down to ~400 bytes! The SVG code itself is very similar and only ~5% smaller. I think the optimization comes from the React bindings themselves?

Ultimately, it’s a small enough difference that it won’t measurably affect the user experience (it shaved ~1kb gzip off several bundles for me). I wasn’t switching to Lucide because of performance. But it was a nice surprise!

The project is actively maintained, and new icons are added frequently. The newest icon, `toilet`, was added 5 days ago! (Not sure I’ll have a use for this one 😅)

So the SVG sets the stroke color to currentColor. I’m guessing Lucide’s icon playground uses a slightly-transparent stroke color. Or maybe I messed something up before taking the screenshot 😅. But yeah it shouldn’t be in the icon itself.

That’s interesting! As a general rule I don’t really want to mix and match icons since I want all of my icons to be cohesive, I’d rather draw my own icons when my icon pack doesn’t include one, in the same style. But Lucide doesn’t include brand icons, so this could be useful!

The number of icons are huge indeed. The docs site has also become much better since last time i checked. The only small issue I had with lucide is to be careful with absolute stroke width when the icon is scaled up/down, other than that no complaint really.

Curious if you evaluated Tabler and found Lucide superior? tabler.io/icons I went with Tabler on a new project recently because of the sheer volume of icons but I didn't look too closely at things like bundle size, and wondering if I'm missing something Hope Lucide gets a Bluesky icon soon!

tabler.ioTabler Icons: 5700+ free vector icons for web designTabler Icons: 5718 free and open source SVG icons. Customizable size, color and stroke. Available for React, SolidJS, Vue, Figma and more for free!

Ah, I hadn’t heard of them! At a quick glance it looks nice. And yeah, Lucide doesn’t do brand icons, they’ve made an intentional choice to not include them. The Github icon I mentioned is actually deprecated, I just found out 😅

Interesting, re perf, has anyone tried to just embed the most commonly used icons in a single SVG element, and then `ref` them elsewhere? I'm thinking of things you may repeat a lot, tick marks and so on.

So I’m not super concerned about it because the icons are so small. The tick is: <path d="M20 6 9 17l-5-5"/> Not all icons are this tiny, but the ones you’d tend to repeat (arrows, etc) are not much longer than <use href="#someId">

Yea so I thought, the machinery to get the ref would be about the same for such simple paths, and you bring in all the hassle of packing the icons and making them available somewhere on the page..

Lucide is far and away my favorite icon library i've used in my career. It pretty much always has something I need, and I never need to think too deeply about how to get icons into my app

Side note, I still don't know how "Lucide" is supposed to be pronounced. I've been going with "lu-side" but it could be "lucid" or even "lu-si-day".

I was just thinking about which icon library to use yesterday, and today you posted this. Guess I won't have to do any research now😀.

This looks awesome, I used to try and use feather for stuff but have just been using fontawesome lately because I always needed icons feather didn't have. I'll give this one a try

Use them as well for Vue projects. In Figma I use Remix, which is also decent. The only thing I believe is missing in Lucid is filled icons, they only have outline. But I ADORE how they present it. I might be using a wrong/expensive/non-suitable package just because it looks nice 😅

Love it! I often come back to FeatherIcons when I want a unified library, but the relatively limited set meant that I was reaching for Iconify or react-icons or something half the time 😬 Looks like they have a Svelte library as well so I'm sold!

I like Heroicons because they have different icon sizes and styles for each icon, so smaller icons have less detail. I think small icons with too much detail look ugly and large icons with little detail look dull. I've been creating complementary icons to Heroicons: github.com/ndri/sidekic...

github.comGitHub - ndri/sidekickicons: Fanmade icons to complement HeroiconsFanmade icons to complement Heroicons. Contribute to ndri/sidekickicons development by creating an account on GitHub.

So the most important thing to me is aesthetics, and I personally prefer Lucide/Feather to Phosphor, but of course that’s a matter of taste. I also don’t *really* care too much about the total # of icons, since beyond a certain point, they’re likely to have what you need.

Although I should also mention, I’m comfortable designing my own icons in Figma, so it’s also not a big deal to me if an icon I need is missing, since I can create it myself.

Thanks for sharing, Josh! Totally agree that aesthetics are key, so I’ll definitely give Lucide a try someday – looking forward to seeing how it compares! 🙌

I only use a handful of icons per route, so it hasn’t really been an issue, less than 10kb even before gzipping IIRC. And it isn’t really multiple hops, at least not in terms of network requests; they’re all bundled alongside my other JS (with the React package, at least).

Yeah I wonder why they discourage SVG sprites on their site. You can create sprites (which are cached like most static resources) with only those icons that you need. <use /> is so much better than inlining SVGs in a table with 500 rows (2-4 icons per row :))

Unfortunately, their React package (and others too I imagine) are rendering SVGs via JS(X) which is a very, very bad idea. Runtime perf & memory use take a hit that can be completely avoided with other techniques; far better to use <img> or <use>.

Do you have examples of where this actually causes noticeable perf issues? Because I’m using it on my blog and it’s totally fine. <10kb added to my bundles, even before gzipping. And unlike <img>, it requires no extra network requests to fetch the icons, they’re inlined in the server-generated html.

I suppose <use> could make a noticeable difference if you use the same icon 100+ times on one page, but Lucide’s icons are tiny. Like, I could imagine people using ArrowRight for a bullet, and having lots of bullets. But the code for that icon is: <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>

I feel like this is the sort of optimization that gets people really animated online, but I’ve been using inline SVGs for years and I’ve never had an issue with it. But maybe there are some popular examples of large projects that did solve a real problem by switching to a different format?

Yeah, it was an intentional choice by Lucide to exclude all brand icons. I just added a couple new posts to my thread about this.

Josh W. Comeau@joshwcomeau.com

Interestingly, Lucide has decided not to include brand icons (github.com/lucide-icons...). Same for Feather Icons. The Github icon I mentioned in this thread is actually deprecated 😅. They recommend Simple Icons for brand icons instead (which includes Bluesky!) simpleicons.org

Does it have a built sprite sheet util. That’s why I so often use icomoon cuz u can just select the icons, generate a sprite sheet & be good. Little heavier perhaps sometimes but super convenient.

So I’ve only ever used their React bindings, but the way it works there is you import the icons you need, and only the imported icons get added to the bundle. So it looks like: import { ArrowRight } from 'lucide-react'; // Where you need it: <ArrowRight size={32} stroke="red" />

Yeah. I’ve used that method as well. One benefit of sheets is it’s just a file locally I can modify the svg themselves within the sheet. I’m not sure why I’m so tied to it but once I learned about I always tend to prefer it. But good to know thanks.

This is so great! I'm so far behind the times. Searching for SVGs, pasting them into Figma, copying the SVG code, manipulating the SVG code, etc etc etc ... and eventually they are on the site. Definitely checking this out now. Thanks for sharing!