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
name="alert"
variant="solid"
atom
audience
audience-source
bar-chart
bell
bolt
book
branding
building
calendar
calendar-check
calendar-slots
chat
checkmark
checkmark-circle
name="checkmark-circle"
variant="solid"
clear-circle
name="clear-circle"
variant="filled"
click
clock
name="clock"
variant="solid"
cloud-download
cloud-upload
delete
demographics
desktop
detach-link
discover
document
dot
draggable
edit
email
external-link
eye
eye-slash
face-recording
filters
filters-alt
folder
frustration
gizmo
hashtag
heart
name="heart"
variant="solid"
info
name="info"
variant="solid"
instruction
keyboard
legal
light-bulb
link
lock
minus
mobile
mobile-alt
move
options
pages
pdf
plus
prototype
question
question-mark-circle
name="question-mark-circle"
variant="solid"
rating
rating-matrix
record
screener
screener-alt
search
send
settings
share
share-screen
star
name="star"
variant="solid"
name="star"
variant="half"
star-multi
name="star-multi"
variant="solid"
stopwatch
study-view
survey
sync
template
test-creative
test-messaging
test-plan
thumbs-down
thumbs-up
unlock
unmoderated
usability
user-cycle
user-settings
ut-sourced
video-upload
warning
webcam
websites
wrench
written-response
arrow
caret
chevron
close
home
menu
clip
forward-5
fullscreen
highlight-reel
note
play
pause
replay
rewind-5
rotate
video-swap
volume-high
volume-low
volume-medium
volume-off
microphone
microphone-mute
recording
<!-- uses tk-icon -->
<tk-icon name="checkmark-circle"></tk-icon>
<!-- uses tk-icon with solid variant -->
<tk-icon name="checkmark-circle" variant="solid"></tk-icon>
<!-- or, using the component directly-->
<tk-icon-checkmark-circle></tk-icon-checkmark-circle>
<tk-icon-checkmark-circle variant="solid"></tk-icon-checkmark-circle>
You can set the name (and other desired Props) when using tk-icon
. Or, you can use the component directly. The tk-icon
wrapper only works for our Icon Library. It does not work on our sentiment icons or integration logos, as those are very different use cases.
<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>
--icon-size
CSS Property. In the rare instances where you need a different height and width, set it to size="custom"
, and set the --icon-width
and --icon-height
.
<tk-icon class="icon--success" name="checkmark-circle" size="large"></tk-icon>
<tk-icon class="icon--error mv-2x l-block" name="delete" size="large"></tk-icon>
<tk-icon name="cloud-download" muted></tk-icon>
Icons inherit their color from the color
set on the parent element. 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-icon-calendar
date="27"
size="xl"
></tk-icon-calendar>
Prop
. To adjust the size, set --icon-size
CSS Property. The date should scale with the calendar icon (within reason). Please don’t use a size smaller than 40px
, otherwise the date will be illegible.
<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="medium" color="primary"></tk-stamp>
<tk-stamp icon="close" size="medium" color="error"></tk-stamp>
<tk-stamp icon="checkmark" size="medium" color="success"></tk-stamp>
Our stamps support three colors: primary
(default), success
, and error
. Success stamps are used in form validations to indicate that provided information satisfies requirements. Error stamps are used in form validations to indicate that provided information does not satisfy requirements.
large
on a page<button aria-label="Send email">
<tk-icon class="m-0x" name="email" role="img" aria-label="Send email"></tk-icon>
</button>
:focus
and have an appropriate aria-label
.