A simple and easy to use icon class is available in Canvas. The icon class .icon assumes very little about the actual icon itself, but instead serves as an easily modifiable container in which you can define or place your icon – whether that icon is an SVG, font, or bitmap. Canvas does not include icon glyphs or fonts by default, relying on the user to specify how these should be configured.

<i class='icon icon-medium'></i>

Icon Sizes

Thinks of the icon elements as a bounding box in which you can place – either inside or directly as a background – any image, SVG, or font. The bounding box is rectangular, but by default, they are defined as square (1:1). Canvas provides 5 unique icon sizes (defined below). The sizes can be easily changed. Furthermore, these sizes are consider responsive, with the dimensions changing as defined by the user, with changes in screen size.

Class Base Size Example
.icon-mini 16x16
.icon-small 24x24
.icon-medium 32x32
.icon-large 48x48
.icon-jumbo 64x64
.icon-huge 96x96