Release candidate for Lucide v1 is out!🚀
You're looking at the site for v1, for v0 go to v0 site

Lucide

Appearance

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:

<!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>
Open on CodeSandboxOpen Sandbox