v3.0
IconContainer

The box an icon from the DS library sits in: one glyph, four sizes, two ways to size — the glyph inside a fixed 24 box, or the whole box with it — and three states.

-- 3.0 -- 3.0.5

Overview

IconContainer holds one icon from the DS library and gives it a size, a colour and a state — the base other components place their icons in. Two configurations: the glyph sized inside a fixed 24 box, or the whole box sized with the glyph.

  • 1
    Icon Only
  • 2
    Whole Container
24
20
16
12
1
24
20
16
12
2

States

Three states — Standard, Disabled and Skeleton. IconContainer is not interactive: it has no pressed or hover state of its own, and a press belongs to the control that holds the icon.

Standard

1
2
  • 1
    Icon --text-and-icon-primary — the glyph's colour by default, through currentColor.--text-and-icon-* — any token of the group on an instance, for outlined and filled icons.
  • 2
    Box --icon-container-fill — none by default; takes any --background-* token on an instance.--background-secondary — the fill in this example, round a 16 glyph.

Disabled

1
  • 1
    Icon --text-and-icon-disabled — the glyph's colour.A colour, not an interaction state: the control that holds the icon owns the disabled state.

Skeleton

1
2
  • 1
    Shape — 24 and 20 --skeleton-on-white — the Skeleton's fill.--pattern-shimmer — the Skeleton's wave, zeroed under reduced motion.--icon-container-size — the shape's width and height, the glyph's size.--sp-130-s6 — the radius, stopping at 130%.Shown in the glyph's place while the data loads from the network.
  • 2
    Shape — 16 and 12 --sp-130-s4 — the radius at the two small sizes; fill and wave as above.

Anatomy

Two parts, both required: the box and the one icon centred in it. The root carries the colour, and the icon takes it through currentColor. The dashed outline marks the box — it has no fill or border of its own.

1
2
  • 1
    Box --sp-s24 — the square in Icon only, whatever the glyph's size.--icon-container-size — the square in Whole container: the glyph's size.--icon-container-fill — no fill by default; any --background-* token on an instance.
  • 2
    Icon --icon-container-size — the glyph's width and height: --sp-s24, --sp-s20, --sp-s16 or --sp-s12.currentColor — the SVG's fill, so the root's colour tints outlined and filled icons.One SVG from the DS library — the Figma Icon swap — always centred in the box.
  • Icons it does not take Double-color, color and flags icons carry their own colours and are not tinted.Color / carbase and color / splash icons have non-standard proportions and do not fit the four sizes, so they are not placed in an IconContainer.

Layout

Every size comes from the SP scale: the box and the glyph grow the full ×150 (--sp-sN), the Skeleton radius grows to 130% and holds it (--sp-130-sN).

General

  • General --sp-s24 — the box in Icon only, at every glyph size.--icon-container-size — the glyph: --sp-s24, --sp-s20, --sp-s16 or --sp-s12; in Whole container, the box too.--sp-s0 — the padding: flex centring produces the 0 / 2 / 4 / 6 inset, which is not a token.The icon is always centred in the box, whatever the size configuration.

Skeleton

1
2
3
4
  • 1
    Size 24 --sp-s24 — the shape, growing to 150%.--sp-130-s6 — the corner radius, stopping at 130%.
  • 2
    Size 20 --sp-s20 — the shape, growing to 150%.--sp-130-s6 — the corner radius, stopping at 130%.
  • 3
    Size 16 --sp-s16 — the shape, growing to 150%.--sp-130-s4 — the corner radius, stopping at 130%.
  • 4
    Size 12 --sp-s12 — the shape, growing to 150%.--sp-130-s4 — the corner radius, stopping at 130%.

RTL

LTR
RTL
1
2
  • 1
    LTR icon-container--rtl — marks an icon with a meaningful horizontal direction; in LTR it changes nothing.The SVG is stored in its original form — the file is never mirrored.
  • 2
    RTL [dir="rtl"] — the marked icon mirrors with scaleX(-1): the box's CSS, not a second file.
  • Every other icon Unmarked icons never mirror — the default for every icon.32 outlined icons carry the marker: chevrons, back and forward arrows, send, car, documents and more — the list is in icon-container.md.

Animation

IconContainer has no motion of its own: it declares no motion token, and the Figma frame's Animation block reads TBD. The only thing that moves inside it is the Skeleton's wave.

Skeleton sweep

Live — the Skeleton's shimmer at the four sizes
  • Shimmer --pattern-shimmer — the Skeleton's loop: 1500 ms, linear, infinite.--skeleton-wave — the band that sweeps over --skeleton-on-white.
  • Reduced motion --pattern-shimmer — zeroed in the DS motion tokens under prefers-reduced-motion: reduce, so the shape stays still with no override in the component.
  • Press --component-push-highlight — the press of a Cell-like host.--component-push-button-press — the press of a Button.Both belong to the control that holds the icon: the icon moves with its host, never on its own.
  • Loading glyph --pattern-spin — if a spinning glyph sits in the box, the rotation belongs to the SVG, not to the box.

Usage

Pick the configuration by what has to stay fixed: the box, or the height of the row the icon sits in.

  • 1
    Icon only — the box stays Adjusting the icon inside its container aligns it visually while the box keeps its size: the glyph matched to the text, the 24 box kept for the layout — in a badge, for example.
  • 2
    Whole container — the row stays Resizing the whole container puts a small icon, matched to the text, right beside it while the row keeps its height — a Whole container 16 next to a Cell title leaves the row at the text's 20.
1
Text
✕ Whole container 16 — the row shrinks to 16
Text
✓ Icon only, glyph 16 — the box keeps the row at 24
2
✕ A 24 box — the title row grows to 24
✓ Whole container 16 — the row keeps the text's 20

Accessibility

IconContainer carries no semantics of its own: whether an icon is announced depends on where it stands and what it means.

Stands alone: role="img" aria-label="Information"
Saved to favourites
Beside text: aria-hidden — the text speaks
1
2
  • 1
    An Image When It Stands Alone An icon that stands alone and carries meaning takes role="img" and an aria-label on the <svg>. The label names the meaning ("Information"), not the picture.
  • 2
    Decorative Beside Text An icon beside text is decorative: aria-hidden="true" on the <svg>, so the text is read once and the icon adds nothing.
  • Inside A Control The label goes on the control — a Button, a Cell — and the icon stays aria-hidden="true".
  • Never A Focus Stop No tabindex and no target of its own. A tappable icon is a control around the container, and the control carries the target.
  • Skeleton Is Hidden The placeholder is hidden from assistive technology; the loading region around it announces, as the Skeleton rule sets.
  • Disabled Is A Colour The icon announces nothing new; the control that holds it announces its own disabled state.
  • Direction Directional icons mirror in RTL — see RTL under Layout; every other icon keeps its orientation.
  • Forced Colours Icons drawn in currentColor follow the system text colour.