Icon dimensions
This tutorial is part of Iconify Icon web component 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:
<p>
<iconify-icon icon="cil:locomotive"></iconify-icon>
<iconify-icon
class="iconify"
icon="cil:paper-plane"
style="font-size: 36px"
></iconify-icon>
<iconify-icon class="big-icon" icon="cil:truck"></iconify-icon>
</p>
p {
font-size: 24px;
}
.big-icon {
font-size: 72px;
}
If you want to control icon size with width and height in CSS, see how to remove icon dimensions section below.
Units
Both width and height can be used as properties and attributes.
Examples of 24px icon:
<iconify-icon icon="mdi:home" height="24"></iconify-icon>
<iconify-icon icon="mdi:home" height="24px"></iconify-icon>
<iconify-icon
icon="mdi:home"
style="font-size: 16px;"
height="1.5em"
></iconify-icon>
Keyword "auto"
Special keyword "auto" sets size to value from viewBox. This makes it easy to render an icon as it was originally designed.
It is enough to set one dimension to "auto", other dimension will be set to "auto" too, unless you specify otherwise.
For example, if viewBox="0 0 24 24" and height is set to "auto", height will be set to 24.
<iconify-icon icon="mdi:home" height="auto"></iconify-icon>
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", other dimension will be set to "unset" too, unless you specify otherwise.
<iconify-icon
icon="mdi:home"
height="none"
style="width: 48px; height: 48px"
></iconify-icon>
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.
Setting only width or height
In an example 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 text and can be resized using font-size in stylesheet.
Example
Many icons are square. For such icons if you set one dimension, other 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 :
{
"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
}
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":
<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:
<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):
<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?
<iconify-icon icon="jam:info" width="40" height="24"></iconify-icon>
<iconify-icon icon="jam:info" width="24" height="40"></iconify-icon>
SVG do not behave like other images. When you set wrong width/height ratio for other image formats, images get stretched. When you do that for SVG, bounding box is changed and image is aligned inside that bounding box.
In an example above, one icon is too wide and other icon is too tall. Browser will move icons to centre instead of stretching icon.
You can control alignment with preserveAspectRatio attribute. Default value is "xMidYMid slice".
Slice
Instead of adding space around icon to fit it in bounding box, browser can also cut parts of icon that do not fit.
To cut parts of icon, add preserveAspectRatio="xMidYMid slice" to icon:
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMidYMid slice"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMidYMid slice"
></iconify-icon>
Horizontal alignment
When...
- icon is too wide...
- icon is too tall and slice is enabled...
...you can align icon horizontally.
To align icon horizontally, change "xMid" in preserveAspectRatio to "xMin" or "xMax":
Examples of aligning wide icon:
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMinYMid meet"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMidYMid meet"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMaxYMid meet"
></iconify-icon>
Examples of aligning tall icon with slice enabled:
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMinYMid slice"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMidYMid slice"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMaxYMid slice"
></iconify-icon>
Vertical alignment
When...
- icon is too tall...
- icon is too wide and slice is enabled...
...you can align icon vertically.
To align icon vertically, change "YMid" in preserveAspectRatio to "YMin" or "YMax":
Examples of aligning tall icon:
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMidYMin meet"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMidYMid meet"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="24"
height="40"
preserveAspectRatio="xMidYMax meet"
></iconify-icon>
Examples of aligning wide icon with slice enabled:
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMidYMin slice"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMidYMid slice"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMidYMax slice"
></iconify-icon>
Vertical and horizontal alignment
You can add both horizontal and vertical alignment to icon.
One of alignments will have no effect. For example, if icon is too tall, horizontal alignment is ignored because icon is already aligned to both left and right sides.
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMinYMin meet"
></iconify-icon>
<iconify-icon
icon="jam:info"
width="40"
height="24"
preserveAspectRatio="xMinYMin slice"
></iconify-icon>