Sizing ​

By default the size of the icons are 24px . This is adjustable by using passing the size prop or change it by using CSS.

Adjusting size with size prop ​

import { Landmark } from "lucide-react";

function App() {
  return (
    <div className="app">
      <Landmark size={64} />
    </div>
  );
}

export default App;

Adjusting size with CSS ​

Width and height can be used to adjust icon size.

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

Resize based on font size ​

It is possible to resize icons based on font size. This can be accomplished by using the em 's to resize based on font size.

.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;
  items-align: center;
}

Resizing with Tailwind ​

h-* and w-* utlities can be used to adjust the size of the icon.

import { PartyPopper } from "lucide-react";

function App() {
  return (
    <div>
      <PartyPopper
        className="w-24 h-24"
      />
    </div>
  );
}

export default App;