These set of utility classes are helpful when working with SVG icons.

Refer to Iconography for a list of available icons and usage guidelines.

Base Class

The .icon class needs to be applied to all SVG icons to set its default properties (dimensions, fill color, etc). The default width and height will be set to 15px.

Icon Sizes

Use these sizing classes to resize an SVG icon to one of the presets. For custom sizes you can write your own.

Class Name Size Icon Example
.icon-10 10px
.icon-12 12px
.icon-16 16px
.icon-18 18px
.icon-20 20px
.icon-24 24px
.icon-28 28px
.icon-32 32px
.icon-36 36px
.icon-42 42px
.icon-48 48px