Chapter 51: Filled Icons

Core Idea

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

Code Examples

<script>
import Star from '@lucide/svelte/icons/star';
import StarHalf from '@lucide/svelte/icons/star-half';
import "./icon.css";

const items = Array.from({ length: 5 })
</script>

<div class="app">
  <div class="star-rating">
    <div class="stars">
      {#each items as item}
        <Star
          fill="#111"
          strokeWidth="0"
        />
      {/each}
    </div>
    <div class="stars rating">
      <Star fill="yellow" strokeWidth="0" />
      <Star fill="yellow" strokeWidth="0" />
      <StarHalf fill="yellow" strokeWidth="0" />
    </div>
  </div>
</div>

• 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 Svelte application, and the limitations of using fills with Lucide icons.

Connects To

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