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

alert
arrow
apps
audience
branding
calendar-slots
calendar-check
calendar
checkmark
checkmark-circle
checkmark-circle--filled
click
cloud-upload
collapse
cross-circle
cross-circle--filled
delete
discover
download
draggable
dropdown
email
engage
error
expand
external-link
eye
filters
folder
frustration
gizmo
heart--filled
heart--stroke
home
idea
info
info--filled
link
lock
mobile
move
notifications
options
pages
pages--unique
prototype
question-mark-circle--filled
quick-test
record
report
search
send
settings
share
star
star--filled
star-multi
star-multi--filled
stopwatch
test-creative
test-plan
test-messaging
thumbs-up
unmoderated
video-upload
workspace-wrench
usability
user-settings
warning
websites
share-screen

Media Icons

clip
forward-5
fullscreen
highlight-reel
note
play
pause
rewind-5
replay
rotate
volume--high
volume--low
volume--med
volume--off

Brand Icons

The icons below are set to use multi-color, but the icons are available in monochrome, too.
u
usertesting
insight-core
market-insight
product-insight

Integration Logos

slack
slack-full
google
googlecal
outlook
apple
<tk-icon class="demo-icon" color="multi" name="slack" size="auto"></tk-icon>

Description

These icons have size="auto". To set a specific size, set the --icon-width or --icon-height CSS variable. Note: you’ll want to scope this to a class name, otherwise it’ll affect every icon.

CSS:

.demo-icon {
  –icon-height: 40px;
}

Size

<tk-icon name="email" size="xs"></tk-icon>
<tk-icon name="email" size="small"></tk-icon>
<tk-icon name="email" size="medium"></tk-icon>
<tk-icon name="email" size="large"></tk-icon>

Description

Most of the time, you’ll want to use one of these four sizes. The default is medium. There are times you might need auto. In those instances you’ll need to set a width or height (see above).

Multi-Color, Monochromatic, and Muted

<tk-icon color="multi" name="slack" size="large"></tk-icon>
<tk-icon color="mono" name="slack" size="large"></tk-icon>
<tk-icon color="multi" name="slack" muted></tk-icon>

Description

The icon default is monochromatic. Monochromatic icons inherit their color from the color set on the parent element.

In the case of external logos, it is prefered to set the icon to color="multi" Please refrain from setting random colors on these logos, as we want to respect the branding of those companies.

Occasionally, icons are used to provide secondary information and can use the muted property. Muted should not be used for primary actions.

Stamp

<tk-stamp icon="send" size="xs"></tk-stamp>
<tk-stamp icon="send" size="small"></tk-stamp>
<tk-stamp icon="send" size="medium"></tk-stamp>
<tk-stamp icon="send" size="large"></tk-stamp>

Description

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

Different sized stamps are used to introduce new content. Small is the default. The xs size is used next to bullet points. medium is used for larger pieces of content with CTAs and/or links. large is used to introduce the page’s content.

Primary

<tk-stamp icon="send" size="xs" color="primary"></tk-stamp>
<tk-stamp icon="send" size="small" color="primary"></tk-stamp>
<tk-stamp icon="send" size="medium" color="primary"></tk-stamp>
<tk-stamp icon="send" size="large" color="primary"></tk-stamp>

Description

Primary stamps are more prominent than the default.

Insight

<tk-stamp icon="send" size="xs" color="insight"></tk-stamp>
<tk-stamp icon="send" size="small" color="insight"></tk-stamp>
<tk-stamp icon="send" size="medium" color="insight"></tk-stamp>
<tk-stamp icon="send" size="large" color="insight"></tk-stamp>

Description

Insight stamps are used on Quick Insights.

Do

  • Group similar sized stamps

Don't

  • Mix and match stamp colors
  • Have more than one 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.