COMPONENTS / ATOMS / al-icon← ALL COMPONENTS

Icon

<al-icon><ALIcon> REACTbeta

Reference generated from the custom elements manifest — 4 properties, 1 slots, 0 events.

PLAYGROUND1 CONTROL
PREVIEW / al-icon / ALTITUDE
Loading preview
size
CODE — HTML / REACT

Guidance

NOT YET AUTHORED · 20 COMPONENTS COVERED

NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.

NOT TRACKEDAltitude Design System

Deliberately not represented in Figma.

DECIDED BY
NEVER SYNCED
FIGMA SIDE
NEVER OBSERVED
LAST CONFIRMED SYNC
NEVER
PUBLIC SURFACE
4 ATTR · 1 SLOT · 0 EVENT · 1 PART

The two sides have never been confirmed equal, so there is no baseline to compare against.

Icons live in Figma as 71 flat components on the 🛠 Icons page (resolved by name), not as a component set — there is nothing for a per-set parity check to bind to.

CHECKEVIDENCEDETAILRESULT
Default stateAXEicon--DefaultPASS
Advanced statesAXE9 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED

MEASURED 2026-09-08 · 10 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA

COLOR CONTRAST0 RULES FAILING

The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.

NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 10 STORIES.

import '@southleft/al-web-components/components/icon';
import { ALIcon } from '@southleft/al-react';
PROPTYPEDEFAULT
namestring | undefinedPhosphor glyph name, kebab-case — e.g. `caret-down`, `magnifying-glass`, `x`. Typed as `string` rather than a 1,512-member union on purpose: the schema generator expands string-literal unions into JSON Schema `enum`s, which would produce a ~40 KB schema for this one attribute. Names are validated at runtime instead.
weightALIconWeightIcon weight. Only `regular` is bundled today; other values fall back to it with a dev warning. Declared now so adding weights later is not a breaking change to the manifest/schema contract.'regular'
iconTitlestringAccessible name. When set, the icon is exposed as `role="img"` with this label; when omitted the icon is hidden from assistive technology, which is correct for decorative icons sitting next to visible text.
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'Icon size - Default size is 16px - **xs** renders a 8px icon - **sm** renders a 12px icon - **md** renders a 20px icon - **lg** renders a 24px icon - **xl** renders a 32px icon - **xxl** renders a 36px icon - **xxxl** renders a 40px icon
SLOTDESCRIPTION
(default)an inline `<svg>`. Rendered only when `name` is not set, which preserves the original slot-based behaviour byte for byte.

THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.

PARTDESCRIPTION
svg

SOURCE — components/icon/icon.ts · Atoms/Icon