Icon size

Utilities for controlling the size of icons


Class reference

ClassProperties
icon-2xswidth: 0.75rem; height: 0.75rem;
icon-xswidth: 1rem; height: 1rem;
icon-smwidth: 1.125rem; height: 1.125rem;
icon-mdwidth: 1.5rem; height: 1.5rem;
icon-lgwidth: 2rem; height: 2rem;
icon-xlwidth: 3rem; height: 3rem;
icon-2xlwidth: 3.5rem; height: 3.5rem;
icon-3xlwidth: 4rem; height: 4rem;
icon-4xlwidth: 4.5rem; height: 4.5rem;

Use the .icon-* utility classes to size SVG icons.

Elements CSS uses Material Design Icons, you can find a list of available icons here.

.icon-2xs

0.75rem

.icon-xs

1rem

.icon-sm

1.125rem

.icon-md

1.5rem

.icon-lg

2rem

.icon-xl

3rem

.icon-2xl

3.5rem

.icon-3xl

4rem

.icon-4xl

4.5rem

<svg class="icon icon--account-circle icon-2xs" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-account-circle"></use></svg>
<svg class="icon icon--account-circle icon-xs" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-account-circle"></use></svg>
<svg class="icon icon--account-circle icon-sm" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-account-circle"></use></svg>
<svg class="icon icon--account-circle icon-md" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-account-circle"></use></svg>
<svg class="icon icon--account-circle icon-lg" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-account-circle"></use></svg>
<svg class="icon icon--account-circle icon-xl" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-account-circle"></use></svg>
<svg class="icon icon--account-circle icon-2xl" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-account-circle"></use></svg>
<svg class="icon icon--account-circle icon-3xl" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-account-circle"></use></svg>
<svg class="icon icon--account-circle icon-4xl" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-account-circle"></use></svg>