Icon dimensions

This tutorial is part of Iconify SVG Framework tutorial.

By default, icon height is set to "1em", icon width is changed dynamically based on the icon's width to height ratio.

This makes it easy to change icon size by changing font-size in the stylesheet or in style, just like icon fonts:

html<span class="iconify" data-icon="cil:locomotive"></span>
<span
   class="iconify"
   data-icon="cil:paper-plane"
   style="font-size: 36px;"
></span>
<span class="iconify big-icon" data-icon="cil:truck"></span>

css.iconify {
   font-size: 24px;
   line-height: 1em;
}

.big-icon {
   font-size: 72px;
}

data- attributes

You can also set dimensions by using data-width and data-height attributes. Then font-size will not have effect on icon, unless you set height in units that are relative to font-size, such as "em".

html<span class="iconify" data-icon="cil:locomotive" data-height="24"></span>
<span
   class="iconify"
   data-icon="cil:paper-plane"
   data-height="2em"
   style="font-size: 18px;"
></span>
<span class="iconify" data-icon="cil:truck" data-width="72"></span>

In this example, first icon has height of 24px, second icon has height of 36px (2 * 18px), third icon has height 72px.

Keywords "none" and "unset"

Special keywords "none" and "unset" remove dimensions from generated SVG.

This results in icon without dimensions. You should set icon's width and height in CSS.

It is enough to set one dimension to "unset", another dimension will be set to "unset" too, unless you specify otherwise.

html<span
   class="iconify"
   data-icon="mdi:home"
   data-height="none"
   style="width: 48px; height: 48px"
></span>

This gives you full control over each icon's dimension separately in CSS instead of controlling them both with font-size.

Sometimes you might also need to add display: block; to CSS for icon to behave correctly.

These keywords can only be used with data-width and data-height. If you set them as width or height, it will not work.

Setting only width or height

In examples above, all icons only use height.

What happens when only one dimension is set?

• If width is not set, but height is set, width is calculated using icon's width/height ratio.
• If height is not set, but width is set, height is calculated using icon's height/width ratio.
• If no dimensions are set in attributes, height is set to "1em" and width is calculated using icon's width/height ratio. Then icon behaves like a text and can be resized using font-size in stylesheet.

Example

Many icons are square. For such icons if you set one dimension, another dimension will have the same value.

However, there are many icons that are not square. For example, icons imported from icon fonts and Font Awesome.

This is data for fa-regular:address-book:

json{
   "body": "<path d=\"M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-68 304H48V48h320v416zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64s-64 28.7-64 64s28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6c-10.8 0-18.7 8-44.8 8c-26.9 0-33.4-8-44.8-8c-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2z\" fill=\"currentColor\"/>",
   "width": 448,
   "height": 512
}

Icon size is 448 x 512

If you do not set any dimensions, height will be set to "1em" and width will be set to 448 / 512 = "0.875em". However, values that have more than 2 numbers after decimal point are rounded up, so actual width will be "0.88em":

html<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   aria-hidden="true"
   focusable="false"
   role="img"
   class="iconify iconify--fa-regular"
   width="0.88em"
   height="1em"
   preserveAspectRatio="xMidYMid meet"
   viewBox="0 0 448 512"
>
   <path d="..." fill="currentColor"></path>
</svg>

If you set width to 56, but do not set height, height will be set to 56 * 512 / 448 = 64:

html<svg width="56" height="64" ...>...</svg>

If you set both values: width to 56 and height to 128, values will be as you set them (also see "Alignment" section below):

html<svg width="56" height="128" ...>...</svg>

Alignment

What if you set both width and height and its ratio doesn't match icon's width/height ratio?

For example, what will happen if icon is 24x24, but you set one dimension to 40 and other dimension to 24?

Using box-shadow to show icon dimensions

html<span
   class="iconify"
   data-icon="jam:info"
   data-width="40"
   data-height="24"
></span>
<span
   class="iconify"
   data-icon="jam:info"
   data-width="24"
   data-height="40"
></span>

SVG do not behave like other images. When you set a wrong width/height ratio for other image formats, images get stretched. When you do that for SVG, bounding box is changed and the image is aligned inside that bounding box.

In an example above, one icon is too wide and another icon is too tall. The browser will move icons to center instead of stretching icon.