Icons

Icons add a visual layer to written information. They should be used to inform and enhance components. The purpose of the icon will determine whether or not it needs to receive focus or not.

Icon library

#icon-alert
#icon-arrow
#icon-branding
#icon-calendar-slots
#icon-calendar-check
#icon-calendar
#icon-checkmark
#icon-checkmark-circle
#icon-checkmark-circle--filled
#icon-cloud-upload
#icon-collapse
#icon-competitor-test
#icon-concept-test
#icon-cross-circle
#icon-delete
#icon-download
#icon-dropdown
#icon-email
#icon-error
#icon-expand
#icon-filters
#icon-gizmo
#icon-heart--filled
#icon-heart--stroke
#icon-home
#icon-info
#icon-info--filled
#icon-link
#icon-lock
#icon-move
#icon-need-discovery
#icon-notifications
#icon-pages
#icon-pages--unique
#icon-play
#icon-preference-test
#icon-prototype-test
#icon-question-mark-circle--filled
#icon-quick-test
#icon-record
#icon-report
#icon-search
#icon-send
#icon-share
#icon-slack
#icon-star
#icon-star--filled
#icon-usability
#icon-warning
#icon-share-screen

Logo library

Icon example

<svg class="icon" role="presentation">
  <use xlink:href="#icon-email"></use>
</svg>
<svg class="icon icon--small" role="presentation">
  <use xlink:href="#icon-email"></use>
</svg>
<svg class="icon icon--large" role="presentation">
  <use xlink:href="#icon-email"></use>
</svg>
<icon name="email"></icon>
<icon name="email" size="small"></icon>
<icon name="email" size="large"></icon>

Description

We use an SVG symbol to deliver our icons. The SVG sprite acts like a collection of stamps that can be repeated with different ink (colors). All of our icons should be monochromatic.

Logo example

<svg class="logo logo--large" role="presentation">
  <use xlink:href="#logo-usertesting"></use>
</svg>

How to add a SVG

Our SVGs are created using a JS webpack pack: ut-icons.js. These take the icons from our Toolkit, add the SVGs in Orders / Video Player, and create one sprite.

  1. Be sure that the SVG doesn’t exist in Toolkit already
  2. Determine if the SVG is implementation-specific or generic (Check with #platform-experience if unsure.)
  3. With webpack running, add the SVG to the correct directory
    • Dashboard: assets/images/svgs/
    • Video Player: assets/images/video-player/svgs/

Naming matters

The filename will affect the appearance of your SVG. Why? Because the <use> is using the Shadow DOM, we don’t have a ton of control over targeting styles. So, we rely on the name to auto-generate the <svg>’s ID. The default is the monochromatic stroke that relies on currentColor to inherit the color from the <svg>.

Filename Output Use case
icon-whatever.svg Inherits parent’s text color (currentColor) Monochromatic icons. Most common.
icon-whatever--filled.svg Doesn’t set a stoke color Selected state (rating stars / hearts)
icon-whatever--color.svg Retains the stroke / fill of original SVG Complex illustrations.

Icon Stamp

<div class="icon-stamp">
  <svg class="icon-stamp__icon" role="presentation">
    <use xlink:href="#icon-send"></use>
  </svg>
</div>

<div class="icon-stamp icon-stamp--primary">
  <svg class="icon-stamp__icon" role="presentation">
    <use xlink:href="#icon-send"></use>
  </svg>
</div>

Description

Icon stamps are used to help visually break up blocks of information. They should be used sparingly and intentionally.

Icon Stamp: Medium

<div class="icon-stamp icon-stamp--medium">
  <svg class="icon-stamp__icon icon-stamp__icon--medium" role="presentation">
    <use xlink:href="#icon-send"></use>
  </svg>
</div>

<div class="icon-stamp icon-stamp--medium icon-stamp--primary">
  <svg class="icon-stamp__icon icon-stamp__icon--medium" role="presentation">
    <use xlink:href="#icon-send"></use>
  </svg>
</div>

Description

Different sized icon stamps are used to introduce new content. icon-stamp is used as small bullet points. icon-stamp--medium is used for larger pieces of content with CTAs and/or links. icon-stamp--large is used to introduce the page’s content.

Icon Stamp: Large

<div class="icon-stamp icon-stamp--large">
  <svg class="icon-stamp__icon icon-stamp__icon--large" role="presentation">
    <use xlink:href="#icon-send"></use>
  </svg>
</div>

<div class="icon-stamp icon-stamp--large icon-stamp--primary">
  <svg class="icon-stamp__icon icon-stamp__icon--large" role="presentation">
    <use xlink:href="#icon-send"></use>
  </svg>
</div>

Do

  • Group similar sized icon stamps

Don't

  • Mix and match icon stamp colors
  • Have more than one icon-stamp--large on a page

Accessibility

  • Icons that provide information or are directly tied to an action should receive :focus and have an appropriate aria-label.
  • Icons which are for visual purposes only should have a role="presentation" to prevent screen readers from seeing it.