ContextQMD
Back to Lucide

Sizing - Lucide

docs/guide/lucide/basics/sizing.md

1.14.03.1 KB
Original Source
<script setup> import Sandpack from '~/.vitepress/theme/components/editors/Sandpack.vue' </script>

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

::: sandpack {template=vanilla showTabs=false editorHeight=295 editorWidthPercentage=60 dependencies="lucide"}

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

    <script src="index.js">
    </script>
  </body>
</html>
js
import "./styles.css";

import { createIcons, Landmark } from 'lucide/dist/cjs/lucide';

createIcons({
  icons: {
    Landmark,
  }
});

:::

Adjusting the icon size via CSS

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

::: sandpack {template=vanilla editorHeight=300 editorWidthPercentage=60 dependencies="lucide"}

css
.my-beer-icon {
  /* Change this! */
  width: 64px;
  height: 64px;
}
html
<!DOCTYPE html>
<html>
  <body>
    <i data-lucide="beer" class="my-beer-icon"></i>

    <script src="index.js">
    </script>
  </body>
</html>
js
import { createIcons, Beer } from 'lucide/dist/cjs/lucide';
import "./styles.css";
import "./icon.css";

createIcons({
  icons: {
    Beer,
  }
});

:::

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.

::: sandpack {template=vanilla editorHeight=320 dependencies="lucide"}

css
.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;
}
js
import { createIcons, Star } from 'lucide/dist/cjs/lucide';
import "./styles.css";
import "./icon.css";

createIcons({
  icons: {
    Star,
  }
});
html
<!DOCTYPE html>
<html>
  <body>
    <div class="text-wrapper">
      <i data-lucide="star" class="my-icon"></i>
      <div>Yes</div>
    </div>

    <script src="index.js">
    </script>
  </body>
</html>

:::

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.

::: sandpack {template=vanilla editorHeight=300 editorWidthPercentage=60 dependencies="lucide" externalResources="https://cdn.tailwindcss.com"}

html
<!DOCTYPE html>
<html>
  <body>
    <i data-lucide="party-popper" class="size-24"></i>

    <script src="index.js">
    </script>
  </body>
</html>
js
import { createIcons, PartyPopper } from 'lucide/dist/cjs/lucide';
import "./styles.css";

createIcons({
  icons: {
    PartyPopper,
  }
});

:::