Iconography on GitHub

Iconography

The design language employs a 3 tier hierarchy for the use of icons. These tiers dictate the proper placement and usage of the icon library.

Note: Minimize Icon Usage

As a general guideline, it is advised that the use of icons be minimized on any given screen. When possible, use plain text as an alternative.

Categories & Tiers

Each icon is grouped into a category, and every icon in a particular category has the same native size.

Currently, there are 5 icon categories:

Name Description Sample Size
tier1 minimal level of detail, solid style 18px
tier2 medium level of detail, linear style 24px
tier3 medium level of detail, linear style 30px
html-editor for use in the HTML editor 18px
emoji for all your emoji needs, same detail/style as tier1 18px

> Browse previews of all categories and icons

Note: Icon Sizes

Always choose the icon whose native size best matches your desired icon size, ideally exactly.

Color

The color of icons should be “ferrite” (#565a5c). For icons which require a hover/focus effect, the color should change to “celestine-minus-1” (#005694) with a 0.3s ease transition.

Ferrite #565a5c
Celestine -1 #005694

Accessibility

For decorative images, from WebAIM:

Decorative images do not present important content, are used for layout or non-informative purposes, and do not appear within a link. In almost all cases, spacer and decorative images should have null alt text (alt="").

WCAG 2.0 Level A
H67: Using null alt text and no title attribute on img elements that AT should ignore

Most Brightspace UI icons are not decorative – they’re used for informative purposes. Icons therefore need alternate text or should be accompanied by descriptive text.

In scenarios where the design of the application doesn’t warrant on-screen alternate text, a technique may be used to position the text offscreen, making it available to screen readers. The <d2l-offscreen> component is available for this purpose.

Bidrectionality

When rendered in a right-to-left direction, any icons which show directionality in terms of time (back/forward, next/previous, etc.) need to be mirrored horizontally.

The <d2l-icon> component (see below) will automatically mirror directional-specific Brightspace UI icons in a right-to-left environment.

Example (html)
<body dir="rtl">
  Should be mirrored and point to the left
  <d2l-icon icon="d2l-tier1:chevron-right"></d2l-icon>
</body>

To learn more about how best to determine if an icon should be mirrored, refer to Google’s Material Design Bidirectionality documentation.

Developing with Icons

Installation

To use this component in your application, you can install it using Bower:

bower install d2l-icons

Raw SVGs

The raw SVG files for every category and icon are available in the Bower package in the /images directory. To see a preview of every icon, browse them on GitHub.

SVG image assets are useful when you want to use an <img> tag. For example:

Example (html)
<img
  src="bower_components/d2l-icons/images/tier1/print.svg"
  alt="print" />

Polymer Icon Sets

Polymer’s <iron-iconset-svg> component allows you to define a collection of SVG icons, and used together with <d2l-icon> (see below) you can consume those icons in your application.

The d2l-icons component exposes an iconset collection for each category. Its filename will be in the form <name>-icons.html. The d2l-icons.html file imports all the categories.

Example (html)
<link
  rel="import"
  href="bower_components/d2l-icons/tier1-icons.html">

Basic Icons

The <d2l-icon> web component is the easiest way to get a basic icon into your application.

First, import the iconset for the category and the d2l-icons.html component:

Example (html)
<link
  rel="import"
  href="bower_components/d2l-icons/tier1-icons.html">
<link
  rel="import"
  href="bower_components/d2l-icons/d2l-icon.html">

Alternately you can just import d2l-icons.html to get everything, but the import will be much larger.

<d2l-icon> has a single property icon, which corresponds to the category and icon you’d like to use in the form d2l-<category-name>:<icon-name>.

Example (html)
<d2l-icon icon="d2l-tier1:print"></d2l-icon>

The color of the icon will default to “ferrite”, and the size will be set automatically based on the category name. Both can be customized with a custom-style block by setting the --d2l-icon-height and --d2l-icon-width variables:

Example (html)
<style is="custom-style">
#icon-custom-demo {
  color: indigo;
  --d2l-icon-height: 50px;
  --d2l-icon-width: 50px;
}
</style>
<d2l-icon id="icon-custom-demo" icon="d2l-tier1:gear"></d2l-icon>

Show me the code!

Want to see, contribute or learn more about the code?
Check out "BrightspaceUI/icons" on GitHub!

More information on developing with Brightspace UI components can be found in the Developer Guide.