# Icon

A Phosphor glyph in one of the system icon sizes, inheriting the color of the text beside it.

Block: `smbk-icon`. Status: candidate. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Desktop and mobile: differ by presentation only.

## Options

| Axis | Values | Default | Meaning |
|---|---|---|---|
| `size` | `xs`, `sm`, `md`, `lg`, `xl`, `2xl` | `md` | The icon size box. Components that place an icon usually set this themselves. |



## Markup

```html
<i class="ph ph-rocket-launch smbk-icon smbk-icon--size-md" aria-hidden="true"></i>
```

## React

```tsx
import { Icon } from './design-system/components/icon/icon.js';

<Icon size="md" name="RocketLaunch" />
```

## Stylesheet

```css
/* 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

```json
{
  "size": {
    "icon": {
      "md": {
        "$type": "dimension",
        "$value": "{{size.20}}",
        "$description": "Icon box, medium."
      },
      "xs": {
        "$type": "dimension",
        "$value": "{{size.12}}",
        "$description": "Icon box, extra small."
      },
      "sm": {
        "$type": "dimension",
        "$value": "{{size.16}}",
        "$description": "Icon box, small."
      },
      "lg": {
        "$type": "dimension",
        "$value": "{{size.24}}",
        "$description": "Icon box, large."
      },
      "xl": {
        "$type": "dimension",
        "$value": "{{size.32}}",
        "$description": "Icon box, extra large."
      },
      "2xl": {
        "$type": "dimension",
        "$value": "{{size.40}}",
        "$description": "Icon box, 2× large."
      }
    }
  }
}
```

## 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](https://phosphoricons.com), which shows every icon with its name. The web font the design system ships is [on GitHub](https://github.com/phosphor-icons/web).

## 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.

## 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](logo.md) 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).

## 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.

## 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.