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.
Playground
Token inspector
Part container
Not rendered in this configuration.
-
font-family from default
{font.icon.family}Details
- Value
-
"Material Symbols Outlined" - CSS
--icon-container-font-family- Token
icon.container.font-family- Decisions
-
font-weight from default
{font.icon.weight.light}Details
- Value
-
300 - CSS
--icon-container-font-weight- Token
icon.container.font-weight- Decisions
-
fill from default
{font.icon.fill.off}Details
- Value
-
0 - CSS
--icon-container-fill- Token
icon.container.fill- Decisions
-
grade from default
{font.icon.grade.normal}Details
- Value
-
0 - CSS
--icon-container-grade- Token
icon.container.grade- Decisions
-
optical-size from default
{font.icon.optical-size.20}Details
- Value
-
20 - CSS
--icon-container-optical-size- Token
icon.container.optical-size- Decisions
-
size
smallfrom default{size.2}Details
- Value
-
16px - CSS
--icon-container-size-small- Token
icon.container.size.small- Decisions
-
size
mediumfrom default{size.3}Details
- Value
-
20px - CSS
--icon-container-size-medium- Token
icon.container.size.medium- Decisions
-
size
largefrom default{size.4}Details
- Value
-
24px - CSS
--icon-container-size-large- Token
icon.container.size.large- Decisions
-
color
neutralfrom default{global.icon.on-base.neutral.secondary}Details
- Resolves through
global.text.on-base.neutral.secondary semanticlight-switch.base.800 rawneutral.light.ash.800 raw- Value
-
#323031dark:#B9B7B7 - CSS
--icon-container-color-neutral- Token
icon.container.color.neutral- Decisions
-
color
brandfrom default{global.icon.on-base.brand.default}Details
- Resolves through
global.text.on-base.brand.default semanticbrand.light.600 raw- Value
-
#175DD6dark:#9EE7FA - CSS
--icon-container-color-brand- Token
icon.container.color.brand- Decisions
-
color
successfrom default{global.icon.on-base.functional.success.default}Details
- Resolves through
global.text.on-base.functional.success.default semanticfunctional.success.700 raw- Value
-
#075D33dark:#16AE64 - CSS
--icon-container-color-success- Token
icon.container.color.success- Decisions
-
color
warningfrom default{global.icon.on-base.functional.warning.default}Details
- Resolves through
functional.warning.800 raw- Value
-
#3E2D0Cdark:#644B16 - CSS
--icon-container-color-warning- Token
icon.container.color.warning- Decisions
-
color
errorfrom default{global.icon.on-base.functional.error.default}Details
- Resolves through
global.text.on-base.functional.error.default semanticfunctional.error.500 raw- Value
-
#E12A23dark:#EE5248 - CSS
--icon-container-color-error- Token
icon.container.color.error- Decisions
-
color
infofrom default{global.icon.on-base.functional.info.default}Details
- Resolves through
global.text.on-base.functional.info.default semanticfunctional.info.600 raw- Value
-
#2B68E0dark:#94B6F4 - CSS
--icon-container-color-info- Token
icon.container.color.info- Decisions
<span
class="ds-icon"
data-size="medium"
data-color="current"
aria-hidden="true"
>settings</span>