Chapter 12: Filled Icons

Core Idea

Fills are not officially supported in Lucide, but you can still use the fill attribute on certain icons to create filled versions.

Code Examples

<!DOCTYPE html>
<html>
  <body>
    <div class="app">
      <div class="star-rating">
        <div class="stars">
          <i data-lucide="star" fill="#111" stroke-width="0"></i>
          <i data-lucide="star" fill="#111" stroke-width="0"></i>
          <i data-lucide="star" fill="#111" stroke-width="0"></i>
          <i data-lucide="star" fill="#111" stroke-width="0"></i>
          <i data-lucide="star" fill="#111" stroke-width="0"></i>
        </div>
        <div class="stars rating">
          <i data-lucide="star" fill="yellow" stroke-width="0"></i>
          <i data-lucide="star" fill="yellow" stroke-width="0"></i>
          <i data-lucide="star-half" fill="yellow" stroke-width="0"></i>
        </div>
      </div>
    </div>

    <script src="index.js">
    </script>
  </body>
</html>

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

Key Takeaways

Fills are not officially supported in Lucide, but you can still use the fill attribute on certain icons to create filled versions.

Connects To

Vanilla JS (core): part of the Vanilla JS (core) section of the Lucide docs.
Lucide for Vanilla JavaScript: overview page for this section.