Skip to content

Icon

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

Ready to use

DevelopAccessibility

Styles

Section titled “Styles”
<i class="tng-icon icon-car"></i>

See the icons reference for all icons available per brand.

Sizes

Section titled “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>

Adaptive coloring

Section titled “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

Section titled “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>

React

Section titled “React”

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

Properties

Section titled “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

Section titled “Example”
import { Icon } from '@tmedxp/react-components';


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


export { IconExample };

React AEM

Section titled “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

Section titled “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

Section titled “Example”
import { IconAEM } from '@tmedxp/aem-react-components/atoms/icon';


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


export { IconAEMExample };