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

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

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	Optional
name	ToyotaIcon | LexusIcon	Icon name to display from the library	❌
size	Size	Defines the size of the icon	✅
className	ClassValue	Custom classNames you want to apply on the icon element	✅

Example

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

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

Properties

Prop	Type	Description	Optional
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 };