docs/guide/angular/basics/sizing.md
By default, the size of all icons is 24px by 24px. The size is adjustable either by binding the size input and CSS.
size input::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
import { Component, ViewEncapsulation } from "@angular/core";
import { LucideLandmark } from "@lucide/angular";
@Component({
selector: 'app',
imports: [LucideLandmark],
template: `<svg lucideLandmark [size]="64" />`,
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class App {
}
:::
The CSS properties width and height can be used to adjust the icon size.
::: sandpack {template=angular editorHeight=300 dependencies="@lucide/angular"}
.my-beer-icon {
/* Change this! */
width: 64px;
height: 64px;
}
import { Component, ViewEncapsulation } from "@angular/core";
import { LucideBeer } from "@lucide/angular";
@Component({
selector: 'app',
imports: [LucideBeer],
template: `<svg lucideBeer class="my-beer-icon"></svg>`,
styleUrls: ['./app.component.css', './icon.css'],
encapsulation: ViewEncapsulation.None,
})
export class App {
}
:::
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=angular editorHeight=300 dependencies="@lucide/angular"}
.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;
}
import { Component, ViewEncapsulation } from "@angular/core";
import { LucideStar } from "@lucide/angular";
@Component({
selector: 'app',
imports: [LucideStar],
template: `<div class="text-wrapper">
<svg lucideStar class="my-icon"></svg>
<div>Yes</div>
</div>`,
styleUrls: ['./app.component.css', './icon.css'],
encapsulation: ViewEncapsulation.None,
})
export class App {
}
:::
size-* utilities can be used to adjust the size of the icon. See the Tailwind documentation for more information on the size-* utilities.
<div>
<svg lucidePartyPopper class="size-24"></svg>
</div>