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.
agreement
alert
arrow
audience
bar-chart
bolt
branding
calendar
calendar-check
calendar-slots
checkmark
checkmark-circle
checkmark-circle--filled
chevron
click
clock
close
cloud-upload
collapse
cross-circle
delete
discover
document
download
draggable
dropdown
edit
email
engage
expand
external-link
eye
face-recording
filters
folder
frustration
gizmo
heart--filled
heart--stroke
home
idea
info
link
lock
microphone
minus
mobile
move
notifications
options
plus
prototype
question-mark-circle
record
replay
search
send
settings
share
share-screen
star
star--filled
star--half-filled
star-multi
star-multi--filled
stopwatch
study-view
task-view
template
test-creative
test-messaging
test-plan
tip
unmoderated
usability
user-settings
video-upload
video-swap
warning
webcam
websites
workspace-wrench
clip
forward-5
fullscreen
highlight-reel
note
play
pause
rewind-5
rotate
volume--high
volume--low
volume--med
volume--off
microphone
recording
study-view
task-view
microphone
study-view
task-view
sentiment--negative
sentiment--positive
sentiment--unassigned
u
usertesting
insight-core
market-insight
product-insight
adobe-xd--color
airbnb
apple
cbs
chrome
facebook
google
googlecal
hautelook
outlook
qualtrics-xm
qualtrics-product-xm
qualtrics-product-xm--short
slack
slack-full
walmart
zillow
<tk-icon class="demo-icon" color="multi" name="slack" size="auto"></tk-icon>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.
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 guidelines of those companies.
CSS:
.demo-icon {
–icon-height: 40px;
}<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>auto. In those instances you’ll need to set a width or height (see above).
<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>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 guidelines 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.
<tk-icon name="chevron" rotate="0"></tk-icon>
<tk-icon name="chevron" rotate="90"></tk-icon>
<tk-icon name="chevron" rotate="180"></tk-icon>
<tk-icon name="chevron" rotate="270"></tk-icon>rotate Prop to pass in the degrees.
<tk-icon name="chevron" rotate="0"></tk-icon>
<tk-icon name="chevron" rotate="-90"></tk-icon>
<tk-icon name="chevron" rotate="-180"></tk-icon>
<tk-icon name="chevron" rotate="-270"></tk-icon><tk-stamp icon="send" size="xxs"></tk-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>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.
<tk-stamp icon="send" size="xxs" color="primary"></tk-stamp>
<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>Primary stamps are more prominent than the default.
<tk-stamp icon="send" size="xxs" color="insight"></tk-stamp>
<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>Insight stamps are used on Quick Insights.
<tk-stamp icon="checkmark" size="xxs" color="muted"></tk-stamp>
<tk-stamp icon="checkmark" size="xs" color="muted"></tk-stamp>
<tk-stamp icon="checkmark" size="small" color="muted"></tk-stamp>
<tk-stamp icon="checkmark" size="medium" color="muted"></tk-stamp>
<tk-stamp icon="checkmark" size="large" color="muted"></tk-stamp>Muted stamps are used in form validations to indicate that form is missing something.
<tk-stamp icon="checkmark" size="xxs" color="success"></tk-stamp>
<tk-stamp icon="checkmark" size="xs" color="success"></tk-stamp>
<tk-stamp icon="checkmark" size="small" color="success"></tk-stamp>
<tk-stamp icon="checkmark" size="medium" color="success"></tk-stamp>
<tk-stamp icon="checkmark" size="large" color="success"></tk-stamp>Success stamps are used in form validations to indicate that provided information satisfies requirements.
<tk-stamp icon="close" size="xxs" color="error"></tk-stamp>
<tk-stamp icon="close" size="xs" color="error"></tk-stamp>
<tk-stamp icon="close" size="small" color="error"></tk-stamp>
<tk-stamp icon="close" size="medium" color="error"></tk-stamp>
<tk-stamp icon="close" size="large" color="error"></tk-stamp>Error stamps are used in form validations to indicate that provided information does not satisfy requirements.
large on a page
:focus and have an appropriate aria-label.role="presentation" to prevent screen readers from seeing it.<tk-icon class="m-0x" name="email" role="img" aria-label="Send email"></tk-icon>role="img" should be added so the screen reader will recognize it. If a role="img" is needed an aria-label is also needed. The aria-label should provide context for the image.
device-android-phone
device-android-tablet
device-ios-or-android-smartphone
device-ios-or-android-tablet
device-ipad
device-iphone
device-mac-computer
device-mac-or-windows-computer
device-windows-computer