[{"data":1,"prerenderedAt":12},["ShallowReactive",2],{"guide-lucide-vs-heroicons":3},{"slug":4,"path":5,"title":6,"seoTitle":7,"description":8,"date":9,"updated":9,"order":10,"html":11},"lucide-vs-heroicons","\u002Fguides\u002Flucide-vs-heroicons","Lucide vs Heroicons: which icon set should you use?","Lucide vs Heroicons: Icon Sets Compared (2026)","Lucide and Heroicons compared on size, styles, frameworks, license and look, with a quick way to decide and how to switch from one to the other.","2026-10-26",3,"\u003Cp>Lucide and Heroicons are two of the most popular open-source icon sets for web apps, and both pair well with Tailwind CSS. They suit different projects.\u003C\u002Fp>\n\u003Ch2>At a glance\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003C\u002Fth>\n\u003Cth>Lucide\u003C\u002Fth>\n\u003Cth>Heroicons\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Icons\u003C\u002Ftd>\n\u003Ctd>1,900+\u003C\u002Ftd>\n\u003Ctd>324\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Styles\u003C\u002Ftd>\n\u003Ctd>One: 2 px outline (stroke width adjustable)\u003C\u002Ftd>\n\u003Ctd>Four: outline (24 px), solid (24 px), mini (20 px), micro (16 px)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Made by\u003C\u002Ftd>\n\u003Ctd>Lucide contributors (a fork of Feather)\u003C\u002Ftd>\n\u003Ctd>Tailwind Labs\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>License\u003C\u002Ftd>\n\u003Ctd>ISC (some icons MIT, from Feather)\u003C\u002Ftd>\n\u003Ctd>MIT\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Official packages\u003C\u002Ftd>\n\u003Ctd>React, Vue, Svelte, Angular, Solid, React Native, Astro, vanilla JS, icon font\u003C\u002Ftd>\n\u003Ctd>React, Vue\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Default in\u003C\u002Ftd>\n\u003Ctd>shadcn\u002Fui\u003C\u002Ftd>\n\u003Ctd>Tailwind UI \u002F Catalyst\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2>Choose Lucide when\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>You need breadth: product UIs quickly run out of Heroicons' 324 icons, while Lucide has icons for charts, files, developer tools, devices, weather and much more.\u003C\u002Fli>\n\u003Cli>You use Svelte, Angular, Solid or React Native, or want an icon font.\u003C\u002Fli>\n\u003Cli>You want to tune the stroke width to match your typography.\u003C\u002Fli>\n\u003Cli>Your project uses shadcn\u002Fui, which already installs \u003Ccode>lucide-react\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Choose Heroicons when\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>You want solid (filled) icons, or icons drawn specifically for 20 px and 16 px.\u003C\u002Fli>\n\u003Cli>A smaller, very consistent set covers what you need.\u003C\u002Fli>\n\u003Cli>You're building with Tailwind UI or Catalyst components.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Switching from Heroicons to Lucide\u003C\u002Fh2>\n\u003Cp>Most Heroicons have a direct Lucide equivalent, though names often differ: Heroicons' \u003Ccode>HomeIcon\u003C\u002Fcode> is Lucide's \u003Ccode>House\u003C\u002Fcode>, \u003Ccode>XMarkIcon\u003C\u002Fcode> is \u003Ccode>X\u003C\u002Fcode>, \u003Ccode>TrashIcon\u003C\u002Fcode> is \u003Ccode>Trash\u003C\u002Fcode>, \u003Ccode>Cog6ToothIcon\u003C\u002Fcode> is \u003Ccode>Settings\u003C\u002Fcode>, and \u003Ccode>MagnifyingGlassIcon\u003C\u002Fcode> is \u003Ccode>Search\u003C\u002Fcode>. Search for the Heroicons name here: Lucide's tags often match it. Then swap the imports one screen at a time; both sets render inline SVG and accept \u003Ccode>className\u003C\u002Fcode>, so styling carries over.\u003C\u002Fp>\n\u003Ch2>Can you mix them?\u003C\u002Fh2>\n\u003Cp>You can, but icons from different sets look subtly different side by side (stroke weight, corner radius, proportions). If you need a solid style for a few states, such as a filled heart for "favorited", consider filling a Lucide icon with \u003Ccode>fill="currentColor"\u003C\u002Fcode> before adding a second set.\u003C\u002Fp>\n",1793042395997]