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.
This component is deprecated!
Please use the new Icon instead.
More icons will be added soon. In case you need one urgently, please reach out to DS team!
add-reportagreementaialertname="alert"
variant="solid"atomaudienceaudience-linkaudience-sourceaudience-utbar-chartbellboltbookbrandingbranching-logicbrowserbuildingcalendarcalendar-checkcalendar-slotschatcheckmarkcheckmark-circlename="checkmark-circle"
variant="solid"clear-circlename="clear-circle"
variant="filled"clickclockname="clock"
variant="solid"cloud-downloadcloud-uploadcollapsedatadeletedemographicsdesktopdetach-linkdevicesdiamonddiscoverdocumentdotdraggableeditemailexternal-linkeyeeye-slashface-recordingfiltersfilters-altfolderfrustrationgizmohashtagheartname="heart"
variant="solid"image-scaling-collapseimage-scaling-expandinfoname="info"
variant="solid"instructioninteraction-testkeyboardlanguagelegallight-bulblinklockminusmobilemobile-altmoveoptionspagespanel-collapsepdfpluspresenter-modeprototypequestionquestion-markquestion-mark-circlename="question-mark-circle"
variant="solid"ratingrating-matrixrecordreportscreenerscreener-altsearchsendsettingsshareshare-screenskip-logicsparklestarname="star"
variant="solid"name="star"
variant="half"star-multiname="star-multi"
variant="solid"stopwatchstudy-viewsurveysynctablettagtemplatetest-creativetest-messagingtest-planthumbs-downthumbs-uptoltranscriptunlockunmoderatedusabilityuser-cycleuser-groupuser-settingsut-sourcedvideo-uploadwarningwebcamwebcam-offwebsiteswrenchwritten-responsearrowcaretchevronclosehomemenuclipcreate-clipcreate-noteforward-5fullscreenhighlight-reelnoteplayplay-altpausereplayrewind-5rotatevideo-swapvolume-highvolume-lowvolume-mediumvolume-offmicrophonemicrophone-muterecordingrecording-offangle-bracketsattachboldbranching-logicemojifile-documentimage-documentimportindent-decreaseindent-increaseitaliclinklist-bulletslist-numbersparagraph-center-alignparagraph-justified-alignparagraph-left-alignparagraph-right-alignquotere-dotabletext-slashtext-styletext-underlineundovideo-document<!-- 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.