Icon

Icons are small visual symbols used to represent actions, objects, or concepts. They enhance communication and provide visual context across interfaces.

CSS
React

Maintained by Platform and Foundation

Ready to use

CSS React Accessibility

<i class="tng-icon icon-car"></i>

Default
Contrast

See the icons reference for all icons available per brand.

Sizes

The default size is sm.

<i aria-hidden class="tng-icon icon-car is-sm"></i>
<i aria-hidden class="tng-icon icon-car is-md"></i>
<i aria-hidden class="tng-icon icon-car is-lg"></i>

Default
Contrast

Adaptive coloring

Almost all icons will automatically adapt to the current scheme, except those that are specifically designed to have fixed colors.

<i aria-hidden class="tng-icon icon-bell-notification is-lg"></i>
<i aria-hidden class="tng-icon icon-iso is-lg"></i>
<i aria-hidden class="tng-icon icon-rating-star-empty is-lg"></i>
<i aria-hidden class="tng-icon icon-rating-star-full is-lg"></i>
<i aria-hidden class="tng-icon icon-user-notification is-lg"></i>

Spinner

We have one special UI icon to indicate loading state. This icon spins by default.

<i aria-hidden class="tng-icon icon-ui-spinner is-lg"></i>

Default
Contrast

Import the Icon component from @tmedxp/react-components.

Properties

The IconProperties extends <React.HTMLAttributes<HTMLElement> which means it includes all standard HTML attributes that can be applied to an HTML element.

Prop	Type	Description	Required
`name`	`ToyotaIcon \| LexusIcon`	Icon name to display from the library	✅
`size`	`Size`	Defines the size of the icon
`rtlFlip`	`boolean`	Mirrors the icon horizontally in right-to-left layouts by applying the `.tng-rtl-flip-x` class, which only takes effect when an ancestor has `dir="rtl"`. Opt in for direction-sensitive icons (arrows, chevrons, etc.) — the icon is no longer mirrored automatically based on its name.
`className`	`ClassValue`	Custom classNames you want to apply on the icon element

Example

import { Icon } from '@tmedxp/react-components';

const IconExample = () => {
  return (
    <Icon name="chevron-right" size="lg" rtlFlip className="custom_class" />
  );
};

export { IconExample };

React AEM

The AEM Icon component renders an SVG icon by iconName; styleIds determines size and padding. It’s built on top of the React Icon component above, and always passes rtlFlip through to it — every AEM-rendered icon mirrors horizontally when its parent has dir="rtl".

Properties

Prop	Type	Description	Required
`icon`	`string`	Icon name from the library. If the provided name doesn’t match the allowed list, nothing renders.	✅
`styleIds`	`StyleId[]`	Styles applied to the icon (size, padding-top, padding-bottom). If no style is provided, `medium` is used as the default size.

Example

import { IconAEM } from '@tmedxp/aem-react-components/atoms/icon';

const IconAEMExample = () => {
  return (
    <IconAEM
      icon="map"
      styleId={['1588947753507', '1588947753506', '2588947753506']}
    />
  );
};

export { IconAEMExample };

An icon is presentational by default — it carries no text and has no interaction pattern of its own, so accessibility hinges on a single decision: is this icon decorative or informative? A decorative icon repeats meaning that adjacent text already conveys and must be hidden from assistive technology; an informative icon is the only carrier of its meaning and must be given an accessible name. Get that one call right and the icon meets WCAG 2.1 AA.

For designers

An icon that carries meaning must stand out from its background — its glyph and its background must meet non-text contrast. Because an icon has no text, this is Non-text Contrast, not the text-contrast criterion. Source: WCAG 1.4.11 Non-text Contrast.
Never rely on an icon’s colour alone to carry meaning — an icon that signals a state (error, success, warning) must be distinguishable by its shape, not just its hue. Source: WCAG 1.4.1 Use of Color.
Pair a meaning-bearing icon with a visible text label wherever the layout allows; a lone glyph is ambiguous to many users, and the text also gives the icon its accessible name for free.
Use semantic colour tokens (e.g. foreground/neutral/default) rather than fixed values, so the icon adapts correctly across themes and surfaces.

For developers

Decide whether the icon is decorative or informative, then wire it accordingly. A decorative icon is hidden from the accessibility tree; an informative icon is given an accessible name and must not be hidden. The per-element wiring for each case is in the Labelling elements section below.

Labelling elements

Give the icon the role, name, and state assistive technology needs — driven entirely by whether it is decorative or informative.

Decorative icon

Purely visual, or duplicating meaning that adjacent text already conveys. Take it out of the accessibility tree with aria-hidden="true" and give it no accessible name, so screen readers skip it: <i class="tng-icon icon-car" aria-hidden="true"></i>. An icon nested inside a labelled control (e.g. a button that already has aria-label) is decorative in this sense — hide the glyph and let the control carry the name.

Informative icon

The sole carrier of its meaning, so it must not be hidden. Give it an accessible name — either role="img" plus aria-label on the icon itself (<i class="tng-icon icon-download" role="img" aria-label="Download"></i>), or an adjacent visible text label that names it. When an icon conveys meaning, never leave it as an unnamed, aria-hidden glyph.

Source: WCAG 4.1.2 Name, Role, Value.