Icon variations
ready

Introduction

The icons approach uses background SVGs, that are encoded into a single CSS file. The default size is 16x16 unless modified by custom styles or by set modifiers.

Examples

Icon 16x16

<span class="icon icon--tick-green"></span>

Icon 24x24

<span class="icon icon--tick-green icon--24x24"></span>

Icon 32x32

<span class="icon icon--tick-green icon--32x32"></span>

Icon boxed

<span class="icon icon--tick-green icon--32x32 icon--box"></span>

Icon dark circle

<span class="icon icon--tick-green icon--32x32 icon--circle"></span>

Icon light circle

<span class="icon icon--tick-green icon--32x32 icon--circle icon--circle-light"></span>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/elements/_icon.scss
  • src/styles/images.scss

Usage

Class/JavaScript Hook Description Required?
.icon Placed on a tag you want to display as an icon. All icons are 16x16 unless otherwise specified by modifiers below or custom styles. Required.
.icon--[ICON-NAME] Placed on an .icon to show the specific icon in question. The [ICON-NAME] mimics the file name of the svg, minus the .svg file extension. Required.
.icon--24x24 Use 24x24 size of icon. Optional.
.icon--32x32 Use 32x32 size of icon. Optional.
.icon--box Adds visual box around the icon. Box size will conform to size specified (16x16 by default). Optional.
.icon--circle Adds circle around the icon. Circle size will conform to size specified (16x16 by default). Optional.
.icon--circle-[light|dark] Sets circle line to be light or dark for use on dark or light backgrounds respectively. Required if .icon--circle is used.