Lucide React Examples You Can Edit and Run
5 small Lucide React examples written by AgentGid from the official docs, one feature each. Every one runs in your browser: change the code and see the result at once, or describe a change and let AI rewrite it. The screenshots are taken from the same code by our server, which also checks that each example starts without errors.
Lucide React: usage and stats 1,244 AI-built projects use it
Using Lucide icons as React componentsClick a menu row to move the highlight and the arrow icon.
Changing icon colour in Lucide ReactClick Like to switch the button's text colour; the thumbs-up icon changes with it.
Setting icon size in Lucide ReactDrag the slider to resize the bottom icon between 12 and 96 pixels.
Stroke width in Lucide React iconsMove the slider and watch the bottom icons get thinner or bolder.
Filled icons in Lucide ReactClick the stars to change the rating, and click the heart to toggle the like.
Try them all in one place
import { useState } from "react";
import { Menu, Search, Bell, Globe, Settings, ArrowRight } from "lucide-react";
// only the icons imported above end up in the bundle
const items = [
{ Icon: Search, label: "Search" },
{ Icon: Bell, label: "Notifications" },
{ Icon: Globe, label: "Language" },
{ Icon: Settings, label: "Settings" },
];
const S = {
page: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#111", fontFamily: "system-ui, sans-serif" },
card: { width: 300, background: "#fff", color: "#1f2937", borderRadius: 14, padding: 14, boxShadow: "0 10px 30px rgba(0,0,0,.5)" },
head: { display: "flex", alignItems: "center", gap: 10, fontWeight: 700, fontSize: 17, padding: "4px 6px 10px" },
row: { display: "flex", alignItems: "center", gap: 12, width: "100%", padding: "10px 8px", border: 0, borderRadius: 8, fontSize: 15, cursor: "pointer", textAlign: "left" },
};
export default function App() {
const [active, setActive] = useState("Search");
return (
<div style={S.page}>
<nav style={S.card}>
<div style={S.head}>
<Menu /> Dashboard
</div>
{items.map(({ Icon, label }) => (
<button
key={label}
onClick={() => setActive(label)}
style={{ ...S.row, background: active === label ? "#eef2ff" : "transparent", color: active === label ? "#4338ca" : "#1f2937" }}
>
<Icon />
<span>{label}</span>
{active === label && <ArrowRight style={{ marginLeft: "auto" }} />}
</button>
))}
</nav>
</div>
);
}
Click a menu row to move the highlight and the arrow icon. Code written by AgentGid [1]. How it works, with a screenshot →
Click a menu row to move the highlight and the arrow icon. Code written by AgentGid [1]. How it works, with a screenshot →Click Like to switch the button's text colour; the thumbs-up icon changes with it. Code written by AgentGid [3]. How it works, with a screenshot →Drag the slider to resize the bottom icon between 12 and 96 pixels. Code written by AgentGid [1]. How it works, with a screenshot →Move the slider and watch the bottom icons get thinner or bolder. Code written by AgentGid [2]. How it works, with a screenshot →Click the stars to change the rating, and click the heart to toggle the like. Code written by AgentGid [2]. How it works, with a screenshot →Checked Oct 12, 2026: each example starts without errors in Chromium with lucide-react 1.55.0, react 19.3.0, react-dom 19.3.0. Needs WebGL.
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.