role presentation
Icon draft v0.1.0
A glyph of the system's icon set, decorative or named.
An icon draws one glyph of the icon set (Material Symbols, the Iconography foundation) at a size and in a color of the system. Next to text it is decoration and says nothing to assistive technology; alone, it must be named by what it means, and is then exposed as an image. Icons inside the other components (buttons, alerts, selects) are those components' parts, styled by their tokens; this component is for icons placed by a product in its own content.
Tokens
From packages/tokens/src/components/icon.tokens.json. Path grammar: icon.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (14)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
icon.container.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--icon-container-font-family
|
icon.container.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--icon-container-font-weight
|
icon.container.fill
|
number |
{font.icon.fill.off}
|
0
|
--icon-container-fill
|
icon.container.grade
|
number |
{font.icon.grade.normal}
|
0
|
--icon-container-grade
|
icon.container.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--icon-container-optical-size
|
icon.container.size.small
|
dimension |
{size.2}
|
16px
|
--icon-container-size-small
|
icon.container.size.medium
|
dimension |
{size.3}
|
20px
|
--icon-container-size-medium
|
icon.container.size.large
|
dimension |
{size.4}
|
24px
|
--icon-container-size-large
|
icon.container.color.neutral
|
color |
{global.icon.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--icon-container-color-neutral
|
icon.container.color.brand
|
color |
{global.icon.on-base.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--icon-container-color-brand
|
icon.container.color.success
|
color |
{global.icon.on-base.functional.success.default}
|
light
#075D33
dark
#16AE64
|
--icon-container-color-success
|
icon.container.color.warning
|
color |
{global.icon.on-base.functional.warning.default}
|
light
#3E2D0C
dark
#644B16
|
--icon-container-color-warning
|
icon.container.color.error
|
color |
{global.icon.on-base.functional.error.default}
|
light
#E12A23
dark
#EE5248
|
--icon-container-color-error
|
icon.container.color.info
|
color |
{global.icon.on-base.functional.info.default}
|
light
#2B68E0
dark
#94B6F4
|
--icon-container-color-info
|