Illustrations

EuiIllustration renders theme-adaptive SVGs. Most illustrations ship a single adaptive variant whose colors resolve via CSS light-dark(); the component inlines it and sets color-scheme from the active theme so a single asset recolors in place on toggle. Assets also carry discrete light/dark variants, used as a fallback.

SVGs are sourced from @elastic/eui-illustrations, a standalone package that is independently versioned and published from @elastic/eui. This means the catalog can grow and change without an @elastic/eui release.

Component

Pass an illustration asset to the type prop. The component adapts to the current color mode automatically, so try toggling the theme in the top toolbar.

Accessibility recommendation

The accessible label defaults to the illustration's title. Provide a more specific alt when the illustration conveys meaning or pass alt="" to mark it as purely decorative (it will be hidden from assistive technology).

Adaptive color modes

Most illustrations expose a single adaptive SVG whose colors resolve with CSS light-dark(). The same markup renders every color mode depending on the ancestor color-scheme — no theme switch or re-render required. EuiIllustration sets color-scheme from the EUI theme for you; below it is set manually. light and dark pin the mode, while light dark follows the OS/browser preference (try toggling your system dark mode):

All illustrations

Search the full catalog exported from @elastic/eui-illustrations. Select an illustration to reveal the code.

Props

EuiIllustration

Extends HTMLAttributes


Prop	Description and type	Default value
Prop type#	Description and type The illustration asset to render, typically imported from `@elastic/eui-illustrations`. Type: `EuiIllustrationSource`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop alt#	Description and type Accessible label for the illustration. Defaults to the illustration's `title`. Pass an empty string to mark the illustration as decorative. Type: `string`	Default value
Prop fullWidth#	Description and type When `true`, stretches the SVG to fill the full width of its container. When `false`, the SVG maintains its intrinsic width. Defaults to `true`. Type: `boolean`	Default value `true`