Iconography
Iconography sets the icon family, the size of an icon next to text, and the weight that marks an icon as on.
Summit uses Phosphor icons: components.json sets iconLibrary to phosphor.
Sizes
A component sizes the icons inside it to the text next to them. In the specimen, each row reads the width of the icon from the component.
| Size | Utility | Purpose |
|---|---|---|
| 16px | size-4 | Next to 14px text |
| 14px | size-3.5 | In an sm Button or Toggle |
| 12px | size-3 | Next to 12px text, as in a Badge or a Kbd |
A Button sets the size of any svg inside it that has no size- class, and so do a Toggle, a menu row, and a tab. An icon that you pass to one of them doesn’t need a size, and a class like size-5 on the icon replaces the default. A Badge keeps every icon at 12px.
Outside a component, a Phosphor icon is 1em wide, the font size of the text around it.
Weights
Phosphor has six weights for each icon: thin, light, regular, bold, fill, and duotone. Summit uses three.
| Weight | Purpose |
|---|---|
regular | An icon at rest. It is Phosphor’s default, so the prop is omitted. |
fill | An object that is on or current, such as the star of a pressed Toggle or the icon of the current page in a Sidebar |
bold | A glyph that is on, such as the B of a pressed Toggle |
Rules
The first rule applies where the product chooses the icon: in a Toggle and in navigation. The components follow the second.
Fill and Bold
Use fill on an icon that pictures an object: a star, a bell, or a house. Phosphor’s fill of a plus, a check, an X, or the letter B is a filled square with the sign cut out of it, so use bold for a glyph such as B or I when it is on. See Elevation for the tint that goes with each mark.
bold for the glyph of a pressed Toggle.fill, the B becomes a square with the letter cut out, so users can mistake it for a different control.Mirroring
rtl:rotate-180 rotates an icon by half a turn in a right-to-left layout. The components set it on their own carets and separators, so add it to a directional icon that you place yourself.
A check, a plus, an X, a spinner, a magnifying glass, and a caret that points up or down keep their direction. Phosphor’s mirrored prop flips an icon whatever the direction of the text, so it can’t replace the class. See Right-to-Left for dir.
Accessibility
Phosphor renders an svg with no aria-hidden, and Chromium exposes it as an image with no name. Set aria-hidden on an icon that is next to its label, as a toast does on its status icon.
An icon that is used alone and conveys a meaning needs a name so that screen readers can announce it, as WCAG 2.2 SC 1.1.1 Non-text Content requires. To provide one, set alt. Phosphor writes it as a title inside the svg, which names the image.
An icon-only Button needs an aria-label. See Button for the requirement.
An icon is drawn in currentColor, so it has the contrast of the text next to it. WCAG 2.2 SC 1.4.11 Non-text Contrast requires 3 to 1 for an icon that conveys meaning. See Color for the ratio of each color and Accessibility for the contrast floors.
In Code
Import an icon by its name from @phosphor-icons/react. In a server component, import it from @phosphor-icons/react/ssr because the main entry reads a React context.
import { ArrowRightIcon } from '@phosphor-icons/react';
<Button>
Continue
<ArrowRightIcon data-icon="inline-end" aria-hidden className="rtl:rotate-180" />
</Button>;data-icon tells a Button which side the icon is on so that it can reduce the padding there.