Icon

EuiIcon is a handy component for using our custom glyphs and logos. The

type prop accepts either an enumerated name from one of the sets below, a location to a custom SVG asset, or a React Element.

Component

Accessibility recommendation

If possible, provide a descriptive title based on the icon use. If no title is provided, the icon is considered purely decorative, and it will default to aria-hidden=true.

Usage

Sizes

Use the size prop to automatically size your icons. Medium is the default, and will output a 16x16 icon.

Colors

The default behavior of icons is to inherit from the text color. You can use the color prop to assign a custom color which accepts a named color from our palette or a valid

CSS color data type which will be passed down through the inline-style fill property. We recommend relying on the EUI named color palette unless the custom color is initiated by the user (like as a graph color).

Two-tone icons, like our app style icons, will behave similarly to normal glyphs when provided a specific color by applying the color to all the shapes within. You can force the icon to match the parent's text color by passing color="inherit" to the icon.

Glyphs

Glyphs are small, monochromatic icons that typically should always use the default size of size="m". They are named according to their appearance or the action they represent. For example, star, play, etc.

If you would like to contribute to our growing list of glyphs, you can follow these guidelines.

Editor controls

Editor icons relate to the visual styling of elements and are commonly used within EuiButtonGroup components.

Elastic logos

These logos are restricted in use to Elastic products or when referencing Elastic products. They are multi-color with some internal paths having a class of .euiIcon__fillNegative to handle flipping colors for dark mode. The only other colors most of them support are ghost and text which turn them into a solid shape.

Apps

App logos are logos for Elastic Apps, and can contain multiple colors. Normally the Elastic Design team creates those icons. They are not meant to be used outside of Elastic, because they represent our apps. App logos are usually displayed at 32x32 or above and can contain multiple colors.

Machine learning icons

Machine learning has some specific icons for job creation. Again, these are made for 32x32.

Tokens

Tokens are most commonly used to visually signify field or code types. An EuiToken accepts any valid EuiIcon as its iconType property. However, icons designed specifically for use in the EuiToken are prefixed with "token" in their name and have pre-defined styles.

Custom tokens

By default, an iconType with the token prefix (i.e. those listed above) will have predefined styles. However, any valid iconType can be passed and, in either case, the shape, size, color, and fill can be customized.

✄𐘗tsx code block:
✄𐘗<EuiToken iconType="tokenStruct" size="xs" color="gray" />

✄𐘗tsx code block:
✄𐘗<EuiToken iconType="tokenStruct" fill="none" />

✄𐘗tsx code block:
✄𐘗<EuiToken iconType="tokenStruct" size="m" shape="circle" color="#b9f6c8" />

✄𐘗tsx code block:
✄𐘗<EuiToken iconType="faceHappy"  />

✄𐘗tsx code block:
✄𐘗<EuiToken iconType="faceHappy" size="l" color="euiColorVis7" shape="rectangle" fill="dark" />

Custom SVGs

The type prop can accept a valid enum, string or React SVG Element. When using a custom SVG, please make sure it sits on a square canvas and preferably utilizes one of EUI's sizes (16x16 or 32x32).

When using custom SVGs for simple glyphs, remove all fill attributes on the SVG and utilize the CSS helpers if you have complex logos that need to work with theming.

Important considerations when importing SVGs as components

When importing an SVG as a component like import { ReactComponent as ReactLogo } from './logo.svg';, keep in mind that the component will not support the title prop. The title prop is designed to only work with our icons or SVGs imported as images or passed as a Data URL. So, if you're importing your SVG as a component, be sure to use anaria-label instead of a title prop to enhance accessibility and avoid potential issues.

Props

EuiIcon


Prop	Description and type	Default value
Prop type#	Description and type `Enum` is any of the named icons listed in the docs, `string` is usually a URL to an SVG file, and `elementType` is any React SVG component Type: `IconType`	Default value Required
Prop size#	Description and type Note that every size other than `original` assumes the provided SVG sits on a square viewbox. Type: `"s" \| "m" \| "l" \| "xl" \| "xxl" \| "original"`	Default value
Prop title#	Description and type Descriptive title for naming the icon based on its use Type: `string`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop color#	Description and type One of EUI's color palette or a valid CSS color value https://developer.mozilla.org/en-US/docs/Web/CSS/color_value. Note that coloring only works if your SVG is removed of fill attributes. 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 titleId#	Description and type A unique identifier for the title element Type: `string`	Default value
Prop onIconLoad#	Description and type Callback when the icon has been loaded & rendered Type: `() => void`	Default value
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<unknown>`	Default value

Component.css-1pgbpvp{-webkit-margin-start:8px;margin-inline-start:8px;opacity:0;}.css-1pgbpvp:focus,.heading:hover .css-1pgbpvp{opacity:1;}