Chapter 86: Filled Icons

Core Idea

Learn how to use fills with Lucide icons in your Preact application, and the limitations of using fills with Lucide icons.

Code Examples

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;

• What it demonstrates: Filled Icons usage pattern from the official Lucide docs.

Key Takeaways

1. Learn how to use fills with Lucide icons in your Preact application, and the limitations of using fills with Lucide icons.

Connects To

• Preact: part of the Preact section of the Lucide docs.
• Lucide for Preact: overview page for this section.