Icon

Import

React
Angular
Vue.js

// with @dhl-official/react-library:
import { DhlIcon } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlIcon } from "@dhl-official/ui-libraries/react-library"

If the DUIL has been installed, you can use the web component directly:

<dhl-icon></dhl-icon>

// with @dhl-official/vue-library:
import { DhlIcon } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlIcon } from "@dhl-official/ui-libraries/vue-library"

Code

React
Angular
Vue.js

Option 1

import CalendarFridayEnglish from "@dhl-official/icons/calendar-friday-english.svg";
<DhlIcon src={CalendarFridayEnglish}></DhlIcon>

Option 2

import { CalendarFridayEnglish } from "@dhl-official/icons";
<DhlIcon src={CalendarFridayEnglish}></DhlIcon>

Option 3

import { icons } from "@dhl-official/icons";
<DhlIcon src={icons.calendarFridayEnglish}></DhlIcon>

The path to the svg image is defined during the framework setup, please refer to the configuration steps reported here.

<dhl-icon src="assets/duil/icons/calendar-friday-english.svg"></dhl-icon>

import { CalendarFridayEnglish } from "@dhl-official/icons";
<dhl-icon :src="CalendarFridayEnglish"></dhl-icon>

Interactive Demo

Complete List

Migrating from DUIL 1.0

Import SVG and use in combination with the component:

from version 2.4.0

import CalendarFridayEnglish from "@dhl-official/icons/calendar-friday-english.svg";
<DhlIcon src={CalendarFridayEnglish}></DhlIcon>;

import {
  CalendarFridayEnglish,
  CalendarFridayGerman,
} from "@dhl-official/icons";
<DhlIcon src={CalendarFridayEnglish}></DhlIcon>;
<DhlIcon src={CalendarFridayGerman}></DhlIcon>;

before version 2.4.0

import CalendarFridayEnglish from "@dhl-official/ui-libraries/stencil-library/dist/icons/calendar-friday-english.svg";
<DhlIcon src={CalendarFridayEnglish}></DhlIcon>;

import {
  CalendarFridayEnglish,
  CalendarFridayGerman,
} from "@dhl-official/icons";
<DhlIcon src={CalendarFridayEnglish}></DhlIcon>;
<DhlIcon src={CalendarFridayGerman}></DhlIcon>;

danger

Previous version of this documentation reported the below import path to use icons.
Note this is now deprecated and will be soon removed, please update your imports to the new one above.

import CalendarFridayEnglish from "stencil-library/dist/stencil-library/assets/calendar-friday-english.svg";
<DhlIcon src={CalendarFridayEnglish}></DhlIcon>;

Readme

Properties

Property	Attribute	Description	Type	Default
`alt`	`alt`	An optional prop used to specify the alt text within the component.	`string`	`undefined`
`dataAriaHidden`	`data-aria-hidden`	An optional prop used to indicate whether the element is exposed to an accessibility API.	`string`	`"true"`
`dataId`	`data-id`	An optional prop. Gives a valid HTML ID attribute value for the component.	`string`	`dhl-icon-${getRandomString()}`
`dataRole`	`data-role`	An optional prop defining the role attribute of the component.	`"image" \\| "presentation"`	`DHL_ICON.ROLE.PRESENTATION`
`dataTestid`	`data-testid`	An optional prop. The test id attached to the component as a data-testid attribute.	`string`	`undefined`
`isIllustration`	`is-illustration`	An optional prop used to specify if the icon is an illustration	`boolean`	`undefined`
`size`	`size`	An optional prop used to set the size of the component, any valid dimension attributes. The value set to this prop is ignored when the component is nested into a `dhl-icon-wrapper` component.	`string`	`"1rem"`
`src`	`src`	A REQUIRED prop used to specify the image source.	`string`	`undefined`

Dependencies

Used by

Graph

Built by DHL User Interface Library Team!

Import

Code​

Interactive Demo​

Complete List​

Migrating from DUIL 1.0​

Readme​

Properties​

Dependencies​

Used by​

Graph​