Develop

Styles

<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

React

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 };