i

Icon

Content · researched

A small symbol that communicates meaning, an action or a state.

atom

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Icon native: no antd 6.6.5
Variants
Outlined, Filled, TwoTone
Sizes
—
States documented
—
Accessibility guidance
no

Index said not shipped; it missed this. Docs page 'Icon' (group General) describes the separate @ant-design/icons package of semantic vector icons plus custom-icon helpers. Icon markup was not read (package not installed alongside antd source read).

3 corrected on re-read
  • builds_on_native: "unread" → "no" @ant-design/icons renders span role=img wrapping svg aria-hidden; rendered with installed package
  • variants: null → ["Outlined","Filled","TwoTone"] icon.md shows StarOutlined, StarFilled, StarTwoTone; twoToneColor prop
  • urls: {"docs_url":"https://ant.design/components/icon/","code_url":"https://github.com/ant-design/ant-design/tree/master/components/icon"} → {"docs_url":"https://ant.design/components/icon/","code_url":"https://github.com/ant-design/ant-design-icons"} HTTP 200 docs; 200 code

docs ↗ · code ↗

Carbon

Icons (@carbon/icons-react) native: no @carbon/react 1.117.0
Variants
—
Sizes
16, 20, 24, 32
States documented
—
Accessibility guidance
no

Index said not shipped; it is: Carbon has an icon library shipped as separate packages (@carbon/icons-react 11.89.0 installed), documented under Elements, not Components. Each icon renders an inline svg (checked by rendering Add). The docs page has a section on focus and aria-label. Inside @carbon/react only Icon.Skeleton exists.

2 corrected on re-read
  • sizes: null → ["16","20","24","32"] Icons usage: 16px typical; 20, 24, 32px artboards also used
  • urls: {"docs_url":"https://carbondesignsystem.com/elements/icons/usage/","code_url":"https://github.com/carbon-design-system/carbon-icons"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/foundations/icons/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/icons-react"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/foundations/icons/guidelines; carbon-icons repo last pushed 2024-05; @carbon/icons-react 11.90.0-rc.0 lives in monorepo packages/icons-react (200)

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No icon set or icon component. Styles > Images advises avoiding icons in most cases; a few inline SVGs ship inside individual components.

Material Web

Icon (<md-icon>) native: no @material/web 2.5.0
Variants
—
Sizes
—
States documented
—
Accessibility guidance
yes

Agree with index. Renders a slot, sets aria-hidden=true by default (aria-hidden=false to announce); content is a Material Symbols ligature, code point or child svg. Accessibility section is present.

docs ↗ · code ↗

Primer

Octicon native: no @primer/react 38.40.1
Variants
—
Sizes
small, medium, large
States documented
—
Accessibility guidance
yes

Primer React Octicon is deprecated (wrapper that renders the passed icon; use icons directly from @primer/octicons-react, a separate package). No components page; icon guidance at /product/getting-started/foundations/icons/.

2 corrected on re-read
  • sizes: null → ["small","medium","large"] Foundations icons page props table: size 'small' | 'medium' | 'large'
  • a11y_documented: "no" → "yes" Icons page has Markup section: decorative aria-hidden, contentful role=img, title

docs ↗ · code ↗

Spectrum

Icon native: no @spectrum-web-components/button 1.12.4
Variants
—
Sizes
s, m, l, xl, xxl
States documented
—
Accessibility guidance
yes

Implementations: S2 Icon (wrapper for SVG icon components), v3 Icon, SWC 1st-gen sp-icon with icons-ui and icons-workflow sets, SWC gen2 and spectrum-css. Installed SWC 1.12.4 has icon, icons-ui, icons-workflow and iconset. Docs page not read for accessibility.

2 corrected on re-read
  • sizes: null → ["s","m","l","xl","xxl"] SWC docs Sizes section: s to xxl, default m
  • a11y_documented: "unread" → "yes" SWC page has an Accessibility section (decorative icons aria-hidden, label attribute otherwise)

docs ↗ · code ↗

USWDS

Icon native: yes @uswds/uswds 3.14.0
Variants
size-3 to size-9 (usa-icon--size-3 ... usa-icon--size-9)
Sizes
size-3, size-4, size-5, size-6, size-7, size-8, size-9
States documented
default
Accessibility guidance
yes

Agrees with index. Renders an svg that references the sprite; page has Accessibility guidance. Size classes are listed under Icon variants.

docs ↗ · code ↗

Platform facts

Native elementimg (spec: icons are marked up with img; alt empty if the icon is supplemental to adjacent text) or inline svgSpec section 'A short phrase or label with an alternative graphical representation: icons, logos': when the icon is supplemental to text conveying the same meaning the img alt attribute must be present but empty; when self-explanatory with no adjacent text an equivalent textual label must be given in alt. MDN img: alt='' marks an image that is not a key part of the content. MDN svg: a container that can embed an SVG fragment inside an HTML document. MDN role=img: multiple elements may be treated as a single image with aria-label; for inline SVG set role=img on the outer svg and label it; purely presentational: presentation role.
Baseline—
APG patternnone
ARIA role—
Shipped by6 of 7 systems

Anatomy

  1. image — img or inline svg element.
  2. alternative text optional — Spec icons section: alt empty when the icon repeats adjacent text, an equivalent label when it stands alone.

The seven states

default Static graphic.
hover n/a — Not interactive.
focus n/a — Not focusable; an icon button's button is.
active n/a — Not interactive.
disabled n/a — Not defined by APG or HTML.
error n/a — Not defined by APG or HTML.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 9 of 35 fields changed on the second read — open any “corrected” note to see what it said before.