---
title: Sizing - Svelte
description: Learn how to adjust the size of icons in your Svelte application using the `size` prop or by using CSS.
---
# 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
::: sandpack {template=vite-svelte showTabs=false editorHeight=240 editorWidthPercentage=60}
```svelte src/App.svelte [active]
```
:::
## Adjusting the icon size via CSS
The CSS properties `width` and `height` can be used to adjust the icon size.
::: sandpack {template=vite-svelte editorHeight=240 editorWidthPercentage=60}
```css src/icon.css [active]
.my-beer-icon {
/* Change this! */
width: 64px;
height: 64px;
}
```
```svelte src/App.svelte
```
:::
### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems) for more information on the `em` unit.
::: sandpack {template=vite-svelte editorHeight=300}
```css src/icon.css [active]
.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;
}
```
```svelte src/App.svelte
```
:::
### Resizing with Tailwind
`size-*` utilities can be used to adjust the size of the icon. See the [Tailwind documentation](https://tailwindcss.com/docs/width#setting-both-width-and-height) for more information on the `size-*` utilities.
::: sandpack {template=vite-svelte showTabs=false editorHeight=240 editorWidthPercentage=60}
```svelte src/App.svelte [active]
```
```html /index.html [hidden]
Vite App
```
:::