Filled icons in Lucide React
Lucide icons are outlines, but some shapes such as stars and hearts can be filled with the SVG fill attribute to show an on state.
How it works
- Fill is unofficial but possible. The docs say fills are not officially supported, while the fill attribute still works on certain icons.
StarandHeartare closed shapes that fill cleanly. [1] - Star rating. Each star gets
fill="#eab308"when its number is within the rating andfill="none"otherwise. Clicking a star stores its number in state. [2] - Toggle a like. The heart switches between a red fill and
transparent.colorsets the outline in both states. [3]
Run and edit it
It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.
import { useState } from "react";
import { Star, Heart } from "lucide-react";
const S = {
page: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#111", fontFamily: "system-ui, sans-serif" },
card: { width: 340, background: "#fff", color: "#1f2937", borderRadius: 14, padding: 22, boxShadow: "0 10px 30px rgba(0,0,0,.5)", textAlign: "center" },
icon: { border: 0, background: "none", padding: 2, cursor: "pointer" },
small: { fontSize: 14, color: "#6b7280", margin: "6px 0 18px" },
};
export default function App() {
const [rating, setRating] = useState(3);
const [liked, setLiked] = useState(true);
return (
<div style={S.page}>
<div style={S.card}>
<div>
{[1, 2, 3, 4, 5].map((n) => (
<button key={n} style={S.icon} onClick={() => setRating(n)} aria-label={`${n} stars`}>
{/* filled when n is within the rating, outline otherwise */}
<Star size={36} color="#eab308" fill={n <= rating ? "#eab308" : "none"} />
</button>
))}
</div>
<p style={S.small}>Rating: {rating} of 5 (click a star)</p>
<button style={S.icon} onClick={() => setLiked(!liked)} aria-label="Like">
<Heart size={44} color="#ef4444" fill={liked ? "#ef4444" : "transparent"} />
</button>
<p style={{ ...S.small, marginBottom: 0 }}>{liked ? "Liked" : "Not liked"}</p>
</div>
</div>
);
}
Click the stars to change the rating, and click the heart to toggle the like. Code written by AgentGid [1].
Click the stars to change the rating, and click the heart to toggle the like. Code written by AgentGid [1].Checked Oct 12, 2026: it starts without errors in Chromium with lucide-react 1.55.0, react 19.3.0, react-dom 19.3.0. Needs WebGL.
More Lucide React examples
Using Lucide icons as React components Changing icon colour in Lucide React Setting icon size in Lucide React Stroke width in Lucide React icons
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.