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

Lucide

Appearance

Sizing ​

By default, the size of all icons is 24px by 24px. The size is adjustable using the width and height attributes and or by CSS.

Adjusting the icon size using the width and height attribute ​

<!DOCTYPE html>
<html>
  <body>
    <i data-lucide="landmark" width="64" height="64"></i>

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

Adjusting the icon size via CSS ​

The CSS properties width and height can be used to adjust the icon size.

.my-beer-icon {
  /* Change this! */
  width: 64px;
  height: 64px;
}
Open on CodeSandboxOpen Sandbox

Dynamically change the icon size based on the font size ​

It is possible to resize icons based on font size. This can be achieved using the em unit. See this MDN article for more information on the em unit.

.my-icon {
  /* Icon size will relative to font-size of .text-wrapper */
  width: 1em;
  height: 1em;
}

.text-wrapper {
  /* Change this! */
  font-size: 96px;

  /* layout stuff */
  display: flex;
  gap: 0.25em;
  align-items: center;
}
Open on CodeSandboxOpen Sandbox

Resizing with Tailwind ​

size-* utilities can be used to adjust the size of the icon. See the Tailwind documentation for more information on the size-* utilities.

import { createIcons, PartyPopper } from 'lucide/dist/cjs/lucide';
import "./styles.css";

createIcons({
  icons: {
    PartyPopper,
  }
});
Open on CodeSandboxOpen Sandbox