Components / Media

Media

The media primitives. Each one puts a visual object on the page — a picture, a glyph, a profile image — or, in Link's case, a navigation affordance that behaves like one.

The pieces

Component	Use it for
Avatar	A profile image with an automatic initials fallback.
Icon	A semantic SVG glyph — decorative or labelled.
Image	A cross-platform `<img>` with loading and error overlays.
Svg	The raw inline-SVG primitive Icon is built on.
Link	An inline anchor with theme-aware colour and a focus ring.

Accessibility carries the family

Media components put pixels on the screen — but a picture, a glyph, or a link is only as useful as its accessible description. The family makes that the default, not an afterthought:

Avatar takes a required name that drives both the image's alt text and the initials fallback, so the two states describe the same person.
Icon is aria-hidden until you give it an aria-label. A decorative glyph stays silent; a meaningful one announces itself.
Image takes a required alt. Pass an empty string for purely decorative images — a deliberate choice, not an omission.
Link ships a visible focus ring and a theme-derived colour by default.

Each component page has an Accessibility section spelling out the contract and the part you keep.

Svg and Icon

Svg is the low-level inline-SVG primitive. Icon wraps it with a size enum, the aria-hidden default, and a cross-platform render prop. Reach for Icon for glyphs; reach for Svg directly when you need an arbitrary inline SVG that isn't an icon — an illustration, a chart, a logo.