How to resize SVG icons

A key benefit of using SVG files is their ability to be resized without any loss in sharpness and clarity.

Unlike traditional pixel-based formats, like PNG and JPG, SVGs are vector files, allowing them to be scaled up or down while retaining their crisp, sharp quality.

In this article, we'll go through various methods for resizing SVG icons.

Resizing SVGs using height and width attributes #

The intrinsic size of an SVG image is determined by its viewBox attribute, which sets the position and dimension for the SVG element's content.

The viewBox is a list of four numbers: the first two represent the top left coordinates of the SVG viewport, while the last two represent the height and width of the SVG.

<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
  <!-- svg content here -->
</svg>

However, to set the SVG's size, the viewBox is not enough: height and width attributes should also be added.

<svg viewBox="0 0 18 18" width="18" height="18" xmlns="http://www.w3.org/2000/svg">
  <!-- svg content here -->
</svg>

You can use those attributes to modify the default SVG size; for example, the following SVG will be resized at 36px:

<!-- change the size of an SVG icon by changing its height and width inline attributes - leave the viewBox attribute unchanged -->
<svg viewBox="0 0 18 18" width="36" height="36" xmlns="http://www.w3.org/2000/svg">
  <!-- svg content here -->
</svg>

Resizing SVGs in CSS #

Another way to control SVG size is through CSS:

svg {
  height: 36px;
  width: 36px;
}

With CSS, you can create different size variations of an icon:

.icon--sm {
  height: 18px;
  width: 18px;
}

.icon--md {
  height: 32px;
  width: 32px
}

Remember that CSS styles take precedence over inline attributes. Consider the following example:

<svg class="icon" width="36" height="36" viewBox="0 0 18 18"  xmlns="http://www.w3.org/2000/svg">
  <!-- svg content here -->
</svg>

<style>.icon {height: 24px; width: 24px;}</style>

The SVG size will be 24px - CSS style values overwrite the inline height and width attributes.

Creating Responsive SVG icons #

When using inline SVGs in a web project, you may want to create a responsive icon, which is an icon that adapts to its parent size.

To achieve that, remove the height and width inline attributes (without modifying the viewBox):

<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
  <!-- svg content here -->
</svg>

In CSS, set a maximum width for the SVGs to make sure they don't overflow their container:

svg {
  display: inline-block;
  max-width: 100%;
}

Resizing SVGs with strokes #

When resizing SVGs with strokes, simply adjusting height and width may not be a good solution.

The stroke is the line that is used to draw the shape of the icon; you can imagine it as the icon border. The width of the stroke is specified using the stroke-width attribute, while the color is set using the stroke attribute:

<svg stroke="red" stroke-width="2" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
  <!-- svg content here -->
</svg>

In the above example, the stroke width is set to 2px. If we now resize the icon using its width and height, its stroke width value gets resized as well.

For example, if we change the size to 36px (double the original icon size), the stroke width will double as well (4px rather than 2px).

In the image below, the second clock icon was created by doubling the height and width of the first icon, which also resulted in the doubling of its stroke width.

When changing height and width attributes, we could manually modify the inline stroke-width as well:

<!-- we doubled the size -> we need to divide the stroke-width value in half to keep the original stroke -->
<svg stroke="red" stroke-width="1" height="36" width="36" viewBox="0 0 18 18" width="36" height="36" xmlns="http://www.w3.org/2000/svg">
  <!-- svg content here -->
</svg>

This is not always easy to do as the SVG could include multiple elements with different stroke width values.

Design tools, like Figma, allows you to change the size of SVG icons while maintaining their properties, such as the stroke width.

On the other hand, if you are using an icon organizer like Nucleo for managing your icons, you have the option to directly adjust the size of the icon within the application itself. Double-click the icon and set a new size in the editor tool:

The end! Check our documentation tutorials page for more articles on working with icons.