A Phosphor glyph in one of the system icon sizes, inheriting the color of the text beside it.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
sizesmbk-icon--size-<value> | xssmmdlgxl2xl | md | The icon size box. Components that place an icon usually set this themselves. |
Examples
Usage
A Phosphor glyph, named as Figma names it.
Sizes
Six sizes, the icon size tokens.
Some names
Any Phosphor regular icon.
With a name
Given a label, the icon is announced; without one it is decorative.
Guidelines
Purpose
A single glyph from the Phosphor set, drawn into one of the system's icon sizes and colored like the text beside it. It exists so that every component places icons the same way, and so that an icon's size is a token rather than a number.
To find a glyph, search Phosphor's site (opens in a new tab), which shows every icon with its name. The web font the design system ships is on GitHub (opens in a new tab).
When to use
Anywhere a component or a page needs a glyph: beside a label in a button, as the leading mark of a tag, as the only content of an icon-only control.
When not to use
- For a logo or an illustration. Those are images with their own components.
- For a status color on its own. An icon inherits color; it does not carry meaning by color, and color must never be the only cue (WCAG 1.4.1 Use of Color).
Usage rules
Do
- Name the glyph as Figma names it or as Phosphor does; both spellings work and derive the same class.
- Let the containing component set the size. Set the size axis only for a free-standing icon.
- Link the Phosphor stylesheet in the page yourself. Nothing in the icon's stylesheet loads the font.
Don't
- Set a color on an icon. It inherits; if the color is wrong, the text role beside it is wrong.
- Write a pixel size for an icon. The conformance checker rejects it; the icon size tokens are the only sizes.
- Draw an icon with a weight other than regular until the system decides otherwise. Only the regular weight of the font is loaded.
Let an icon take the color of the text beside it, so the two always match.
A color set on the icon alone drifts from its label and adds no meaning.
Anatomy
One element, the glyph itself. It has no parts. The Phosphor font class selects which glyph is drawn; the block class sets the size box and the color behavior.
Behavior
None. It is inert. Size follows the size axis or, more often, the component that places it, which overrides the size to match its own.
Accessibility
What it does for you
- An icon with no label is decorative and hidden from assistive technology.
- An icon given a label is turned by the React wrapper into an image role with that accessible name.
What you must do
- Give a label to an icon that carries meaning on its own, such as an icon-only button or a status mark with no text.
- Load the Phosphor font for the glyph to render. A missing font shows nothing, so a meaningful icon should always have text or a label beside it.
How to test
- With a screen reader, a decorative icon is skipped and a labeled one is read as an image by its label.
- Block the font from loading: a meaningful icon still has text or a label beside it that says what it meant.
Source
The files the icon is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-icon — a Phosphor glyph in a system icon size.
* Phosphor draws through font-size, so the box and the glyph share one size.
* Color is inherited so an icon always matches the text it sits beside.
* Every rule here is wrapped in :where(), which gives it no weight: the part
* rule of the component an icon sits in always wins, whichever stylesheet
* loads first. The size axis is for a free-standing icon. */
:where(.smbk-icon) {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1em;
height: 1em;
font-size: var(--smbk-size-icon-md);
line-height: 1;
color: inherit;
}
:where(.smbk-icon--size-xs) { font-size: var(--smbk-size-icon-xs); }
:where(.smbk-icon--size-sm) { font-size: var(--smbk-size-icon-sm); }
:where(.smbk-icon--size-md) { font-size: var(--smbk-size-icon-md); }
:where(.smbk-icon--size-lg) { font-size: var(--smbk-size-icon-lg); }
:where(.smbk-icon--size-xl) { font-size: var(--smbk-size-icon-xl); }
:where(.smbk-icon--size-2xl) { font-size: var(--smbk-size-icon-2xl); }Tokens it reads
Manifest
{
"name": "icon",
"block": "smbk-icon",
"summary": "A Phosphor glyph in one of the system icon sizes, inheriting the color of the text beside it.",
"adapt": "css",
"axes": {
"size": {
"values": [
"xs",
"sm",
"md",
"lg",
"xl",
"2xl"
],
"default": "md",
"description": "The icon size box. Components that place an icon usually set this themselves."
}
},
"flags": {},
"parts": [],
"figmaNodeId": ""
}