Icons

Icons are used in UI components to symbolize actions or provide additional visual context.

Icon Set

3 icons

Usage

Icons are compiled into an SVG sprite which can be included directly on each page rather than referencing individual external files. You can call one or more instances of an icon with the SVG use element. You can then apply classes to each instance to change its size, color and other properties.

Example
An icon with default styling.

<svg aria-hidden="true" class="lwj-icon-24">
  <title>heart</title>
  <use xlink:href="#heart"></use>
</svg>

Size

The default size of an icon is 16x16 but you can append size values to lwj-icon to adjust the size.

Color

The icons’ SVG paths are set to inherit the color of their parent element. This means you can apply text color utilities to an icon to change its color.

Example
Using text color utilities to change an icon’s color.

<svg aria-hidden="true" class="lwj-icon-24 lwj-text-subdued">
  <title>heart</title>
  <use xlink:href="#heart"></use>
</svg>

Icon Guidelines

In order to keep icons consistent:

• Use a 24x24 artboard
• Add 1-2px of space between the icon and the edge of the artboard
• Set fill color to black (#000000)
• Unify paths into a single compound path

Before adding icons to the system, you can use SVGOMG to further optimize them.