[{"data":1,"prerenderedAt":12},["ShallowReactive",2],{"guide-use-lucide-icons-in-react":3},{"slug":4,"path":5,"title":6,"seoTitle":7,"description":8,"date":9,"updated":9,"order":10,"html":11},"use-lucide-icons-in-react","\u002Fguides\u002Fuse-lucide-icons-in-react","How to use Lucide icons in React and Next.js","Lucide React: How to Use Lucide Icons in React & Next.js","Install lucide-react, import icons by name, set size, color and stroke width, apply defaults with LucideProvider, and load icons by name with DynamicIcon.","2026-10-26",1,"\u003Cp>\u003Ccode>lucide-react\u003C\u002Fcode> is Lucide's official React package: every icon is a React component that renders an inline SVG. It's also what shadcn\u002Fui uses, so if your project started from shadcn\u002Fui, it's already installed.\u003C\u002Fp>\n\u003Ch2>Install and import\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-bash\">npm install lucide-react\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Import each icon by its component name. Names are the icon name in PascalCase: \u003Ccode>house\u003C\u002Fcode> is \u003Ccode>House\u003C\u002Fcode>, \u003Ccode>arrow-left\u003C\u002Fcode> is \u003Ccode>ArrowLeft\u003C\u002Fcode>, \u003Ccode>circle-check\u003C\u002Fcode> is \u003Ccode>CircleCheck\u003C\u002Fcode>. Every icon page on this site shows the exact name.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\">import { House, Search, Settings } from "lucide-react";\n\nexport function Toolbar() {\n  return (\n    <nav>\n      <House \u002F>\n      <Search \u002F>\n      <Settings \u002F>\n    <\u002Fnav>\n  );\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Named imports are tree-shaken by Vite, Next.js and other modern bundlers, so only the icons you import end up in your bundle.\u003C\u002Fp>\n\u003Cp>Each icon is also exported as \u003Ccode>HouseIcon\u003C\u002Fcode> and \u003Ccode>LucideHouse\u003C\u002Fcode>, which helps when a name clashes with one of your own components (an \u003Ccode>Image\u003C\u002Fcode> icon next to Next.js's \u003Ccode>Image\u003C\u002Fcode>, for example).\u003C\u002Fp>\n\u003Ch2>Size, color and stroke width\u003C\u002Fh2>\n\u003Cp>Icons take a few props on top of the usual SVG attributes:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\"><House size={32} color="#e11d48" strokeWidth={1.5} \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cul>\n\u003Cli>\u003Ccode>size\u003C\u002Fcode>: width and height in pixels (default 24).\u003C\u002Fli>\n\u003Cli>\u003Ccode>color\u003C\u002Fcode>: the stroke color (default \u003Ccode>currentColor\u003C\u002Fcode>, so icons follow the text color).\u003C\u002Fli>\n\u003Cli>\u003Ccode>strokeWidth\u003C\u002Fcode>: the line thickness (default 2).\u003C\u002Fli>\n\u003Cli>\u003Ccode>absoluteStrokeWidth\u003C\u002Fcode>: keeps the stroke the same number of pixels at any size, instead of scaling with the icon.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Because icons use \u003Ccode>currentColor\u003C\u002Fcode>, the simplest way to color them is with your text classes, for example \u003Ccode><House className="text-rose-600" \u002F>\u003C\u002Fcode> in Tailwind.\u003C\u002Fp>\n\u003Ch2>Defaults for every icon\u003C\u002Fh2>\n\u003Cp>To change the default size or stroke for a whole app or section, wrap it in \u003Ccode>LucideProvider\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\">import { LucideProvider } from "lucide-react";\n\nexport default function App({ children }) {\n  return (\n    <LucideProvider size={20} strokeWidth={1.75}>\n      {children}\n    <\u002FLucideProvider>\n  );\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Props on an individual icon still win over the provider's.\u003C\u002Fp>\n\u003Ch2>Icons chosen at run time\u003C\u002Fh2>\n\u003Cp>When the icon comes from data (a CMS or a database field), use \u003Ccode>DynamicIcon\u003C\u002Fcode>, which loads icons by their kebab-case name:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\">import { DynamicIcon } from "lucide-react\u002Fdynamic";\n\n<DynamicIcon name="house" size={24} \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Each icon is loaded as its own chunk the first time it's shown, so prefer static imports whenever you know the icon at build time.\u003C\u002Fp>\n\u003Ch2>Accessibility\u003C\u002Fh2>\n\u003Cp>Lucide icons are decorative by default (\u003Ccode>aria-hidden="true"\u003C\u002Fcode>). When an icon carries meaning on its own, such as an icon-only button, give the button a label:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\"><button aria-label="Search">\n  <Search \u002F>\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Finding the right icon\u003C\u002Fh2>\n\u003Cp>Search on \u003Ca href=\"\u002F\">the homepage\u003C\u002Fa> matches names, Lucide's tags and old names: "home" finds House, and "trash" finds every delete icon. Each icon page has its React import ready to copy, along with Vue, Svelte, Angular and plain HTML.\u003C\u002Fp>\n",1793042395988]