docs/guide/svelte/basics/sizing.md
By default, the size of all icons is 24px by 24px. The size is adjustable using the size prop and CSS.
size prop::: sandpack {template=vite-svelte showTabs=false editorHeight=240 editorWidthPercentage=60}
<script>
import Landmark from '@lucide/svelte/icons/landmark';
</script>
<Landmark size={64} />
:::
The CSS properties width and height can be used to adjust the icon size.
::: sandpack {template=vite-svelte editorHeight=240 editorWidthPercentage=60}
.my-beer-icon {
/* Change this! */
width: 64px;
height: 64px;
}
<script>
import Beer from "@lucide/svelte/icons/beer";
import './icon.css'
</script>
<Beer class="my-beer-icon" />
:::
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=vite-svelte editorHeight=300}
.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;
}
<script>
import Star from "@lucide/svelte/icons/star";
import "./icon.css";
</script>
<div class="text-wrapper">
<Star class="my-icon" />
<div>Yes</div>
</div>
:::
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=vite-svelte showTabs=false editorHeight=240 editorWidthPercentage=60}
<script>
import PartyPopper from "@lucide/svelte/icons/party-popper";
</script>
<PartyPopper class="size-24" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
:::