Skip to content
Toyota Motor Europe DX Playbook

Icon

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

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>

Schemes

Section titled “Schemes”

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.

PropTypeDescriptionOptional
nameToyotaIcon | LexusIconIcon name to display from the library❌
sizeSizeDefines the size of the icon✅
classNameClassValueCustom classNames you want to apply on the icon element✅

Example

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


const IconExample = () => {
  return <Icon name="car" size="lg" 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.

Properties

Section titled “Properties”
PropTypeDescriptionOptional
iconstringIcon name from the library. If the provided name doesn’t match the allowed list, nothing renders.❌
styleIdsStyleId[]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 };