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

Lucide

Appearance

Global styling ​

Adjusting icons can be done by using color, size and stroke width. To style all icons globally, you can either use CSS, or use the attrs option in createIcons.

We recommend using CSS for global styling, as it is the most straightforward way to achieve this.

This will apply the color, size and strokeWidth props to all icons.

Style by using attrs on createIcons ​

You can also apply global styles by passing attributes to the createIcons function.

<!DOCTYPE html>
<html>
  <body>
    <i data-lucide="building"></i>

    <script src="index.js"></script>
  </body>
</html>
Open on CodeSandboxOpen Sandbox

Style by using CSS ​

Styling icons is easy to accomplish using CSS.

Every icon has a class attribute applied called lucide. This class name can be used in the CSS file to target all icons that are being used within the app.

  • The color of the icons can be changed using the color CSS property.
  • The size of the icons can be changed using width and height CSS properties.
  • The stroke width of the icons can be changed using the stroke-width CSS property.
.lucide {
  /* Change this! */
  color: #ffadff;
  width: 48px;
  height: 48px;
  stroke-width: 1px;
}

.app {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 6px;
}
Open on CodeSandboxOpen Sandbox