Icon
An icon draws one glyph from the Thykes icon font, sized from the icon scale and colored like the text around it.
<tk-icon name="star"></tk-icon> <tk-icon name="mail"></tk-icon> <tk-icon name="settings"></tk-icon>
thykes.js loads the icon font; you load nothing else.
Anatomy
| Part | What it is |
|---|---|
tk-icon |
a square box at size; hidden from screen readers unless it has a label |
glyph part |
the drawing, a character in the icon font, in the host's color |
Sizes
<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 |
Box | Use |
|---|---|---|
12 |
12px | next to small text, dense status |
16 (default) |
16px | next to body text, in menus and controls |
20 |
20px | next to larger text |
24 |
24px | on its own, navigation |
32 |
32px | prominent |
48 |
48px | large, on its own, such as an empty state |
inherit |
1em | follows the font size of the text around it |
The sizes are the icon-size-* tokens
Color
<tk-icon name="check-circle" tone="success" label="Done"></tk-icon> <tk-icon name="warning" tone="warning" label="Warning"></tk-icon> <tk-icon name="info" tone="info" label="Info"></tk-icon> <tk-icon name="star" tone="accent"></tk-icon> <tk-icon name="clock" tone="secondary"></tk-icon>
Without tone, the icon takes the text color around it, so inside a component it follows
the component's states and themes. On its own, tone sets an icon/* color:
tone |
Color |
|---|---|
| unset | the text color around it |
default, secondary, tertiary |
icon/default, icon/secondary, icon/tertiary, from strongest to quietest |
disabled |
icon/disabled |
accent |
icon/accent; follows the primary color |
success, warning, error, info |
the status colors |
inverse, on-fill |
on an inverse surface or a colored fill |
There is no selected tone. A selected control colors its own icon.
In components
<tk-button variant="primary"><tk-icon slot="icon-start" name="check"></tk-icon>Save changes</tk-button> <tk-icon-button label="Settings"><tk-icon name="settings"></tk-icon></tk-icon-button> <p><tk-icon name="mail"></tk-icon> 3 unread messages</p>
Inside a component slot, the component sets the size and your size has no effect.
tk-button, tk-icon-button, tk-menu-item, and tk-tag draw icons at 16px;
tk-banner and tk-section-message at 20px; tk-empty-state at its media size.
Names
Names are lowercase and hyphenated, and say what the icon means. The
| Group | Names |
|---|---|
| Navigation | menu, chevron-up, chevron-down, chevron-left, chevron-right, arrow-up, arrow-down, arrow-right, arrow-up-right, external-link, link |
| Actions | search, plus, minus, close, check, edit, copy, trash, download, share, filter, sort, settings, more-horizontal |
| Status | info, warning, error, check-circle, x-circle |
| Objects | bookmark, bookmark-filled, star, mail, user, calendar, clock, image, monitor, sun, moon |
| Brands | github, figma |
An unknown name draws an empty box and logs a warning.
When to use
- Put an icon in a component's icon slot, such as a button, a menu item, or a tag, or next to text.
- Pair an icon with a text label wherever there's room. A word is easier to read than an icon alone.
- For a clickable icon, use an
Icon button .tk-iconnever takes focus. - Need a shape the font doesn't have? Any icon slot also takes your own
<svg>. SeeYour own icons .
Do / Don't
| ✅ Do | ❌ Don't |
|---|---|
| Pair an icon with a text label | Use an icon alone where a word fits |
| Use an Icon button for a clickable icon | Add a click handler to tk-icon |
Set label on an icon that stands alone |
Set label on an icon next to text that says the same |
| Let a component size its slotted icons | Set size on an icon inside a button |
| Use a status shape with a status color | Show status by color alone |
Related
Icons : how icons are drawn, named, and colored, and every glyph.Icon button : a clickable icon.Button : theicon-startandicon-endslots.
API
Attributes
| Attribute | Type | Default | What it does |
|---|---|---|---|
name |
string | the icon to draw; see |
|
size |
12 | 16 | 20 | 24 | 32 | 48 | inherit |
16 |
the box size |
tone |
see |
unset | an icon/* color; unset uses the text color around it |
label |
string | the accessible name; empty means decorative |
CSS
::part(glyph): the drawing.
No slots and no events.
Tokens
| Element | Tokens |
|---|---|
| box | icon-size-12 to icon-size-48 |
color with tone |
icon/default, icon/secondary, icon/tertiary, icon/disabled, icon/inverse, icon/on-fill, icon/accent, icon/success, icon/warning, icon/error, icon/info |
Values per theme:
Accessibility
Built in:
- Without
label, the icon is hidden from screen readers. - With
label, the icon is an image with that name. - In Windows high contrast, the icon takes the system text color.
Your part:
-
Leave
labelunset when text next to the icon already says what it means. -
Set
labelwhen the icon alone carries meaning:Disk almost full <tk-icon name="warning" tone="warning" label="Warning"></tk-icon> Disk almost full
-
Inside a button, name the button, not the icon.
-
Don't rely on color alone. Pair a status color with a status shape (
check-circle,warning,error) or with text.