Source: https://lucide.dev/guide/advanced/filled-icons

Skip to content

On this page

Filled Icons ​

==============================================================================

Fills are officially not supported. However, all SVG properties are available on all icons. Fill can still be used and will work fine on certain icons.

Example with stars:

App.jsicon.css

import { Star, StarHalf } from "lucide-react";

import "./icon.css";

function App() {

return (

<div className\="app"\> <div className\="star-rating"\> <div className\="stars"\>

{ Array.from({ length: 5 }, () => (

<Star fill="#111" strokeWidth={0} />

))}

</div>

<div className\="stars rating"\>

<Star fill="yellow" strokeWidth={0} />

<Star fill="yellow" strokeWidth={0} />

<StarHalf fill="yellow" strokeWidth={0} />

</div>

</div>

</div>

);

}

export default App;

Refresh preview

Open on CodeSandboxOpen Sandbox

Open on CodeSandboxOpen Sandbox

Will Lucide have fills in the future? ​

---

This feature has been requested several times and discussion is happening at #458 .