Source: https://lucide.dev/guide/basics/sizing

Skip to content

On this page

Sizing ​

==========================================================

By default, the size of all icons is 24px by 24px. The size is adjustable using the size prop and CSS.

Adjusting the icon size using the size prop ​

---

import { Landmark } from "lucide-react";

function App() {

return (

<div className\="app"\>

<Landmark size={64} />

</div>

);

}

export default App;

Refresh preview

Open on CodeSandboxOpen Sandbox

Open on CodeSandboxOpen Sandbox

Adjusting the icon size via CSS ​

---

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

icon.cssApp.js

.my-beer-icon {

/* Change this! */

width: 64px;

height: 64px;

}

Refresh preview

Open on CodeSandboxOpen Sandbox

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.

icon.cssApp.js

.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;

}

Refresh preview

Open on CodeSandboxOpen Sandbox

Open on CodeSandboxOpen Sandbox

Resizing with Tailwind ​

h-* and w-* utilities 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;

Refresh preview

Open on CodeSandboxOpen Sandbox

Open on CodeSandboxOpen Sandbox