We value your feedback!

Can you spare a moment to take our survey?
Your feedback helps us improve Lucide and make it better for everyone.

Skip to content
Get React certificates from certificates.dev

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:

import { Star, StarHalf } from "lucide-preact";
import { h } from "preact";
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;