StartFoundationsComponentsContent
Overview Color Typography Spacing Radius Elevation Focus Motion Icons Aspect ratio

Icons

One stroke icon set on a 16px grid, shipped as a font and placed with tk-icon. Icons take the color around them and stay silent to screen readers unless you name them.

GuideTokens

Place an icon

Add member 
<tk-button><tk-icon slot="icon-start" name="plus"></tk-icon>Add member</tk-button>
<tk-icon-button label="Search"><tk-icon name="search"></tk-icon></tk-icon-button>
<tk-icon name="calendar" size="20"></tk-icon>
  • Nothing to load. thykes.js adds the icon font to your page.
  • In a component slot, such as a button's icon-start, the component sizes and colors the icon.
  • On its own, pick a size and, if needed, a tone. The API is on the Icon page.
  • Icons appear once the font loads. Until then, and if it fails, they are invisible, never a placeholder box. So an icon never carries meaning alone; put text or an accessible name beside it.

All icons

43 glyphs. The caption is the value of the name attribute.

  • arrow-down
  • arrow-right
  • arrow-up
  • arrow-up-right
  • bookmark
  • bookmark-filled
  • calendar
  • check
  • check-circle
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • clock
  • close
  • copy
  • download
  • edit
  • error
  • external-link
  • figma
  • filter
  • github
  • image
  • info
  • link
  • mail
  • menu
  • minus
  • monitor
  • moon
  • more-horizontal
  • plus
  • search
  • settings
  • share
  • sort
  • star
  • sun
  • trash
  • user
  • warning
  • x-circle

Size

Choose the size from the text beside the icon. size takes a step of the icon-size-* ramp, never another number.

<tk-icon name="star" size="12"></tk-icon>
<tk-icon name="star"></tk-icon>
<tk-icon name="star" size="20"></tk-icon>
<tk-icon name="star" size="24"></tk-icon>
<tk-icon name="star" size="32"></tk-icon>
<tk-icon name="star" size="48"></tk-icon>
size Use
12 dense or status use, next to small text
16 (default) next to body text, in menus and controls
20 next to larger text, in banners and section messages
24 standalone, navigation
32 prominent use
48 large, standalone

size="inherit" makes the icon 1em, so it follows its text. The stroke grows with the icon: 1.5px at 16, 3px at 32, 4.5px at 48.

Color

An icon has one color and no color of its own.

<tk-icon name="check-circle" tone="success" label="Done"></tk-icon>
<tk-icon name="warning" tone="warning" label="Warning"></tk-icon>
<tk-icon name="error" tone="error" label="Error"></tk-icon>
<tk-icon name="info" tone="info" label="Info"></tk-icon>
  • By default it takes the text color of its parent (currentColor). Inside a component, the component's states color it.
  • tone picks an icon/* role when an icon stands alone: default, secondary, tertiary, disabled, inverse, on-fill, accent, success, warning, error, info. Values per theme: Color.
  • State lives on the container. A selected tab colors its icon; there is no "selected" icon.
  • No duotone, no multicolor. Status icons differ in shape as well as color, so meaning never rides on color alone.

Accessibility

  • Decorative by default. An icon beside text that says the same thing is hidden from screen readers.
  • Name it when it stands alone: with label, the icon becomes an image with that name.
  • A clickable icon is a button. Use Icon button and name the button; the icon inside stays decorative. tk-icon never takes focus.
  • Contrast: at least 3:1 against the background.
  • Target size: make the control bigger, not the glyph: a 16px icon in a 32px button.
  • Forced colors: icons follow the system text color.

Names

  • Lowercase and hyphenated, named for meaning: search, close, chevron-down. The function when there is one (edit, not pencil), the object when there isn't (calendar, mail).
  • Families share a prefix: chevron-…, arrow-….
  • Variants take a suffix: -filled for a filled twin (bookmark-filled), -circle for an enclosed form (check-circle).
  • Names are stable. A name keeps its meaning and is never reused.
  • An unknown name draws nothing and logs a warning.

Your own icons

  • Check the set first. The concept may exist under a functional name. And a word is often clearer than an icon.
  • A one-off shape: put your own <svg> in the component's icon slot. To match the set, draw it on a 16×16 grid with a 1.5px stroke, round caps and joins, and stroke="currentColor".
  • A shape many products need: ask for a new glyph in the set.

What a font cannot do

  • One color per glyph: no duotone, no multicolor.
  • No outline/fill switch: a filled form is a separate glyph.
  • The stroke scales with the size, so large icons look heavier.
  • A load window: icons are invisible until the font arrives.